<template>
  <!-- 告警看板 -->
  <div class="showData">
    <div class="title">告警看板</div>
    <div class="onlyShow">
      <div class="show">
        已配置告警条件数<span>{{ warnConfigCount }}个</span>
      </div>
      <div class="show">
        今日告警触发次数<span>{{ todayCount }}次</span>
      </div>
      <div class="show">
        近7天告警触发次数<span>{{ sevenDaysCount }}次</span>
      </div>
      <div class="show">
        近30天告警触发次数<span>{{ thirtyDaysCount }}次</span>
      </div>
    </div>
    <Table
      class="table"
      :columns="columns"
      :data-source="dataSource"
      :total="total"
      :isSelected="false"
      @changeParams="changeParams"></Table>
  </div>
</template>

<script>
import Table from './components/Table.vue'
import { tableList, tableTips } from '@/api/system/taskInstance.js'
var id = null
var modelName = null
var modelCode = null
export default {
  data() {
    return {
      id: id,
      modelName,
      modelCode,
      columns: [
        {
          title: '告警发生日期',
          dataIndex: 'warnTime',
          key: 'warnTime',
          height: 30,
          width: 160,
          align: 'center',
          scopedSlots: { customRender: 'warnTime' }
        },
        {
          title: '告警规则名称',
          dataIndex: 'ruleName',
          key: 'ruleName',
          align: 'center',
          width: 160,
          height: 50,
          scopedSlots: {
            filterDropdown: 'filterDropdown',
            filterIcon: 'filterIcon',
            customRender: 'customRender'
          }
        },
        {
          title: '告警内容',
          width: 160,
          dataIndex: 'warnContent',
          key: 'warnContent',
          align: 'center'
          // scopedSlots: {
          //   filterDropdown: 'filterDropdown',
          //   filterIcon: 'filterIcon',
          //   customRender: 'customRender'
          // }
        },
        {
          title: '告警表',
          width: 160,
          dataIndex: 'warnModel',
          key: 'warnModel',
          align: 'center'
        },
        {
          title: '告警字段',
          width: 160,
          dataIndex: 'warnAttr',
          key: 'warnAttr',
          align: 'center'
        },
        {
          title: '对应质量任务实例',
          width: 160,
          dataIndex: 'taskInstance',
          key: 'taskInstance',
          align: 'center',
          scopedSlots: {
            filterDropdown: 'filterDropdown',
            filterIcon: 'filterIcon',
            customRender: 'customRender'
          }
        },
        {
          title: '通知状态',
          width: 160,
          dataIndex: 'annStatus',
          key: 'annStatus',
          align: 'center',
          filters: [
            { text: '失败', value: '0' },
            { text: '成功', value: '1' },
            { text: '未配置', value: '2' }
          ],
          customRender: (text, record, index) => {
							if (text === '失败') {
								return (<span style="color:#f03e3e">{{ text }}</span>)
							} else {
								return (<span class="error">{{ text }}</span>)
							}
						}
        },
        {
          title: '执行时间',
          width: 160,
          dataIndex: 'runTme',
          key: 'runTme',
          align: 'center'
        }
      ],
      dataSource: [
        // {
        //   date: '2020/12/14  12:04:14',
        //   rule: '固定电话格式校验0',
        //   model: '人员模型',
        //   attribute: 'CARD ID 人员',
        //   example: '测试任务1',
        //   state: '失败',
        //   time: '2021/12/12 12:12:12'
        // },
        // {
        //   date: '2020/12/14  12:04:14',
        //   rule: '固定电话格式校验1',
        //   model: '人员模型',
        //   attribute: 'CARD ID 人员',
        //   example: '测试任务1',
        //   state: '失败',
        //   time: '2021/12/12 12:12:12'
        // },
        // {
        //   date: '2020/12/14  12:04:14',
        //   rule: '固定电话格式校验2',
        //   model: '人员模型',
        //   attribute: 'CARD ID 人员',
        //   example: '测试任务1',
        //   state: '失败',
        //   time: '2021/12/12 12:12:12'
        // },
        // {
        //   date: '2020/12/14  12:04:14',
        //   rule: '固定电话格式校验3',
        //   model: '人员模型',
        //   attribute: 'CARD ID 人员',
        //   example: '测试任务1',
        //   state: '失败',
        //   time: '2021/12/12 12:12:12'
        // },
        // {
        //   date: '2020/12/14  12:04:14',
        //   rule: '固定电话格式校验4',
        //   model: '人员模型',
        //   attribute: 'CARD ID 人员',
        //   example: '测试任务1',
        //   state: '失败',
        //   time: '2021/12/12 12:12:12'
        // },
        // {
        //   date: '2020/12/14  12:04:14',
        //   rule: '固定电话格式校验5',
        //   model: '人员模型',
        //   attribute: 'CARD ID 人员',
        //   example: '测试任务1',
        //   state: '失败',
        //   time: '2021/12/12 12:12:12'
        // },
        // {
        //   date: '2020/12/14  12:04:14',
        //   rule: '固定电话格式校验6',
        //   model: '人员模型',
        //   attribute: 'CARD ID 人员',
        //   example: '测试任务1',
        //   state: '失败',
        //   time: '2021/12/12 12:12:12'
        // }
      ],
      sevenDaysCount: 0,
      thirtyDaysCount: 0,
      todayCount: 0,
      warnConfigCount: 0,
      sendData: {
        ruleName: '',
        taskInstance: '',
        annStatus: ''
      },
      params: {
        pageSize: 10,
        pageNum: 1
      },
      total: 5
    }
  },
  components: {
    Table
  },
  mounted() {
    this.getTableTips()
    this.getTableList()
  },
  methods: {
    // 获取提示信息
    getTableTips() {
      tableTips().then((res) => {
        const { sevenDaysCount, thirtyDaysCount, todayCount, warnConfigCount } = res.data
        if (res.code === 200) {
          this.sevenDaysCount = sevenDaysCount
          this.thirtyDaysCount = thirtyDaysCount
          this.todayCount = todayCount
          this.warnConfigCount = warnConfigCount
        }
      })
    },
    // 得到表格信息
    getTableList() {
      tableList({ ...this.params }).then((res) => {
        if (res.code === 200) {
          this.dataSource = res.rows
          this.total = res.total * 1
        }
      })
    },
    // 改变parmas
    changeParams(key, value) {
      this.$set(this.params, key, value)
    }
    // 搜索之后得到表格信息

  },
  watch: {
    params: {
      deep: true,
      immediate: true,
      handler(val) {
        this.getTableList()
      }
    }
  }
}
</script>

<style lang="less" scoped>
.showData {
  // height: 800px;
  width: 97%;
  margin-left: 20px;
  margin-top: 20px;
  padding: 0 20px;
  padding: 20px;
  background-color: white;
  border-radius: 4px;
  padding: 20px;
  box-shadow: 0 0 10px 0 rgba(17, 32, 65, 0.08);
  .title {
    margin: 10px;
    font-size: 20px;
    font-weight: 700;
  }
  .onlyShow {
    display: flex;
    padding: 0;
    align-items: center;
    .show {
      background: #ffffff;
      box-sizing: border-box;
      padding: 20px 0 20px;
      margin: 10px 10px;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background-size: 100% 100%;
      cursor: pointer;
      width: 216px;
      height: 56px;
      background-color: rgba(255, 255, 255, 0);
      box-sizing: border-box;
      border-width: 1px;
      border-style: solid;
      border-color: rgba(232, 232, 232, 1);
      border-radius: 14px;
      font-weight: 400;
      font-style: normal;
      font-size: 16px;
      color: #999999;
      span {
        margin-right: 10px;
        padding-right: 10px;
        font-size: 20px;
        font-weight: 700;
        color: #000;
      }
    }
  }
  .table {
    margin-top: 20px;
    margin-left: 20px;
  }
}
</style>
