<template>
  <div id="marketingqueryId" class="content">
    <div class="search">
      <mobile-input label-width="10px" :reset="resetvalue" input-align="left" name="searchContent" v-model="searchContent" placeholder="请输入关键字" size="small" />
      <div style="width: 200px; display: flex;justify-content: space-evenly;align-items: self-start">
        <van-button color="#FF574C" type="primary" @click="screen" plain style="width: 70px;height: 34px" size="small">筛选</van-button>
        <van-button color="#FF574C" type="primary" @click="selectGDYXJHCX(1)" style="width: 70px;height: 34px" size="small">查询</van-button>
      </div>
      <van-popup class="screenPopup" v-model="show" position="top" :style="{ height: '40%' }" >
        <div class="searchStyle">
          <mobile-input label="客户名称" label-width="10px" :reset="resetvalue" input-align="left" name="searchContent" v-model="searchContent" placeholder="请输入关键字" size="small" />
<!--          <d-select placeholder="请选择" label="任务状态" :value="TASKSTATUS" border="true" v-model="TASKSTATUS" size="small"></d-select>-->
          <d-select placeholder="请选择" label="营销人员" :value="OPERATEUSERID" border="true" v-model="OPERATEUSERID" sfield="CONTACTMETHOD" size="small"></d-select>
          <d-select placeholder="请选择" label="营销机构" :value="OPERATEORGID" border="true" v-model="OPERATEORGID" sfield="COLLECTIONLEVEL" size="small"></d-select>
        </div>
        <div class="screenbutton">
          <van-button color="#FF574C" type="primary" @click="selectGDYXJHCX(1)" style="width: 100px;height: 50px;display: block" size="small">查询</van-button>
          <van-button color="#FF574C" type="primary" @click="reset" plain style="width: 100px;height: 50px;display: block" size="small">重置</van-button>
        </div>
      </van-popup>
    </div>
    <div class="Managementdata">
      <scroller-view v-if="nodata" v-calculate-height :pulldown="pulldown" :pullup="pullup" :refresh-data="onrefreshdata" :load-data="onloaddata">
        <div v-for="(item, index) in itemDataList" :key="index" class="customer-bottom-list">
          <div @click="selectTelMarketingDetail(item)">
            <div class="customer-bottom-list-top">
              <div>
                <span style="color: #FF574C">{{ index + 1}}</span>
              </div>
              <div>{{ item.CUSTOMERNAME }}</div>
              <div class="labelData">{{ item.CUSTOMERTYPE }}</div>
            </div>
            <div class="customer-bottom-list-bottom">
              <div>单位名称：{{ item.COMPANYNAME }}</div>
            </div>
          </div>
          <div>
            <van-button v-if="item.TASKSTATUS === '03'" @click="onReturn(item)" round color="#FF574C" type="primary" plain style="width: 90%;height: 34px" size="small">退回</van-button>
          </div>
          <div>
            <van-button v-if="item.TASKSTATUS === '03'" @click="onVoid(item)" round color="#FF574C" type="primary" plain style="width: 90%;height: 34px" size="small">作废</van-button>
          </div>
          <div>
            <van-button v-if="item.TASKSTATUS === '03'" @click="shortMessage(item)" round color="#FF574C" type="primary" plain style="width: 90%;height: 34px" size="small">发送营销短信</van-button>
          </div>
        </div>
      </scroller-view>
      <van-form>
        <base-popup :safe-area-inset-bottom="true" showCancel="true" showConfirm="true" @confirm="sendOut" :confirmText="confirmText" v-model="flagPopup" title="发送营销短信">
          <div class="popup-content">
            <div v-if="!dataPreview" class="popup-data">
              <div>{{ popupName }}</div>
              <mobile-input label="客户电话" :readonly="true" type="rel" label-width="10px" :border="false" input-align="left" name="popupTEL" v-model="popupTEL" size="small" />
              <d-select :getContainer="getContainer" label="短信类型" :rules="[{ required: true, message: '' }]" placeholder="请选择短信类型" :required="true" border="true" v-model="shortMessage_type" sfield="SendMessageCode" size="small"></d-select>
              <mobile-input label="经理电话" maxlength="11" :rules="[{ required: true, message: '' }]" type="rel" label-width="10px" :required="true" input-align="left" name="managerTEL" v-model="managerTEL" placeholder="请输入经理电话" size="small" />
            </div>
            <div v-if="dataPreview" class="popup-data">
              <div>请确认短信内容</div>
              <div class="shortMessageContent">{{ information }}</div>
            </div>
          </div>
        </base-popup>
        <base-popup :safe-area-inset-bottom="true" showCancel="true" showConfirm="true" @confirm="onSure" confirmText="提交" v-model="flagPopupOnReturn" :title="showtitle">
          <div class="popup-content">
            <d-select :getContainer="getContainer" label="退回原因" :rules="[{ required: true, message: '' }]" placeholder="请选择退回原因" :required="true" border="true" v-model="REMARK" sfield="TelTaskBackReason" size="small"></d-select>
          </div>
        </base-popup>
        <base-popup :safe-area-inset-bottom="true" showCancel="true" showConfirm="true" @confirm="onSure" confirmText="提交" v-model="flagPopupOnVoid" :title="showtitle">
          <div class="popup-content">
            <d-select :getContainer="getContainer" label="作废原因" :rules="[{ required: true, message: '' }]" placeholder="请选择作废原因" :required="true" border="true" v-model="NULLIFYREASON" sfield="DhyxRefuse" size="small"></d-select>
          </div>
        </base-popup>
      </van-form>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue} from "vue-property-decorator";
import { Search } 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 { Popup } from 'vant';
import { getText } from '@/stores';
import BasePopup from "@/components/general/BasePopup.vue";
import systemApi from '@/constants/api/ms-system/system.api';

Vue.use(Popup);

Vue.use(Search);
/**
 * @Description 电话营销
 * @Author JiangTao
 * @Date 2022-01-18 下午 04:06
 */
@Component({
  name: "MarketingQuery",
  components: { BasePopup },
})
export default class MarketingQuery extends Vue {
  title = '营销查询';
  flagPopup = false;
  flagPopupShow = false;
  showtitle = "";
  flagPopupOnReturn = false; //退回
  flagPopupOnVoid = false; //作废
  REMARK = ""; //退回原因
  NULLIFYREASON = ""; //作废原因
  itemDataList = [];
  searchContent = ''; //搜索内容
  TASKSTATUS = ""; //任务状态
  OPERATEUSERID = ""; //营销人员
  OPERATEORGID = ""; //营销机构
  sfield = "";
  itemData = "";
  resetvalue = false;
  pageNo = 1;
  pullup = true;
  pulldown = true;
  nodata = true;
  dataPreview = false; //短信预览

  popupName = "";
  popupTEL = "";
  show = false;

  shortMessage_type = ""; //短信类型
  managerTEL = '12345678901'; //经理电话
  confirmText = "预览";
  information = ""; //短信内容
  ORGNAME: any = sessionStorage.getItem('ORGNAME');
  getContainer = `#marketingqueryId`;
  QUERYFLAG = '';

  //重置功能
  reset() {
    this.show = false;
    this.searchContent = '';
    this.resetvalue = true;
    this.selectGDYXJHCX(1);
  }
  sendOut() {
    if(this.confirmText == "发送") {
      this.subConfirm();
    } else if(this.confirmText == "预览") {
      if (this.shortMessage_type != "") {
        this.ShortMessageSelect().then(() => {
          NativeUI.closeWaiting();
          this.dataPreview = true;
          this.confirmText = "发送"
        });
      }
    }
  }
  /**
   * @Description 筛选
   * @Author JiangTao
   * @Date 2022-01-18 下午 04:16
   */
  screen() {
    this.show = true;
  }
  /**
   * @Description 电话营销详情
   * @Author JiangTao
   * @Date 2022-01-29 上午 11:02
   */
  selectTelMarketingDetail(item: any) {
    this.$store.commit("setEmpty");
    this.$store.commit("setCusInfo", item);
    this.$router.push({
      path: "/MarketingTask",
      query: {
        type: '待办详情',
      }
    });
    // this.$router.push({
    //   path: "/TelMarketingDetail",
    // });
  }
  /**
   * @Description 发送短信
   * @Author JiangTao
   * @Date 2022-01-28 下午 09:02
   */
  subConfirm() {
    this.flagPopup = false;
    this.confirmText = "预览"
    this.sendPersonalCustInfo().then(() => {
      setTimeout(() => {
        this.selectGDYXJHCX(1);
      }, 2000);
    });
  }
  /**
   * @Description 短信内容查询
   * @Author JiangTao
   * @Date 2022-01-27 下午 09:11
   */
  ShortMessageSelect() {
    // this.information = "恭喜您可直接提用优质客户专属信用贷款！额度可达100万，30万内支持在线提用，利率优惠，期限长至2年！登录手机银行，点击“我的贷款”进入【优易贷】立即提款！详询成都银行${A1}，电话${C1}。";
    // this.information = this.information.replace('${A1}', this.ORGNAME);
    // this.information = this.information.replace('${C1}', this.managerTEL);
    let param = {
      itemName: this.shortMessage_type
    };
    NativeUI.showWaiting('查询中...');
    return IF.transferDataInter(systemApi.McepSwitchSelect, param).then((res: any) => {
      if (res.code == '1') {
        this.information = res.data.itemSwitch;
        this.information = this.information.replace('${A1}', this.ORGNAME);
        this.information = this.information.replace('${C1}', this.managerTEL);
      } else {
        NativeUI.toast(res.msg);
      }
    });
  }
  //短信发送this.userInfo.MOBILETELEPHONE
  sendPersonalCustInfo() {
    const param = {
      funCode: this.shortMessage_type,
      mobileNo: this.popupTEL,
      params: {
        A1: this.ORGNAME,
        C1: this.managerTEL
      },
      tc: nettyApi.TRADE_CODE.sendMessage
    };
    NativeUI.showWaiting('正在查询...');
    return IF.transferDataInter(nettyApi.commonRq, param).then((res: any) => {
      NativeUI.closeWaiting();
      if (res.rc == '1') {
        NativeUI.toast('发送成功!');
        this.shortMessage_type = '';
      }
    });
  }
  //上拉加载
  onloaddata() {
  }
  /**
   * @Description 下拉刷新
   * @Author JiangTao
   * @Date 2022-01-17 下午 05:14
   */
  onrefreshdata() {
  }
  selectGDYXJHCX(pageNo = 1) {
    this.show = false;
    this.nodata = true;
    this.pulldown = true;
    this.pullup = true;
    const param = {
      CUSTOMERNAME: this.searchContent,
      TASKSTATUS: '',
      OPERATEUSERID: '',
      OPERATEORGID: '',
      org_code: sessionStorage.getItem('org_code'),
      QUERYFLAG: this.QUERYFLAG,
      page_count: '10',
      page_size: pageNo,
      tc: nettyApi.TRADE_CODE.selectGDYXJHCX
    };
    NativeUI.showWaiting('正在查询...');
    return IF.transferDataInter(nettyApi.commonRq, param).then((res: any) => {
      console.log('状态',this.QUERYFLAG);
      NativeUI.closeWaiting();
      if (res.rc == '1') {
        if (res.ARRAY && res.ARRAY.length > 0) {
          if (pageNo == 1) {
            this.itemDataList = res.ARRAY;
          } else {
            this.itemDataList = this.itemDataList.concat(res.ARRAY);
          }
          for (let i = 0; i < this.itemDataList.length; i++) {
            (this.itemDataList[i] as any).CUSTOMERTYPE = getText((this.itemDataList[i] as any).CUSTOMERTYPE, 'TelMarketingCustomerType');
          }
        } else {
          if (pageNo == 1) {
            this.itemDataList = [];
          }
        }
      } else {
        NativeUI.toast(res.msg);
      }
      if (res.ARRAY && res.ARRAY.length < 10) {
        this.pullup = false;
      }
      if (this.itemDataList.length == 0) {
        this.nodata = false;
        this.pulldown = false;
      }
    });
  }
  /**
   * @Description 短信数据
   * @Author JiangTao
   * @Date 2022-01-19 下午 03:13
   */
  shortMessage(item: any) {
    this.confirmText = "预览"
    this.shortMessage_type = "";
    this.dataPreview = false; //短信预览
    this.flagPopup = true;
    this.popupTEL = item.TELPHONE;
    this.popupName = item.CUSTOMERNAME;
  }
  /**
   * @Description 退回
   * @Author JiangTao
   * @Date 2022-02-16 下午 09:33
   */
  onReturn(item: any) {
    this.itemData = item;
    this.sfield = "TelTaskBackReason";
    this.flagPopupOnReturn = true;
    this.showtitle = "退回";
    this.REMARK = ""; //退回原因
  }
  /**
   * @Description 作废
   * @Author JiangTao
   * @Date 2022-02-16 下午 09:33
   */
  onVoid(item: any) {
    this.itemData = item;
    this.sfield = "DhyxRefuse";
    this.flagPopupOnVoid = true;
    this.showtitle = "作废";
    this.NULLIFYREASON = ""; //作废原因
  }
  //确定
  onSure() {
    if (this.flagPopupOnReturn) {
      if (this.REMARK != '') {
        this.marketingRet();
      }
    }
    if (this.flagPopupOnVoid) {
      if (this.NULLIFYREASON != '') {
        this.marketingVoid();
      }
    }
  }
  /**
   * @Description 营销退回
   * @Author JiangTao
   * @Date 2021-12-21 下午 06:56
   */
  marketingRet() {
    let param = {
      SERIALNO: (this.itemData as any).SERIALNO, //营销任务流水号
      REMARK: this.REMARK, //退回原因
      tc: nettyApi.TRADE_CODE.selectGDHYXTH
    };
    NativeUI.showWaiting('退回处理中...');
    IF.transferDataInter(nettyApi.commonRq, param).then((res: any) => {
      NativeUI.closeWaiting();
      this.flagPopupOnReturn = false;
      if (res.rc == '1') {
        NativeUI.toast("退回成功!");
        setTimeout(() => {
          this.selectGDYXJHCX();
        }, 2500);
      } else {
        NativeUI.toast(res.msg);
      }
    });
  }
  /**
   * @Description 营销作废
   * @Author JiangTao
   * @Date 2021-12-21 下午 02:44
   */
  marketingVoid() {
    let param = {
      SERIALNO: (this.itemData as any).SERIALNO, //营销任务流水号
      ISTASK: '2', //业务标识
      NULLIFYREASON: this.NULLIFYREASON, //作废原因
      tc: nettyApi.TRADE_CODE.selectGDHYXJL
    };
    NativeUI.showWaiting('作废处理中...');
    IF.transferDataInter(nettyApi.commonRq, param).then((res: any) => {
      NativeUI.closeWaiting();
      this.flagPopupOnVoid = false;
      if (res.rc == '1') {
        NativeUI.toast("作废成功!");
        setTimeout(() => {
          this.selectGDYXJHCX();
        }, 2500);
      } else {
        NativeUI.toast(res.msg);
      }
    });
  }
  activated() {
    this.flagPopup = false;
    this.flagPopupShow = false;
    if (sessionStorage.getItem("businessType") == "Upcoming") {
      this.QUERYFLAG = "1";
    } else if (sessionStorage.getItem("businessType") == "Common") {
      this.QUERYFLAG = "2";
    }
    this.selectGDYXJHCX();
  }
  mounted() {
    this.flagPopup = false;
    this.flagPopupShow = false;
    if (sessionStorage.getItem("businessType") == "Upcoming") {
      this.QUERYFLAG = "1";
    } else if (sessionStorage.getItem("businessType") == "Common") {
      this.QUERYFLAG = "2";
    }
    this.selectGDYXJHCX();
  }
}
</script>

<style scoped>
::v-deep .van-cell__title,
::v-deep .van-field__label {
  display: flex;
  align-items: center;
}
.content {
  width: 100%;
}
.search {
  width: 100%;
  height: 70px;
  border: 1px solid #e1e2e3;
  display: flex;
  align-items: center;
  justify-content: center;
}
::v-deep .d-form-field {
  padding-bottom: 0;
  width: 70%;
}
::v-deep .van-field__control {
  height: 30px;
}
.customer-bottom-list {
  border-radius: 10px;
  box-shadow: 0 0 6px #d7d7d7;
  margin: 0 10px 16px 10px;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.customer-bottom-list > div:nth-child(1) {
  width: 64%;
}
.customer-bottom-list > div:nth-child(2) {
  width: 8%;
  display: flex;
  justify-content: center;
}
.customer-bottom-list > div:nth-child(3) {
  width: 8%;
  display: flex;
  justify-content: center;
}
.customer-bottom-list > div:nth-child(4) {
  width: 16%;
  display: flex;
  justify-content: center;
}
.customer-bottom-list-top > div:nth-child(2) {
  font-size: 115%;
  font-weight: bold;
  font-family: "微软雅黑 Bold", "微软雅黑 Regular", "微软雅黑";
  margin-left: 0.8%;
}
.customer-bottom-list-top {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-top: 1.5%;
  margin-left: 1.5%;
}
.customer-bottom-list-top > div:nth-child(3) {
  width: auto;
  padding: 3px 7px;
  font-size: 12px;
  margin-left: 1%;
  color: #ff6e0d;
  background-color: rgba(255, 247, 204, 1);
  border-radius: 2px;
}
.customer-bottom-list-bottom {
  height: 26px;
  display: flex;
  margin: 10px 0;
  padding-left: 48px;
  justify-content: flex-start;
  align-items: center;
}
.customer-bottom-list-bottom span {
  margin-right: 30px;
}
.customer-bottom-list-top > div:nth-child(1) {
  width: 30px;
  height: 30px;
  border: 1px solid #FF574C;
  border-radius: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.customer-bottom-list-top > div:nth-child(2) {
  font-size: 16px;
  font-weight: bold;
  width: auto;
  margin: 0 10px;
}
.customer-bottom-list-top > div:nth-child(3) {
  color: #f59a23;
}
.customer-bottom-list-top {
  width: 90%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-top: 1.5%;
  margin-left: 1.5%;
}
.Managementdata {
  padding: 0 20px;
}
.screenPopup {
  width: 75%;
  margin-left: 25%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 5% 5px 5%;
  /*z-index: 99 !important;*/
}
.screenPopup > div:nth-child(1) {
  width: 85%;
  height: 100%;
}
.screenbutton {
  width: 15%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
}
::v-deep .screenbutton button {
  margin: 20px auto;
}
::v-deep .screenbutton .van-button__content {
  font-size: 18px;
}
::v-deep .van-picker {
  width: 75%;
  margin-left: 25%;
  border-top-left-radius: 15px;
}
/deep/  .van-popup--bottom .van-popup--round {
  width: 75% !important;
  margin-left: 25% !important;
}
::v-deep .van-popup--round {
  background-color: rgba(0, 0, 0, 0);
}
.searchStyle {
  display: grid;
  align-items: center;
  grid-template-columns: 1fr 1fr;
}
.searchStyle div {
  width: 90%;
}
::v-deep .scroller {
  margin-top: 10px;
}
::v-deep .van-popup--center {
  height: 50% !important;
  width: 60% !important;
  left: 62.5%;
}
.popup-data {
  width: 60%;
  height: 100%;
  margin: 0 auto;
}
::v-deep .popup-content {
  height: 100%;
  display: flex;
  align-items: center;
}
::v-deep .popup-content > div {
  width: 70%;
  margin: 0 auto;
}
::v-deep .popup-content > div > div {
  width: 100%;
}
::v-deep .popup-data .d-form-field {
  width: 100% !important;
  padding-bottom: 20px;
}
::v-deep .van-field__label {
  width: 4.5em;
}
.popup-data > div:nth-child(1) {
  font-size: 20px;
  font-weight: bold;
  padding-left: 1rem;
  margin-bottom: 5px;
}
.shortMessageContent {
  font-size: 18px;
  padding-top: 20px;
}
.labelData {
  width: auto;
  padding: 2px 5px !important;
  margin-left: 10px;
  font-size: 12px;
  color: #ff6e0d;
  background-color: #fff7cc;
  border-radius: 2px;
}
.add-button {
  position: absolute;
  width: 80px;
  height: 80px;
  border-radius: 40px;
  background-color: #ff574c;
  top: 80%;
  right: 5%;
  box-shadow: 0 5px 10px #e7aaa8;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 20px;
}
</style>
