<template>
  <div class="index_wrap">
    <!-- 主体 -->
    <div class="main">
      <!-- 标题 -->
      <div class="title">
        <div class="title_top">
          我的客户
          <!-- MY CLIENTS -->
        </div>
        <div class="title_bot">
          {{totalCustomer}}
          个客户
          <!-- Customer -->
        </div>
      </div>
      <!-- 用户信息 -->
      <div class="client_infor_wrap">
        <!-- 搜索条件 上层 -->
        <div class="client_search_top layout justify align_center">
          <div
            v-for="(item,index) in topList"
            :key="index"
            class="client_top_single layout flex_row align_center justify"
            :class="{click_top_active:item.choice}"
            @click="choiceNow(item)"
          >
            <div class="client_top_l">{{item.name}}</div>
            <div class="client_top_img">
              <img :src="item.choice?item.img2:item.img1" alt />
            </div>
          </div>
        </div>
        <!-- 搜索条件 下拉选框 -->
        <div class="client_search_select layout justify align_center">
          <!-- 客户状态 -->
          <el-select
            class="customer_status"
            v-model="customerValue"
            placeholder="Select customer status"
            @change="getCustomerInfor()"
          >
            <el-option
              v-for="item in customerOption"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <!-- 资质审核状态 -->
          <el-select
            class="customer_status"
            v-model="timeValue"
            placeholder="Select Qualification status"
            @change="getCustomerInfor()"
          >
            <el-option
              v-for="item in timeOption"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <!-- 合同状态 -->
          <el-select
            class="customer_status"
            v-model="currencyValue"
            placeholder="Select contract status"
            @change="getCustomerInfor()"
          >
            <el-option
              v-for="item in currencyOption"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <!-- 付款状态 -->
          <el-select
            class="customer_status"
            v-model="payValue"
            placeholder="Select payment status"
            @change="getCustomerInfor()"
          >
            <el-option
              v-for="item in payOption"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
        <!-- 搜索条件 输入框-->
        <div class="client_search_btn_box layout align_center">
          <el-input
            class="client_search_input"
            v-model="keyword"
            @change="getCustomerInfor()"
            placeholder="资质未通过"
          ></el-input>
          <div class="search_btn" @click="getCustomerInfor()">搜索</div>
        </div>
        <!-- 表格 -->
        <div class="client_table">
          <!-- 标题 -->
          <div class="cus_infor_title layout align_center flex_row justify_start">
            <div class="customer_icon">
              <img src="@/assets/img_21.png" alt />
            </div>
            <div>客户信息</div>
          </div>
          <div class="client_box_table">
            <!-- 原始表格 -->
            <el-table
              @cell-mouse-enter="enterTable"
              @cell-mouse-leave="leaveTable"
              :data="tableData"
              border
              :header-row-style="changeTitle"
            >
              <!-- 申请id -->
              <el-table-column fixed prop="number" label="申请ID" width="120" align="center"></el-table-column>
              <!-- 客户名称 -->
              <el-table-column fixed prop="name" width="110" label="客户姓名" align="center"></el-table-column>
              <!-- 性别 -->
              <el-table-column label="性别" align="center">
                <template slot-scope="scope">
                  <div>{{scope.row.gender == 1?"男":"女"}}</div>
                </template>
              </el-table-column>
              <!-- 手机号码 -->
              <el-table-column prop="mobile" width="110" label="手机号码" align="center"></el-table-column>
              <!-- 移民国家 -->
              <el-table-column prop="country_name" label="移民国家" width="100" align="center"></el-table-column>
              <!-- 客户状态 -->
              <el-table-column label="客户状态" width="100" align="center">
                <template
                  slot-scope="scope"
                >{{scope.row.user_status == 1?"移民测评":scope.row.user_status == 2?"资质审核":scope.row.user_status == 3?"合同签订":scope.row.user_status == 4?"费用交纳":scope.row.user_status == 5?"移民办理":scope.row.user_status == 6?"结单":""}}</template>
              </el-table-column>
              <!-- 预评分值 -->
              <el-table-column prop="score" label="预评分值" width="113" align="center"></el-table-column>
              <!-- 办理时长 -->
              <el-table-column prop="month" label="办理时长" width="105" align="center"></el-table-column>
              <!-- 剩余月份 -->
              <el-table-column label="剩余月份" width="100" align="center">
                <template slot-scope="scope">
                  <div
                    :class="{red_color:scope.row.residue_month<=6 &&  scope.row.user_status != 6}"
                  >{{scope.row.residue_month}}</div>
                </template>
              </el-table-column>
              <!-- 提交审核时间 -->
              <el-table-column prop="submit_time" label="提交审核时间" width="160" align="center"></el-table-column>
              <!-- 审核状态 -->
              <el-table-column label="审核状态" width="105" align="center">
                <template slot-scope="scope">
                  <div
                    :class="{red_color:scope.row.audit_status == 3 &&  scope.row.user_status == 2,green_color:scope.row.audit_status == 2 &&  scope.row.user_status == 2}"
                  >{{scope.row.audit_status == 0?"未提交":scope.row.audit_status == 1?"待审核":scope.row.audit_status == 2?"审核通过":"审核未通过"}}</div>
                </template>
              </el-table-column>
              <!-- 合同签订时间 -->
              <el-table-column prop="contract_time" label="合同签订时间" width="180" align="center"></el-table-column>
              <!-- 付款账户 -->
              <el-table-column prop="bank_name" label="付款账户" width="95" align="center"></el-table-column>
              <!-- 币种 -->
              <el-table-column prop="currency_name" label="币种" width="95" align="center"></el-table-column>
              <!-- 移民款 -->
              <el-table-column label="移民款" align="center">
                <el-table-column prop="immigrant_total" label="应付金额" width="110" align="center"></el-table-column>
                <el-table-column
                  prop="immigrant_pay_total"
                  label="已付金额"
                  width="110"
                  align="center"
                ></el-table-column>
                <el-table-column
                  prop="immigrant_residue_total"
                  label="未付金额"
                  width="110"
                  align="center"
                ></el-table-column>
              </el-table-column>
              <!-- 捐赠款 -->
              <el-table-column label="Donation" align="center">
                <el-table-column prop="donate_total" label="应付金额" width="110" align="center"></el-table-column>
                <el-table-column prop="donate_pay_total" label="已付金额" width="110" align="center"></el-table-column>
                <el-table-column
                  prop="dontate_residue_total"
                  label="未付金额"
                  width="110"
                  align="center"
                ></el-table-column>
              </el-table-column>
              <!-- 付款状态 -->
              <el-table-column label="付款状态" width="90" align="center">
                <template slot-scope="scope">
                  <div
                    :class="{red_color:scope.row.pay_status == 3 && scope.row.user_status == 4}"
                  >{{scope.row.pay_status == 1?"付款中":scope.row.pay_status == 2?"已付款":scope.row.pay_status == 3?"财务催款":""}}</div>
                </template>
              </el-table-column>
              <!-- 开始处理时间 -->
              <el-table-column prop="createtime" label="开始处理时间" width="200" align="center"></el-table-column>
              <!-- 办理结果 -->
              <el-table-column label="办理结果" width="90" align="center">
                <template slot-scope="scope">
                  <div>{{scope.row.result_status == 1?"成功":scope.row.result_status == 2?"失败":""}}</div>
                </template>
              </el-table-column>
              <!-- 结单时间 -->
              <el-table-column prop="endtime" label="结单时间" width="200" align="center"></el-table-column>
              <!-- 操作 -->
              <el-table-column fixed="right" label="操作" width="120" align="center">
                <template slot-scope="scope">
                  <div class="layout flex_row align_center justify_center">
                    <!-- 查看客户信息 统一显示-->
                    <a  title="查看">
                    <div class="watch_pdf" @click="toWatch(scope.row)">
                      <img :src="scope.row.isShowIcon?watchImg1:watchImg2" alt />
                    </div>
                    </a>
                    <!-- 编辑 审核状态为失败 -->
                  <a  title="编辑">
<div
                      v-show="scope.row.audit_status == 3 || scope.row.audit_status == 2  && scope.row.user_status == 2"
                      class="delete_pdf"
                      @click="toEditor(scope.row)"
                    >
                      <img :src="scope.row.isShowIcon?editorImg1:editorImg2" alt />
                    </div>
                  </a>
                    
                   
                   
                    <!-- 合同弹窗 审核状态通过 -->
                      <a  title="合同">
                    <div
                      v-show="scope.row.user_status == 3"
                      class="delete_pdf"
                      @click="checkContract(scope.row)"
                    >
                      <img :src="scope.row.isShowIcon?conImg1:conImg2" alt />
                    </div>
                    </a>
                    <!-- 收款进度弹窗  付款状态为付款中、催款 合同已签订-->
                    <a title="收款记录">
                    <div
                      v-show="scope.row.user_status == 4"
                      class="delete_pdf"
                      @click="checkPay(scope.row)"
                    >
                      <img :src="scope.row.isShowIcon?payImg1:payImg2" alt />
                    </div>
                    </a>
                    
                    <!-- 办理进度弹窗 付款状态为已付款 -->
                    <a title="办理进度">
<div
                      v-show="scope.row.user_status == 5 || scope.row.user_status == 6"
                      class="delete_pdf"
                      @click="checkProgress(scope.row)"
                    >
                      <img :src="scope.row.isShowIcon?proImg1:proImg2" alt />
                    </div>
                    </a>
                    
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <!-- 分页 -->
          <div class="customer_page" v-if="allPages">
            <Pagation @getPage="getSonPage" :allPages="allPages"></Pagation>
          </div>
        </div>
        <!-- 合同弹窗 -->
        <div class="contract_dialog">
          <el-dialog :visible.sync="dialogContractVisible" width="40%">
            <div class="dialog_title_contract">合同信息</div>
            <div class="contract_list_wrap">
              <div v-for="(item,index) in contractList" :key="index">
                <div class="contrast_list_single">
                  <a :href="item.url" target="_blank" rel="noopener noreferrer">{{item.file_name}}</a>
                </div>
              </div>

              <div class="contract_btn clearfix">
                <div class="btn_back" @click="dialogContractVisible = false">关闭</div>
              </div>
            </div>
          </el-dialog>
        </div>
        <!-- 付款记录弹窗 -->
        <div class="contract_dialog">
          <el-dialog :visible.sync="dialogPayVisible" width="60%">
            <div class="dialog_title_contract">付款记录</div>
            <div class="pay_table_wrap">
              <!-- 付款记录表格 -->
              <div class="pay_table_record">
                <el-table :data="payData" border>
                  <el-table-column property="createtime" label="记录时间" align="center"></el-table-column>
                  <el-table-column property="nickname" label="记录人" align="center"></el-table-column>
                  <el-table-column label="币种" align="center">
                    <template slot-scope="scope">
                      <div>{{scope.row.type == 1?"移民款":"捐赠款"}}</div>
                    </template>
                  </el-table-column>
                  <el-table-column property="currency_name" label="收款账户" width="200" align="center"></el-table-column>
                  <el-table-column property="bank_name" label="收款银行" width="200" align="center"></el-table-column>
                  <el-table-column property="total" label="金额" align="center"></el-table-column>
                  <el-table-column label="附件" align="center">
                    <template slot-scope="scope">
                      <div class="flex_diection layout">
                        <a
                          :href="item"
                          target="blank"
                          class="attachment"
                          v-for="(item,index) in scope.row.files"
                          :key="index"
                        >收款凭证{{index+1}}</a>
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
              <div class="contract_btn clearfix">
                <div class="btn_back" @click="dialogPayVisible = false">关闭</div>
              </div>
            </div>
          </el-dialog>
        </div>
        <!-- 办理进度弹窗 -->
        <div class="contract_dialog">
          <el-dialog :visible.sync="dialogProgressVisible" width="60%">
            <div class="dialog_title_contract">办理进度</div>
            <div class="pay_table_wrap">
              <!-- 办理进度表格 -->
              <div class="pay_table_record">
                <el-table :data="progressData" border>
                  <el-table-column property="createtime" label="记录时间" align="center"></el-table-column>
                  <el-table-column property="nickname" label="记录人" align="center"></el-table-column>
                  <el-table-column property="description" label="记录内容" align="center"></el-table-column>
                  <el-table-column label="附件" align="center">
                    <template slot-scope="scope">
                      <div class="flex_diection layout">
                        <a
                          :href="item"
                          target="blank"
                          class="attachment"
                          v-for="(item,index) in scope.row.files"
                          :key="index"
                        >收款凭证{{index+1}}</a>
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
              <div class="contract_btn clearfix">
                <div class="btn_back" @click="dialogProgressVisible = false">关闭</div>
              </div>
            </div>
          </el-dialog>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Pagation from "../../common/pagation";
import { post } from "../../../api/http";
export default {
  data() {
    return {
      // 关键字
      keyword: "",
      // 页数
      page: 1,
      // 总页数
      allPages: "",
      // 客户总数
      totalCustomer: "",
      // 搜索上层
      topList: [
        {
          id: 1,
          name: "处理时长小于6个月",
          // name: "Processing time is less than 6 months",
          choice: false,
          img1: require("@/assets/img_36.png"),
          img2: require("@/assets/img_32.png")
        },
        {
          id: 2,
          name: "财务催款",
          choice: false,
          img1: require("@/assets/img_33.png"),
          img2: require("@/assets/img_37.png")
        },
        {
          id: 3,
          name: " 资质待审核",
          choice: false,
          img1: require("@/assets/img_34.png"),
          img2: require("@/assets/img_38.png")
        },
        {
          id: 4,
          name: "资质未通过",
          choice: false,
          img1: require("@/assets/img_35.png"),
          img2: require("@/assets/img_39.png")
        }
      ],
      //   客户状态
      customerOption: [
        {
          value: "",
          label: "全部"
        },
        {
          value: "1",
          label: "移民测评"
        },
        {
          value: "2",
          label: "资质审核"
        },
        {
          value: "3",
          label: "合同签订"
        },
        {
          value: "4",
          label: "费用交纳"
        },
        {
          value: "5",
          label: "移民办理"
        },
        {
          value: "6",
          label: "结单"
        }
      ],
      customerValue: "",
      //   资质审核
      timeOption: [
        {
          value: "",
          label: "全部"
        },
        {
          value: "1",
          label: "待审核"
        },
        {
          value: "2",
          label: "审核通过"
        },
        {
          value: "3",
          label: "审核未通过"
        }
      ],
      timeValue: "",

      //   合同状态
      currencyOption: [
        {
          value: "",
          label: "全部"
        },
        {
          value: "1",
          label: "未签订"
        },
        {
          value: "2",
          label: "已签订"
        }
      ],
      currencyValue: "",
      //   付款状态
      payOption: [
        {
          value: "",
          label: "全部"
        },
        {
          value: "1",
          label: "付款中"
        },
        {
          value: "2",
          label: "已付款"
        },
        {
          value: "3",
          label: "财务催款"
        }
      ],
      payValue: "",
      // 输入框关键字
      keyword: "",
      //   客户信息
      tableData: [],
      // 原始表格
      // isOriginal:true,
      // 处理时长
      pastMonth: "",
      // 合同弹窗
      dialogContractVisible: false,
      contractList: [],
      // 付款记录弹窗
      dialogPayVisible: false,
      payData: [],
      // 办理进度弹窗
      dialogProgressVisible: false,
      progressData: [],
      // 查看icon
      watchImg1: require("../../../assets/img_8.png"),
      watchImg2: require("../../../assets/img_5.png"),
      // 编辑icon
      editorImg1: require("../../../assets/img_47.png"),
      editorImg2: require("../../../assets/img_46.png"),
      // 收款icon
      payImg1: require("../../../assets/img_26.png"),
      payImg2: require("../../../assets/img_27.png"),
      // 进度icon
      proImg1: require("../../../assets/img_14.png"),
      proImg2: require("../../../assets/img_13.png"),
      // 合同icon
      conImg1: require("../../../assets/img_16.png"),
      conImg2: require("../../../assets/img_17.png")
    };
  },
  methods: {
    // 操作
    // 划过单元格
    enterTable(row, column, cell, event) {
      row.isShowIcon = false;
    },
    leaveTable(row, column, cell, event) {
      row.isShowIcon = true;
    },
    // 选择 顶层4个选项
    choiceNow(item) {
      for (let obj of this.topList) {
        if (item.id == obj.id) {
          item.choice = !item.choice;
        } else {
          obj.choice = false;
        }
      }
      // 1：处理时长  2：财务催款  3：资质待审核  4：资质未通过
      switch (item.id) {
        case 1:
          if (item.choice) {
            this.pastMonth = "1";
            this.payValue = this.timeValue = "";
          } else {
            this.pastMonth = "";
          }
          break;
        case 2:
          if (item.choice) {
            this.payValue = "3";
            this.pastMonth = this.timeValue = "";
          } else {
            this.payValue = "";
          }
          break;
        case 3:
          if (item.choice) {
            this.timeValue = "1";
            this.pastMonth = this.payValue = "";
          } else {
            this.timeValue = "";
          }
          break;
        case 4:
          if (item.choice) {
            this.timeValue = "3";
          } else {
            this.pastMonth = this.payValue = this.timeValue = "";
          }
          break;
      }
      // 获取客户信息
      this.getCustomerInfor();
    },
    //   更改表头样式
    changeTitle({ row, rowIndex }) {
      return "color:#333;font-size:16px;background:#c8c8c8!important";
    },
    // 查看客户信息
    toWatch(row) {
      this.$router.push({
        path: "/watchClient",
        query: {
          id: row.id
        }
      });
    },
    // 查看合同
    checkContract(row) {
      // 获取合同
      this.getContract(row.id);
      this.dialogContractVisible = true;
    },
    // 获取合同
    getContract(id) {
      console.log(id);
      let url = "/api/client/detail";
      let params = {
        id: id
      };
      post(url, params).then(res => {
        this.contractList = res.contract_files;
        console.log(this.contractList);
      });
    },
    // 查看付款记录
    checkPay(row) {
      this.dialogPayVisible = true;
      let url = "/api/client/money_log";
      let params = {
        id: row.id
      };
      post(url, params).then(res => {
        this.payData = res;
      });
    },
    // 办理进度弹窗
    checkProgress(row) {
      this.dialogProgressVisible = true;
      let url = "/api/client/schedule_log";
      let params = {
        id: row.id
      };
      post(url, params).then(res => {
        this.progressData = res;
      });
    },
    // 去编辑
    toEditor(row) {
      // 选择填空
      let choiceObj = {};
      for (let obj of JSON.parse(row.question_answer)) {
        choiceObj[obj.setting_question_id] = obj.answer;
      }
      localStorage.setItem("choicedAnswer", JSON.stringify(choiceObj));
      // 文件上传
      let uploadObj = {};
      for (let obj of JSON.parse(row.upload_question_answer)) {
        for (let secObj of obj.answer) {
          secObj.showIcon = false;
        }
        uploadObj[obj.setting_question_id] = obj.answer;
      }
      localStorage.setItem("uploadAnswer", JSON.stringify(uploadObj));
      // 城市ID
      localStorage.setItem("countryId", row.country_id);
      // 个人信息
      let formLabelChinese = {};
      formLabelChinese["name"] = row.name;
      formLabelChinese["gender"] = row.gender;
      formLabelChinese["card_number"] = row.card_number;
      formLabelChinese["passport_number"] = row.passport_number;
      formLabelChinese["nation"] = row.country;
      formLabelChinese["phone"] = row.mobile;
      formLabelChinese["first_name"] = row.first_name;
      formLabelChinese["middle_name"] = row.middle_name;
      formLabelChinese["last_name"] = row.last_name;
      formLabelChinese["postCode"] = row.postcode;
      formLabelChinese["add1"] = row.address1;
      formLabelChinese["add2"] = row.address2;
      formLabelChinese["add3"] = row.address3;
      localStorage.setItem("formMsg", JSON.stringify(formLabelChinese));
      this.$router.push({ path: "/evaluteOne" });
    },

    // 获取当前页码 跳页
    getSonPage(data) {
      this.page = data;
      this.getCustomerInfor();
    },
    // 获取客户信息
    getCustomerInfor() {
      let url = "/api/client/index";
      let params = {
        keyword: this.keyword,
        user_status: this.customerValue,
        audit_status: this.timeValue,
        agreement_status: this.currencyValue,
        pay_status: this.payValue,
        past_month: this.pastMonth,
        page: this.page
      };
      post(url, params).then(res => {
        for (let obj of res.list) {
          obj.isShowIcon = true;
        }
        this.allPages = res.total_page;
        this.tableData = res.list;
        // 客户总数
        this.totalCustomer = res.total;
      });
    }
  },
  mounted() {
    this.getCustomerInfor();
  },
  components: {
    Pagation
  },
  computed: {}
};
</script>
<style>
/* 合同弹窗 */
.contract_dialog .el-dialog {
  margin-top: 45vh !important;
}
.contract_dialog .el-dialog__header {
  display: none;
}
.contract_dialog .el-dialog__body {
  padding: 0 !important;
}
</style>
<style scoped>
@import url("../../../style/clientIndex.css");
/* 合同弹窗 */
/* 头部 */
.dialog_title_contract {
  color: #fff;
  background-color: #526aa6;
  padding-left: 30px;
  height: 40px;
  line-height: 40px;
  text-align: left;
  font-size: 18px;
}
/* 合同列表 */
.contract_list_wrap {
  padding: 20px 30px;
  background-color: #fff;
}
.contrast_list_single {
  margin-bottom: 20px;
  text-align: left;
}
.contrast_list_single a {
  color: #003cff;
  font-size: 14px;
}
/* 关闭按钮 */
.contract_btn {
  text-align: right;
}

.btn_back {
  width: 120px;
  height: 38px;
  text-align: center;
  line-height: 38px;
  color: #666;
  font-size: 20px;
  border: 1px solid #999;
  border-radius: 3px;
  float: right;
}
/* 付款记录弹窗 */
.pay_table_wrap {
  padding: 11px;
}
/* 表格 */
.pay_table_record {
  margin-bottom: 30px;
}
.color_record {
  color: #003cff;
}
/* 异常状态 */
.red_color {
  color: #00c317;
}
.green_color {
  color: #008000;
}
</style>