<template>
  <div class="d-page d-flex flex-column">
    <title-bar :title="title">
      <van-icon slot="left" name="cross" size="20" />
    </title-bar>
    <div class="deal-with-top">
      <div class="deal-with-top-left">
        <div>
          <svg class="icon iconsex" aria-hidden="true">
            <use xlink:href="#icon-gongsimingcheng"></use>
          </svg>
        </div>
        <div>{{ cusInfo.cus_name }}</div>
        <div>任务编号：{{ cusInfo.serno }}</div>
      </div>
      <div
        class="deal-with-top-right"
        @click="
          selectRiskProcess();
        "
      >
        <button>提交</button>
      </div>
    </div>
    <div class="deal-with-bottom">
      <tab-nav :tabList="tabList" @tabClick="tabClick" />
    </div>
    <div
      v-show="active == 0"
      style="margin-right: 10%"
      class="h-scroller flex-1-dhc activedata"
    >
      <!--      <van-index-bar highlight-color="#F79400" :index-list="indexListIOU1">-->
      <div style="padding-bottom: 50px">
        <sub-title>红色预警信号</sub-title>
<!--        <div class="content-line1" style="display: flex">-->
<!--            <span-->
<!--              :style="{-->
<!--                background: colorList[rewSignalList.rew_level / 10 - 1],-->
<!--              }"-->
<!--              class="round-point"-->
<!--            />-->
<!--          <span-->
<!--            :style="{ color: colorList[rewSignalList.rew_level / 10 - 1] }"-->
<!--            class="rule-name"-->
<!--          >{{ rewSignalList.rew_level_cnName }}预警</span-->
<!--          >-->
<!--        </div>-->
<!--        <table-double-view-->
<!--          :keyValue="rewSignalTitles"-->
<!--          :data="rewSignalList"-->
<!--        ></table-double-view>-->
<!--        rule_type: "规则大类",-->
<!--        data_source: "数据源",-->
<!--        incr_type_cnName: "触发类型",-->
<!--        rule_name: "规则名称",-->
<!--        occur_date: "信号生成日期",-->
<!--        rew_desc: "预警说明"-->
        <div>
          <table class="customer-management-information-form">
            <tr>
              <td>预警等级</td>
              <td>规则大类</td>
              <td>数据源</td>
              <td>触发类型</td>
              <td>规则名称</td>
              <td>信号生成日期</td>

              <td class="desc-width">预警说明</td>
              <td style="width: 60px">处理</td>
            </tr>
            <tr v-if="rewSignalList.length == 0">
              <td style="text-align: center" colspan="6">暂无数据！</td>
            </tr>
            <tr
              v-if="rewSignalList.length != 0 && item"
              v-for="(item,index) in rewSignalList"
              :key="index"
            >
              <td style="width: 100px">
                <div class="content-line1">
                  <span
                    :style="{
                      background: colorList[item.rew_level / 10 - 1],
                    }"
                    class="round-point"
                  />
                  <span
                    :style="{
                      color: colorList[item.rew_level / 10 - 1],
                    }"
                    class="rule-name"
                  >{{ item.rew_level_cnName }}预警</span
                  >
                </div>
              </td>
              <td>{{ item.rule_type }}</td>
              <td>{{ item.data_source }}</td>
              <td>{{ item.incr_type_cnName }}</td>
              <td>{{ item.rule_name }}</td>
              <td>{{ item.occur_date }}</td>
              <td class="desc-width">{{ item.rew_desc }}</td>
              <td class="risk-detail" @click="dealRedRisk(index)">处理</td>
            </tr>
          </table>
        </div>

        <van-form v-show="dealFlag" @submit="commitIfRelease">
          <sub-title >红色预警处理</sub-title>
          <div class="form-line1">
            <van-cell
              style="width: 40%; margin-left: 30px; font-size: 14px"
              class="select_but"
              center
              title="是否属实"
            >
              <template #right-icon>
                <span class="star-style">*</span>
                <van-button
                  class="swich_but but_one"
                  size="small"
                  :type="
                      is_real == '1' || is_real == '' ? 'primary' : 'default'
                    "
                  native-type="button"
                  @click="ClickReal(1)"
                >是
                </van-button
                >
                <van-button
                  class="swich_but"
                  size="small"
                  :type="is_real == '2' ? 'primary' : 'default'"
                  @click="ClickReal(2)"
                  native-type="button"
                >否
                </van-button
                >
              </template>
            </van-cell>
            <div class="select-box">
              <d-select
                label="解除方式"
                border="true"
                :required="true"
                v-model="release_type"
                :rules="[{ required: true, message: '解除方式不能为空' }]"
                :value="release_type"
                labelAlign="right"
                sfield="release_type"
                size="small"
              ></d-select>
            </div>
          </div>
          <div class="form-line1">
            <div class="select-box2">
              <d-select
                label="提醒时间"
                border="true"
                :required="true"
                v-model="delayTime"
                :rules="[{ required: true, message: '提醒时间不能为空' }]"
                :value="delayTime"
                labelAlign="right"
                sfield="next_date_type"
                size="small"
              ></d-select>
            </div>
          </div>
          <div class="butCommit">
            <van-button
              class="d-button"
              block
              type="info"
              native-type="submit"
            >
              保存
            </van-button>
          </div>
        </van-form>
      </div>
      <!--      </van-index-bar>-->
    </div>
    <div
      v-show="active == 1"
      style="margin-right: 10%;"
      class="h-scroller flex-1-dhc activedata"
    >
      <!--      <van-index-bar highlight-color="#F79400" :index-list="indexListIOU2">-->
      <div style="padding-bottom: 50px">
        <!--          <van-index-anchor index="处理方案">-->
        <sub-title>处理方案</sub-title>
        <!--          </van-index-anchor>-->
        <!-- <table-double-view
          :keyValue="userInfoTitles"
          :data="cusInfo"
        ></table-double-view> -->
        <van-form class="bottom-form" @submit="commitClick">
          <div class="desc-box">
            <div class="line-1">
              <van-field v-model="cus_name" label="客户名称" readonly />
              <van-field
                v-model="cust_mgr_cnName"
                label="主管客户经理"
                readonly
              />
            </div>
            <mobile-input
              label="情况说明"
              :rules="[{ required: true, message: '备注说明不能为空' }]"
              type="textarea"
              :maxlength="500"
              :required="true"
              :rows="3"
              label-width="10px"
              input-align="left"
              name="REMAKE"
              v-model="situation"
              placeholder="情况说明"
              size="small"
            />
          </div>
          <div class="but-line">
            <van-cell
              style="width: 40%; font-size: 14px"
              class="select_but"
              center
              title="是否存在违约风险"
            >
              <template #right-icon>
                <span class="star-style">*</span>
                <van-button
                  class="swich_but but_one"
                  size="small"
                  :type="
                      have_due_risk == '1' || have_due_risk == ''
                        ? 'primary'
                        : 'default'
                    "
                  native-type="button"
                  @click="ClickRisk(1)"
                >是
                </van-button
                >
                <van-button
                  class="swich_but"
                  size="small"
                  :type="have_due_risk == '2' ? 'primary' : 'default'"
                  @click="ClickRisk(2)"
                  native-type="button"
                >否
                </van-button
                >
              </template>
            </van-cell>
            <van-cell
              style="width: 40%; font-size: 14px; margin-left: 70px"
              class="select_but"
              center
              title="是否报送重大事项"
            >
              <template #right-icon>
                <span class="star-style">*</span>
                <van-button
                  class="swich_but but_one"
                  size="small"
                  :type="
                      have_sub_import_event == '1' ||
                      have_sub_import_event == ''
                        ? 'primary'
                        : 'default'
                    "
                  native-type="button"
                  @click="ClickRisk(3)"
                >是
                </van-button
                >
                <van-button
                  class="swich_but"
                  size="small"
                  :type="have_sub_import_event == '2' ? 'primary' : 'default'"
                  @click="ClickRisk(4)"
                  native-type="button"
                >否
                </van-button
                >
              </template>
            </van-cell>
          </div>
          <mobile-input
            v-if="have_sub_import_event == '2'"
            class="desc-box"
            label="不报送说明"
            :rules="[{ required: true, message: '不报送说明' }]"
            type="textarea"
            :maxlength="500"
            :required="true"
            :rows="3"
            label-width="10px"
            input-align="left"
            name="REMAKE"
            v-model="noSubDesc"
            placeholder="不报送说明"
            size="small"
          />
          <!-- 处置方案的部分 -->
          <div class="solution-line">
            <van-cell style="width: 20%; margin-left: 10px"
            >处置方案<span class="star-style">*</span></van-cell
            >
            <div class="buts-box">
              <van-button
                class="but-mark"
                :class="{ changeStyle: markList.includes(index) }"
                size="small"
                native-type="button"
                v-for="(item, index) in listInfo"
                @click="ClickMark(index)"
                :key="index"
              >{{ item }}
                <svg
                  v-show="markList.includes(index)"
                  class="icon svg-icon"
                  aria-hidden="true"
                >
                  <use xlink:href="#icon-xuanzhongjiaobiao16x16"></use>
                </svg>
              </van-button>
            </div>
          </div>
          <mobile-input
            class="desc-box"
            label="处置方案说明"
            :rules="[{ required: true, message: '备注说明不能为空' }]"
            type="textarea"
            :maxlength="500"
            :required="true"
            :rows="3"
            label-width="10px"
            input-align="left"
            name="REMAKE"
            v-model="solution"
            placeholder="处置方案说明"
            size="small"
          />
          <div class="butCommit">
            <van-button
              class="d-button"
              block
              type="info"
              native-type="submit"
            >
              保存
            </van-button>
          </div>
        </van-form>
      </div>
      <!--      </van-index-bar>-->
    </div>
    <div
      v-show="active == 2"
      class="table-box h-scroller flex-1-dhc"
    >
      <!--      <van-index-bar highlight-color="#F79400" :index-list="indexListIOU3">-->
      <div style="padding-bottom: 50px">
        <!--          <van-index-anchor index="风险预警信号">-->
        <div style="display: flex; width: 60%">
          <sub-title style="flex: 1">风险预警信号</sub-title>
          <van-dropdown-menu style="flex: 2">
            <van-dropdown-item
              v-model="riskLevelType"
              :options="riskLevels"
            />
            <van-dropdown-item
              v-model="releaseType"
              :options="releaseTypes"
            />
          </van-dropdown-menu>
        </div>
        <!--          </van-index-anchor>-->
        <table class="customer-management-information-form">
          <tr>
            <td>预警等级</td>
            <td>规则大类</td>
            <td>数据源</td>
            <td>触发类型</td>
            <td>规则名称</td>
            <td>信号生成日期</td>
            <td>解除方式</td>
            <td class="desc-width">预警说明</td>
            <td style="width: 60px">详情</td>
          </tr>
          <tr v-if="chooseUnrelease.length == 0">
            <td style="text-align: center" colspan="6">暂无数据！</td>
          </tr>
          <tr
            v-if="chooseUnrelease.length != 0 && item"
            v-for="(item, index) in chooseUnrelease"
            :key="index"
          >
            <td style="width: 100px">
              <div class="content-line1">
                  <span
                    :style="{
                      background: colorList[item.rew_level / 10 - 1],
                    }"
                    class="round-point"
                  />
                <span
                  :style="{
                      color: colorList[item.rew_level / 10 - 1],
                    }"
                  class="rule-name"
                >{{ item.rew_level_cnName }}预警</span
                >
              </div>
            </td>
            <td>{{ item.rule_type }}</td>
            <td>{{ item.data_source }}</td>
            <td>{{ item.incr_type_cnName }}</td>
            <td>{{ item.rule_name }}</td>
            <td>{{ item.occur_date }}</td>
            <td>{{ item.release_type_cnName }}</td>
            <td class="desc-width">{{ item.rew_desc }}</td>
            <td class="risk-detail" @click="goDetailPage(item)">详情</td>
          </tr>
        </table>
      </div>
      <!--      </van-index-bar>-->
    </div>
    <van-popup
      v-model="commitPop"
      :close-on-click-overlay="false"
      :style="{ height: '55%', width: '70%' }"
    >
      <van-form @submit="commitRiskProcess">
        <div class="popup-heater">风险预警流程提交</div>
        <div class="popup-body">
          <div class="popup-input-content">
            <d-select
              label="下一节点"
              border="true"
              :required="true"
              v-model="nextNode"
              :rules="[{ required: true, message: '下一节点不能为空' }]"
              :options="nextNodeList"
              size="small"
            ></d-select>
            <d-select
              label="下一处理人"
              border="true"
              :required="true"
              v-model="nextPerson"
              :options="nextPersonList"
              :rules="[{ required: true, message: '下一处理人不能为空' }]"
              size="small"
            ></d-select>
          </div>
        </div>
        <div class="popup-footer">
          <van-button
            native-type="button"
            type="info"
            @click="cancelRiskProcess"
          >取消
          </van-button
          >
          <van-button native-type="submit" type="info">提交</van-button>
        </div>
      </van-form>
    </van-popup>
  </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 { DropdownMenu, DropdownItem } from "vant";
import BasicInformation from "@/components/customer-information/business-information/overview/BasicInformation.vue";
import TableDoubleView from "@/public/TableDoubleView.vue";
import BasePopup from "@/components/general/BasePopup.vue";
import { TabData } from "@/model/entity/TabData";

Vue.use(DatetimePicker);
Vue.use(DropdownMenu);
Vue.use(DropdownItem);
Vue.use(Tab);
Vue.use(Tabs);
/**
 * @Description 催收详情
 * @Author JiangTao
 * @Date 2021-11-10 下午 03:51
 */
@Component({
  name: "RiskWarningDetail",
  components: { TitleBar, BasicInformation, TableDoubleView, BasePopup }
})
export default class RiskWarningDetail extends Vue {
  title = "风险预警信息"; // 页面标题
  // indexList = ["基本信息", "基本信息1"];
  // titles = [
  //   { name: "红色预警处理", bsno: "1" },
  //   { name: "处理方案", bsno: "2" },
  //   { name: "所有未解除信号", bsno: "3" },
  // ];
  tabList: TabData[] = [
    { tabText: "红色预警处理", tabId: "1" },
    { tabText: "处理方案", tabId: "2" },
    { tabText: "所有未解除信号", tabId: "3" }
  ];
  rewSignalTitles = {
    rule_type: "规则大类",
    data_source: "数据源",
    incr_type_cnName: "触发类型",
    rule_name: "规则名称",
    occur_date: "信号生成日期",
    rew_desc: "预警说明"
  };
  userInfoTitles = {
    cus_name: "客户名称",
    cust_mgr_cnName: "主管客户经理"
  };
  active = 0;

  cusInfo = this.$store.getters.getCusInfo; //传来的用户信息
  allUnrelease = []; //所有未解除
  rewSignalList: any[] = []; //红色预警处理数组
  curDealIndex: any = 0; //当前处理的红色预警序号

  dealWay = {
    cus_name: "",
    disp_scheme_desc: "",
    check_info: "",
    have_due_risk: "",
    have_sub_import_event: "",
    disp_scheme: "",
    no_sub_reason: ""
  }; //处理方案查询
  colorList = ["red", "orange", "yellow", "blue"];
  is_real = "1";
  selectTaskStatus = "";
  release_type = ""; //解除方式
  delayTime = ""; //提醒时间
  situation = ""; //情况说明
  solution = ""; //处置方案说明
  have_due_risk = "1"; //是否存在风险
  have_sub_import_event = "1"; //是否报送重大事项
  listInfo = [
    "停止提用未使用额度",
    "对客户账户实施封闭式管理",
    "对客户或保证人实施催收",
    "采取资产保全或提起诉讼",
    "提供再融资或宽限",
    "拟订分期还款安排",
    "追加或变更担保",
    "其它"
  ];
  markList: any = []; //处置方案
  cus_name = this.cusInfo.cus_name;
  cust_mgr_cnName = this.cusInfo.cust_mgr_cnName;
  riskLevelType = ""; //筛选风险等级
  releaseType = ""; //筛选解除方式
  riskLevels = [
    { text: "全部级别", value: "" },
    { text: "红色", value: "10" },
    { text: "橙色", value: "20" },
    { text: "黄色", value: "30" },
    { text: "蓝色", value: "40" }
  ];
  releaseTypes = [
    { text: "全部方式", value: "" },
    { text: "无", value: "0" },
    { text: "自动解除", value: "10" },
    { text: "人工解除", value: "20" },
    { text: "不解除", value: "30" }
  ];
  nextNode = ""; //下一节点
  nextPerson = ""; //下一办理人
  nextNodeList: any[] = []; //下一节点列表
  nextPersonList: any[] = []; //下一办理人列表
  instance_id = ""; //流程实例化编号
  next_node_id = ""; //下一流程节点编号
  next_node_user = ""; //下一流程节点受理人
  commitPop = false; //提交框是否显示
  flagSelect = false; //流程是否查询成功
  indexListIOU1 = ["红色预警信号", "红色预警处理"];
  indexListIOU2 = ["处理方案"];
  indexListIOU3 = ["风险预警信号"];
  noSubDesc = "";
  dealFlag = false;

  mounted() {
    this.selectUnreleaseRisk();
  }

  //选中的方案列表
  /**
   * wanghang
   * 2022/1/26
   */
  get disp_schemes() {
    var res = "";
    for (let i = 0; i < this.markList.length; i++) {
      res += "00" + (this.markList[i] + 1) + ",";
    }
    return res;
  }
  /**
   *@description: 处理某一个红色预警
   *@author: wanghang
   *@date: 2022/3/1
   */
  dealRedRisk(index:any){
    this.curDealIndex = index;
    this.giveValue();
    this.dealFlag = true;
  }

  //筛选出来的未解除消息
  //筛选预警信息
  /**
   * wanghang
   * 2022/1/26
   */
  get chooseUnrelease() {
    var res: any = [];

    var temp = [];
    temp = this.allUnrelease;

    for (let i = 0; i < temp.length; i++) {
      if (this.riskLevelType != "" && this.releaseType != "") {
        if (
          (temp[i] as any).rew_level == this.riskLevelType &&
          ((temp[i] as any).release_type == this.releaseType ||
            ((temp[i] as any).release_type == "" &&
              (this.releaseType as any) == 0))
        ) {
          res.push(temp[i]);
        }
      } else if (this.riskLevelType != "") {
        if ((temp[i] as any).rew_level == this.riskLevelType) {
          res.push(temp[i]);
        }
      } else if (this.releaseType != "") {
        if ((temp[i] as any).release_type == this.releaseType) {
          res.push(temp[i]);
        }
        if (
          (temp[i] as any).release_type == "" &&
          (this.releaseType as any) == 0
        ) {
          res.push(temp[i]);
        }
      } else {
        res.push(temp[i]);
      }
    }
    return res as any;
  }

  /**
   * @Description 标签切换
   * @Author JiangTao
   * @Date 2022-01-17 下午 05:02
   */
  change() {
    if (this.active == 0) {
    } else if (this.active == 1) {
    } else if (this.active == 2) {
    }
  }

  //对公未解除风险预警任务查询
  /**
   * wanghang
   * 2022/1/26
   */
  selectUnreleaseRisk() {
    let param = {
      serno: this.cusInfo.serno,
      tc: nettyApi.TRADE_CODE.selectUnrelieveRisk
    };
    NativeUI.showWaiting("正在查询...");
    return IF.transferDataInter(nettyApi.commonRq, param).then((res: any) => {
      NativeUI.closeWaiting();
      if (res.rc === "1") {
        this.allUnrelease = res.RewSignalList0;
        this.rewSignalList = res.RewSignalList;
        this.dealWay = res.rewTaskIColl[0];
        this.giveValue();
      } else {
        NativeUI.toast(res.msg);
      }
    });
  }

  //点击切换状态
  /**
   * wanghang
   * 2022/1/26
   */
  ClickReal(index: Number) {
    if (index == 1) {
      this.is_real = "1";
    } else if (index == 2) {
      this.is_real = "2";
    }
  }

  //保存红色预警处理
  /**
   * wanghang
   * 2022/1/26
   */
  commitIfRelease() {
    this.postDealRedInfo();
  }

  // 提交对公红色预警处理
  /**
   * wanghang
   * 2022/1/26
   */
  postDealRedInfo() {
    let param = {
      serno: (this.rewSignalList[this.curDealIndex] as any).serno,
      is_real: this.is_real == "" ? "1" : this.is_real, //默认为真
      release_type: this.release_type,
      next_date_type: this.delayTime,
      tc: nettyApi.TRADE_CODE.dealRedRisk
    };
    NativeUI.showWaiting("正在提交...");
    IF.transferDataInter(nettyApi.commonRq, param).then((res: any) => {
      NativeUI.closeWaiting();
      if (res.rc === "1") {
        NativeUI.toast(res.msg);
        this.selectUnreleaseRisk();
      } else {
        NativeUI.toast(res.msg);
      }
    });
  }

  /**
   * wanghang
   * 2022/1/26
   */
  // 数据回显
  giveValue() {
    //红色预警处理回显
    this.release_type =
      this.rewSignalList[this.curDealIndex] &&
      this.rewSignalList[this.curDealIndex] &&
      (this.rewSignalList[this.curDealIndex] as any).release_type
        ? (this.rewSignalList[this.curDealIndex] as any).release_type
        : "";
    this.delayTime =
      this.rewSignalList[this.curDealIndex] &&
      this.rewSignalList[this.curDealIndex] &&
      (this.rewSignalList[this.curDealIndex] as any).next_date_type
        ? (this.rewSignalList[this.curDealIndex] as any).next_date_type
        : "";
    this.is_real =
      this.rewSignalList[this.curDealIndex] &&
      this.rewSignalList[this.curDealIndex] &&
      (this.rewSignalList[this.curDealIndex] as any).is_real
        ? (this.rewSignalList[this.curDealIndex] as any).is_real
        : "";
    //处置方案回显
    this.cus_name = this.dealWay.cus_name;
    this.solution = this.dealWay.disp_scheme_desc; //处置方案说明
    this.situation = this.dealWay.check_info; //情况说明
    this.have_due_risk = this.dealWay.have_due_risk;
    this.have_sub_import_event = this.dealWay.have_sub_import_event;
    this.noSubDesc = this.dealWay.no_sub_reason;
    var strs = this.dealWay.disp_scheme.split(",");
    this.markList = [];
    for (let i = 0; i < strs.length; i++) {
      this.markList.push(parseInt(strs[i].slice(2, 3)) - 1);
    }
  }

  //提交信息
  /**
   * wanghang
   * 2022/1/26
   */
  commitClick() {
    this.postCustInfo();
    this.selectUnreleaseRisk(); //刷新信息
  }

  //点击切换状态
  /**
   * wanghang
   * 2022/1/26
   */
  ClickRisk(i: Number) {
    if (i === 1) {
      this.have_due_risk = "1";
    } else if (i === 2) {
      this.have_due_risk = "2";
    } else if (i === 3) {
      this.have_sub_import_event = "1";
    } else if (i === 4) {
      this.have_sub_import_event = "2";
    }
  }

  // 点击预警列表
  /**
   * wanghang
   * 2022/1/26
   */
  ClickMark(index: Number) {
    //如果不在里面的话，加入数组中
    if (this.markList.indexOf(index) != -1) {
      this.markList.splice(this.markList.indexOf(index), 1);
    } else {
      this.markList.push(index);
    }
  }

  //提交用户预警信息
  /**
   * wanghang
   * 2022/1/26
   */
  postCustInfo() {
    let param = {
      serno: this.cusInfo.serno,
      have_due_risk: this.have_due_risk == "" ? "1" : this.have_due_risk, //如果为空的话，提交的时候赋值为1
      check_info: this.situation,
      have_sub_import_event:
        this.have_sub_import_event == "" ? "1" : this.have_sub_import_event, //如果为空的话，提交的时候赋值为1
      disp_scheme: this.disp_schemes,
      disp_scheme_desc: this.solution, //处置方案说明
      no_sub_reason: this.noSubDesc, //不报送重大事项说明
      tc: nettyApi.TRADE_CODE.dealFXYJXX
    };
    IF.transferDataInter(nettyApi.commonRq, param).then((res: any) => {
      NativeUI.closeWaiting();
      if (res.rc === "1") {
        NativeUI.toast(res.msg);
        //交易成功后返回上一页,防止重复提交
        setTimeout(function() {
          NativeUI.toast(res.msg);
        }, 1000);
        this.$router.go(-1);
      } else {
        NativeUI.toast(res.msg);
      }
    });
  }

  //查询流程信息
  selectRiskProcess() {
    let param = {
      serno: this.cusInfo.serno,
      cus_id: this.cusInfo.cus_id,
      cus_name: this.cusInfo.cus_name,
      tc: nettyApi.TRADE_CODE.selectRiskProcess
    };
    NativeUI.showWaiting("正在查询...");
    return IF.transferDataInter(nettyApi.commonRq, param).then((res: any) => {
      NativeUI.closeWaiting();
      if (res.rc === "1") {
        this.flagSelect = true;
        this.instance_id = res.instance_id;
        this.nextPersonList = [];
        let tempInfo = res.respIColl;
        let nextNodeInfo = res.nextNodeInfo;
        this.nextNodeList = [];
        for (let i = 0; i < tempInfo.length; i++) {
          if (tempInfo[i].node_id == '1356_a8') {
            let b:any = {};
            let tempTexts = this.parseUnStandredJSON(nextNodeInfo);
            b.text = tempTexts['1356_a8'];
            b.value = tempInfo[i].node_id;
            this.nextNodeList.push(b);
            let list:any[] = this.parseUnStandredJSONArray(tempInfo[i].node_list);
            console.log(list.length);
            for (let j = 0; j < list.length; j++) {
              let a:any = {};
              a.text = list[j].username;
              a.value = list[j].userid;
              this.nextPersonList.push(a);
            }
          }
        }
        console.log(this.nextNodeList,'-------------',this.nextNodeList);
        this.commitPop = true;
      } else {
        NativeUI.toast(res.msg);
      }
    });
  }

  //对公客户-风险预警流程提交
  commitRiskProcess() {
    let param = {
      tc: nettyApi.TRADE_CODE.commitRiskProcess,
      next_node_id: this.nextNode,
      next_node_user: this.nextPerson,
      instance_id: this.instance_id,
      serno: this.cusInfo.serno
    };
    NativeUI.showWaiting("正在提交...");
    return IF.transferDataInter(nettyApi.commonRq, param).then((res: any) => {
      NativeUI.closeWaiting();
      if (res.rc === "1") {
        NativeUI.toast("提交成功");
        this.commitPop = false;
        this.$router.go(-1);
      } else {
        NativeUI.toast(res.msg);
      }
    });
  }

  //对公客户-风险预警流程取消
  cancelRiskProcess() {
    //如果查询成功
    if (this.flagSelect) {
      let param = {
        tc: nettyApi.TRADE_CODE.cancelRiskProcess,
        instance_id: this.instance_id
      };
      NativeUI.showWaiting("正在取消...");
      return IF.transferDataInter(nettyApi.commonRq, param).then((res: any) => {
        NativeUI.closeWaiting();
        if (res.rc === "1") {
          this.commitPop = false;
        } else {
          NativeUI.toast(res.msg);
        }
      });
    } else {
      //如果查询失败，说明库里没有相关的流程数据
      NativeUI.toast("取消成功");
      this.commitPop = false;
    }
  }

  //解析不标准json字符串
  parseUnStandredJSON(str: String) {
    let temp = str;
    temp = temp.slice(1, temp.length - 1);
    let res = {};
    let strs = temp.split(",");
    for (let i = 0; i < strs.length; i++) {
      let room = strs[i].split(":");
      res[room[0]] = room[1];
    }
    return res;
  }

  //解析不标准json数组字符串
  parseUnStandredJSONArray(str: String) {
    str = str.slice(1, str.length - 1);
    str = str.replaceAll("},{", "}|{");
    let strs = str.split("|");
    let res = [];
    for (let i = 0; i < strs.length; i++) {
      res.push(this.parseUnStandredJSON(strs[i]));
    }
    return res;
  }

  tabClick(item: TabData) {
    this.active = parseInt(item.tabId) - 1;
  }

  goDetailPage(item: any) {
    this.$router.push({
      path: "/RiskWarningItemDetail",
      query: {
        serno: item.serno
      }
    });
  }
}
</script>

<style lang="scss" scoped>
.deal-with-top {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1% 1.5%;
  border-bottom: 1px solid #efefef;
  background-color: #fffafa;
  /* z-index: 700; */
}

.deal-with-top-left {
  width: 80%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
}

.deal-with-top-left > div:nth-child(2) {
  margin-left: 1%;
  margin-right: 2%;
  padding-top: 5px;
  font-size: 129%;
  line-height: 30px;
}

.deal-with-top-left > div:nth-child(3) {
}

.deal-with-top-left img {
  width: 2.42%;
  padding-top: -1%;
}

.deal-with-top-right {
  width: 9.51%;
}

.deal-with-top-right button {
  width: 100%;
  font-size: 115%;
  padding: 2.6% 0;
  background-color: white;
  border: 1px solid #fd5065;
  color: #fd5065;
  border-radius: 3px;
}

.label div {
  margin-right: 1%;
  background-color: white;
  border: 1px solid #999999;
  border-bottom: 0;
  font-size: 115%;
  padding: 0.58% 1.2%;
  border-top-right-radius: 7px;
  border-top-left-radius: 7px;
}

.deal-with-bottom {
  width: 92%;
  margin: 10px auto;
  position: relative;
  z-index: 2000;
}

.iconsex {
  width: 35px;
  height: 35px;
}

::v-deep .van-tabs {
  width: 100%;
}

::v-deep .van-tab {
  margin: 0 10px;
  border: 1px solid #e1e2e3;
  border-top-right-radius: 15px;
  border-top-left-radius: 15px;
  border-bottom: 0;
}

::v-deep .van-tab--active {
  border-color: #ff574c;
  border-bottom-color: white;
}

::v-deep .van-tabs__wrap {
  border-bottom: 1px solid #e1e2e3;
  padding-right: 55%;
}

::v-deep .van-tabs__line {
  margin-bottom: -2px;
  /* z-index: 99999999; */
}

::v-deep .van-dropdown-item__content {
  width: 294px;
  margin-left: 200px;
}

::v-deep .information-container {
  padding-left: 10px !important;
}

.activedata {
  margin-left: 4%;
  overflow-x: hidden;
}

::v-deep .van-index-bar__sidebar {
  top: 60% !important;
}

.imagedata {
  width: 100%;
  height: 75px;
  border-bottom: 1px solid #e1e2e3;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.round-point {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: 4px;
}

.round-red {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: 4px;
}

.rule-name {
  font-size: 16px;
}

.content-line1 {
  display: flex;
  align-items: center;
}

.bottom-info {
  padding-bottom: 20px;
  margin-left: 50px;
  margin-right: 200px;
}

.risk-introduction {
  line-height: 40px;
  height: 80px;
  font-size: 14px;
}

.bottom-form {
  margin-left: 30px;
  margin-right: 50px;
}

.form-line1 {
  height: 52px;
  display: flex;
  align-items: center;
  font-size: 14px;
}

::v-deep .van-button--primary {
  background-color: #ff574c;
  border-color: #ff574c;
}

.van-cell__title {
  font-size: 14px;
  color: #999999;
}

.van-button--small {
  width: 60px;
}

.select-box {
  height: 52px;
  width: 300px;
  margin-left: 130px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 10px;
}

.select-box2 {
  height: 52px;
  width: 300px;
  margin-left: 70px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 10px;
}

.butCommit {
  margin-top: 50px;
  margin-right: 100px;
  margin-bottom: 20px;
  bottom: 10px;
  left: 0;
  width: 100%;
}

.d-button {
  width: 350px;
  height: 40px;
  margin: 0 auto;
  color: #fff;
  background: #ff574c;
  border-color: #ff574c;
}

.bottom-info2 {
  // margin-right: 100px;
}

.but-line {
  display: flex;
  line-height: 48px;
  align-items: center;
}

.solution-line {
  display: flex;
  margin: 20px 0;
}

.buts-title {
  display: flex;
  justify-content: flex-start;
}

.buts-box {
  width: 80%;
  /* margin: 0 5%; */
}

.but-mark {
  background-color: #eee;
  width: 30%;
  margin: 10px 5px;
  border-radius: 6px;
}

.svg-icon ::v-deep .button-default-border-color {
  border-color: #bbb;
}

.svg-icon {
  width: 16px;
  height: 16px;
  bottom: -2px;
  right: -2px;
  position: absolute;
  overflow: hidden;
}

.changeStyle {
  background-color: #fff2f1;
  border-color: #ff574c;
  color: #ff574c;
}

.desc-width {
  width: 85px;
}

.popup-input-content {
  width: 50%;
  margin: 0 25%;
  margin-top: 60px;
  align-items: center;
  justify-content: center;
  display: flex;
  flex-direction: column;
}

.popup-heater {
  width: 100%;
  height: 13%;
  line-height: 55px;
  padding-left: 3%;
  font-size: 18px;
  font-family: "Arial Normal", "Arial";
  border-bottom: 1px solid #d7d7d7;
}

.popup-body {
  width: 96%;
  height: 70%;
  padding: 3.5% 0;
  margin: 0 auto;
}

.popup-footer {
  width: 50%;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-content: center;
}

.popup-footer button {
  flex: 1;
  border-radius: 30px;
  padding: 2% 0;
  margin: 0 2%;
  font-size: 14px;
}

.popup-footer > button:nth-child(1) {
  border: 1px solid #d7d7d7;
  color: #999999;
  background-color: white;
}

.popup-footer > button:nth-child(2) {
  border: 1px solid #fd5065;
  color: white;
  background-color: #fd5065;
}

.risk-detail {
  width: 60px;
  color: #ff574c;
}

.line-1 {
  width: 92%;
  display: flex;
  justify-content: space-between;
}

::v-deep .van-field__label {
  text-align: right;
  font-size: 14px;
  margin-right: 10px;
}

.star-style {
  height: 16px;
  font-size: 20px;
  color: red;
  left: -16px;
  top: 4px;
}

::v-deep .van-cell__title {
  text-align: right;
  font-size: 14px;
}

::v-deep .van-cell__value {
  text-align: right;
  font-size: 14px;

}

.desc-box {
  margin-left: 20px;
}

::v-deep .d-form-field .van-cell--required .van-field__body:before {
  position: absolute;
  height: 16px;
  content: "*";
  font-size: 20px;
  color: red;
  left: -10px;
  top: 4px;
}

::v-deep .van-field__control {
  font-size: 14px;
}

::v-deep .keyValueCls {
  font-size: 14px;
}

::v-deep .dataInfoCls {
  font-size: 14px;
}

.table-box {
  margin-left: 50px;
  margin-right: 10%;
}
</style>
