<template>
  <!-- 市场风险 -->
  <div class="operateRiskbox">
    <el-table
      :data="tableData"
      style="width: 100%"
    >
      <el-table-column
        prop="date"
        label="结果"
        align="center"
        width="80"
      >
        <template slot-scope="scope">
          <div
            v-if="scope.row.limitStateInt === 0"
            class="red"
          >· 超限</div>
          <div
            v-if="scope.row.limitStateInt === 1"
            class="yellow"
          >· 预警</div>
          <div
            v-if="scope.row.limitStateInt === 2"
            class="green"
          >· 通过</div>
        </template>
      </el-table-column>

      <el-table-column
        prop="name"
        align="center"
        label="指标"
        width="200"
      >
        <template slot-scope="scope">
          <div v-html="scope.row.limitName" />
        </template>
      </el-table-column>
      <el-table-column
        prop="province"
        align="center"
        label="自定义名称"
        width="120"
      >
        <template slot-scope="scope">
          <div v-html="scope.row.dimensionStr" />
        </template>
      </el-table-column>
      <el-table-column
        prop="province"
        align="center"
        label="限额/剩余额度"
        width="240"
      >
        <template slot-scope="scope">
          <div v-html="scope.row.limitValueStr" />
        </template>
      </el-table-column>
      <el-table-column
        prop="province"
        align="center"
        label="货币"
        width="120"
      />
      <el-table-column
        prop="province"
        align="center"
        label="检查维度"
        width="240"
      >
        <el-table-column
          prop="province"
          align="center"
          label="交易对手"
          width="120"
        />
        <el-table-column
          prop="province"
          align="center"
          label="实体"
          width="120"
        />
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { debounce } from '@/utils/index.js';

export default {
  data() {
    return {
      tableData: [],
    };
  },
  mounted() {
    this.$bus.$on('bujiformData', (data) => {
      if (data['deal.folder']) {
        debounce(this.queryList(data));
      }
    });
  },
  methods: {
    queryList(val) {
      const data = {
        ...val,
        'deal.trialType': 'MarketRisk',
        'deal.riskType': 4,
      };
      this.$apis.getdcsdealActionFlow(data).then((res) => {
        this.tableData = res.data?.result?.riskResult?.list || [];
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.red {
  text-align: center;
  color: rgb(233, 86, 82);
}
.yellow {
  text-align: center;
  color: rgb(255, 166, 50);
}
.green {
  text-align: center;
  color: rgb(32, 201, 139);
}
</style>
