<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="mini" :inline="true" v-show="showSearch" label-width="68px">
<!--          <el-form-item class="treeselectForm treeselectForm2 treeselectFormzn" label="组织架构" prop="deptIds">-->
<!--            <tree @treeselectFn="treeselectFn" :treeval="queryParams.deptIds" :ismultiple="true" style="width: 193px;"></tree>-->
<!--          </el-form-item>-->
          <el-form-item label="手机号" prop="phone">
            <el-input v-model="queryParams.phone" placeholder="请输入手机号" clearable size="mini" @keyup.enter.native="handleQuery"/>
          </el-form-item>
<!--        <el-form-item label="客资线索" prop="cids">-->
<!--          <el-select v-model="queryParams.cids" clearable collapse-tags multiple placeholder="请选择客资线索" size="mini">-->
<!--            <el-option v-for="item in summaryTaskOptions" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue"></el-option>-->
<!--          </el-select>-->
<!--        </el-form-item>-->
<!--          <el-form-item label="跟进状态" prop="isClose">-->
<!--            <el-select size="mini" v-model="queryParams.isClose" clearable placeholder="请选择跟进状态">-->
<!--              <el-option label="未跟进" value="-1"></el-option>-->
<!--              <el-option label="跟进中" value="0"></el-option><el-option label="完成跟进" value="1"></el-option>-->
<!--            </el-select>-->
<!--          </el-form-item>-->
<!--      <el-form-item label="是否跟进" prop="customerClueStatus">-->
<!--        <el-select size="mini" v-model="queryParams.customerClueStatus" clearable placeholder="请选择是否跟进"><el-option label="未跟进" value="0"></el-option><el-option label="已跟进" value="1"></el-option></el-select>-->
<!--      </el-form-item>-->
          <el-form-item label=" ">
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
<!--            <el-col :span="1.5">-->
<!--              <el-button-->
<!--                type="warning"-->
<!--                plain-->
<!--                icon="el-icon-download"-->
<!--                size="mini"-->
<!--                @click="handleExport"-->
<!--                v-hasPermi="['sfa:customerClueInfo:export']"-->
<!--              >导出</el-button>-->
<!--            </el-col>-->
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>
    <el-table v-loading="loading" :data="userSummaryList" >
      <el-table-column :show-overflow-tooltip="true" label="客资线索" prop="cid" width="100">
        <template slot-scope="scope">{{fillObjectFormat(scope.row, scope.column)}}</template>
      </el-table-column>
      <el-table-column label="公司名称"  prop="companyName" :show-overflow-tooltip="true"/>
      <el-table-column label="大区名称"  prop="regionName" :show-overflow-tooltip="true"/>
      <el-table-column label="部门名称"  prop="deptName" :show-overflow-tooltip="true"/>
      <el-table-column label="客户姓名"  prop="name" :show-overflow-tooltip="true"/>
      <el-table-column label="归属人"  prop="belongingUserName" :show-overflow-tooltip="true"/>
      <el-table-column label="联系电话" align="center" prop="phone" width="110">
        <template slot-scope="scope">{{tell(scope.row.phone)}}</template>
      </el-table-column>
      <el-table-column label="客资接入时间" align="center" prop="createTime" width="150"/>
      <el-table-column :show-overflow-tooltip="true" align="center" label="跟进状态" prop="isClose" width="100">
        <template slot-scope="scope"><span v-if="scope.row.isClose==1">跟进完成</span><span v-if="scope.row.isClose==0">跟进中</span><span v-if="scope.row.isClose==-1">未跟进</span></template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="140" fixed="right">
        <template slot-scope="scope">
          <el-button size="mini" type="text" v-if="scope.row.isClose==-1" icon="el-icon-alarm-clock" @click="handleUrging(scope.row)">催办</el-button>
          <el-button size="mini" type="text" icon="el-icon-view" @click="handleView(scope.row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />


    <!-- 任务详情对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="1200px" append-to-body>
      <el-descriptions title="" border>
        <el-descriptions-item label="客资线索">{{fillObjectFormat(form, "")}}</el-descriptions-item>
        <el-descriptions-item label="公司名称">{{form.companyName}}</el-descriptions-item>
        <el-descriptions-item label="大区名称">{{form.regionName}}</el-descriptions-item>
        <el-descriptions-item label="部门">{{form.deptName}}</el-descriptions-item>
        <el-descriptions-item label="省">{{form.provinceName}}</el-descriptions-item>
        <el-descriptions-item label="市">{{form.cityName}}</el-descriptions-item>
        <el-descriptions-item label="县/区">{{form.countryName}}</el-descriptions-item>
        <el-descriptions-item label="客户姓名">{{form.name}}</el-descriptions-item>
        <el-descriptions-item label="来电电话">{{tell(form.phone)}}</el-descriptions-item>
        <el-descriptions-item label="归属人">{{form.belongingUserName}}</el-descriptions-item>
        <el-descriptions-item label="目前经营的行业">{{form.industry}}</el-descriptions-item>
        <el-descriptions-item label="目前经营的品牌">{{form.brand}}</el-descriptions-item>
        <el-descriptions-item label="有无涂料从业经验"><span v-if="form.physicalStore==1">有</span><span v-if="form.physicalStore==2">无</span></el-descriptions-item>
        <el-descriptions-item label="目前有无实体店"><span v-if="form.physicalStore==1">有</span><span v-if="form.physicalStore==2">无</span></el-descriptions-item>
        <el-descriptions-item label="产品大类" v-if="form.productCategory">{{form.productCategory}}</el-descriptions-item>
        <el-descriptions-item label="采购数量" v-if="form.purchaseQuantity">{{form.purchaseQuantity}}</el-descriptions-item>
        <el-descriptions-item label="客服工号" v-if="form.jobNumber">{{form.jobNumber}}</el-descriptions-item>
        <el-descriptions-item label="跟进状态" v-if="form.isClose"><span v-if="form.isClose==1">跟进完成</span><span v-if="form.isClose==0">跟进中</span><span v-if="form.isClose==-1">未跟进</span></el-descriptions-item>
        <el-descriptions-item label="跟进结果" v-if="form.followUpResult">{{form.followUpResult}}</el-descriptions-item>
        <el-descriptions-item label="客资接入时间">{{form.createTime}}</el-descriptions-item>
      </el-descriptions>
      <el-divider></el-divider>
      <el-table v-loading="loading" :data="form.userCustomerClueList" >
        <el-table-column :show-overflow-tooltip="true" align="center" label="客资任务" prop="customerClueTaskName"/>
        <el-table-column label="公司名称" align="center" prop="companyName" width="150"/>
        <el-table-column label="大区名称" align="center" prop="regionName" width="150"/>
        <el-table-column label="部门名称" align="center" prop="deptName" width="150"/>
        <el-table-column label="跟进人员" align="center" prop="nickName" />
        <el-table-column label="职务" align="center" prop="postName" />
        <el-table-column label="客资跟进时间" align="center" prop="createTime" width="150"/>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="80" fixed="right">
          <template slot-scope="scope">
            <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-form ref="answerForm" :model="form" :disabled="true"  size="mini" >
        <el-row v-for="(customItem,index) in form.customItemList" >
          <el-col :span="24" v-if="customItem.answerType == 'dx'">
            <el-form-item :label="customItem.customName" >
              <el-radio-group>
                <el-radio v-for="(customOption, index) in customItem.customOptionList" v-model ="customOption.checked" :label="customOption.customOption">{{customOption.customOption}}</el-radio>
              </el-radio-group>
              {{customItem.remark}}
            </el-form-item>
          </el-col>
          <el-col :span="24" v-if="customItem.answerType == 'duox'">
            <el-form-item :label="customItem.customName" >
              <el-checkbox-group>
                <el-checkbox v-for="(customOption, index) in customItem.customOptionList" v-model ="customOption.checked" :label="customOption.customOption">{{customOption.customOption}}</el-checkbox>
              </el-checkbox-group>
              {{customItem.remark}}
            </el-form-item>
          </el-col>
          <el-col :span="24" v-if="customItem.answerType == 'zp'">
            <el-form-item :label="customItem.customName" >
              <div class="demo-image__preview">
                <el-image v-for="(fileInfo, index) in customItem.fileInfoList" class="imgPreview" :src="fileInfo.fileUrl" :preview-src-list="fileInfoLists" @click="previewFn(customItem)"></el-image>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="24" v-if="customItem.answerType == 'rq' || customItem.answerType == 'wb' || customItem.answerType == 'sz'">
            <el-form-item :label="customItem.customName" ><el-input v-model="customItem.answerValue"></el-input>{{customItem.remark}}</el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
    <!-- 详情 -->
    <el-dialog :title="title" :visible.sync="openEdit" width="1200px" append-to-body >
      <el-descriptions title="" border>
        <el-descriptions-item label="客资线索">{{fillObjectFormat(formv, "")}}</el-descriptions-item>
        <el-descriptions-item label="公司名称">{{formv.companyName}}</el-descriptions-item>
        <el-descriptions-item label="大区名称">{{formv.regionName}}</el-descriptions-item>
        <el-descriptions-item label="部门">{{formv.deptName}}</el-descriptions-item>
        <el-descriptions-item label="省">{{formv.provinceName}}</el-descriptions-item>
        <el-descriptions-item label="市">{{formv.cityName}}</el-descriptions-item>
        <el-descriptions-item label="县/区">{{formv.countryName}}</el-descriptions-item>
        <el-descriptions-item label="客户姓名">{{formv.name}}</el-descriptions-item>
        <el-descriptions-item label="归属人">{{form.belongingUserName}}</el-descriptions-item>
        <el-descriptions-item label="来电电话">{{tell(formv.phone)}}</el-descriptions-item>
        <el-descriptions-item label="目前经营的行业">{{formv.industry}}</el-descriptions-item>
        <el-descriptions-item label="目前经营的品牌">{{formv.brand}}</el-descriptions-item>
        <el-descriptions-item label="有无涂料从业经验"><span v-if="formv.physicalStore==1">有</span><span v-if="formv.physicalStore==2">无</span></el-descriptions-item>
        <el-descriptions-item label="目前有无实体店"><span v-if="formv.physicalStore==1">有</span><span v-if="formv.physicalStore==2">无</span></el-descriptions-item>
        <el-descriptions-item label="产品大类" v-if="formv.productCategory">{{formv.productCategory}}</el-descriptions-item>
        <el-descriptions-item label="采购数量" v-if="formv.purchaseQuantity">{{formv.purchaseQuantity}}</el-descriptions-item>
        <el-descriptions-item label="客服工号" v-if="formv.jobNumber">{{formv.jobNumber}}</el-descriptions-item>
        <el-descriptions-item label="跟进状态" v-if="formv.isClose"><span v-if="formv.isClose==1">跟进完成</span><span v-if="formv.isClose==0">跟进中</span><span v-if="formv.isClose==-1">未跟进</span></el-descriptions-item>
        <el-descriptions-item label="跟进结果" v-if="form.followUpResult">{{form.followUpResult}}</el-descriptions-item>
        <el-descriptions-item label="客资接入时间">{{formv.createTime}}</el-descriptions-item>
      </el-descriptions>
      <el-divider>答题内容</el-divider>
      <el-form ref="form" :model="form"  size="mini" class="el-label-form">
        <el-row v-for="(customItem,index) in formv.customerClue.customerClueItemList" >
          <el-col :span="24" v-if="customItem.answerType == 'dx'">
            <el-form-item :label="index+1+'、'+customItem.customerClueName"  >
                <el-radio disabled v-for="(customOption, index) in customItem.customerClueOptionList" v-model="customItem.answerValue" :label="customOption.customerClueOptionId">{{customOption.customerClueOption}}</el-radio>
            </el-form-item>
          </el-col>
          <el-col :span="24" v-if="customItem.answerType == 'duox'">
            <el-form-item :label="index+1+'、'+customItem.customerClueName" >
              <el-checkbox-group disabled>
                <el-checkbox v-for="(customOption, index) in customItem.customerClueOptionList" v-model="customOption.checked" :label="customOption.customerClueOption">{{customOption.customerClueOption}}</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
          <el-col :span="24" v-if="customItem.answerType == 'zp'">
            <el-form-item :label="index+1+'、'+customItem.customerClueName" >
              <div class="demo-image__preview">
                <el-image v-for="(fileInfo, index) in customItem.fileInfoList" class="imgPreview" :src="fileInfo.fileUrl" :preview-src-list="fileInfoLists" @click="previewFn(customItem)"></el-image>
              </div>
              <p style="text-align: right;font-size: 12px;color:#999;">备注：{{customItem.remark}}</p>
            </el-form-item>
          </el-col>
          <el-col :span="24" v-if="customItem.answerType == 'wb' || customItem.answerType == 'sz'">
            <el-form-item :label="index+1+'、'+customItem.customerClueName"  :prop="'customItemList.'+index+'.answerValue'" >
              <el-input   type="textarea" disabled v-model="customItem.answerValue"></el-input>
              <el-row>
                <el-col :span="12"> <p style="text-align: left;font-size: 12px;color:#999;">备注：{{customItem.remark}}</p></el-col>
                <el-col :span="12">&nbsp;&nbsp;<p v-if="customItem.updateBy" style="text-align: right;font-size: 12px;color:#999;"> 修改人：{{customItem.updateBy}}<span style="width:40px;display: inline-block"></span>修改时间：{{customItem.updateTime}}</p></el-col>
              </el-row>
            </el-form-item>
          </el-col>
          <el-col :span="24" v-if="customItem.answerType == 'rq'">
            <el-form-item :label="index+1+'、'+customItem.customerClueName" :prop="'customItemList.'+index+'.answerValue'" >
              <el-date-picker v-model="customItem.answerValue" type="date" disabled value-format="yyyy-MM-dd" placeholder="选择日期"></el-date-picker>
              <el-row>
                <el-col :span="12"> <p style="text-align: left;font-size: 12px;color:#999;">备注：{{customItem.remark}}</p></el-col>
                <el-col :span="12">&nbsp;&nbsp;<p v-if="customItem.updateBy" style="text-align: right;font-size: 12px;color:#999;"> 修改人：{{customItem.updateBy}}<span style="width:40px;display: inline-block"></span>修改时间：{{customItem.updateTime}}</p></el-col>
              </el-row>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="canceleiti" size="mini">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import tree from "@/views/components/sfa/treeselectParent";
import {clueInfoList, getClueInfo, getCustomerClueAnswerById} from "@/api/sfa/clueInfoList";
import {clueInfoByPhone, remindersClueInfo, voidmater} from "@/api/sfa/taskuser";
export default {
  name: "UserSummary",
  components: { tree },
  data() {
    return {
      // 遮罩层
      loading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      openEdit:false,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      checked:true,
      // 总条数
      total: 0,
      // 主管任务查询表格数据
      userSummaryList: [],
      // 弹出层标题
      title: "",
      datetimerange:[],
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      summaryTaskList:[],
      // 表单参数
      form: {},
      formv:{
        customerClue:{customerClueItemList:[]}
      },
      fileInfoLists:[],
      summaryTaskOptions:[]
    };
  },
  created() {
    this.getDicts("customer_clue").then(response => {
      this.summaryTaskOptions = response.data;
    });
  },
  methods: {
    // 填写对象
    fillObjectFormat(row, column) {
      if (row.cid != null) {
        return this.selectDictLabels(this.summaryTaskOptions, row.cid);
      } else {
        return ""
      }
    },
    treeselectFn(val){
      this.queryParams.deptIds = val;
    },
    tell(params){
      if(params!=null&&params.length==11){
        return params.substr(0, 3) + '****' + params.substr(7)
      }else{
        return ""
      }
    },
    /** 查询主管任务查询列表 */
    getList() {
      this.loading = true;
      if(this.queryParams.name!=null){
        this.queryParams.name=this.queryParams.name.trim()
      }
      clueInfoByPhone(this.queryParams).then(response => {
        this.userSummaryList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    canceleiti(){
      this.openEdit=false
    },
    handleClose(){
      this.openEdit=false
    },
    // 表单重置
    reset() {
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      if(this.queryParams.phone!=null){
         if(this.queryParams.phone.trim()==""){
           this.$message.warning("请输入手机号")

         }else{
           if(!/^1[3456789]\d{9}$/.test(this.queryParams.phone)){
             this.$message.warning("请输入正确手机号")
           }else{
             this.getList();
           }
         }
      }else{
        this.$message.warning("请输入手机号")
      }
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.queryParams.deptIds=null
      this.handleQuery();
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      const summaryId = row.userCustomerClueId || this.ids
      getCustomerClueAnswerById({userCustomerClueId:summaryId}).then(response => {
        for(var i=0;i<response.data.customerClue.customerClueItemList.length;i++){
          if(response.data.customerClue.customerClueItemList[i].answerType=="zp"){
            response.data.customerClue.customerClueItemList[i].fileInfoLists=[]
            if(response.data.customerClue.customerClueItemList[i].fileInfoList!=null&&response.data.customerClue.customerClueItemList[i].fileInfoList!=undefined){
              var fileInfoList=response.data.customerClue.customerClueItemList[i].fileInfoList
              for(var k=0;k<fileInfoList.length;k++){
                response.data.customerClue.customerClueItemList[i].fileInfoLists.push(fileInfoList[k].fileUrl)
              }
            }
          }
          if(response.data.customerClue.customerClueItemList[i].answerType=="dx"){
              for(var k=0;k<response.data.customerClue.customerClueItemList[i].customerClueOptionList.length;k++){
                if(response.data.customerClue.customerClueItemList[i].customerClueOptionList[k].checked){
                  response.data.customerClue.customerClueItemList[i].answerValue=response.data.customerClue.customerClueItemList[i].customerClueOptionList[k].customerClueOptionId
                }
              }
          }
        }
        this.formv = response.data;
        this.openEdit = true;
        this.title = "历史客资线索详情";
      });
    },
    /** 查看按钮操作 */
    handleView(row) {
      const userSummaryId = row.customerClueInfoId || this.ids
      getClueInfo({customerClueInfoId:userSummaryId}).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "查看任务详情";
      });
    },
    handleUrging(row){
      const id = row.customerClueInfoId || this.ids.join(',');
      this.$confirm('是否确认催办已选中数据?', "", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function() {
        remindersClueInfo({customerClueInfoId:23}).then(response => {
          if(response.code==200){
            this.getList();
            this.$modal.msgSuccess("已催办");
          }
        })
      })
    },
    previewFn(val){
      this.fileInfoLists=val.fileInfoLists
    },    /** 导出按钮操作 */
    handleExport() {
      this.download('sfa/customerClue/clueInfoExport', {
        ...this.queryParams
      }, `客资列表_${new Date().getTime()}.xlsx`)
    }
  }
};
</script>
