<template>
  <div>
    <title-bar title="新增营销计划" @clickLeft="onClick">
      <van-icon slot="left" name="cross" size="24" />
    </title-bar>
    <div class="formdata">
      <van-form @submit="onSubmit">
        <div class="v-list d-page d-scroll-container doubleRow">
          <mobile-input label="单位名称:" label-width="10px" input-align="left" :rules="[{ required: true, message: '' }]" placeholder="请输入单位名称" :required="true" name="customerName" v-model="customerName" size="small" />
          <div class="choice">
            <div class="choice-title">是否优易贷入库:<span style="font-size: 20px;color: red">*</span></div>
            <div class="choice-flag">
              <div ref="isYydInstore_yes" @click="isYydInstore_yes">是</div>
              <div ref="isYydInstore_no" @click="isYydInstore_no">否</div>
            </div>
          </div>
          <div class="choice">
            <div class="choice-title">是否代发:<span style="font-size: 20px;color: red">*</span></div>
            <div class="choice-flag">
              <div ref="isReplace_yes" @click="isReplace_yes">是</div>
              <div ref="isReplace_no" @click="isReplace_no">否</div>
            </div>
          </div>
          <d-select label="渠道类型:" :rules="[{ required: true, message: '' }]" placeholder="请选择渠道类型" :required="true" border="true" v-model="cerType" sfield="cerType"  size="small"></d-select>
          <mobile-input label="营销机构:" label-width="10px" input-align="left" name="coreName" :readonly="true" v-model="coreName" size="small" />
          <mobile-input label="营销人员:" label-width="10px" input-align="left" name="exeUser" :readonly="true" v-model="exeUser" size="small" />
          <d-datetime-picker label="预计营销时间:" :rules="[{ required: true, message: '' }]" placeholder="请选择预计营销时间" v-model="estimatedMarketTime" :border="true" :required="true"></d-datetime-picker>
          <mobile-input label="预计全口径消费投放(万):" :rules="[{ required: true, message: '' }]" placeholder="请输入预计全口径消费投放" label-width="10px" input-align="left" :required="true" name="expectedFull" v-model="expectedFull" size="small" />
          <d-select label="营销方式:" :rules="[{ required: true, message: '' }]" placeholder="请选择营销方式" :required="true" border="true" v-model="marketMode" sfield="marketMode"  size="small"></d-select>
          <mobile-input label="管户人:" label-width="10px" input-align="left" name="holdManagerName" v-model="holdManagerName" size="small" />
          <mobile-input label="客户地址:" :rules="[{ required: true, message: '' }]" type="textarea" :maxlength="200" :required="true" :rows="3" label-width="10px" input-align="left" name="cusAddr" v-model="cusAddr" placeholder="请输入客户地址" size="small" />
        </div>
        <div class="formbutton">
          <van-button round type="default" size="normal">取消</van-button>
          <van-button round type="info" size="normal" color="rgba(253, 80, 101, 1)">确定</van-button>
        </div>
      </van-form>
      <base-popup v-model="flagPopup" title="营销选择">
        <div class="popup-content">
        </div>
      </base-popup>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import TitleBar from "@/components/general/TitleBar.vue";
import BasePopup from "@/components/general/BasePopup.vue";
import { Grid, GridItem } from "vant";
import MobileInput from "@/components/general/form/MobileInput.vue";
import IncomeInformation from "@/components/customer-information/family-financial-information/IncomeInformation.vue";
import DSelect from "@/components/general/form/DSelect.vue";
import DDatetimePicker from "@/components/general/form/DDatetimePicker.vue";
import { NativeUI } from "@/public/ts/NativeUI";
import IF from "@/public/factory/InterFaceFactory";
import applicationApi from '@/constants/api/ms-application/application.api';
Vue.use(Grid);
Vue.use(GridItem);
/**
 * @Description 新建营销计划
 * @Author JiangTao
 * @Date 2022-02-12 下午 02:48
 */
@Component({
  name: "AddMarketPlan",
  components: {
    IncomeInformation,
    TitleBar,
    MobileInput,
    DSelect,
    DDatetimePicker,
    BasePopup
  },
})
export default class AddMarketPlan extends Vue {
  customerName = ''; //客户名称
  cerType = ''; //渠道类型
  isYydInstore = '1'; //是否优易贷入库
  coreName = sessionStorage.getItem('ORGNAME'); //参考网点
  marketMode = ''; //营销方式
  isReplace = '1'; //是否代发
  holdManagerName = ''; //管户人
  expectedFull = ''; //预计全口径消费投放
  exeUser = sessionStorage.getItem('userName'); //营销人员
  estimatedMarketTime = ''; //预计营销时间
  cusAddr = ''; //客户地址
  flagPopup = false;
  title = '新增营销任务';
  currentDate2 = new Date();
  minDate2 = new Date();
  maxDate2 = new Date(new Date().getFullYear() + 20, 1, 1);
  //是否优易贷入库
  isYydInstore_yes() {
    this.isYydInstore = '1';
    (this.$refs.isYydInstore_yes as any).style.border = '0';
    (this.$refs.isYydInstore_yes as any).style.backgroundColor = '#FF574C';
    (this.$refs.isYydInstore_yes as any).style.color = '#fff';
    (this.$refs.isYydInstore_no as any).style.border = '1px solid #e8e8e8';
    (this.$refs.isYydInstore_no as any).style.backgroundColor = '#fff';
    (this.$refs.isYydInstore_no as any).style.color = '#333333';
  };
  isYydInstore_no() {
    this.isYydInstore = '2';
    (this.$refs.isYydInstore_no as any).style.border = '0';
    (this.$refs.isYydInstore_no as any).style.backgroundColor = '#FF574C';
    (this.$refs.isYydInstore_no as any).style.color = '#fff';
    (this.$refs.isYydInstore_yes as any).style.border = '1px solid #e8e8e8';
    (this.$refs.isYydInstore_yes as any).style.backgroundColor = '#fff';
    (this.$refs.isYydInstore_yes as any).style.color = '#333333';
  };
  //是否代发
  isReplace_yes() {
    this.isReplace = '1';
    (this.$refs.isReplace_yes as any).style.border = '0';
    (this.$refs.isReplace_yes as any).style.backgroundColor = '#FF574C';
    (this.$refs.isReplace_yes as any).style.color = '#fff';
    (this.$refs.isReplace_no as any).style.border = '1px solid #e8e8e8';
    (this.$refs.isReplace_no as any).style.backgroundColor = '#fff';
    (this.$refs.isReplace_no as any).style.color = '#333333';
  };
  isReplace_no() {
    this.isReplace = '2';
    (this.$refs.isReplace_no as any).style.border = '0';
    (this.$refs.isReplace_no as any).style.backgroundColor = '#FF574C';
    (this.$refs.isReplace_no as any).style.color = '#fff';
    (this.$refs.isReplace_yes as any).style.border = '1px solid #e8e8e8';
    (this.$refs.isReplace_yes as any).style.backgroundColor = '#fff';
    (this.$refs.isReplace_yes as any).style.color = '#333333';
  };
  onClick() {
    console.log("111");
  }
  mounted() {
    this.isYydInstore = '1';
    (this.$refs.isYydInstore_yes as any).style.border = '0';
    (this.$refs.isYydInstore_yes as any).style.backgroundColor = '#FF574C';
    (this.$refs.isYydInstore_yes as any).style.color = '#fff';
    (this.$refs.isYydInstore_no as any).style.border = '1px solid #e8e8e8';
    (this.$refs.isYydInstore_no as any).style.backgroundColor = '#fff';
    (this.$refs.isYydInstore_no as any).style.color = '#333333';
    this.isReplace = '1';
    (this.$refs.isReplace_yes as any).style.border = '0';
    (this.$refs.isReplace_yes as any).style.backgroundColor = '#FF574C';
    (this.$refs.isReplace_yes as any).style.color = '#fff';
    (this.$refs.isReplace_no as any).style.border = '1px solid #e8e8e8';
    (this.$refs.isReplace_no as any).style.backgroundColor = '#fff';
    (this.$refs.isReplace_no as any).style.color = '#333333';
  };
  onSubmit() {
    let param = {
      customerName: this.customerName,
      cerType: this.cerType,
      isYydInstore: this.isYydInstore,
      marketMode: this.marketMode,
      isReplace: this.isReplace,
      holdManagerName: this.holdManagerName,
      expectedFull: this.expectedFull,
      exeUser: this.exeUser,
      estimatedMarketTime: this.estimatedMarketTime,
      cusAddr: this.cusAddr,
      tc: 'MCEP'
    };
    NativeUI.showWaiting('正在查询...');
    IF.transferDataInter(applicationApi.AddMarketing, param).then((res: any) => {
      NativeUI.closeWaiting();
      if (res.code != '1') {
        NativeUI.toast(res.msg);
      } else {
        this.flagPopup = true;
      }
    });
  }
}
</script>

<style scoped>
.doubleRow {
  display: grid;
  width: 80%;
  grid-template-columns: 50% 50%;
  margin: 0 auto;
}
.doubleRow > div:nth-child(11) {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 6;
  grid-row-end: 7;
}
.choice {
  background-color: white;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 0.7rem 1rem;
}
.choice-title {
  width: 116px;
  font-size: 14px;
  color: #999999;
  text-align: right;
  margin-right: 7px;
}
.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;
}
::v-deep .d-form-field {
  padding: 0.7rem 1rem;
}
::v-deep .van-field__label {
  width: 110px !important;
  text-align: right;
}
.formdata {
  height: calc(100vh - 60px);
  padding-top: 3%;
  overflow-y: auto;
}
::v-deep .formdata form{
  width: 95%;
}
.formbutton {
  display: flex;
  align-items: center;
  justify-content: center;
}
::v-deep .formbutton button {
  width: 150px;
  margin: 10px 30px;
}
::v-deep .d-form-field .van-field__label {
  font-size: 14px !important;
}
</style>