<template>
  <div class="watch_client">
    <!-- 主体 -->
    <div class="main">
      <!-- 标题 -->
      <div class="title">我的客户</div>
      <div class="start_test_wrap">
        <!-- 客户信息 -->
        <div class="client_table">
          <!-- 标题 -->
          <div class="cus_infor_title layout align_center flex_row justify_start">
            <div class="watch_title">
              客户信息
              <span
                class="infor_status"
              >({{customerDetail.user_status == 1?"移民测评":customerDetail.user_status == 2?"资质审核":customerDetail.user_status == 3?"合同签订":customerDetail.user_status == 4?"费用交纳":customerDetail.user_status == 5?"移民办理":"结单"}})</span>
            </div>
          </div>
          <!-- 内容 -->
          <div class="client_msg clearfix">
            <div class="clearfix">
              <!-- 中文信息 -->
              <div class="ch_msg">
                <div class="ch_msg_single clearfix">
                  <div class="ch_msg_l">申请ID:</div>
                  <div class="ch_msg_r">{{customerDetail.number}}</div>
                </div>
                <div class="ch_msg_single clearfix">
                  <div class="ch_msg_l">中文姓名:</div>
                  <div class="ch_msg_r">{{customerDetail.name}}</div>
                </div>
                <div class="ch_msg_single clearfix">
                  <div class="ch_msg_l">性别:</div>
                  <div class="ch_msg_r">{{customerDetail.gender==1?"男":"女"}}</div>
                </div>
                <div class="ch_msg_single clearfix">
                  <div class="ch_msg_l">身份证号:</div>
                  <div class="ch_msg_r">{{customerDetail.card_number}}</div>
                </div>
                <div class="ch_msg_single clearfix">
                  <div class="ch_msg_l">护照号码:</div>
                  <div class="ch_msg_r">{{customerDetail.passport_number}}</div>
                </div>
                <div class="ch_msg_single clearfix">
                  <div class="ch_msg_l">国籍:</div>
                  <div class="ch_msg_r">{{customerDetail.country}}</div>
                </div>
                <div class="ch_msg_single clearfix">
                  <div class="ch_msg_l">联系方式:</div>
                  <div class="ch_msg_r">{{customerDetail.mobile}}</div>
                </div>
              </div>
              <!-- 英文信息 -->
              <div class="eg_msg">
                <div class="ch_msg_single clearfix">
                  <div class="eg_msg_l">移民国家:</div>
                  <div class="ch_msg_r">{{customerDetail.country_name}}</div>
                </div>
                <div class="ch_msg_single clearfix">
                  <div class="eg_msg_l">英文姓名:</div>
                  <div
                    class="ch_msg_r"
                  >{{customerDetail.first_name}}·{{customerDetail.middle_name}}·{{customerDetail.last_name}}</div>
                </div>
                <div class="ch_msg_single clearfix">
                  <div class="eg_msg_l">Address1:</div>
                  <div class="ch_msg_r">{{customerDetail.address1}}</div>
                </div>
                <div class="ch_msg_single clearfix">
                  <div class="eg_msg_l">Address2:</div>
                  <div class="ch_msg_r">{{customerDetail.address2}}</div>
                </div>
                <div class="ch_msg_single clearfix">
                  <div class="eg_msg_l">Address3:</div>
                  <div class="ch_msg_r">{{customerDetail.address3}}</div>
                </div>
                <div class="ch_msg_single clearfix">
                  <div class="eg_msg_l">Postcode:</div>
                  <div class="ch_msg_r">{{customerDetail.postcode}}</div>
                </div>
              </div>
            </div>

            <!-- 建议 -->
            <div class="ch_msg_single clearfix">
              <div class="ch_msg_l">移民建议:</div>
              <div class="advice_r" v-html="customerDetail.country_content"></div>
            </div>
          </div>
        </div>
        <!-- 测评信息 -->
        <div class="client_table">
          <!-- 标题 -->
          <div class="cus_infor_title layout align_center flex_row justify_start">
            <div class="watch_title">测评信息</div>
          </div>
          <!-- 内容 -->
          <div class="evalute_msg clearfix">
            <!-- 上层 -->
            <div class="evalute_msg_top layout align_end justify flex_row">
              <div class="evalute_score">
                预测分值:
                <span class="evalute_num">{{customerDetail.score}}</span>
              </div>
              <div class="evalute_month">
                预测办理时长:
                <span class="month_num">{{customerDetail.month}}</span> Months
              </div>
              <div class="evalute_time">{{customerDetail.submit_time}}</div>
            </div>
            <!-- 下层 -->
            <div class="evalute_msg_bot">
              <!-- 必填信息 第一部分 -->
              <div class="evalute_bot_first">
                <div
                  class="bot_first_single layout align_center justify_start flex_row"
                  v-for="(item,index) in customerDetail.question_answer"
                  :key="index"
                >
                  <div class="bot_first_l">{{index+1}}.{{item.question_name}}</div>
                  <div class="bot_first_r">{{item.answer}}</div>
                </div>
              </div>
              <!-- 选填信息 第二部分 -->
              <div class="evalute_bot_second">
                <div class="evalute_second_title">其他加分项</div>
                <div v-for="(item,index) in customerDetail.upload_question_answer" :key="index">
                  <div class="evalute_second_quest">{{index+1}}.{{item.setting_question_name}}</div>
                  <!-- 房产证明 -->
                  <div
                    class="evalute_property"
                    v-for="(secondItem,secondIndex) in item.answer"
                    :key="secondIndex"
                  >
                    <a
                      :href="secondItem.url"
                      target="_blank"
                      rel="noopener noreferrer"
                    >{{secondItem.file_name}}</a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 资质审核 -->
        <div class="client_table">
          <!-- 标题 -->
          <div class="cus_infor_title layout align_center flex_row justify_start">
            <div class="watch_title">
              资质审核
              <span
                class="infor_status"
              >({{customerDetail.audit_status == 0?"未提交":customerDetail.audit_status == 1?"待审核":customerDetail.audit_status == 2?"审核通过":"审核未通过"}})</span>
            </div>
          </div>
          <!-- 内容 -->
          <div class="qualify_msg clearfix">
            <div class="bot_first_single layout align_center justify_start flex_row">
              <div class="bot_first_l quality_msg_l">审核时间:</div>
              <div class="bot_first_r">{{customerDetail.audit_time}}</div>
            </div>
            <div class="bot_first_single layout align_center justify_start flex_row">
              <div class="bot_first_l quality_msg_l">审核批注:</div>
              <div class="bot_first_r">{{customerDetail.shenpi_remark}}</div>
            </div>
          </div>
        </div>
        <!-- 合同签订 -->
        <div class="client_table">
          <!-- 标题 -->
          <div class="cus_infor_title layout align_center flex_row justify_start">
            <div class="watch_title">
              合同签订
              <span
                class="infor_status"
              >({{customerDetail.agreement_status == 0?"未签订":customerDetail.agreement_status == 1?"未签订":"已签订"}})</span>
            </div>
          </div>
          <!-- 内容 -->
          <div class="qualify_msg clearfix">
            <div class="bot_first_single layout align_center justify_start flex_row">
              <div class="bot_first_l quality_msg_l">签订时间:</div>
              <div class="bot_first_r">{{customerDetail.contract_time}}</div>
            </div>
            <div class="layout flex-row">
              <div class="bot_first_l quality_msg_l">合同信息:</div>
              <div class="layout flex_diection">
                <div
                class="contrast_first_r"
                v-for="(item,index) in customerDetail.contract_files"
                :key="index"
              >
                <div class="qualify_contract">
                  <a :href="item.url" target="_blank" rel="noopener noreferrer">{{item.file_name}}</a>
                </div>
              </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 付款信息 -->
        <div class="client_table">
          <!-- 标题 -->
          <div class="cus_infor_title layout align_center flex_row justify_start">
            <div class="watch_title">
              付款信息
              <span
                class="infor_status"
              >({{customerDetail.pay_status == 0?"未开始":customerDetail.pay_status == 1?"付款中":customerDetail.pay_status == 2?"已付款":"财务催款"}})</span>
            </div>
          </div>
          <!-- 内容 -->
          <div class="qualify_msg clearfix">
            <div class="bot_first_single layout align_center justify_start flex_row">
              <div class="bot_first_l quality_msg_l">付款账户:</div>
              <div class="bot_first_r">{{customerDetail.bank_account}}</div>
            </div>
            <div class="bot_first_single layout align_center justify_start flex_row">
              <div class="bot_first_l quality_msg_l">币种:</div>
              <div class="bot_first_r">{{customerDetail.currency_name}}</div>
            </div>
            <!-- 金额 -->
            <div class="bot_first_single layout align_center justify_start flex_row">
              <!-- 移民款 -->
              <div class="immigrate_fee">
                <div class="immi_title">移民款</div>
                <div class="fee_detail">
                  <div class="immi_first_single layout align_center justify_start flex_row">
                    <div class="bot_first_l immi_msg_l">应付金额:</div>
                    <div class="bot_first_r">{{customerDetail.immigrant_total}} </div>
                  </div>
                  <div class="immi_first_single layout align_center justify_start flex_row">
                    <div class="bot_first_l immi_msg_l">已付金额:</div>
                    <div class="bot_first_r">{{customerDetail.immigrant_pay_total}} </div>
                  </div>
                  <div class="immi_first_single layout align_center justify_start flex_row">
                    <div class="bot_first_l immi_msg_l">未付金额:</div>
                    <div class="bot_first_r">{{customerDetail.immigrant_residue_total}} </div>
                  </div>
                </div>
              </div>
              <!-- 捐赠款 -->
              <div class="immigrate_fee">
                <div class="immi_title">捐赠款</div>
                <div class="fee_detail">
                  <div class="immi_first_single layout align_center justify_start flex_row">
                    <div class="bot_first_l immi_msg_l">应付金额:</div>
                    <div class="bot_first_r">{{customerDetail.donate_total}} </div>
                  </div>
                  <div class="immi_first_single layout align_center justify_start flex_row">
                    <div class="bot_first_l immi_msg_l">已付金额:</div>
                    <div class="bot_first_r">{{customerDetail.donate_pay_total}} </div>
                  </div>
                  <div class="immi_first_single layout align_center justify_start flex_row">
                    <div class="bot_first_l immi_msg_l">未付金额:</div>
                    <div class="bot_first_r">{{customerDetail.dontate_residue_total}} </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="bot_first_single">
              <div class="bot_first_l quality_msg_l">付款记录:</div>
              <div class="money_table">
                <el-table :data="tableData" border :header-row-style="changeTitle">
                  <el-table-column fixed prop="createtime" label="记录时间" align="center"></el-table-column>
                  <el-table-column fixed prop="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 prop="bank_name" label="收款账户" align="center"></el-table-column>
                  <el-table-column prop="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>
          </div>
        </div>
        <!-- 移民办理 -->
        <div class="client_table">
          <!-- 标题 -->
          <div class="cus_infor_title layout align_center flex_row justify_start">
            <div class="watch_title">
              移民办理
              <span
                class="infor_status"
              >({{customerDetail.banli_status==0?"未开始":customerDetail.banli_status==1?"办理中":"结单"}})</span>
            </div>
          </div>
          <!-- 内容 -->
          <div class="qualify_msg clearfix">
            <div class="bot_first_single layout align_center justify_start flex_row">
              <div class="bot_first_l handle_msg_l">办理剩余时间:</div>
              <div
                class="bot_first_r"
              >{{customerDetail.residue_month?customerDetail.residue_month:"-"}} {{customerDetail.residue_month == 1?"month":"months"}}</div>
            </div>
            <div class="bot_first_single layout align_center justify_start flex_row">
              <div class="bot_first_l handle_msg_l">办理结果:</div>
              <div
                class="bot_first_r"
              >{{customerDetail.result_status==0?"-":customerDetail.result_status==1?"成功":"失败"}}</div>
            </div>
            <div class="bot_first_single layout align_left justify_start flex_row">
              <div class="bot_first_l handle_msg_l">结果说明:</div>
              <div class="bot_first_r">{{customerDetail.result_remark}}</div>
            </div>
            <div class="bot_first_single">
              <div class="bot_first_l quality_msg_l">办理记录:</div>
              <div class="money_table">
                <el-table :data="secondData" border :header-row-style="changeTitle">
                  <el-table-column fixed prop="createtime" label="记录时间" align="center"></el-table-column>
                  <el-table-column fixed prop="nickname" label="记录人" align="center"></el-table-column>
                  <el-table-column property="currency_name" label="币种"  align="center"></el-table-column>
                  <el-table-column prop="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>
          </div>
        </div>
        <!-- 返回按钮 -->
        <div class="back_btn" @click="backPage()">返回</div>
      </div>
    </div>
  </div>
</template>
<script>
import { post } from "../../../api/http";
export default {
  data() {
    return {
      // 客户详情
      customerDetail: "",
      // 付款信息
      tableData: [],
      //   移民办理
      secondData: [],
      // 客户id
      customerId: ""
    };
  },
  methods: {
    //   更改表头样式
    changeTitle({ row, rowIndex }) {
      return "color:#333;font-size:16px;background:#c8c8c8!important";
    },
    // 客户详情
    getCustomerDetail() {
      let url = "/api/client/detail";
      let params = {
        id: this.customerId
      };
      post(url, params).then(res => {
        this.customerDetail = res;
      });
    },
    // 付款信息
    getPayMsg() {
      let url = "/api/client/money_log";
      let params = {
        id: this.customerId
      };
      post(url, params).then(res => {
        this.tableData = res;
      });
    },
    // 办理进度
    getProgressMsg() {
      let url = "/api/client/schedule_log";
      let params = {
        id: this.customerId
      };
      post(url, params).then(res => {
        this.secondData = res;
      });
    },
    // 返回上一页
    backPage() {
      this.$router.push({ path: "/clientIndex" });
    }
  },
  mounted() {
    this.customerId = this.$route.query.id;
    this.getCustomerDetail();
    this.getPayMsg();
    this.getProgressMsg();
  }
};
</script>
<style scoped>
@import url("../../../style/watchClient.css");
</style>