<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>
        <!-- 搜索 -->
        <div class="formSearch">
          <el-form :inline="true" :model="formSel">
            <el-form-item label="客户名称">
              <el-input v-model="formSel.cereCustomerInfo.intentCustomerName" placeholder="请输入" style="width:168px;" />
            </el-form-item>
            <el-form-item label="客户级别">
              <el-select v-model="formSel.cereCustomerInfo.customerLevel" placeholder="请选择" style="width:168px;margin-right: 15px">
                <el-option label="A" value="A" />
                <el-option label="B" value="B" />
                <el-option label="C" value="C" />
              </el-select>
            </el-form-item>
            <!-- <el-form-item label="商铺/广告位位置">
              <el-select v-model="formSel.createUser" placeholder="请选择" style="width:168px;margin-right: 15px">
                <el-option label="" value="" />
              </el-select>
            </el-form-item> -->
            <!-- <el-form-item label="商铺业态">
              <el-select v-model="formSel.createUser" placeholder="请选择" style="width:168px;margin-right: 15px">
                <el-option label="" value="" />
              </el-select>
            </el-form-item> -->
          </el-form>
          <div>
            <el-button @click="onSubmit" style="background-color: #3F9B6A;color: #fff">查询
            </el-button>
            <el-button @click="resetting" class="buttonHover"
              style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;">重置
            </el-button>
          </div>
        </div>
        <div style="margin-bottom: 20px;">
          <div>
            <el-button
            style="background-color: #3F9B6A;color: #fff"
              @click="gitOut">导出</el-button>
          </div>
        </div>
        <!-- 表格 -->

        <el-table :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
          :header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}"
         >
          <el-table-column label="序号" min-width="150">
              <template slot-scope="scope">
                {{scope.$index +1 }}
                 </template>
          </el-table-column>
          <el-table-column label="意向客户名称" min-width="150">

            <template slot-scope="scope">
              {{scope.row.cereCustomerInfo.intentCustomerName}}
               </template>
          </el-table-column>
          <el-table-column label="客户级别" min-width="150">
            <template slot-scope="scope">
{{scope.row.cereCustomerInfo.customerLevel}}
               </template>
          </el-table-column>
          <el-table-column label="联系电话" min-width="150">
                      <template slot-scope="scope">
          {{scope.row.cereCustomerInfo.contactPhone}}
                         </template>
                    </el-table-column>
          <el-table-column label="计划跟进日期" prop="nextFollowUpStartTime" min-width="200">
            <template slot-scope="scope">
              {{scope.row.nextFollowUpStartTime}}
               </template>
          </el-table-column>
          <el-table-column prop="status" label="状态" min-width="150">
             <template slot-scope="scope">
               {{scope.row.status=='1'?'待跟进':scope.row.status=='2'?'待谈判':scope.row.status=='3'?'已终止':''}}
                </template>
          </el-table-column>
          <el-table-column label="操作" min-width="200">
            <template slot-scope="scope">
              <div @click="details(scope.row)" class="tableBtn greens">查看</div>
              <div @click="genad(scope.row)" class="tableBtn greens" v-if="scope.row.status =='1'">跟进录入</div>
              <!-- <div @click="biangen(scope.row)" class="tableBtn greens" v-if="scope.row.status =='1'">编辑</div> -->
              <div @click="zhongzhi(scope.row)" class="tableBtn greens" v-if="scope.row.status =='1'">终止</div>
              <!-- <div @click="deltab(scope.row)" class="tableBtn greens" >删除</div> -->
            </template>
          </el-table-column>
        </el-table>
        <div class="fenye">
          <el-pagination :hide-on-single-page='flag' background small size="mini" :current-page="currentPage"
            :page-sizes="[10, 20, 50, 100]" layout="prev, pager, next,total" :total="total "
            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>
      </div>

    </div>
    <!-- 详情框 -->
    <el-dialog :visible.sync="detbox" custom-class='tongyong_css' style="padding: 0;" width="65%" center
      :close-on-click-modal="false" :show-close="false">
      <div style="padding:20px;">
        <div style="font-size: 14px;padding-bottom: 20px;color: #000;">{{edit?'详情页':'编辑页'}}</div>
        <div>
          <el-tabs v-model="xiangTabs">
            <el-tab-pane label="基本信息" name="first">
              <div style="width: 100%">
                <el-form ref="form" :model="yixiangList" label-width="120px">
                  <el-form-item label="意向客户名称">
                    <el-input  v-model="yixiangList.intentCustomerName" :disabled="edit"></el-input>
                  </el-form-item>
                  <el-form-item label="联系电话">
                    <el-input  v-model="yixiangList.contactPhone" :disabled="edit"></el-input>
                  </el-form-item>
                  <el-form-item label="意向资源类型">
                    <el-select v-model="yixiangList.intentionalBusinessType" :disabled="edit">
                      <el-option label="商铺" value="商铺" />
                      <el-option label="场地" value="场地" />
                      <el-option label="广告位" value="广告位" />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="客户级别">
                    <el-select v-model="yixiangList.customerLevel"   :disabled="edit">
                      <el-option label="A" value="A" />
                      <el-option label="B" value="B" />
                      <el-option label="C" value="C" />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="证件类型">
                    <el-input  v-model="yixiangList.idCardType" :disabled="edit" ></el-input>
                  </el-form-item>
                  <el-form-item label="身份证号码">
                    <el-input  v-model="yixiangList.idCardNumber" :disabled="edit"></el-input>
                  </el-form-item>
                  <el-form-item label="身份证有效期">
                    <el-date-picker style="width: 100%;" v-model="idCardTime" value-format="yyyy-MM-dd HH:mm:ss" :disabled="edit"
                      type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right">
                    </el-date-picker>
                  </el-form-item>
                  <el-form-item label="身份证照片(正面)">
                    <upimg v-model="yixiangList.idCardPhotoFront" :limit="1" :fileSize="1" :isShowTip="false" v-if="edit==false"></upimg>
                    <img :src="yixiangList.idCardPhotoFront" alt="" v-else style="width:150px;height:150px;">
                  </el-form-item>
                  <el-form-item label="身份证照片(反面)">
                    <upimg v-model="yixiangList.idCardPhotoBack" :limit="1" :fileSize="1" :isShowTip="false" v-if="edit==false"></upimg>
                    <img :src="yixiangList.idCardPhotoBack" alt="" v-else style="width:150px;height:150px;">
                  </el-form-item>
                  <el-form-item label="是否为法人">
                    <el-select v-model="yixiangList.isLegalPerson" placeholder="请选择"  :disabled="edit">
                      <el-option label="是" value="1" />
                      <el-option label="否" value="0" />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="企业授权书">
                    <upimg v-model="yixiangList.enterpriseAuthorization" :limit="1" :fileSize="1" :isShowTip="false" v-if="edit==false"></upimg>
                    <img :src="yixiangList.enterpriseAuthorization" alt="" v-else style="width:150px;height:150px;">
                  </el-form-item>
                </el-form>
              </div>
            </el-tab-pane>
            <el-tab-pane label="主体信息" name="second">
              <div style="width: 100%">
              <el-form ref="form" :model="yixiangList" label-width="140px">
                <el-form-item label="主体名称">
                  <el-input  v-model="yixiangList.subjectName" :disabled="edit" ></el-input>
                </el-form-item>
                <el-form-item label="统一社会信用代码">
                  <el-input  v-model="yixiangList.unifiedSocialCreditCode" :disabled="edit"></el-input>
                </el-form-item>
                <el-form-item label="类型">
                  <el-select v-model="yixiangList.type"  :disabled="edit">
                    <el-option label="个人" value="个人" />
                    <el-option label="企业" value="企业" />
                  </el-select>
                </el-form-item>
                <el-form-item label="法定代表人">
                  <el-input  v-model="yixiangList.legalRepresentative" :disabled="edit"></el-input>
                </el-form-item>
                <el-form-item label="经营范围">
                  <el-input type="textarea" v-model="yixiangList.businessScope" :rows="4" :disabled="edit"></el-input>
                </el-form-item>
                <el-form-item label="注册资本">
                  <el-input  v-model="yixiangList.registeredCapital" :disabled="edit"></el-input>
                </el-form-item>
                <el-form-item label="成立日期">
                  <el-input  v-model="yixiangList.establishmentDate" :disabled="edit"></el-input>
                </el-form-item>
                <el-form-item label="住所">
                  <el-input  v-model="yixiangList.address" :disabled="edit"></el-input>
                </el-form-item>
                <el-form-item label="邮箱地址">
                  <el-input  v-model="yixiangList.emailAddress" :disabled="edit"></el-input>
                </el-form-item>
                <el-form-item label="营业期限">
                  <el-date-picker style="width: 100%;" v-model="busTime" value-format="yyyy-MM-dd HH:mm:ss" :disabled="edit"
                    type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right">
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="营业执照">
                  <upimg v-model="yixiangList.businessLicense" :limit="1" :fileSize="1" :isShowTip="false" v-if="edit==false"></upimg>
                  <img :src="yixiangList.businessLicense" alt="" v-else style="width:150px;height:150px;">
                </el-form-item>
              </el-form>


              </div>
            </el-tab-pane>
            <el-tab-pane label="意向资源" name="there">
              <div style="width: 100%">
      <div style="border:1px solid #DCDFE6;font-size:14px;margin-bottom:10px;">
        <div style="padding:10px 20px;border-bottom:1px solid #DCDFE6">意向资源</div>
        <div style="padding:20px;width:100%">
          <el-table :data="xiangData"
            :header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}" style="width:100%">
          <el-table-column label="序号" min-width="150" >
            <template slot-scope="scope">
              {{scope.$index + 1}}
            </template>
          </el-table-column>


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


          <el-table-column label="意向租期" prop="leaseTerm" min-width="180">
          </el-table-column>
          <el-table-column label="意向租金(元)" prop="rent" min-width="180">
          </el-table-column>

          </el-table>
        </div>
      </div>


              </div>
            </el-tab-pane>
            <el-tab-pane label="跟进情况" name="four">
              <div style="width: 100%">
                <div style="padding:10px 0; ">{{zhong.followUpTime}}</div>
                <el-form ref="form" :model="zhong" label-width="140px">
                  <el-form-item label="跟进情况">
                    <el-select v-model="zhong.currentStage" :disabled="edit">
                      <el-option label="未达成共识" value="继续跟进" />
                      <el-option label="已达成共识" value="达成共识" />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="内容反馈">
                    <el-input type="textarea" v-model="zhong.contentFeedback" :rows="4" :disabled="edit"></el-input>
                  </el-form-item>
                </el-form>


              </div>
            </el-tab-pane>
          </el-tabs>
        </div>

        <div style="padding-top:20px;display:flex;justify-content: flex-end;">
          <el-button class="buttonHover" style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;"
            @click="closeFn(2)">返回</el-button>
            <el-button @click="addTanpan" style="background-color: #3F9B6A;color: #fff" v-if="zhong.status=='2' && zhong.currentStage =='达成共识'">进入谈判</el-button>
       <!--   <el-button @click="edit = false" style="background-color: #3F9B6A;color: #fff" v-if="edit && zhong.status=='1'">编辑</el-button>
          <el-button @click="addbuss(2)" style="background-color: #3F9B6A;color: #fff" v-if="!edit && zhong.status =='1'">确认</el-button> -->

        </div>
      </div>

    </el-dialog>

    <!-- 新增跟进记录 -->
    <el-dialog title="跟进录入" :visible.sync="ggXin" custom-class="diaslog_zhong" style="padding: 0;" width="50%"
      class="dialog_css_Xq" center :close-on-click-modal="false" :show-close="false">
      <div style="margin-bottom: 20px;">
        <el-form ref="form" :model="formInline" label-width="120px"  :rules="rulesInline">
          <el-form-item label="跟进时间" prop="followUpTime">
            <el-date-picker
                  v-model="formInline.followUpTime"
                  type="datetime"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  placeholder="选择日期"
                  tyle="width: 100%;">
                </el-date-picker>
            <!-- <el-date-picker style="width: 100%;" v-model="followUpTime" value-format="yyyy-MM-dd HH:mm:ss"
              type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right">
            </el-date-picker> -->
          </el-form-item>
          <el-form-item label="跟进类型" prop="followUpType" tyle="width: 100%;">
            <el-select v-model="formInline.followUpType" placeholder="请选择">
              <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">
              <el-option label="A" value="A" />
              <el-option label="B" value="B" />
              <el-option label="C" value="C" />
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="餐饮业经营许可">
                                      <upimg v-model="formInline.coverPoster" :limit="1" :fileSize="1" :isShowTip="false"></upimg>
                                    </el-form-item> -->
        </el-form>
      </div>
      <!-- <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="addkehu = true">
            添加
          </div>
        </div>
        <div style="padding:20px;">
          <el-table :data="kehutableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
            :header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}"
>
           <el-table-column label="序号"  min-width="8%" >
             <template slot-scope="scope">
               {{scope.$index + 1}}
             </template>
           </el-table-column>
           <el-table-column label="意向客户名称" prop="contactName" min-width="22%">

           </el-table-column>
           <el-table-column label="客户级别"  min-width="15%"  prop="temporaryShopsNumber">

           </el-table-column>
           <el-table-column label="联系电话" min-width="15%" prop="contactPhone">

           </el-table-column>
           <el-table-column prop="type" label="主体类型" min-width="15%" >
           </el-table-column>
          </el-table>
        </div>
      </div> -->
      <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="addziyuan = true">
            添加
          </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="意向资源类型"  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" >
              <template slot-scope="scope">
                <div class="tableBtn greens" @click="closemsg(scope.$index)">删除</div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <el-form ref="form" :model="formInline" label-width="120px">
        <el-form-item label="当前阶段" prop="currentStage">
          <el-select v-model="formInline.currentStage" placeholder="请选择" style="width:100%">
            <el-option label="继续跟进" value="继续跟进" />
            <el-option label="达成共识" value="达成共识" />
          </el-select>
        </el-form-item>
        <el-form-item label="内容反馈">
          <el-input type="textarea" v-model="formInline.contentFeedback" :rows="4"></el-input>
        </el-form-item>

        <el-form-item label="现场照片">
          <upimg v-model="formInline.onSitePhotos" :limit="1" :fileSize="1" :isShowTip="false"></upimg>
        </el-form-item>
        <el-form-item label="下次更进时间" prop="nextFollowUpEndTime">
          <el-date-picker style="width: 100%;" v-model="plan_Time" value-format="yyyy-MM-dd HH:mm:ss"
            type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div style="display: flex;justify-content: flex-end;">
        <el-button @click="closeFn(1)" class="buttonHover"
          style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;">返回</el-button>
        <el-button @click="addCheck(4)" style="background-color: #3F9B6A;color: #fff">确定</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="资源名称"  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 :visible.sync="addkehu" custom-class='XDD_css' style="padding: 0;" width="50%"
        append-to-body center :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false">
        <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;width:100%">
          <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="kehuData"
                @selection-change="kehuChange" tooltip-effect="dark"
                  :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="contactName" min-width="22%">

                  </el-table-column>
                  <el-table-column label="客户级别"  min-width="15%"  prop="temporaryShopsNumber">

                  </el-table-column>
                  <el-table-column label="联系电话" min-width="15%" prop="contactPhone">

                  </el-table-column>
                  <el-table-column prop="type" label="主体类型" min-width="15%" >
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </div>
        </div>
        <div style="display: flex;justify-content: flex-end;padding: 10px 20px 10px 0">
          <el-button  @click="kehuClose" class="buttonHover"
                style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;">取消
          </el-button>
          <el-button  @click="kehuSev" style="background-color: #3F9B6A;color: #fff;">确定
          </el-button>

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


</template>

<script>
  import {
    async
  } from 'q'
  import axios from 'axios'
  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'
  import {
  icManAll
  }from '../../../api/icManagement';
  import {
   tanAdd
  } from '../../../api/inr.js'
  export default {
    components: {
      upimg
    },
    data() {
      return {
        hetongBox: false,
        detbox: false, //详情
        leixing: true, //切换
        currentPage: 1,
        total: 10,
        flag: false,
        pageSize: 10,
        ggXin: false,
        formInline: {
          leaseTerm:'',
          rent:'',
            followUpTime:'',//跟进时间
            followUpType:'',//跟进类型
            customerLevel:'',
            potentialCustomer:'',//意向客户
            intendedResource:'',//意向资源
            currentStage:'',//当前阶段
            contentFeedback:'',//内容反馈
            onSitePhotos:'',//现场照片
            nextFollowUpStartTime:'',//下次跟进开始时间
            nextFollowUpEndTime:'',//下次跟进结束时间
            status:'1'//状态
        },
        plan_Time:[],
        followUpTime:[],
        tableData: [],
        secondData: {},
        formSel: {
          pageNumber:1,
             pageSize:10,
        cereCustomerInfo:{
          intentCustomerName:'',
          customerLevel:'',

        }
        },
        pageindex: {
      pageNumber: 1,
      pageSize: 10,
        },
        bianjiBox: 1,
        chengeTatle: 1,
        zhong: {},
        edit: true, //编辑切换
        xiangTabs:'first',
        addkehu:false,
        addziyuan:false,
        ziyuanData:[],//资源
        addziyuanData:[],
        multipleSelection:[],
        kehuData:[],
        kehutableData:[],
        xiangData:[],
        yixiangList:{},
        idCardTime:[],
        busTime:[],

        rulesInline:{
           nextFollowUpEndTime: [
                      { required: true, message: '请选择下次跟进时间', trigger: 'change' }
                    ],
            followUpTime: [
                      { required: true, message: '请选择跟进时间', trigger: 'change' }
                    ],
          followUpType: [
                    { required: true, message: '请选择跟进类型', trigger: 'change' }
                  ],
        currentStage: [
                  { required: true, message: '请选择当前阶段', trigger: 'change' }
                ],
        }
      }
    },
    created() {
      this.getAll()
    },
    computed: {

    },
    methods: {
      chenge(val) {
        this.formSel = {
          pageNumber:1,
             pageSize:10,
        cereCustomerInfo:{
          intentCustomerName:'',
          customerLevel:'',

        }
        }
        this.leixing = !this.leixing
        this.chengeTatle = val
      },
      async getAll() {
        let res = await genGetAll(this.pageindex)
this.tableData = res.data.content
        this.total = res.data.content.length


        const ziyuan =  await getAlls(this.pageindex)
         const ggw  = await map1(this.pageindex)
        this.ziyuanData = [...ziyuan.data.content,...ggw.data.content]
        const kehu = await icManAll(this.pageindex);
        this.kehuData = kehu.data.content



      },

      // 新增确定按钮
      async addCheck(val) {
        if(this.addziyuanData.length !=0){
          this.formInline.intendedResource  = JSON.stringify(this.addziyuanData)
        }

        if(this.formInline.currentStage == '达成共识'){
          this.formInline.status = '2'
        }
            if(this.formInline.customerLevel !=''){
                await rsaManEdit({id:this.yixiangList.id,customerLevel:this.formInline.customerLevel,dataIntegrity:this.dataIntegrity})
            }
            if(this.plan_Time.length !=0){
              this.formInline.nextFollowUpStartTime =  this.plan_Time[0]
              this.formInline.nextFollowUpEndTime =  this.plan_Time[1]
            }
        await genEdit(this.formInline)
        this.ggXin = false
        this.formInline =  {
            followUpTime:'',//跟进时间
            followUpType:'',//跟进类型
            customerLevel:'',
            potentialCustomer:'',//意向客户
            intendedResource:'',//意向资源
            currentStage:'',//当前阶段
            contentFeedback:'',//内容反馈
            onSitePhotos:'',//现场照片
            nextFollowUpStartTime:'',//下次跟进开始时间
            nextFollowUpEndTime:'',//下次跟进结束时间
            status:'1'//状态
        }

        this.plan_Time =[]
        this.addziyuanData =[]
        this.kehutableData =[]


        this.getAll()
      },
      // 获取时间
      currentTime() {
        const now = new Date();
        const year = now.getFullYear();
        const month = (now.getMonth() + 1).toString().padStart(2, '0');
        const day = now.getDate().toString().padStart(2, '0');
        const hours = now.getHours().toString().padStart(2, '0');
        const minutes = now.getMinutes().toString().padStart(2, '0');
        const seconds = now.getSeconds().toString().padStart(2, '0');

        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
      },

      //详情
       details(item) {
        this.edit = true
        this.zhong = item




        this.yixiangList = item.cereCustomerInfo
        // this.idCardTime[0] = this.yixiangList.idCardValidStart
        // this.idCardTime[1] = this.yixiangList.idCardValidEnd
        // this.busTime[0] =  this.yixiangList.businessStartTime
        // this.busTime[1] = this.yixiangList.businessEndTime
        this.$set(this.idCardTime, 0, this.yixiangList.idCardValidStart);
        this.$set(this.idCardTime, 1, this.yixiangList.idCardValidEnd);

        this.$set(this.busTime, 0, this.yixiangList.businessStartTime);
        this.$set(this.busTime, 1, this.yixiangList.businessEndTime);
         if(typeof item.intendedResource == 'string' && item.intendedResource !=''){
           this.xiangData =  JSON.parse(item.intendedResource)
         }else if(typeof item.intendedResource != 'string' && item.intendedResource !=''){
           this.xiangData = item.intendedResource
         }else{
           this.xiangData = []
         }

        console.log(this.yixiangList)
        this.detbox = true
      },
     async addbuss() {
        this.zhong.status = '1'
        if (this.idCardTime.length != 0) {
          this.yixiangList.idCardValidStart = this.idCardTime[0]
          this.yixiangList.idCardValidEnd = this.idCardTime[1]
        }
        if (this.busTime.length != 0) {
          this.yixiangList.businessStartTime = this.busTime[0]
          this.yixiangList.businessEndTime = this.busTime[1]
        }
        await rsaManEdit(this.yixiangList)
       await genEdit(this.zhong)

        this.detbox = false
        this.getAll()
        // this.ggXin = true

      },
      handleSizeChange(val) {
        this.pageSize = val
      },
      handleCurrentChange(val) {
        this.currentPage = val
      },

      closeFn(val) {
        this.plan_Time =[]
        this.addziyuanData =[]
        this.kehutableData =[]
        this.bianjiBox = 1
        if (val == 1) {
          this.ggXin = false
        } else {
          this.detbox = false
        }
      },

      //查看合同
      lookHetong(val) {
        this.hetongBox = true
      },
      // 查询按钮
    async  onSubmit() {
        const res = await genGetAll(this.formSel)
        this.tableData = res.data.content
        this.total = res.data.content.length

      },
      //重置按钮
      resetting() {
        this.formSel = {
          pageNumber:1,
             pageSize:10,
        cereCustomerInfo:{
          intentCustomerName:'',
          customerLevel:'',
        }
        },
          this.getAll()
      },
     async zhongzhi(item){

          const h = this.$createElement;
                  this.$msgbox({
                    title: '消息',
                    message: h('p', null, [
                      h('span', null, '是否终止跟进记录 '),
                    ]),
                    showCancelButton: true,
                    showClose:false,
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    customClass:'oe-dialog-btn',
                    beforeClose: (action, instance, done) => {
                      if (action === 'confirm') {
                          item.status = '3'
                        genEdit(item).then(res=>{
                           this.getAll()
                          done();
                        })
                      } else {
                        done();
                      }
        }
        })

      },
  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()
      },
      mingClose(){
        this.multipleSelection =[]
        this.addziyuan = false
      },
         handleSelectionChange(selection) {
            this.multipleSelection = selection[0]
            // 确保只有一行被选中
            if (selection.length > 1) {
              this.$refs.singleTable.clearSelection();
              this.$refs.singleTable.toggleRowSelection(selection[selection.length - 1]);
            }
          },
      kehuClose(){
        this.multipleSelection =[]
        this.addkehu = false
      },
      kehuSev() {
            this.kehutableData = this.multipleSelection
            this.addkehu = false
            this.multipleSelection =[]
          },
      kehuChange(val){
        this.multipleSelection = val
      },
     async addTanpan(){
          await tanAdd({followId:this.zhong.id,status:'1'})
          this.$message({
            message: '创建成功',
            type: 'success'
          })
          this.detbox = false
      },
      deltab(item){
            const h = this.$createElement;
                    this.$msgbox({
                      title: '消息',
                      message: h('p', null, [
                        h('span', null, '是否删除当前跟进记录 '),
                      ]),
                      showCancelButton: true,
                      showClose:false,
                      confirmButtonText: '确定',
                      cancelButtonText: '取消',
                      customClass:'oe-dialog-btn',
                      beforeClose: (action, instance, done) => {
                        if (action === 'confirm') {

                          genDel({id:item.id}).then(res=>{
                            this.$message({
                                               message: '删除成功',
                                               type: 'success'
                                             })
                             this.getAll()
                            done();
                          })
                        } else {
                          done();
                        }
          }
          })
      },
      genad(item){

        this.formInline.id =  item.id
        this.yixiangList = item.cereCustomerInfo

        this.ggXin = true
      },
      biangen(item){
        this.formInline.id =  item.id
        this.yixiangList = item.cereCustomerInfo

        this.ggXin = true
        this.formInline  = item
        this.addziyuanData =  JSON.parse(item.intendedResource)
        this.plan_Time[0]  = item.nextFollowUpStartTime
         this.plan_Time[1] = item.nextFollowUpEndTime
         this.formInline.customerLevel = item.cereCustomerInfo.customerLevel
      },
      closemsg(index){
        this.addziyuanData.splice(index, 1);
      },
      gitOut(){
         let add =[]
        this.tableData.map(item=>{
             let obj ={
               intentCustomerName:'',
               customerLevel:'',
               contactPhone:'',
               nextFollowUpStartTime:''
             }
          obj.intentCustomerName = item.cereCustomerInfo.intentCustomerName
          obj.contactPhone = item.cereCustomerInfo.contactPhone
          obj.customerLevel = item.cereCustomerInfo.customerLevel
          obj.nextFollowUpStartTime = item.followUpTime
            add.push(obj)

        })
      }

    }
  }
</script>

<style scoped>
  .zhuti {
    padding: 0 20px 20px 20px;
    min-height: calc(100vh - 50px - 20px);
    background-color: #Fff;

  }

  .chengeXia {
    border-bottom: 6px solid #3F9B6A;
    padding-bottom: 4px;
    color: #3F9B6A;
  }

  /deep/ .el-form-item__content {
    line-height: 0;
  }

  .tableBtn {
    display: inline-block;
    margin-right: 10px;
    color: #ACACAC;
  }

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

  .greens {
    color: #3F9B6A;
  }

  /deep/ .el-table__row {
    font-size: 14px;
    color: #000000e6;
    height: 42px;
  }

  .fenye {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
  }

  /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #3F9B6A;
  }

  .el-row {
    margin-bottom: 20px;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .el-col {
    border-radius: 4px;
  }

  .bg-purple-dark {
    background: #99a9bf;
  }

  .bg-purple {
    background: #d3dce6;
  }

  .bg-purple-light {
    background: #e5e9f2;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }

  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }

  /deep/ .bg-purple[data-v-0e3fe4ec] {
    background: #fff;
    height: 50px;
  }

  /deep/ .bg-purple[data-v-3bebae82] {
    background: #fff;
    height: 50px;
  }

  ::v-deep .bg-purple {
    background: #fff;
    height: 50px;
  }

  /deep/ .el-form--label-top .el-form-item__label {
    padding: 0;
  }

  ::v-deep .el-form-item {
    margin-bottom: 16px;
  }

  .device-form .el-form-item__label::after {
    content: "*";
    color: #1A1A1A;
    margin-left: 5px;
    font-size: 16px;
  }


  ::v-deep .el-dialog__wrapper {
    .el-dialog__header {
      background-color: #FAFAFA;
    }
  }

  ::v-deep .el-input__inner:focus {
    border: #3F9B6A 1px solid;
  }

  .dialog-footer {
    display: flex;
    justify-content: flex-end;
    border-top: solid rgba(209, 209, 209, 0.2) 2px;
    padding-top: 20px;
  }

  ::v-deep .el-input__inner:focus {
    border: #3F9B6A 1px solid;
  }

  ::v-deep .el-input__inner:hover {
    border: #3F9B6A 1px solid;
  }

  ::v-deep .el-select .el-input.is-focus .el-input__inner {
    border-color: #3F9B6A
  }

  .el-select-dropdown__item.selected {
    color: #3F9B6A;
  }

  .el-pagination__sizes .el-input .el-input__inner:hover {
    border-color: #3F9B6A;
  }

  ::v-deep .el-dialog__wrapper {

    .dialog_css {
      margin-right: 12px;
      margin-top: 61px !important;

      .el-dialog__title {
        font-size: 16px !important;
        font-weight: 600;
        color: #000;
      }
    }

    .diaslog_zhong {
      margin-left: 25%;
      margin-top: 61px !important;
    }

  }

  ::v-deep .diaslog_zhong {
    margin-left: 20%;
    margin-top: 61px !important;

    .el-dialog__header {
      background-color: #fff;
      border-bottom: 1px solid #EFEFEF;

      .el-dialog__title {
        font-size: 14px;
        color: #000000e6;
      }
    }

    .el-dialog__body {
      padding: 10px 30px 30px 20px
    }
  }

  /deep/ .el-table_1_column_8 .hetong {
    color: #7DBB9A;
    text-decoration: underline;
  }

  /deep/ .first-column-bg {
    background-color: #FAFAFA !important;
  }

  ::v-deep .textarea {
    width: 85%;

    .el-textarea__inner {
      width: 100%;
    }
  }

  ::v-deep .pass_input {
    width: 100%;

    .el-input__inner {
      border: none;
      padding: 0;
    }
  }

  ::v-deep .pass_select {
    width: 100%;

    .el-input__inner {
      border: none;
      padding: 0;
    }

    .el-icon-arrow-up:before {
      content: ''
    }

  }

  /deep/ .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
    background-color: #fff;
  }
</style>
<style lang="scss" scoped>
  ::v-deep .bian_css {
    .el-dialog__header {
      padding: 0px;
    }

    .el-input__inner {
      height: 18px;
      border: 0px;
      margin-top: 0px;
    }

    .el-input__inner:hover {
      border: 0px;
    }

    .el-input__inner:focus {
      border: 0px;
    }
  }

  ::v-deep .buttonHover:hover {
    color: #3f9b6a !important;
    border-color: #c5e1d2 !important;
    background-color: #ecf5f0 !important;
    outline: none;
  }

  ::v-deep .el-pagination__total {
    position: absolute;
    left: 33px;
  }

  ::v-deep .diaslog_zhong {
    .el-dialog__body {
      padding: 10px 20px 20px 20px;
    }

    .el-upload--picture-card {
      width: 130px;
      height: 130px;
    }
  }
</style>
