<template>
  <div>
    <sub-title>本月实际完成情况</sub-title>
    <table-double-view :data="dataBasic" :keyValue="keyValueDouble"></table-double-view>
    <sub-title>今日营销记录</sub-title>
    <div class="markdatastyle">
      <div>今日营销记录</div>
      <div style="color: #00a3ff;font-size: 18px" @click="selectMarkDetail('0')" v-if="JSON.stringify(this.marketingdata) == '{}'">新增</div>
      <div style="color: #00a3ff;font-size: 18px" @click="selectMarkDetail('0')" v-if="JSON.stringify(this.marketingdata) != '{}'">修改</div>
    </div>
    <sub-title>历史营销记录</sub-title>
    <div v-if="PlanList.length <= 0" style="width: 100%;text-align: center;font-size: 14px;color: #999999">
      暂无数据!
    </div>
    <div v-if="PlanList.length > 0" v-for="(item, index) of PlanList" :key="index" class="markdatastyle" @click="selectMarkDetail('1', item)">
      <div>{{ item.updTimeStr }}日营销记录</div>
      <div>〉</div>
    </div>
    <base-popup :safe-area-inset-bottom="true" :showCancel="showCancel" showConfirm="true" @confirm="sendOut" :confirmText="confirmText" v-model="flagPopup" title="温馨提示">
      <div class="popup-content">
        <div v-if="dataview" class="popup-data">
          是否确认提交该营销任务！
        </div>
        <div v-if="!dataview" class="popup-data">
          提交成功！
        </div>
      </div>
    </base-popup>
  </div>
</template>

<script lang="ts">
import { Component, Emit, Prop, 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 BasePopup from "@/components/general/BasePopup.vue";
import { getText } from '@/stores';
import nettyApi from "@/constants/api/ms-netty/netty.api.ts";
import applicationApi from "@/constants/api/ms-application/application.api";
/**
 * @Description:个人上门营销
 * @author pd
 * @date 2021-11-08 15:53:04
 */
@Component({
  name: "JhdbxqView",
  components: { TitleBar, MobileInput, DSelect, DDatetimePicker, BasePopup },
})
export default class JhdbxqView extends Vue {
  @Prop() grsmyxSubmitClick: (() => void) | undefined; //触发保存并提交事件
  flagPopup = false;
  dataview = true;
  showCancel = true;
  operate = "1";
  confirmText = "提交";
  //本月实际完成情况
  keyValueDouble = {
    cus_id: '全口径消贷投放(万)',
    ENT_NAME_OLD: '随意分申请户数(人)',
    REPR_NAME: '添加微信户数(人)',
    PT_STATE: '优易贷预授信新增户数(人)',
    limittime: '优易贷提用户数(人)'
  }
  //本月实际完成情况数据
  dataBasic = {}
  marketingdata = {}
  PlanList = [] //上门营销记录

  mounted() {
    this.initSaveSubmit();
    this.PlanList = []; //上门营销记录
    this.taskDetail().then(() => {
      this.getPlanTime().then(() => {
        NativeUI.closeWaiting();
      });
    });
  }
  /**
   * @Description 初始化提交方法
   * @Author JiangTao
   * @Date 2022-02-17 下午 10:08
   */
  @Emit("update:grsmyxSubmitClick")
  initSaveSubmit(): any {
    return () => {
      //函数体
      this.flagPopup = false;
      this.dataview = true;
      this.showCancel = true;
      this.confirmText = "提交";
      this.onSubmit();
    };
  }
  /**
   * @Description 营销任务处理详情查询
   * @Author JiangTao
   * @Date 2022-01-10 下午 07:41
   */
  taskDetail() {
    this.marketingdata = {};
    const param = {
      tc: 'MCEP'
    };
    const 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;
        }
      } else {
        NativeUI.toast(res.msg);
      }
    });
  }
  /**
   * @Description 上门营销
   * @Author JiangTao
   * @Date 2022-01-12 下午 08:15
   */
  getPlanTime() {
    this.PlanList = [];
    let param = {
      taskNum: this.$store.getters.getCusInfo.taskNum,
      exeUser: sessionStorage.getItem('workcode'),
      tc: 'MCEP'
    };
    NativeUI.showWaiting('查询中...');
    return IF.transferDataInter(applicationApi.taskTimeLine, param).then((res: any) => {
      console.log(param);
      console.log('时光轴', res);
      NativeUI.closeWaiting();
      if (res.code == '1') {
        if (res.data && res.data != '' && res.data != '[]') {
          //数据
          if (res.data && res.data.length > 0) {
            this.PlanList = res.data;

            //随手礼数据
            for (let i = 0; i < this.PlanList.length; i++) {
              (this.PlanList as any)[i].updTimeStr = (this.PlanList as any)[i].updTimeStr.substring(0, 10);
              if ((this.PlanList as any)[i].giftRels && (this.PlanList as any)[i].giftRels.length > 0) {
                this.$set(this.PlanList[i], 'SSLListName', {});
                this.$set(this.PlanList[i], 'SSLListData', {});
                for (let j = 0; j < (this.PlanList as any)[i].giftRels.length; j++) {
                  this.$set(
                    (this.PlanList as any)[i].SSLListName,
                    (this.PlanList as any)[i].giftRels[j].giftType,
                    (this.PlanList as any)[i].giftRels[j].giftDes
                  );
                  this.$set(
                    (this.PlanList as any)[i].SSLListData,
                    (this.PlanList as any)[i].giftRels[j].giftType,
                    (this.PlanList as any)[i].giftRels[j].giftCount
                  );
                }
              }
            }
          }
        }
        console.log(this.PlanList);
        console.log(this.PlanList.length);
      } else {
        NativeUI.toast(res.msg);
      }
    });
  }
  /**
   * @Description 营销记录查询/营销记录新增
   * @Author JiangTao
   * @Date 2022-02-15 下午 11:04
   */
  selectMarkDetail(type: any, item:any = {}) {
    this.$router.push({
      name: 'JHDBDetail',
      params: {
        type: type, //0为当日营销记录，1为之前已营销的记录
        data: item
      }
    });
  }

  /**
   * @Description 判断是否提交
   * @Author JiangTao
   * @Date 2022-01-11 下午 04:07
   */
  onSubmit() {
    if (this.PlanList.length > 0) {
      this.flagPopup = true;
      this.dataview = true;
    } else {
      NativeUI.toast('请对该任务进行营销!');
    }
  }
  /**
   * @Description 提交/修改任务状态——1-待分发 2-待营销，3-营销中，4-已完成，5-撤回、6作废
   * @Author JiangTao
   * @Date 2022-01-11 下午 04:07
   */
  updateMarketTaskSingle(taskStatus: any) {
    let param = {
      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') {
        this.operate = '1';
      } else {
        this.operate = '2';
        NativeUI.toast(res.msg);
      }
    });
  }
  sendOut() {
    if (this.dataview) {
      this.updateMarketTaskSingle(4).then(() => {
        if (this.operate == '1') {
          this.showCancel = false;
          this.confirmText = "知道啦";
          this.dataview = false;
        }
      });
    } else {
      this.flagPopup = false;
      this.$router.go(-1);
    }
  }
}
</script>

<style scoped>
.markdatastyle {
  height: 50px;
  width: 88%;
  border-bottom: 1px solid #e0e1e2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  font-size: 16px;
}
.markdatastyle > div {
  font-size: 16px;
}
.popup-data {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
.popup-content {
  height: 100%;
}
</style>