<template>
  <div class="divcls">
    <div class="item-1">
      <div class="item-title">
        常用功能
      </div>
      <div class="item-1-content">
        <div v-for="(item, index) in commonActions" :key="index" @click="onClickCommonAction(item)">
          <div style="margin-bottom: 5%"><img style="width: 5vh;" :src="item.iconName" /></div>
          <div>{{ item.name }}</div>
        </div>
      </div>
    </div>
    <div class="item-2">
      <div class="item-title">
        营销统计
      </div>
    </div>
    <div class="item-3">
      <div class="item-title">
        消息提醒
      </div>
      <div>
        <div v-if="msgCount == 0" class="message-box">暂无消息提醒</div>
        <div v-else class="message-box"><span class="red-point"></span>【{{ messageList[0].cnname }}】{{ messageList[0].RewSchemes[0].SCHEME_NAME }}
        </div>
        <div v-if="msgCount != 0" class="message-but" @click="goMessageDetail">更多&nbsp;></div>
      </div>
    </div>
    <div class="item-4">
      <div class="item-title">
        到期提示
      </div>
      <div></div>
    </div>
    <div class="item-5">
      <div class="item-title">
        待办任务
      </div>
      <div class="item-5-content">
        <div class="item-5-div1"><img style="width: 100%" src="@/assets/images/DBRW.png" alt=""></div>
        <div class="item-5-div2">
          <div v-for="(item, index) in UpcomingType" :key="index" @click="onClickUpcomingTask(index)">
            <div class="UpcomingType">
              <div>{{ item.name }}</div>
              <div>{{ item.num }}</div>
            </div>
            <div class="UpcomingImg">
              <svg v-if="(index + 1) % 6 == 1" style="width: 85%" class="icon" aria-hidden="true">
                <use xlink:href="#icon-a-896x896renwubeijing1"></use>
              </svg>
              <svg v-if="(index + 1) % 6 == 2" style="width: 85%" class="icon" aria-hidden="true">
                <use xlink:href="#icon-a-896x896renwubeijing2"></use>
              </svg>
              <svg v-if="(index + 1) % 6 == 3" style="width: 85%" class="icon" aria-hidden="true">
                <use xlink:href="#icon-a-896x896renwubeijing3"></use>
              </svg>
              <svg v-if="(index + 1) % 6 == 4" style="width: 85%" class="icon" aria-hidden="true">
                <use xlink:href="#icon-a-896x896renwubeijing4"></use>
              </svg>
              <svg v-if="(index + 1) % 6 == 5" style="width: 85%" class="icon" aria-hidden="true">
                <use xlink:href="#icon-a-896x896renwubeijing5"></use>
              </svg>
              <svg v-if="(index + 1) % 6 == 0" style="width: 85%" class="icon" aria-hidden="true">
                <use xlink:href="#icon-a-896x896renwubeijing6"></use>
              </svg>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="item-6">
      <div class="item-title">
        日程提醒
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import Upcoming from "@/components/workbench/upcoming-tasks-content/company-business/Upcoming.vue";
import Schedule from "@/components/workbench/upcoming-tasks-content/company-business/Schedule.vue";
import Information from "@/components/workbench/upcoming-tasks-content/company-business/Information.vue";
import PersonalUpcoming from "@/components/workbench/upcoming-tasks-content/personal-business/PersonalUpcoming.vue";
import { NativeUI } from "@/public/ts/NativeUI";
import systemApi from "@/constants/api/ms-system/system.api";
import IF from "@/public/factory/InterFaceFactory";
import nettyApi from "@/constants/api/ms-netty/netty.api";
import Public from "@/public/ts/Public";
import { MENU, WORKBENCH } from "@/constants/enum/menu.enum";
import applicationApi from "@/constants/api/ms-application/application.api";

/**
 * @Description 工作台
 * @Author JiangTao
 * @Date 2021-10-23 下午 06:53
 */
@Component({
  name: "WorkbenchView",
  components: { Upcoming, Schedule, Information, PersonalUpcoming }
})
export default class WorkbenchView extends Vue {
  //当前选中标签的标识符
  activeIndex = 0;
  //待办任务数
  taskCount = 0;
  //消息提醒数
  msgCount: any = 0;
  //标签主题色
  mColor = "#fd5065";
  //常用功能
  commonActions: any = [
    // {actionName: "新增面签", activeKey: "c", iconName: "", actionType: "MQGL", img: require('@/assets/images/CSGL.png')},
    // // {actionName: "网点查询", iconName: "", actionType: "WDCX"},
    // // {actionName: "辅助工具", iconName: "", actionType: "FZGJ"},
    // // {actionName: "业务查询", iconName: "", actionType: "YWCX"},
    // // {actionName: "客户体检", iconName: "", actionType: "KHTJ"},
    // {actionName: "个人催收管理", activeKey: 0, iconName: "", actionType: "CSGL", img: require('@/assets/images/CSGL.png')},
    // {actionName: "个人贷后检查", activeKey: 1, iconName: "", actionType: "DHJC", img: require('@/assets/images/DHJC.png')},
    // {actionName: "客户查询", activeKey: "a", iconName: "", actionType: "KHCX", img: require('@/assets/images/KHCX.png')},
    // {actionName: "中小营销", activeKey: 2, iconName: "", actionType: "ZXYX", img: require('@/assets/images/ZRCS.png')},
    // {actionName: "企业查询", activeKey: "b", iconName: "", actionType: "QYCX", img: require('@/assets/images/ZRCS.png')}, //暂无企业查询的icon
    // {actionName: "辅助工具", activeKey: "lc", iconName: "", actionType: "FZGJ", img: require('@/assets/images/ZRCS.png')},
  ];
  //待办任务
  UpcomingType: any = [
    // {actionName: "个人催收管理", activeKey: 0, iconName: "", actionType: "CSGL", num: 0},
    // {actionName: "个人贷后检查", activeKey: 1, iconName: "", actionType: "DHJC", num: 0},
    // {actionName: "个人电话营销", activeKey: 2, iconName: "", actionType: "DHYX", num: 0},
    // {actionName: "对公风险预警", activeKey: 3, iconName: "", actionType: "FXYJ", num: 0},
    // {actionName: "对公贷后检查", activeKey: 4, iconName: "", actionType: "DHJC", num: 0},
    // {actionName: "对公上门营销", activeKey: 5, iconName: "", actionType: "SMYX", num: 0},
    // {actionName: "个人上门营销", activeKey: 6, iconName: "", actionType: "SMYX", num: 0},
    // {actionName: "中小营销", activeKey: 7, iconName: "", actionType: "ZXYX", num: 0},
    // {actionName: "面签", activeKey: 8, iconName: "", actionType: "MQGL", num: 0},
  ];
  upcoming = true;
  schedule = false;
  information = false;

  uw: any = {
    color: "#02a7f0",
    fontWeight: "bold",
    borderBottom: "4px solid #02a7f0"
  };
  sw: any = {};
  iw: any = {};
  messageList: any[] = [];//消息提醒类别信息

  upcoming_warn() {
    this.uw = {
      color: "#02a7f0",
      fontWeight: "bold",
      borderBottom: "4px solid #02a7f0"
    };
    this.sw = {};
    this.iw = {};
    this.upcoming = true;
    this.schedule = false;
    this.information = false;
  }

  schedule_warn() {
    this.uw = {};
    this.sw = {
      color: "#02a7f0",
      fontWeight: "bold",
      borderBottom: "4px solid #02a7f0"
    };
    this.iw = {};
    this.upcoming = false;
    this.schedule = true;
    this.information = false;
  }

  information_warn() {
    this.uw = {};
    this.sw = {};
    this.iw = {
      color: "#02a7f0",
      fontWeight: "bold",
      borderBottom: "4px solid #02a7f0"
    };
    this.upcoming = false;
    this.schedule = false;
    this.information = true;
  }

  created() {
    this.queryMenuList();
  }

  mounted() {
    //角标配置需要在菜单初始化之后

    let orgCode = sessionStorage.getItem("roleSystm");
    if (orgCode === "personal") { //个人查个贷和网贷、上门营销
      this.queryNetPendingNumber();
      this.queryPersonalPendingNumber();
      this.queryPerFtfTaskCount();
    } else {
      this.queryPendingNumber();
      this.selectMsgRemind();//查询对公消息提醒信息
      this.selectMarketTaskCountPublic();
    }
  }

  /**
   * @author : zmk
   * @decsript: 常用功能
   * @time: 2022年01月18日11:33:38
   * */
  onClickCommonAction(item: any) {
    sessionStorage.setItem("businessType", "Common");
    this.$router.push({
      path: item.path,
      query: {
        menuName: item.name
      }
    });
  }

  /**
   * @Description 待办任务
   * @Author JiangTao
   * @Date 2022-01-27 下午 02:46
   */
  onClickUpcomingTask(index: any) {
    sessionStorage.setItem("businessType", "Upcoming");
    this.$router.push({
      path: "/UpcomingTask",
      query: {
        menuList: this.UpcomingType,
        activeKey: index
      }
    });
  }


  onClick(title: any) {
    if (title === 3) {
      this.$router.push({
        path: "/workbench/commonly-used/personal/business-inquiry"
      });
    } else if (title === 4) {
      this.$router.push({
        path: "/workbench/commonly-used/personal/business-inquiry"
      });
    }
  }

  business_inquiry() {
    this.$router.push({
      path: "/workbench/commonly-used/company/business-inquiry"
    });
  }

  products_recommended() {
    this.$router.push({
      path: "/workbench/products-recommended/products-recommended"
    });
  }
  queryMenuList() {
    this.UpcomingType = Public.getMenuBySuperID(MENU.GZT_SUPID.code, WORKBENCH.SECOND_ROW.name);
    this.commonActions = Public.getMenuBySuperID(MENU.GZT_SUPID.code, WORKBENCH.COMMON_FUNCTIONS.name);
    const view = Public.getMenuBySuperID(MENU.GZT_SUPID.code, WORKBENCH.COMMON_UPCOMING.name);
    sessionStorage.setItem("menuListYx", JSON.stringify(view));
    for (let data of view) {
      this.commonActions.push(data);
    }
    console.log("待办任务列表---", this.UpcomingType);
    return this.UpcomingType;
  }

  /**
   *@Description 功能描述：查询对公对待办任务数量(贷后检查和风险预警)
   *@Author XWH
   *@Date 2022/1/18 21:31
   */
  queryPendingNumber() {
    let hrCode = sessionStorage.getItem("user_code"),
      params = {
        tc: nettyApi.TRADE_CODE.queryXDPendingNumber,
        user_code: hrCode
      };
    NativeUI.showWaiting("正在查询...");
    return IF.transferDataInter(nettyApi.commonRq, params).then((res: any) => {
      NativeUI.closeWaiting();
      console.log("对公代办数量", res); //对公风险和对公贷后
      for (let i = 0; i < this.UpcomingType.length; i++) {
        //风险预警
        if (this.UpcomingType[i].menuId == MENU.RISK_WARNING.code && res.rewTaskCnt && res.rewTaskCnt != "") {
          this.UpcomingType[i].num = res.rewTaskCnt;
        } else if (this.UpcomingType[i].menuId == MENU.COMPANY_LOAN_CHECK.code && res.pspCrtChkTaskCnt && res.pspCrtChkTaskCnt != "") { //贷后检查数量
          this.UpcomingType[i].num = res.pspCrtChkTaskCnt;
        }
      }
    });
  }

  /**
   * @Description 个人上门营销统计数量
   * @Author JiangTao
   * @Date 2022-02-16 下午 05:06
   */
  queryPerFtfTaskCount() {
    const param = {
      exeUser: sessionStorage.getItem('workcode'),
      tc: 'MCEP'
    };
    NativeUI.showWaiting('正在查询...');
    return IF.transferDataInter(applicationApi.queryPerFtfTaskCount, param).then((res: any) => {
      console.log('上门营销数量', res);
      NativeUI.closeWaiting();
      this.UpcomingType[4].num = res.data;
    });
  }

  /**
   * @Description 对公上门营销统计数量
   * @Author JiangTao
   * @Date 2022-02-16 下午 05:06
   */
  selectMarketTaskCountPublic() {
    const param = {
      exeUser: sessionStorage.getItem('workcode'),
      tc: 'MCEP'
    };
    NativeUI.showWaiting('正在查询...');
    return IF.transferDataInter(applicationApi.selectMarketTaskCountPublic, param).then((res: any) => {
      console.log('对公上门营销数量', res);
      NativeUI.closeWaiting();
    });
  }

  /**
   *@Description 功能描述：查询个人待办任务数量(电话营销，贷款催收和贷后检查)
   *@Author wanghang
   *@Date 2022/2/16 15:15
   */
  queryPersonalPendingNumber() {
    let params = {
      tc: nettyApi.TRADE_CODE.selectUpcomingTasksNum
    };
    NativeUI.showWaiting("正在查询...");
    return IF.transferDataInter(nettyApi.commonRq, params).then((res: any) => {
      NativeUI.closeWaiting();
      console.log("个人代办数量", res);
      for (let i = 0; i < this.UpcomingType.length; i++) {
        //电话营销
        if (this.UpcomingType[i].menuId == MENU.TEL_MARKETING.code && res.dROWNUMTOTAL && res.dROWNUMTOTAL != "") {
          this.UpcomingType[i].num = res.dROWNUMTOTAL;
        } else if (this.UpcomingType[i].menuId == MENU.LOAN_COLLECTION_DB.code && res.kROWNUMTOTAL && res.kROWNUMTOTAL != "") { //贷款催收
          this.UpcomingType[i].num = res.kROWNUMTOTAL;
        } else if (this.UpcomingType[i].menuId == MENU.PERSONAL_LOAN_CHECK.code) { //贷后检查 包含业务类和合作项目
          this.UpcomingType[i].num = this.UpcomingType[i].num + parseInt(res.jROWNUMTOTAL) + parseInt(res.hROWNUMTOTAL);
        }
      }
    });
  }

  /**
   *@Description 功能描述：查询网贷待办任务数量(随意分面签，贷后检查(资金用途检查，消费类检查，随意分检查))
   *@Author wanghang
   *@Date 2022/2/16 15:15
   */
  queryNetPendingNumber() {
    let params = {
      tc: nettyApi.TRADE_CODE.selectNetUpcomingTasksNum
    };
    NativeUI.showWaiting("正在查询...");
    return IF.transferDataInter(nettyApi.commonRq, params).then((res: any) => {
      NativeUI.closeWaiting();
      console.log("网贷代办数量", res);
      for (let i = 0; i < this.UpcomingType.length; i++) {
        //随意分面签待办
        if (this.UpcomingType[i].menuId == MENU.FACE_SIGN.code && res.SYFSIGNNUM && res.SYFSIGNNUM != "") {
          this.UpcomingType[i].num = res.SYFSIGNNUM;
        } else if (this.UpcomingType[i].menuId == MENU.FACE_SIGN_REVIEW.code && res.SYFSIGNCHECKNUM && res.SYFSIGNCHECKNUM != "") {
          //面签复核
          this.UpcomingType[i].num = res.SYFSIGNCHECKNUM;
        } else if (this.UpcomingType[i].menuId == MENU.PERSONAL_LOAN_CHECK.code) { //贷后检查 包含业务类和合作项目
          this.UpcomingType[i].num = this.UpcomingType[i].num + parseInt(res.FUNDSCHECKNUM) + parseInt(res.CONSUMECHECKNUM) + parseInt(res.SYFLOANCHECKNUM);
        }
      }
    });
  }

  /**
   *@description: 对公消息提醒查询
   *@author: wanghang
   *@date: 2022/2/26
   */
  //查询对公消息提醒
  selectMsgRemind() {
    let param = {
      tc: nettyApi.TRADE_CODE.selectMsgRemind
    };
    NativeUI.showWaiting("正在查询...");
    return IF.transferDataInter(nettyApi.commonRq, param).then((res: any) => {
      NativeUI.closeWaiting();
      if (res.rc == "1") {
        //查到消息提醒列表
        let info: any[] = res.SchemeTypes;
        this.messageList = res.SchemeTypes;
        this.msgCount = 0;
        for (let i = 0; i < info.length; i++) {
          this.msgCount = parseInt(this.msgCount) + parseInt(info[i].RewSchemes[0].SCHEME_COUNT);
        }
      } else {
        NativeUI.toast(res.msg);
      }
    });
  }
  /**
   *@description:去到消息详情页
   *@author: wanghang
   *@date: 2022/2/26
   */
  goMessageDetail(){
    this.$router.push({
      path: '/workbench/MessageReminderView',
      // query: {
      //   messageInfo: this.messageList
      // }
    });
  }
}
</script>

<style lang="scss" scoped>
.divcls {
  width: 100%;
  height: 100%;
  background-color: #f2f2f2;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(7, 1fr);
  grid-row-gap: 12px;
  grid-column-gap: 12px;
  padding: 12px;
}

.item-1 {
  grid-column-start: 1;
  grid-column-end: 7;
  grid-row-start: 1;
  grid-row-end: 4;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.item-2 {
  grid-column-start: 7;
  grid-column-end: 9;
  grid-row-start: 1;
  grid-row-end: 5;
}

.item-3 {
  grid-column-start: 1;
  grid-column-end: 4;
  position: relative;
}

.item-4 {
  grid-column-start: 4;
  grid-column-end: 7;
}

.item-5 {
  grid-column-start: 1;
  grid-column-end: 7;
  grid-row-start: 5;
  grid-row-end: 8;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.item-6 {
  grid-column-start: 7;
  grid-column-end: 9;
  grid-row-start: 5;
  grid-row-end: 8;
}

.divcls > div {
  background-color: #fff;
  border-radius: 15px;
  padding: 15px;
}

.item-title {
  font-size: 16px;
  font-weight: bold;
}

.item-1-content {
  width: 90%;
  height: 80%;
  margin: 0 auto;
  display: grid;
  align-items: center;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(2, 45%);
  grid-row-gap: 15px;
  grid-column-gap: 10px;
}

.item-1-content > div {
  height: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}

.item-3,
.item-4 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.item-3 > div:nth-child(1),
.item-4 > div:nth-child(1) {
  color: #fd5065;
  width: 11%;
}

.item-3 > div:nth-child(2),
.item-4 > div:nth-child(2) {
  width: 87%;
}

.d-page-top {
  width: 100%;
  height: 60%;
  border: 1px solid #FF574C;
}

.d-page-bottom {
  width: 100%;
  height: 40%;
  border: 1px solid #FF574C;
}

.item-5-content {
  height: 80%;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.item-5-content > div {
  height: 95%;
  //border: 1px solid #FF574C;
}

.item-5-div1 {
  width: 23%;
  font-size: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.item-5-div2 {
  width: 73%;
  overflow-y: auto;
  padding: 5px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 45%);
  grid-row-gap: 12px;
  grid-column-gap: 12px;
}

.item-5-div2 > div {
  border-radius: 12px;
  height: 10vh;
  padding: 8%;
  border: 1px solid #FFF1EA;
  box-shadow: 0 0 5px #ffeae1;
  display: flex;
  align-items: center;
}

.UpcomingType {
  width: 65%;
}

.UpcomingType > div:nth-child(1) {
  color: #999999;
  line-height: 25px;
}

.UpcomingType > div:nth-child(2) {
  font-weight: bold;
  font-size: 16px;
  line-height: 25px;
}

.UpcomingImg {
  width: 35%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.UpcomingImg svg {
  height: 6vh;
}
.message-box{
  display: flex;
  align-items: center;
  justify-content: center;
}
.red-point{
  height: 8px;
  width: 8px;
  border-radius: 50%;
  background: red;
  margin-right: 2px;
}
.message-but{
  bottom: 10px;
  right: 20px;
  position: absolute;
  right: 15px;
  bottom: 10px;
  color: #268ff5;
}
</style>
