<template>
  <div class="content">
    <div class="title">
      <div>开始时间: {{ listData.begin_time }}</div>
      <div>运行时间: {{ listData.run_time }}</div>
      <div>数据库名称: {{ listData.database_name }}</div>
      <div>表名称:{{ listData.model_name }}</div>
    </div>
    <div class="tab">
      <a-tabs :default-active-key="1" @change="callback">
        <a-tab-pane key="1" tab="通用规则">
          <a-table :columns="columns1" bordered :pagination="false" :data-source="data1">
            <template slot="error_data" slot-scope="error_data">
              <a v-if="error_data" @click="exports(error_data)">导出</a>
            </template>
            <div slot="rule_name" slot-scope="text,record">
              <span v-if="record.data_size==0" style="color:red">{{ text }}</span>
              <span v-else>{{ text }}</span>
            </div>
          </a-table>
        </a-tab-pane>
        <!-- <a-tab-pane key="2" tab="自定义规则" force-render>
          <a-table :columns="columns2" bordered :pagination="false" :data-source="data2">
            <a slot="data" @click="exports(error_data)">导出</a>
            <template slot="error_data" slot-scope="error_data">
              <a v-if="error_data" @click="exports(error_data)">导出</a>
            </template>
          </a-table>
        </a-tab-pane> -->
      </a-tabs>
    </div>
  </div>
</template>

<script>
import { exportErrorData } from '@/api/system/taskInstance.js'
const columns1 = [
  {
    title: '字段名称',
    // key: 'attr_name',
    dataIndex: 'attr_name'
  },
  {
    title: '校验规则',
    // key: 'rule_name',
    dataIndex: 'rule_name',
    scopedSlots: { customRender: 'rule_name' }
  },
  // {
  //   title: '校验参数',
  //   // key: 'param_check',
  //   dataIndex: 'param_check'
  // },
  {
    title: '告警参数',
    // key: 'warn_content',
    dataIndex: 'warn_content'
  },
  {
    title: '总行数',
    // key: 'warn_content',
    dataIndex: 'data_size'
  },
  {
    title: '错误行数',
    // key: 'data_size',
    dataIndex: 'error_size'
  },
  // {
  //   title: '错误',
  //   // key: 'error_size',
  //   dataIndex: 'error_size'
  // },
  {
    title: '错误率',
    // key: 'error_rate',
    dataIndex: 'error_rate'
  },
  {
    title: '操作',
    // key: 'error_data',
    dataIndex: 'error_data',
    slots: 'error_data',
    scopedSlots: { customRender: 'error_data' }
  }
]
const columns2 = [
  {
    title: '字段名称',
    key: 'attr_name',
    dataIndex: 'attr_name'
  },
  {
    title: '校验规则',
    key: ' rule_name',
    dataIndex: 'rule_name'
  },
  {
    title: '符合要求的行数',
    key: ' right_size',
    dataIndex: 'right_size'
  },
  {
    title: '不符合要求的数据',
    key: 'error_data',
    dataIndex: 'error_data',
    scopedSlots: { customRender: 'error_data' }
  }
]
// const data1 = [
//   {
//     key: '1',
//     name: '学校名称1',
//     rule: '空值校验',
//     check: '',
//     alarm: '',
//     dataNum: '456',
//     err: '10',
//     errRate: '10%',
//     operation: '导出'
//   },
//   {
//     key: '2',
//     name: '学校名称1',
//     rule: '唯一值校验',
//     check: '',
//     alarm: '',
//     dataNum: '475',
//     err: '5',
//     errRate: '1%',
//     operation: '导出'
//   }
// ]
// const data2 = [
//   {
//     key: '1',
//     name: '学校名称1',
//     rule: '空值校验',
//     num: '40',
//     data: '导出'
//   },
//   {
//     key: '2',
//     name: '学校名称1',
//     rule: '唯一值校验',
//     num: '70',
//     data: '导出'
//   }
// ]

export default {
  props: ['listData', 'data1', 'data2'],
  data() {
    return {
        // data1: [],
        // data2: [],
        columns1,
        columns2,
        // 错误信息标识
        data3: {
          errorData: ''
        }
    }
  },
  components: {
  },
  methods: {
    // 导出
    exports(e) {
      this.data3.errorData = e
      exportErrorData(this.data3).then((res) => {
        if (res.code === 200) {
          this.download(res.msg)
        }
      })
    },
    callback() {
      // console.log('this.data2', this.data2)
    }
  },
  mounted() {
console.log('this.data1', this.data1)
  },
  watch: {
    // listData: {
    //   immediate: true,
    //   deep: true,
    //   handler: "judge"
    // }
  }
}
</script>

<style lang="less" scoped>
.content {
    .title {
        font-size: 20px;
        font-weight: 700;
        >div {
            padding: 10px
        }
    }
}
</style>
