<template>
  <div>
    <title-bar title="风险预警信号" @clickLef="onClick">
      <van-icon slot="left" name="cross" size="24" />
    </title-bar>
    <div class="text-content">
      <div class="text-content-title">
        <sub-title>风险预警信号</sub-title>
      </div>
      <div class="text-content-table">
        <table>
          <tr>
            <td>序号</td>
            <td>预警来源(数据来源)</td>
            <td>预警级别</td>
            <td>预警原因(规则名称)</td>
            <td>预警状态</td>
            <td>生效时间(推送状态)</td>
            <td>信号详情</td>
          </tr>
          <tr v-if="riskArray.length == 0">
            <td style="text-align: center" colspan="6">暂无数据！</td>
          </tr>
          <tr v-for="(item, index) in riskArray" :key="index">
            <td>{{ index + 1 }}</td>
            <td>{{ item.data_source }}</td>
            <td :style="{ color: colorList[item.rew_level / 10 - 1] }">
              {{ "●" + item.rew_level_cnName }}
            </td>
            <td>{{ item.rule_name }}</td>
            <td>{{ item.rew_status_cnName }}</td>
            <td>{{ item.input_date }}</td>
            <td class="goDetail" @click="goRiskDeail(index)">详情</td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import nettyApi from "@/constants/api/ms-netty/netty.api.ts";
import IF from "@/public/factory/InterFaceFactory";
import { NativeUI } from "@/public/ts/NativeUI";
/**
 *@description: 风险预警信号
 *@author: wanghang
 *@date: 2022-02-18
 */

@Component({
  name: "RiskWarning",
})
export default class RiskWarning extends Vue {
  pageTitle = ""; // 页面标题
  no_data = false;
  riskArray: any[] = []; //风险数据列表
  colorList: any[] = ["#f93b1a", "#ff7e00", "#fac210", "#20a1e4"];

  getRisk() {
    let param = {
      tc: nettyApi.TRADE_CODE.selectFXYJ,
      cus_id: this.$store.getters.getCusInfo.cus_id,
    };
    NativeUI.showWaiting("正在查询...");
    return IF.transferDataInter(nettyApi.commonRq, param).then((res: any) => {
      NativeUI.closeWaiting();
      if (res.rc == "1") {
        this.no_data = false;
        this.riskArray = res.rew_list;
      } else {
        NativeUI.toast(res.msg);
      }
    });
  }
  goRiskDeail(index: any) {
    console.log(this.riskArray[index].serno);
    this.$router.push({
      path: "/RiskWarningItemDetail",
      query: {
        serno: this.riskArray[index].serno,
      },
    });
  }
  onClick() {
    // console.log(111111);
  }
  activated() {
    this.getRisk();
  }
}
</script>

<style scoped>
.text-content {
  width: 95%;
  height: calc(100vh - 60px);
  margin: 0 auto;
  margin-top: 2%;
}
.text-content-title {
  display: flex;
  justify-content: space-between;
  margin-bottom: 2%;
}
.text-content-table {
  width: 95%;
  overflow-y: auto;
  overflow: scroll;
  height: calc(100vh - 170px);
}
table {
  width: 100%;
  text-align: center;
  font-family: "苹方 粗体", "苹方 中等", "苹方";
}
tr {
  height: 46px;
}
table > tr:nth-child(odd) {
  background-color: #f7fafc;
}
table > tr:nth-child(1) {
  background-color: #f2f2f2;
  padding: 0;
}
table > tr:nth-child(1) td {
  font-weight: bold;
}
td {
  font-size: 16px;
}
.goDetail {
  color: #ff574c;
  font-weight: bold;
}
</style>