<template>
  <div>
    <van-form @submit="onSubmit">
      <table>
        <tr>
          <td>
            <mobile-input label="营销人员:" :readonly="true" :border="false" label-width="10px" input-align="left" name="USERID" v-model="USERID" size="small" />
          </td>
          <td>
            <mobile-input label="营销时间:" :readonly="true" :border="false" label-width="10px" input-align="left" name="OPERATEDATE" v-model="OPERATEDATE" size="small" />
          </td>
        </tr>
        <tr>
          <td>
            <mobile-input label="客户类型:" :readonly="true" :border="false" label-width="10px" input-align="left" name="CUSTOMERTYPE" v-model="CUSTOMERTYPE" size="small" />
          </td>
          <td>
            <mobile-input label="客户名称:" :readonly="true" :border="false" label-width="10px" input-align="left" name="CUSTOMERNAME" v-model="CUSTOMERNAME" size="small" />
          </td>
        </tr>
        <tr>
          <td>
            <mobile-input label="单位名称:" :readonly="true" :border="false" label-width="10px" input-align="left" name="COMPANYNAME" v-model="COMPANYNAME" size="small" />
          </td>
          <td>
            <mobile-input label="联系电话:" :readonly="true" :border="false" label-width="10px" input-align="left" name="TELPHONE" v-model="TELPHONE" size="small" />
          </td>
        </tr>
        <tr>
          <td colspan="2">
            <div class="marketing-direction">
              <div class="marketing-type">营销产品:</div><span style="font-size: 20px;color: red">*</span>
              <div class="marketing-direction-label">
                <div @click="marketing_direction_1" :style="md1">随意分</div>
                <div @click="marketing_direction_2" :style="md2">优易贷</div>
                <div @click="marketing_direction_3" :style="md3">综合消费贷款</div>
                <div @click="marketing_direction_4" :style="md4">综合消费分期</div>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td>
            <div class="choice">
              <div class="choice-title">是否添加微信:</div><span style="font-size: 20px;color: red;width: 18px">*</span>
              <div class="choice-flag">
                <div ref="ISWECHAT_yes" @click="ISWECHAT_yes">是</div>
                <div ref="ISWECHAT_no" @click="ISWECHAT_no">否</div>
              </div>
            </div>
          </td>
          <td>
            <d-datetime-picker label="下次任务生成日期:" :rules="[{ required: true, message: '' }]" v-model="NEXTTASKDATE" placeholder="请选择下次任务生成日期" :border="true" :required="true"></d-datetime-picker>
          </td>
        </tr>
        <tr>
          <td>
            <d-select label="营销结果:" :rules="[{ required: true, message: '' }]" placeholder="请选择客户类型" :required="true" border="true" v-model="TASKRESULT" sfield="TelMarketingResult"  size="small"></d-select>
          </td>
        </tr>
        <tr>
          <td colspan="2" class="table-imput-style">
            <mobile-input label="备注:" class="remarks" type="textarea" :maxlength="500" :rows="3" label-width="10px" input-align="left" name="RESULTDESCRIBE" v-model="RESULTDESCRIBE" placeholder="请输入" size="small" />
          </td>
        </tr>
        <tr>
          <td colspan="2">
            <div class="operate">
              <van-button round type="info" size="normal">保存</van-button>
            </div>
          </td>
        </tr>
      </table>
    </van-form>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import TitleBar from "@/components/general/TitleBar.vue";
import MobileInput from "@/components/general/form/MobileInput.vue";
import DSelect from "@/components/general/form/DSelect.vue";
import DDatetimePicker from "@/components/general/form/DDatetimePicker.vue";
import IF from "@/public/factory/InterFaceFactory";
import { NativeUI } from "@/public/ts/NativeUI";
import { getText } from '@/stores';
import nettyApi from "@/constants/api/ms-netty/netty.api.ts";
/**
 * @Description:电话营销
 * @author pd
 * @date 2021-11-08 15:53:04
 */
@Component({
  name: "DoingMarketByPhone",
  components: { TitleBar, MobileInput, DSelect, DDatetimePicker },
})
export default class DoingMarketByPhone extends Vue {
  CERTID = this.$store.getters.getCusInfo.CERTID || ''; //身份证
  COMPANYADD = this.$store.getters.getCusInfo.COMPANYADD || ''; //地址
  USERID = this.$store.getters.getCusInfo.OPERATEUSERID || ''; //营销人员
  OPERATEDATE = this.$store.getters.getCusInfo.OPERATEDATE || ''; //营销时间
  CUSTOMERTYPE = ''; //客户类型
  CUSTOMERNAME = this.$store.getters.getCusInfo.CUSTOMERNAME || ''; //客户名称
  COMPANYNAME = this.$store.getters.getCusInfo.COMPANYNAME || ''; //单位名称
  TELPHONE = this.$store.getters.getCusInfo.TELPHONE || ''; //联系电话
  CstNm = ''; //无用
  PRODUCTID = ''; //营销产品
  ISWECHAT = ''; //是否添加微信 1是/2否
  NEXTTASKDATE = ''; //下次任务生成日期
  TASKRESULT = ''; //营销结果
  RESULTDESCRIBE = ''; //备注
  NULLIFYREASON = ''; //作废原因
  REMARK = ''; //退回原因
  SYF_data = '0'; //随意分
  YYD_data = '0'; //优易贷
  DYDK_data = '0'; //综合消费抵押贷款
  XFFQ_data = '0'; //综合消费分期
  onClick() {
    console.log("111");
  }
  radio: any = "1";
  src = require("../../assets/svg/red-subscript.svg");
  s = {
    backgroundColor: "#fff4f6",
    border: "1px solid #fd5065",
    color: "#fd5065",
    backgroundImage: `url("${this.src}")`,
    backgroundRepeat: "no-repeat",
    backgroundPosition: "right bottom",
  };
  //营销产品
  md1: any = {};
  md2: any = {};
  md3: any = {};
  md4: any = {};

  marketing_direction_1() {
    if (this.md1 === this.s) {
      this.SYF_data = "";
      this.md1 = {};
    } else {
      this.SYF_data = "1";
      this.md1 = this.s;
    }
  }
  marketing_direction_2() {
    if (this.md2 === this.s) {
      this.YYD_data = "";
      this.md2 = {};
    } else {
      this.YYD_data = "1";
      this.md2 = this.s;
    }
  }
  marketing_direction_3() {
    if (this.md3 === this.s) {
      this.DYDK_data = "";
      this.md3 = {};
    } else {
      this.DYDK_data = "1";
      this.md3 = this.s;
    }
  }
  marketing_direction_4() {
    if (this.md4 === this.s) {
      this.XFFQ_data = "";
      this.md4 = {};
    } else {
      this.XFFQ_data = "1";
      this.md4 = this.s;
    }
  }
  //是否添加微信
  ISWECHAT_yes() {
    this.ISWECHAT = '1';
    (this.$refs.ISWECHAT_yes as any).style.border = '0';
    (this.$refs.ISWECHAT_yes as any).style.backgroundColor = '#FF574C';
    (this.$refs.ISWECHAT_yes as any).style.color = '#fff';
    (this.$refs.ISWECHAT_no as any).style.border = '1px solid #e8e8e8';
    (this.$refs.ISWECHAT_no as any).style.backgroundColor = '#fff';
    (this.$refs.ISWECHAT_no as any).style.color = '#333333';
  };
  ISWECHAT_no() {
    this.ISWECHAT = '2';
    (this.$refs.ISWECHAT_no as any).style.border = '0';
    (this.$refs.ISWECHAT_no as any).style.backgroundColor = '#FF574C';
    (this.$refs.ISWECHAT_no as any).style.color = '#fff';
    (this.$refs.ISWECHAT_yes as any).style.border = '1px solid #e8e8e8';
    (this.$refs.ISWECHAT_yes as any).style.backgroundColor = '#fff';
    (this.$refs.ISWECHAT_yes as any).style.color = '#333333';
  };

  //提交
  onSubmit() {
    if (this.SYF_data == '1') {
      this.PRODUCTID = this.PRODUCTID + '303131,';
    }
    if (this.YYD_data == '1') {
      this.PRODUCTID = this.PRODUCTID + '140331,';
    }
    if (this.DYDK_data == '1') {
      this.PRODUCTID = this.PRODUCTID + '140111,';
    }
    if (this.XFFQ_data == '1') {
      this.PRODUCTID = this.PRODUCTID + '302121,';
    }
    if (this.PRODUCTID.length > 0 && this.TASKRESULT != '' && this.ISWECHAT != '') {
      this.PRODUCTID = this.PRODUCTID.substring(0, this.PRODUCTID.length - 1);
      this.selectYXJL();
    } else if (this.TASKRESULT != '' && this.PRODUCTID.length == 0) {
      NativeUI.toast('请选择营销产品!');
    } else if (this.TASKRESULT != '' && this.ISWECHAT == '') {
      NativeUI.toast('请选择是否添加微信!');
    }
  }
  /**
   * @Description 营销记录保存
   * @Author JiangTao
   * @Date 2021-11-29 下午 04:11
   */
  selectYXJL() {
    let param = {
      SERIALNO: this.$store.getters.getCusInfo.SERIALNO, //营销任务流水号
      TASKDATE: this.OPERATEDATE, //营销时间
      PRODUCTID: this.PRODUCTID, //营销产品
      ISTASK: '1', //业务标识
      NEXTTASKDATE: this.NEXTTASKDATE, //下次任务生成日期
      TASKRESULT: this.TASKRESULT, //营销结果
      RESULTDESCRIBE: this.RESULTDESCRIBE, //备注
      ISWECHAT: this.ISWECHAT, //是否添加微信
      tc: nettyApi.TRADE_CODE.selectGDHYXJL
    };
    NativeUI.showWaiting('正在保存...');
    return IF.transferDataInter(nettyApi.commonRq, param).then((res: any) => {
      console.log("+++", param);
      console.log("---", res);
      NativeUI.closeWaiting();
      if (res.rc == '1') {
        NativeUI.toast("保存成功!");
        setTimeout(() => {
          this.$router.go(-1);
        }, 2500);
      } else {
        NativeUI.toast(res.msg);
      }
    });
  }
  //重置数据
  resetData() {
    this.md1 = {};
    this.md2 = {};
    this.md3 = {};
    this.md4 = {};
    this.SYF_data = '0'; //随意分
    this.YYD_data = '0'; //优易贷
    this.DYDK_data = '0'; //综合消费抵押贷款
    this.XFFQ_data = '0'; //综合消费分期
    (this.$refs.ISWECHAT_no as any).style.border = '1px solid #e8e8e8';
    (this.$refs.ISWECHAT_no as any).style.backgroundColor = '#fff';
    (this.$refs.ISWECHAT_no as any).style.color = '#333333';
    (this.$refs.ISWECHAT_yes as any).style.border = '1px solid #e8e8e8';
    (this.$refs.ISWECHAT_yes as any).style.backgroundColor = '#fff';
    (this.$refs.ISWECHAT_yes as any).style.color = '#333333';
    this.ISWECHAT = "";
    this.NEXTTASKDATE = "";
    this.TASKRESULT = "";
    this.RESULTDESCRIBE = "";
  }
  activated() {
    this.resetData();
  }
  mounted() {
    this.resetData();
    this.CUSTOMERTYPE = getText(this.$store.getters.getCusInfo.CUSTOMERTYPE, 'TelMarketingCustomerType');
  }
}
</script>

<style scoped>
.marketing-type {
  width: 6.2em;
  color: #999999;
  font-size: 14px;
  text-align: right;
}
.marketing-direction {
  display: flex;
  align-items: center;
  padding: 0 14px 21px 14px;
}
.marketing-direction-label {
  width: 80%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}
.marketing-direction-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 .van-field__label {
  text-align: right;
}
::v-deep .d-form-field,
::v-deep .van-field {
  align-items: center;
}
.operate {
  width: 100%;
  display: flex;
  justify-content: center;
}
.operate button {
  width: 20.5%;
  border-radius: 30px;
  font-size: 18px;
  padding: 1% 0;
  margin: 1%;
}
.operate > button:nth-child(1) {
  color: white;
  background-color: #FF574C;
  border: 1px solid #FF574C;
}
::v-deep .van-button__text {
  font-size: 18px;
}
.choice {
  background-color: white;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 0 14px 21px 14px;
}
.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;
}
table {
  width: 90%;
  margin: 0 auto;
}
::v-deep .table-imput-style > div:nth-child(1) .van-field {
  align-items: flex-start;
}
</style>