<template>
  <div class="d-page d-flex flex-column">
    <title-bar :title="title">
      <van-icon slot="left" name="cross" size="24" />
    </title-bar>
    <div class="deal-with-top">
      <div>
        <svg class="icon iconsex" aria-hidden="true">
          <use xlink:href="#icon-gongsimingcheng"></use>
        </svg>
      </div>
      <div>{{ cusomerName }}</div>
    </div>
    <div v-if="this.dayMark == '0'" class="formData">
      <van-form @submit="onPersdata">
        <sub-title>本次实际营销情况</sub-title>
        <div class="doubleRow dataStyle">
          <mobile-input label="实际营销人员:" :border="false" name="UPD_USER" v-model="UPD_USER" size="small"></mobile-input>
          <mobile-input type="digit" label="添加微信户数(人):" :rules="[{ required: true, message: '' }]" placeholder="请输入添加微信户数" name="marketingdata.addWechats" v-model="marketingdata.addWechats" size="small"></mobile-input>
          <mobile-input type="digit" label="随意分申请户数(人):" :rules="[{ required: true, message: '' }]" placeholder="请输入随意分申请户数" name="marketingdata.syfApplicants" v-model="marketingdata.syfApplicants" size="small"></mobile-input>
          <mobile-input type="digit" label="优易贷预授信新增户数(人):" :rules="[{ required: true, message: '' }]" placeholder="请输入优易贷预授信新增户数" name="marketingdata.yydApplicants" v-model="marketingdata.yydApplicants" size="small"></mobile-input>
          <mobile-input type="digit" label="优易贷激活户数(人):" :rules="[{ required: true, message: '' }]" placeholder="请输入优易贷激活户数" name="marketingdata.yydUsecounts" v-model="marketingdata.yydUsecounts" size="small"></mobile-input>
          <mobile-input type="number" label="全口径消贷投放(万):" :rules="[{ required: true, message: '' }]" placeholder="请输入全口径消贷投放" name="marketingdata.fullCal" v-model="marketingdata.fullCal" size="small"></mobile-input>
          <mobile-input :border="true" :rules="[{ required: true, message: '' }]" placeholder="请输入" label="地址:" type="textarea" :maxlength="200" :rows="3" label-width="10px" input-align="left" name="marketAddr" v-model="marketingdata.marketAddr" size="small" />
        </div>
        <sub-title>随手礼</sub-title>
        <div class="doubleRow">
          <mobile-input v-for="(item, index) in sysDictDetails" :key="index + 'a'" type="digit" :label="item.detailMark + ':'" placeholder="请输入" name="item.datanum" v-model="item.datanum" size="small"></mobile-input>
        </div>
        <div style="width: 80%;margin: 0 auto">
          <div class="add" @click="addSSLData('0')">+新增</div>
          <div :v-if="SSLListData.length > 0" v-for="(item, index) of SSLListData" :key="index">
            <div style="font-size: 14px;font-weight: bold;margin-left: 10px">随手礼{{ index + 1 }}:</div>
            <div class="addInput">
              <mobile-input label="随手礼名称:" :rules="[{ required: true, message: '' }]" placeholder="请输入随手礼名称" name="MARK" v-model="item.MARK" size="small"></mobile-input>
              <mobile-input type="digit" label="随手礼数量:" :rules="[{ required: true, message: '' }]" placeholder="请输入随手礼数量" name="KHJLZJ" v-model="item.KHJLZJ" size="small"></mobile-input>
            </div>
          </div>
        </div>
        <div class="operate">
          <van-button round type="info" size="normal">保存</van-button>
        </div>
      </van-form>
    </div>
    <div v-if="this.dayMark == '1'" class="formData">
      <sub-title>本次实际营销情况</sub-title>
      <div>
        <table-double-view :data="dataBasic" :keyValue="keyValueDouble"></table-double-view>
      </div>
      <sub-title>随手礼</sub-title>
      <div v-if="readonly && sysDictDetails.length <= 0" class="formData" style="width: 80%;margin: 0 1px;text-align: center;font-size: 14px;color: #999999">
        暂无数据!
      </div>
      <div v-if="readonly && sysDictDetails.length > 0" class="SSLDataStyle">
        <div class="SSLDataStyleDisplay" v-for="(item, index) in sysDictDetails" :key="index + 'b'">
          <div>{{ item.giftDes }}：</div>
          <div>{{ item.giftCount }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import TitleBar from "@/components/general/TitleBar.vue";
import { Tab, Tabs } from "vant";
import nettyApi from "@/constants/api/ms-netty/netty.api.ts";
import IF from "@/public/factory/InterFaceFactory";
import { NativeUI } from "@/public/ts/NativeUI";
import { DatetimePicker } from "vant";
import applicationApi from "@/constants/api/ms-application/application.api";
import systemApi from '@/constants/api/ms-system/system.api';
import Public from "@/public/ts/Public";
import { TabData } from "@/model/entity/TabData";

Vue.use(DatetimePicker);

Vue.use(Tab);
Vue.use(Tabs);
/**
 * @Description 营销详情
 * @Author JiangTao
 * @Date 2021-11-10 下午 03:51
 */
@Component({
  name: "JHDBDetail",
})
export default class JHDBDetail extends Vue {
  title = "营销详情"; // 页面标题
  cusomerName = this.$store.getters.getCusInfo.customerName || ''; //客户名称

  UPD_USER = sessionStorage.getItem('userName') || ''; //实际营销人员
  readonly = true; //判断是否可输入
  dis = true;
  SSLListData:any[] = [];
  keyValueDouble = {
    exeUserName: "实际营销人员",
    addWechats: "添加微信户数(人)",
    syfApplicants: "随意分申请户数(人)",
    yydApplicants: "优易贷预授信新增户数(人)",
    yydUsecounts: "优易贷激活户数(人)",
    fullCal: "全口径消贷投放(万)",
    marketAddr: "地址",
  };
  dataBasic = {};
  marketingdata = {};
  giftInfo:any[] = [];
  giftInfodata = {
    taskNum: this.$store.getters.getCusInfo.taskNum
  };
  maxlength = 25;
  cancelReson = ''; //作废原因

  ret_code = '';
  shouFlag = '0'; //退回和作废弹窗显示判断
  show = false; //退回和作废弹窗显示判断
  dictId = ''; //随手礼数据字典查询id
  sysDictDetails: any = []; //随手礼
  dayMark = '';
  loan: any = {
    MARK: '', //新增随手礼名称
    KHJLZJ: '', //新增随手礼数量
    taskNum: this.$store.getters.getCusInfo.taskNum,
  };


  mounted() {
    this.SSLListData = [];
    this.dayMark = this.$route.params.type;
    if (this.dayMark == '0') {
      this.readonly = false;
      this.taskDetail().then(() => {
        this.QueryNoPageDict().then(() => {
          if (this.dictId) {
            this.SearchSysDictInfoByid().then(() => {
              NativeUI.closeWaiting();
            });
          } else {
            NativeUI.closeWaiting();
          }
        });
      });
    } else if (this.dayMark == '1') {
      this.readonly = true;
      this.dataBasic = this.$route.params.data;
      if ((this.$route.params.data as any).giftRels && (this.$route.params.data as any).giftRels.length > 0) {
        if ((this.$route.params.data as any).giftRels.length == 1 && (this.$route.params.data as any).giftRels[0].giftType == null) {
          this.sysDictDetails = [];
        } else {
          this.sysDictDetails = (this.$route.params.data as any).giftRels;
        }
      }
      this.marketingdata = this.$route.params.data;
    }
  }
  /**
   * 新增随手礼
   */
  addSSLData() {
    // 随手礼
    let loan: any = {
      MARK: '', //新增随手礼名称
      KHJLZJ: '', //新增随手礼数量
      taskNum: this.$store.getters.getCusInfo.taskNum,
    };
    this.SSLListData.push(loan);
  }

  /**
   * @Description 营销任务处理详情查询
   * @Author JiangTao
   * @Date 2022-01-10 下午 07:41
   */
  taskDetail() {
    this.marketingdata = {};
    let param = {
      tc: 'MCEP'
    };
    let query = {
      taskNum: this.$store.getters.getCusInfo.taskNum,
      tc: 'MCEP'
    };
    NativeUI.showWaiting('查询中...');
    return IF.transferDataInter(applicationApi.taskDetail, param, query).then((res: any) => {
      if (res.code == '1') {
        if (res.data && res.data != 'null') {
          this.marketingdata = res.data;
          if ((this.marketingdata as any).marketGift && (this.marketingdata as any).marketGift.length > 0 ) {
            for (let i = 0; i < (this.marketingdata as any).marketGift.length; i++) {
              if ((this.marketingdata as any).marketGift[i].giftType == 'KHJLZJ') {
                let loan = {
                  MARK: (this.marketingdata as any).marketGift[i].giftDes, //新增随手礼名称
                  KHJLZJ: (this.marketingdata as any).marketGift[i].giftCount, //新增随手礼数量
                  taskNum: this.$store.getters.getCusInfo.taskNum,
                };
                this.SSLListData.push(loan);
              }
            }
          }
        }
      } else {
        NativeUI.toast(res.msg);
      }
    });
  }
  /**
   * @Description 随手礼数据字典查询
   * @Author JiangTao
   * @Date 2022-01-10 下午 05:16
   */
  QueryNoPageDict() {
    let param = {
      dictFieldLike: 'gift-config'
    };
    NativeUI.showWaiting('查询中...');
    return IF.transferDataInter(systemApi.QueryNoPageDict, param).then((res: any) => {
      if (res.code == '1') {
        if (typeof res.data == 'string') {
          res.data = JSON.parse(res.data);
        }
        // this.dictId = JSON.parse(res.data)[0].dictId;
        this.dictId = res.data[0].dictId;
      } else {
        NativeUI.toast(res.msg);
      }
    });
  }
  /**
   * @Description 随手礼数据字典详情查询
   * @Author JiangTao
   * @Date 2022-01-10 下午 05:16
   */
  SearchSysDictInfoByid() {
    let query = {
      dictId: this.dictId,
      tc: 'MCEP'
    };
    NativeUI.showWaiting('查询中...');
    return IF.transferDataInter(systemApi.SearchSysDictInfoByid, {}, query).then((res: any) => {
      if (res.code == '1') {
        if (res.data != null && res.data.sysDictDetails && res.data.sysDictDetails.length != 0) {
          this.sysDictDetails = res.data.sysDictDetails;
          if (this.sysDictDetails.length > 0) {
            for (let i = 0; i < this.sysDictDetails.length; i++) {
              if ((this.marketingdata as any).marketGift) {
                for (let j = 0; j < (this.marketingdata as any).marketGift.length; j++) {
                  if ((this.sysDictDetails as any)[i].dictValue == (this.marketingdata as any).marketGift[j].giftType) {
                    this.$set(this.sysDictDetails[i], 'datanum', (this.marketingdata as any).marketGift[j].giftCount);
                  }
                }
              }
              if (!(this.sysDictDetails[i] as any).datanum) {
                this.$set(this.sysDictDetails[i], 'datanum', '');
              }
              this.giftInfodata = { taskNum: (this.$store.getters.getCusInfo as any).taskNum };
              this.$set(this.giftInfodata, (this.sysDictDetails as any)[i].dictValue, '');
              this.$set(this.giftInfodata, 'MARK', (this.sysDictDetails as any)[i].detailMark);
              this.giftInfo = this.giftInfo.concat((this.giftInfodata as any));
            }
          }
        }
      } else {
        NativeUI.toast(res.msg);
      }
    });
  }
  /**
   * @Description 保存
   * @Author JiangTao
   * @Date 2022-01-19 下午 02:24
   */
  onPersdata() {
    this.onPers().then(() => {
      this.updateMarketTaskSingle(3);
    });
  }
  //保存
  onPers() {
    for (let i = 0; i < this.sysDictDetails.length; i++) {
      for (let j = 0; j < this.giftInfo.length; j++) {
        if (Object.prototype.hasOwnProperty.call(this.giftInfo[j], (this.sysDictDetails as any)[i].dictValue)) {
          (this.giftInfo as any)[j][(this.sysDictDetails as any)[i].dictValue] = (this.sysDictDetails as any)[i].datanum;
        }
      }
    }
    if (this.SSLListData.length > 0) {
      for (let q = 0; q < this.SSLListData.length; q++) {
        this.giftInfo.push(this.SSLListData[q]);
      }
    }
    let param = {
      flowInfo: {
        customerId: (this.$store.getters.getCusInfo as any).customerId,
        syfApplicants: (this.marketingdata as any).syfApplicants,
        fullCal: (this.marketingdata as any).fullCal, //本次全口径消贷投放(万)
        yydApplicants: (this.marketingdata as any).yydApplicants, //本次优易贷预授信新增户数(人)
        yydUsecounts: (this.marketingdata as any).yydUsecounts, //本次优易贷提用户数(人)
        addWechats: (this.marketingdata as any).addWechats, //本次添加微信户数(人)
        marketAddr: (this.marketingdata as any).marketAddr,
        marketerId: sessionStorage.getItem('workcode'),
        updUser: this.UPD_USER,
        tasknum: this.$store.getters.getCusInfo.taskNum
      },
      giftInfo: this.giftInfo,
      tc: 'MCEP'
    };
    NativeUI.showWaiting('保存中...');
    return IF.transferDataInter(applicationApi.resloveTask, param).then((res: any) => {
      NativeUI.closeWaiting();
      if (res.code == '1') {
        this.show = true;
        this.shouFlag = '1';
      } else if (res.code != '1') {
        NativeUI.toast(res.msg);
      }
    });
  }
  /**
   * @Description 提交/修改任务状态——1-待分发 2-待营销，3-营销中，4-已完成，5-撤回、6作废
   * @Author JiangTao
   * @Date 2022-01-11 下午 04:07
   */
  updateMarketTaskSingle(taskStatus: any) {
    let param = {
      cancelReson: this.cancelReson,
      taskNum: this.$store.getters.getCusInfo.taskNum,
      taskStatus: taskStatus
    };
    NativeUI.showWaiting('提交中...');
    return IF.transferDataInter(applicationApi.updateMarketTaskSingle, param).then((res: any) => {
      NativeUI.closeWaiting();
      if (res.code != '1') {
        NativeUI.toast(res.msg);
      } else if (res.code == '1') {
        NativeUI.toast("保存成功!");
      }
    });
  }
}
</script>

<style scoped>
.deal-with-top {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 1% 1.5%;
  border-bottom: 1px solid #efefef;
  background-color: #fffafa;
  z-index: 2000;
}
.deal-with-top > div:nth-child(2) {
  margin-left: 1%;
  margin-right: 2%;
  padding-top: 5px;
  font-size: 129%;
  line-height: 30px;
  font-weight: bold;
}
.iconsex {
  width: 35px;
  height: 35px;
}
.formData {
  width: 90%;
  margin: 0 auto;
  height: calc(100vh - 130px);
  overflow-y: auto;
}
::v-deep .van-field__label {
  width: 136px;
  text-align: right;
}
::v-deep .van-field__value {
  display: flex;
  align-items: center;
}
.doubleRow {
  display: grid;
  width: 80%;
  grid-template-columns: 50% 50%;
  margin: 0 auto;
}
::v-deep .van-field__body {
  width: 93%;
}
.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;
}
.SSLDataStyle {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
  justify-content: center;
}
.SSLDataStyleDisplay {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
  justify-content: center;
}
.SSLDataStyleDisplay > div:nth-child(1) {
  text-align: right;
  color: #999999;
}
.SSLDataStyleDisplay > div {
  font-size: 16px;
}
.SSLDataStyleDisplay {
  margin: 8px 0;
}
.add {
  width: 10%;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  border: 1px solid #FF574C;
  color: #FF574C;
  margin: 10px 20px;
  border-radius: 5px;
}
.addInput {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
  justify-content: center;
}
.dataStyle > div:nth-child(7) {
  grid-column-start: 1;
  grid-column-end: 3;
}
::v-deep .van-field__body {
  width: 100%;
}
</style>