<template>
 <div style="background-color:#f7f7f7;padding:10px 10px;">
     <div class="zhuti">
       <div style="height:58px;line-height:58px;">
         <div style="color:#0006"> <span>商户寻租管理</span> <span style="padding:0 5px;">></span> <span
             style="color:#000000e6">跟进日志</span></div>
       </div>
         <!-- 搜索 -->
         <div class="formSearch">
           <el-form :inline="true" :model="formSel">
             <el-form-item label="年月">
<el-date-picker style="width: 100%;" v-model="formSel.yytime" value-format="yyyy-MM"
                    type="month"  placeholder="选择日期">
                  </el-date-picker>
             </el-form-item>


           </el-form>
      <div style="width: 17%;">
             <el-button
               style="background-color: #3F9B6A;color: #fff"
               @click="onSubmit"
               >查询
             </el-button>
             <el-button
              class="buttonHover"
                style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;"
               @click="resetting"
               >重置
             </el-button>
           </div>

         </div>
        <div style="margin-bottom:20px;">
          <el-button style="background-color: #3F9B6A;color: #fff;padding:8px 15px;" icon="el-icon-circle-plus-outline"
            @click="genad">新增</el-button>
        </div>
        <div>
         <el-calendar v-model="morenCard">
            <template
                slot="dateCell"
                slot-scope="{date, data}">
                {{data.day.split("-").slice(2).join("-")}}
                <div style="overflow: auto;height:55px;">
              <div style="width:100%,height:100%" v-for="(item,index) in tableData" @click="genjinMsg(item)">
                <div style="font-size:12px;margin-top:10px;" >
                      {{item.followUpTime == data.day?item.contentFeedback:''}}
                </div>
                </div>
                       </div>
              </template>
         </el-calendar>
        </div>
        <div>
          <el-button
           class="buttonHover"
             style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;"
            @click="closeGenjin"
            >返回
          </el-button>
        </div>
  </div>
  <el-dialog :title="msgEit?'查看':'新增'" :visible.sync="ggXin"  width="75%"
        append-to-body  :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false">
        <div style="padding: 20px;">
          <el-form ref="genform" :model="formInline"  :rules="rulesOne" label-width="120px">
            <el-form-item label="跟进时间" prop="followUpTime">
              <el-date-picker
              :disabled="msgEit"
                    v-model="formInline.followUpTime"
                     type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="选择日期"
                    tyle="width: 100%;">
                  </el-date-picker>
            </el-form-item>
            <el-form-item label="跟进类型" prop="followUpType" tyle="width: 100%;">
              <el-select v-model="formInline.followUpType" placeholder="请选择"  :disabled="msgEit">
                <el-option label="电话跟进" value="电话跟进" />
                <el-option label="现场跟进" value="现场跟进" />
                <el-option label="微信跟进" value="微信跟进" />
                    </el-select>
            </el-form-item>
            <el-form-item label="客户级别" prop="customerLevel" tyle="width: 100%;"  >
              <el-select v-model="formInline.customerLevel" placeholder="请选择" style="width:168px;margin-right: 15px" :disabled="msgEit">
                <el-option label="A" value="A" />
                <el-option label="B" value="B" />
                <el-option label="C" value="C" />
              </el-select>
            </el-form-item>
        <div style="border:1px solid #DCDFE6;font-size:14px;margin-bottom:10px;">
          <div style="padding: 10px 20px;border-bottom: 1px solid #DCDFE6;display: flex;justify-content: space-between;">
            <div>意向资源</div>
            <div style="color: #3F9B6A;margin-left: 10px;" @click="addZi"  v-if="msgEit==false">
              添加
            </div>
          </div>
          <div style="padding:20px;">
            <el-table :data="addziyuanData.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
              :header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}"
           >
              <el-table-column label="序号" width="80" >
                <template slot-scope="scope">
                  {{scope.$index + 1}}
                </template>
              </el-table-column>
              <el-table-column label="资源编号" prop="id" width="150">

              </el-table-column>
              </el-table-column>
              <el-table-column label="意向资源类型"  width="150">
                <template slot-scope="scope">
                  {{scope.row.advertisingType ?scope.row.advertisingType:'商铺'}}
                </template>
              </el-table-column>


              <el-table-column label="意向租期" prop="leaseTerm" min-width="150">
              </el-table-column>
              <el-table-column label="意向租金(元)" prop="rent" min-width="150">
              </el-table-column>
              <el-table-column label="操作" min-width="80" v-if="msgEit==false">
                <template slot-scope="scope">
                  <div class="tableBtn greens" @click="closemsg(scope.$index)">删除</div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
          <el-form-item label="当前阶段" prop="currentStage">
            <el-select v-model="formInline.currentStage" placeholder="请选择" style="width:100%"  :disabled="msgEit">
              <el-option label="继续跟进" value="继续跟进" />
              <el-option label="达成共识" value="达成共识" />
            </el-select>
          </el-form-item>
          <el-form-item label="内容反馈" prop="contentFeedback">
            <el-input type="textarea" v-model="formInline.contentFeedback" :rows="4"  :disabled="msgEit"></el-input>
          </el-form-item>

          <el-form-item label="现场照片" >
            <div style="display:flex;flex-wrap: wrap;" v-if="msgEit" >
              <el-image
                    style="width: 100px; height: 100px;margin-right: 10px;"
                      fit="fill"
                    :src="$baseURL+item"
                     v-for="(item,index) in imgList" :key="index"
                    >
                    <div slot="error" class="image-slot">

                         </div></el-image>
            </div>
            <upimg filePath="yixiang" inputtype="onSitePhotos" :value="formInline.onSitePhotos"
              @changimg="e=>changimg(e,'onSitePhotos')" :limit="3" v-if="msgEit==false" ></upimg>

          </el-form-item>
          <el-form-item label="下次更进时间" prop="plan_Time">
            <el-date-picker style="width: 100%;" v-model="formInline.plan_Time" value-format="yyyy-MM-dd"
            :disabled="msgEit"
               type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right" @change="changeNext">
            </el-date-picker>
          </el-form-item>
        </el-form>
           </div>
        <div style="display: flex;justify-content: flex-end;">
          <el-button @click="closeFn" class="buttonHover"
            style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;">返回</el-button>
          <el-button @click="addCheck" style="background-color: #3F9B6A;color: #fff" v-if="msgEit==false">确定</el-button>
        </div>
        <!-- 资源选择 -->
        <el-dialog :visible.sync="addziyuan" title="添加" style="padding: 0;" width="50%"
          append-to-body  :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false">

          <div style="padding:20px;max-height: calc(100vh - 200px);
          overflow-y: auto;">
            <el-form ref="form" :model="formInline" label-width="120px">
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="意向租期" prop="currentStage">
                  <el-select v-model="formInline.leaseTerm" placeholder="请选择" style="width: 168px;margin-right: 15px">
                        <el-option label="年" value="年"></el-option>
                        <el-option label="月" value="月"></el-option>
                        <el-option label="日" value="日"></el-option>
                      </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="意向租金">
                    <el-input  v-model="formInline.rent" ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>



            </el-form>
            <div style="border: 1px solid #E5E5E5;padding: 1px" id="huodong">
              <div style="padding: 10px 13px;font-size: 14px;border-bottom: 1px solid #E5E5E5;display: flex;justify-content: space-between;">
                <div>选择资源</div>
              </div>
              <div style="padding: 15px;">
                <div style="padding: 0px 20px 0px 0px">
                  <el-table :data="ziyuanData"
                  @selection-change="handleSelectionChange" tooltip-effect="dark"  ref="singleTable"
                    :header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}"
                    >
                     <el-table-column
                            label="选择"
                           type="selection"
                           width="55">
                         </el-table-column>
                    <el-table-column label="序号"  min-width="8%" >
                      <template slot-scope="scope">
                        {{scope.$index + 1}}
                      </template>
                    </el-table-column>
                    <el-table-column label="编号" prop="id" min-width="22%">

                    </el-table-column>
                    <el-table-column label="资源名称"  min-width="15%">
                    <template slot-scope="scope">
                      {{scope.row.shopName ? scope.row.shopName :  scope.row.advertisingName}}
                    </template>
                    </el-table-column>
                    <el-table-column label="资源类型" min-width="15%">
                      <template slot-scope="scope">
                        {{scope.row.advertisingType ?scope.row.advertisingType:'商铺'}}
                      </template>
                    </el-table-column>
                    <!-- <el-table-column prop="notes" label="对应策略" min-width="15%">
                    </el-table-column> -->

                  </el-table>
                </div>
              </div>
            </div>
          </div>
          <template #footer>
            <div style="display: flex; justify-content: flex-end; align-items: center;">

           <el-button  @click="minSev" style="background-color: #3F9B6A;color: #fff;">确定
           </el-button>
           <el-button  @click="mingClose" class="buttonHover"
                 style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;">取消
           </el-button>
            </div>
          </template>

        </el-dialog>

      </el-dialog>
   </div>
</template>

<script>
  import {
   genGetAll,
   genAdd,
   genEdit,
   genDel,
   rsaManEdit
  } from '../../../api/followup.js'
  import upimg from "@/components/ImageUpload/index"
  import {
   getAlls
  } from '../../../api/information.js'
  import {
    getAlls as map1
  } from '../../../api/map1'
  export default {
    components: {
      upimg
    },
     props: {
       message: {
         type: Number, // 指定数据的类型
         required: true, // 指定该数据是必需的
         default: null ,// 指定默认值
         }
       } ,
    data() {
      return {
        formSel:{
        yytime:''
        },
        formInline:{
            followUpTime:'',//跟进时间
            followUpType:'',//跟进类型
            customerLevel:'',
            potentialCustomer:'',//意向客户
            intendedResource:'',//意向资源
            currentStage:'',//当前阶段
            contentFeedback:'',//内容反馈
            onSitePhotos:'',//现场照片
            plan_Time:[],
            nextFollowUpStartTime:'',//下次跟进开始时间
            nextFollowUpEndTime:'',//下次跟进结束时间
            status:'1'//状态
        },
        addziyuanData:[],
        ziyuanData:[],//资源
        morenCard: new Date(),
        multipleSelection:[],
        addziyuan:false,
        pageSize:10,
        currentPage: 1,
        total: 0,
        ggXin:false,
        rulesOne: {
          followUpTime: [{
            required: true,
            message: '请选择跟进时间',
            trigger: 'change'
          }, ],
          followUpType: [{
            required: true,
            message: '请选择跟进类型',
            trigger: 'change'
          }],
          customerLevel: [{
            required: true,
            message: '请选择客户级别',
            trigger: 'change'
          }],
          contentFeedback: [{
            required: true,
            message: '请输入内容反馈',
            trigger: 'blur'
          }, ],
          currentStage: [{
            required: true,
            message: '请选择当前阶段',
            trigger: 'change'
          }, ],
          plan_Time: [{
            required: true,
            message: '请选择下次跟进时间',
            trigger: 'change'
          }, ],
        },
        pageindex: {
        pageNumber: 0,
        pageSize: 10,
        potentialCustomer:null
          },
          zipageindex: {
          pageNumber: 0,
          pageSize: 10,
            },
          tableData:[],
          msgEit:false,
          imgList:[]
      }
    },
    created() {

    },
    mounted() {
      this.pageindex.potentialCustomer = this.message
      this.getAll()
    },
      methods: {
        changimg(e,type) {
          this.formInline[type] = e
          // this.imgList.push(e)
        },
        async getAll() {
          const res = await genGetAll(this.pageindex)
          this.tableData = res.data.content
        },
        genjinMsg(item){
            this.msgEit = true
            this.formInline = {}
            this.formInline = item
            this.formInline.plan_Time = [item.nextFollowUpStartTime,item.nextFollowUpEndTime]

             if(typeof item.intendedResource == 'string' && item.intendedResource!=''){
               this.addziyuanData  = JSON.parse(item.intendedResource)
             }
			 
            if(typeof item.onSitePhotos == 'string'){
              this.imgList = item.onSitePhotos.split(',') ||[]
            }

            this.ggXin = true
        },
        onSubmit(){
        this.morenCard = this.formSel.yytime
        this.getAll()
        },
        resetting(){
        this.morenCard = new Date()
        this.formSel.yytime = ''
        this.getAll()
        },
       async addZi(){
          const ziyuan =  await getAlls(this.zipageindex)
           const ggw  = await map1(this.zipageindex)
          this.ziyuanData = [...ziyuan.data.content,...ggw.data.content]
          this.addziyuan = true
        },
        genad(){
          this.msgEit = false
          this.ggXin = true
		  this.$refs.genform.resetFields()
          this.formInline ={
            followUpTime:'',//跟进时间
            followUpType:'',//跟进类型
            customerLevel:'',
            potentialCustomer:'',//意向客户
            intendedResource:'',//意向资源
            currentStage:'',//当前阶段
            contentFeedback:'',//内容反馈
            onSitePhotos:'',//现场照片
            plan_Time:[],
            nextFollowUpStartTime:'',//下次跟进开始时间
            nextFollowUpEndTime:'',//下次跟进结束时间
            status:'1'//状态
        }
        },
        closeGenjin(){
            this.$emit('cancel',false)
        },
        handleSelectionChange(selection) {
           this.multipleSelection = selection[0]
           // 确保只有一行被选中
           if (selection.length > 1) {
             this.$refs.singleTable.clearSelection();
             this.$refs.singleTable.toggleRowSelection(selection[selection.length - 1]);
           }
         },
         minSev() {
              this.multipleSelection.leaseTerm =  this.formInline.leaseTerm
            this.multipleSelection.rent =  this.formInline.rent
               this.addziyuanData.push(this.multipleSelection)
               this.addziyuan = false
               this.multipleSelection =[]
            this.formInline.leaseTerm = ''
            this.formInline.rent = ''
                this.$refs.singleTable.clearSelection()
             },
             changeNext(e){

               this.formInline.nextFollowUpStartTime = e[0]
                  this.formInline.nextFollowUpEndTime = e[1]

             },
           mingClose(){
             this.multipleSelection =[]
             this.addziyuan = false
           },
           closemsg(index){
             this.addziyuanData.splice(index, 1);
           },
           closeFn(val) {
             this.formInline.plan_Time =[]
             this.addziyuanData =[]
           this.ggXin = false
           },
           // 新增确定按钮
            addCheck(val) {
             this.$refs.genform.validate((valid) => {
               if (valid) {
                 this.formInline.potentialCustomer = this.message
                  if(this.addziyuanData.length !=0){
                    this.formInline.intendedResource  = JSON.stringify(this.addziyuanData)
                  }
				  // console.log(this.formInline.onSitePhotos)
				  // return
                 // this.formInline.onSitePhotos  =  this.imgList.join(',')
                  if(this.formInline.currentStage == '达成共识'){
                    this.formInline.status = '2'
                  }
                  genAdd(this.formInline).then(()=>{
                    this.ggXin = false
                    this.addziyuanData =[]
                    this.getAll()
                  })

                 }else {
              this.$message({
                message: '请填写完整信息',
                type: 'error'
              })

            }
          })

           },
      }
  }
</script>

<style lang="scss" scoped>
  ::v-deep .el-calendar button-group {
    display: none;
  }
  .zhuti {
    padding: 0 20px 20px 20px;
    min-height: calc(100vh - 50px - 20px);
    background-color: #fff;
  }

  .formSearch {

    display: flex;
    width: 100%;
    font-size: 14px;
    justify-content: space-between;

  }
::v-deep .el-calendar-table:not(.is-range)td.next{display: none;}
::v-deep .el-calendar-table:not(.is-range)td.prev{visibility:hidden;}
::v-deep .el-calendar__button-group {display: none;}
</style>
