<template>
  <div>
    <van-form v-if="taskStatus == '1'" ref="MarkSubmit" @submit="onSubmit">
      <sub-title>营销详情</sub-title>
<!--      <button @click="taskStatusData = '2'">提交</button>-->
      <table style="width: 90%; margin: 2% auto">
        <tr>
          <td>
            <mobile-input :border="false" label="最晚到期借据产品名称:" :readonly="true" label-width="10px" input-align="left" name="zwdqJjCpmc" v-model="zwdqJjCpmc" size="small" />
          </td>
          <td>
            <mobile-input :border="false" type="number" label="最晚到期借据金额(元):" :readonly="true" label-width="10px" input-align="left" name="zwdqJjJe" v-model="zwdqJjJe" size="small" />
          </td>
        </tr>
        <tr>
          <td>
            <mobile-input :border="false" label="最晚到期借据到期日期:" :readonly="true" label-width="10px" input-align="left" name="zwdqJjDqrq" v-model="zwdqJjDqrq" size="small" />
          </td>
          <td>
            <div class="choice">
              <div class="choice-title">本年是否续贷:</div><span style="font-size: 20px;color: red;width: 18px">*</span>
              <div class="choice-flag">
                <div :style="bnSfXd_yes_style" @click="bnSfXd_yes">是</div>
                <div :style="bnSfXd_no_style" @click="bnSfXd_no">否</div>
              </div>
            </div>
          </td>
        </tr>
        <tr v-if="bxdJtYyExhibition">
          <td>
            <d-select label="续贷业务类型:" :rules="[{ required: true, message: '' }]" placeholder="请选择续贷业务类型" :required="true" border="true" v-model="xdYwLx" sfield="xdYwLx"  size="small"></d-select>
          </td>
          <td>
            <mobile-input label="续贷金额(元):" :rules="[{ required: true, message: '' }]" placeholder="请输入续贷金额" :required="true" @blur.native.capture="xdJeData" type="number" label-width="10px" input-align="left" name="xdJe" v-model="xdJe" size="small" />
          </td>
        </tr>
        <tr v-if="bxdJtYyExhibition">
          <td>
            <d-select label="担保方式:" :rules="[{ required: true, message: '' }]" placeholder="请选择担保方式" :required="true" border="true" v-model="dbFs" sfield="dbFs"  size="small"></d-select>
          </td>
          <td>
            <div class="choice">
              <div class="choice-title">续贷业务是否属普惠贷款:</div><span style="font-size: 20px;color: red;width: 18px;margin-top: -5%">*</span>
              <div class="choice-flag">
                <div :style="xdYwSfPhdk_yes_style" @click="xdYwSfPhdk_yes">是</div>
                <div :style="xdYwSfPhdk_no_style" @click="xdYwSfPhdk_no">否</div>
              </div>
            </div>
          </td>
        </tr>
        <tr v-if="bxdJtYyExhibition">
          <td>
            <d-select label="续贷审批权限:" :rules="[{ required: true, message: '' }]" placeholder="请选择续贷审批权限" :required="true" border="true" v-model="xdSpQx" sfield="xdSpQx"  size="small"></d-select>
          </td>
          <td>
            <d-select label="续贷业务进度:" :rules="[{ required: true, message: '' }]" placeholder="请选择续贷业务进度" :required="true" border="true" v-model="xdYwJd" sfield="xdYwJd"  size="small"></d-select>
          </td>
        </tr>
        <tr v-if="!bxdJtYyExhibition">
          <td colspan="2">
            <mobile-input label="不续贷具体原因:" class="remarks" :rules="[{ required: true, message: '' }]" :required="true" type="textarea" :maxlength="500" :rows="3" label-width="10px" input-align="left" name="bxdJtYy" v-model="bxdJtYy" placeholder="请输入" size="small" />
          </td>
        </tr>
      </table>
      <div class="operate">
        <button @click="taskStatusData = '1'">保存</button>
      </div>
    </van-form>
    <table-double-view v-if="taskStatus == '2'" :keyValue="keyValueDouble" :data="dataBasic"></table-double-view>
    <table-single-view v-if="taskStatus == '2' && this.dataBasic.bnSfXd == '否'" :keyValue="keyValueSingle" :data="dataBasic"></table-single-view>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Emit, Prop } from "vue-property-decorator";
import { NativeUI } from "@/public/ts/NativeUI";
import IF from "@/public/factory/InterFaceFactory";
import applicationApi from "@/constants/api/ms-application/application.api";
import TableDoubleView from "@/public/TableDoubleView.vue";
import TableSingleView from "@/public/TableSingleView.vue";
import { getText } from '@/stores';
/**
 * @Description 营销详情
 * @Author JiangTao
 * @Date 2022-02-14 上午 09:38
 */
@Component({
  name: "SMEMarketingDetail",
  components: { TableDoubleView, TableSingleView },
})
export default class SMEMarketingDetail extends Vue {
  @Prop() submitClick: (() => void) | undefined; //触发保存并提交事件
  taskNum = ""; //任务编号
  cusId = ""; //客户号
  cusName = ""; //客户名称
  certCode = ""; //证件号码
  certType = ""; //证件类型
  zwdqJjCpmc = ""; //最晚到期借据产品名称
  zwdqJjJe = ""; //最晚到期借据金额
  zwdqJjDqrq = ""; //最晚到期借据到期日期
  cusType = ""; //客户类型
  bnSfXd = ""; //本年是否续贷
  xdYwSfPhdk = ""; //续贷业务是否属普惠贷款
  xdSpQx = ""; //续贷审批权限
  xdYwLx = ""; //续贷业务类型
  xdJe = ""; //续贷金额
  dbFs = ""; //担保方式
  xdYwJd = ""; //续贷业务进度
  bxdJtYy = ""; //不续贷具体原因
  taskStatus = ""; //任务状态
  taskStatusData = ""; //任务状态
  bnSfXd_yes_style = {};
  bnSfXd_no_style = {};
  xdYwSfPhdk_yes_style = {};
  xdYwSfPhdk_no_style = {};

  bxdJtYyExhibition = true; //不续贷具体原因显示
  keyValueDouble: any = {}
  keyValueSingle = {
    bxdJtYy: '不续贷具体原因'
  }
  dataBasic = {
    zwdqJjCpmc: this.zwdqJjCpmc,
    zwdqJjJe: this.zwdqJjJe,
    zwdqJjDqrq: this.zwdqJjDqrq,
    cusType: this.cusType,
    bnSfXd: this.bnSfXd,
    xdYwSfPhdk: this.xdYwSfPhdk,
    xdSpQx: this.xdSpQx,
    xdYwLx: this.xdYwLx,
    xdJe: this.xdJe,
    dbFs: this.dbFs,
    xdYwJd: this.xdYwJd,
    bxdJtYy: this.bxdJtYy
  }
  activated() {
    this.initSaveSubmit();
    console.log(this.$store.getters.getCusInfo);
    this.zwdqJjCpmc = this.$store.getters.getCusInfo.zwdqJjCpmc || ""; //最晚到期借据产品名称
    this.zwdqJjJe = this.$store.getters.getCusInfo.zwdqJjJe || ""; //最晚到期借据金额
    this.zwdqJjDqrq = this.$store.getters.getCusInfo.zwdqJjDqrq || ""; // 最晚到期借据到期日期
    this.cusType = this.$store.getters.getCusInfo.cusType || ""; //客户类型
    this.bnSfXd = this.$store.getters.getCusInfo.bnSfXd || ""; //本年是否续贷
    this.xdYwSfPhdk = this.$store.getters.getCusInfo.xdYwSfPhdk || ""; // 续贷业务是否属普惠贷款
    this.xdSpQx = this.$store.getters.getCusInfo.xdSpQx || ""; //续贷审批权限
    this.xdYwLx = this.$store.getters.getCusInfo.xdYwLx || ""; //续贷业务类型
    this.xdJe = this.$store.getters.getCusInfo.xdJe || ""; //续贷金额
    this.dbFs = this.$store.getters.getCusInfo.dbFs || "";   //担保方式
    this.xdYwJd = this.$store.getters.getCusInfo.xdYwJd || "";  // 续贷业务进度
    this.bxdJtYy = this.$store.getters.getCusInfo.bxdJtYy || "";  //不续贷具体原因
    this.taskStatus = this.$store.getters.getCusInfo.taskStatus || "";  //任务状态
    if (this.taskStatus == '1') {
      if(this.bnSfXd == '2') {
        this.bnSfXd_no();
      } else {
        this.bnSfXd_yes();
      }
      if(this.xdYwSfPhdk == '2') {
        this.xdYwSfPhdk_no();
      } else {
        this.xdYwSfPhdk_yes();
      }
    } else if (this.taskStatus == '2') {
      this.dataExhibition();
    }
  }

  mounted() {
    this.initSaveSubmit();
    console.log(this.$store.getters.getCusInfo);
    this.zwdqJjCpmc = this.$store.getters.getCusInfo.zwdqJjCpmc || ""; //最晚到期借据产品名称
    this.zwdqJjJe = this.$store.getters.getCusInfo.zwdqJjJe || ""; //最晚到期借据金额
    this.zwdqJjDqrq = this.$store.getters.getCusInfo.zwdqJjDqrq || ""; // 最晚到期借据到期日期
    this.cusType = this.$store.getters.getCusInfo.cusType || ""; //客户类型
    this.bnSfXd = this.$store.getters.getCusInfo.bnSfXd || ""; //本年是否续贷
    this.xdYwSfPhdk = this.$store.getters.getCusInfo.xdYwSfPhdk || ""; // 续贷业务是否属普惠贷款
    this.xdSpQx = this.$store.getters.getCusInfo.xdSpQx || ""; //续贷审批权限
    this.xdYwLx = this.$store.getters.getCusInfo.xdYwLx || ""; //续贷业务类型
    this.xdJe = this.$store.getters.getCusInfo.xdJe || ""; //续贷金额
    this.dbFs = this.$store.getters.getCusInfo.dbFs || "";   //担保方式
    this.xdYwJd = this.$store.getters.getCusInfo.xdYwJd || "";  // 续贷业务进度
    this.bxdJtYy = this.$store.getters.getCusInfo.bxdJtYy || "";  //不续贷具体原因
    this.taskStatus = this.$store.getters.getCusInfo.taskStatus || "";  //任务状态
    if (this.taskStatus == '1') {
      if(this.bnSfXd == '2') {
        this.bnSfXd_no();
      } else {
        this.bnSfXd_yes();
      }
      if(this.xdYwSfPhdk == '2') {
        this.xdYwSfPhdk_no();
      } else {
        this.xdYwSfPhdk_yes();
      }
    } else if (this.taskStatus == '2') {
      this.dataExhibition();
    }
  }
  /**
   * @Description 初始化提交方法
   * @Author JiangTao
   * @Date 2022-02-17 下午 10:08
   */
  @Emit("update:submitClick")
  initSaveSubmit(): any {
    return () => {
      //函数体
      this.taskStatusData = '2';
      (this.$refs.MarkSubmit as any).submit();
    };
  }
  xdJeData() {
    if ((this as any).xdJe < 0) {
      this.xdJe = '';
    }
  }
  dataExhibition() {
    this.dataBasic = this.$store.getters.getCusInfo;
    console.log(this.dataBasic.xdSpQx == "1");

    this.dataBasic.xdSpQx = getText(this.dataBasic.xdSpQx, 'xdSpQx');
    this.dataBasic.xdYwLx = getText(this.dataBasic.xdYwLx, 'xdYwLx');
    this.dataBasic.dbFs = getText(this.dataBasic.dbFs, 'dbFs');
    this.dataBasic.xdYwJd = getText(this.dataBasic.xdYwJd, 'xdYwJd');
    if (this.dataBasic.bnSfXd == "1") {
      this.keyValueDouble = {
        zwdqJjCpmc: '最晚到期借据产品名称',
        zwdqJjJe: '最晚到期借据金额(元)',
        zwdqJjDqrq: '最晚到期借据到期日期',
        bnSfXd: '本年是否续贷',
        xdYwLx: '续贷业务类型',
        xdJe: '续贷金额(元)',
        dbFs: '担保方式',
        xdYwSfPhdk: '续贷业务是否属普惠贷款',
        xdSpQx: '续贷审批权限'
      }
    } else if (this.dataBasic.bnSfXd == "2") {
      this.keyValueDouble = {
        zwdqJjCpmc: '最晚到期借据产品名称',
        zwdqJjJe: '最晚到期借据金额',
        zwdqJjDqrq: '最晚到期借据到期日期',
        bnSfXd: '本年是否续贷'
      }
    }
    this.dataBasic.bnSfXd = this.dataBasic.bnSfXd == "" ? "": (this.dataBasic.bnSfXd == "1" ? "是": "否");
    this.dataBasic.xdYwSfPhdk = this.dataBasic.xdYwSfPhdk == "" ? "": (this.dataBasic.xdYwSfPhdk == "1" ? "是": "否");
    console.log(this.dataBasic);
  }
  //续贷业务是否属普惠贷款
  xdYwSfPhdk_yes() {
    this.xdYwSfPhdk = '1';
    this.xdYwSfPhdk_yes_style = {
      'border': '0',
      'background-color': '#FF574C',
      'color': '#fff',
    }
    this.xdYwSfPhdk_no_style = {
      'border': '1px solid #e8e8e8',
      'background-color': '#fff',
      'color': '#333333',
    }
  };
  xdYwSfPhdk_no() {
    this.xdYwSfPhdk = '2';
    this.xdYwSfPhdk_no_style = {
      'border': '0',
      'background-color': '#FF574C',
      'color': '#fff',
    }
    this.xdYwSfPhdk_yes_style = {
      'border': '1px solid #e8e8e8',
      'background-color': '#fff',
      'color': '#333333',
    }
  };
  //本年是否续贷
  bnSfXd_yes() {
    this.bnSfXd = '1';
    this.bxdJtYyExhibition = true;
    this.bnSfXd_yes_style = {
      'border': '0',
      'background-color': '#FF574C',
      'color': '#fff',
    }
    this.bnSfXd_no_style = {
      'border': '1px solid #e8e8e8',
      'background-color': '#fff',
      'color': '#333333',
    }
  };
  bnSfXd_no() {
    this.bnSfXd = '2';
    this.bxdJtYyExhibition = false;
    this.bnSfXd_no_style = {
      'border': '0',
      'background-color': '#FF574C',
      'color': '#fff',
    }
    this.bnSfXd_yes_style = {
      'border': '1px solid #e8e8e8',
      'background-color': '#fff',
      'color': '#333333',
    }
  };
  onSubmit() {
    let param = {
      taskNum: this.$store.getters.getCusInfo.taskNum, //任务编号
      cusId: this.$store.getters.getCusInfo.cusId, //客户号
      cusName: this.$store.getters.getCusInfo.cusName, //客户名称
      certCode: this.$store.getters.getCusInfo.certCode, //证件号码
      certType: this.$store.getters.getCusInfo.certType, //证件类型
      zwdqJjCpmc: this.zwdqJjCpmc, //最晚到期借据产品名称
      zwdqJjJe: this.zwdqJjJe, //最晚到期借据金额
      zwdqJjDqrq: this.zwdqJjDqrq, // 最晚到期借据到期日期
      // cusType: this.cusType, //客户类型
      employeeId:  sessionStorage.getItem('workcode'), //客户经理人力资源代码
      bnSfXd: this.bnSfXd, //本年是否续贷
      xdYwSfPhdk: this.xdYwSfPhdk, // 续贷业务是否属普惠贷款
      xdSpQx: this.xdSpQx, //续贷审批权限
      xdYwLx: this.xdYwLx, //续贷业务类型
      xdJe: this.xdJe, //续贷金额
      dbFs: this.dbFs,   //担保方式
      xdYwJd: this.xdYwJd,  // 续贷业务进度
      bxdJtYy: this.bxdJtYy,  //不续贷具体原因
      taskStatus: this.taskStatusData, // 任务状态 1未完成/2已完成
      tc: 'MCEP'
    };
    NativeUI.showWaiting('正在查询...');
    IF.transferDataInter(applicationApi.updateMarketZxxdVisitTask, param).then((res: any) => {
      NativeUI.closeWaiting();
      if (res.code == '1') {
        if (this.taskStatusData == "1") {
          NativeUI.toast("保存成功!");
        } else if (this.taskStatusData == "2") {
          NativeUI.toast("提交成功!");
          setTimeout(() => {
            this.$router.go(-1);
          }, 2500);
        }
      } else {
        NativeUI.toast(res.msg);
      }
    });
  }
}
</script>

<style scoped>
.marketing-direction,
.purpose-of-visit,
.visitor {
  display: flex;
  align-items: center;
}
.marketing-direction > div:nth-child(1),
.purpose-of-visit > div:nth-child(1),
.visitor > div:nth-child(1) {
  width: 13%;
  text-align: right;
  color: #999999;
  padding-right: 1%;
}
.marketing-direction-label,
.purpose-of-visit-label,
.visitor-label {
  width: 80%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}
.marketing-direction-label > *,
.purpose-of-visit-label > *,
.visitor-label > * {
  width: 20%;
  font-size: 13px;
  padding-top: 1.1%;
  padding-bottom: 0.7%;
  border-radius: 5px;
  text-align: center;
  background-color: #f2f2f2;
  border: 1px solid rgba(215, 215, 215, 1);
  margin: 0.7% 1%;
}
::v-deep .d-form-field,
::v-deep .van-field__label {
  text-align: right;
  font-size: 14px;
}
::v-deep .van-field__label {
  width: 94px;
  padding-right: 6px !important;
}
table tr td {
  width: 50%;
}
.video-material-left > div:nth-child(1) {
  width: 6%;
}
.video-material-left > div:nth-child(2) {
  font-size: 16px;
  color: #000000;
  font-family: "Arial Normal", "Arial";
}
.video-material-left > div:nth-child(3) {
  font-size: 14px;
  color: #999999;
  font-family: "Arial Normal", "Arial";
}
::v-deep .van-cell::after {
  border: 0;
}
::v-deep .van-field__value {
  display: flex;
  align-items: center;
}
::v-deep .van-field__body {
  width: 100%;
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}
.operate {
  width: 100%;
  display: flex;
  justify-content: center;
}
.operate button {
  width: 20.5%;
  border-radius: 30px;
  font-size: 18px;
  padding: 1% 0;
  margin: 1%;
  outline: none;
}
.operate > button:nth-child(1) {
  color: white;
  background-color: #FF574C;
  border: 1px solid #FF574C;
}
.choice {
  background-color: white;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 0 14px 21px;
}
.choice-title {
  width: 89px;
  font-size: 14px;
  color: #999999;
  text-align: right;
}
.choice-flag {
  display: flex;
  justify-content: flex-end;
}
.choice-flag div {
  width: 60px;
  border: 1px solid #e8e8e8;
  font-size: 13px;
  height: 34px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.choice-flag > div:nth-child(1) {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
.choice-flag > div:nth-child(2) {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}
</style>