<template>
  <div>
    <a-table
      ref="table"
      :row-selection="rowSelection"
      :pagination="{
        total: total,
        'show-less-items': true,
        'show-quick-jumper': true,
        onChange: onPageChange,
        hideOnSinglePage: true,
      }"
      bordered
      :rowKey="
        (record, index) => {
          return record.id
        }
      "
      :columns="columns"
      :data-source="dataSource"
      :scroll="{ x: xscroll }"
    >
      <div slot="play" style="color:#02A7F0" slot-scope="text,record">
        <span style="cursor:pointer" @click="showModal1(record)">运行结果</span>
        <span style="cursor:pointer" v-if="record.runStatus==='运行成功'" @click="showQuality(record)">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;质量报告</span>
      </div>
      <div
        class="table-search-bar"
        slot="filterDropdown"
        slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"
      >
        <a-input
          v-ant-ref="(c) => (searchInput = c)"
          :placeholder="`请输入${column.title}`"
          :value="selectedKeys[0]"
          @change="(e) => setSelectedKeys(e.target.value ? [e.target.value] : [])"
          @pressEnter="() => handleSearch(selectedKeys, confirm, column.dataIndex)"
        />
        <div class="">
          <a-button type="primary" size="small" @click="() => handleSearch(selectedKeys, confirm, column.dataIndex)">
            搜索
          </a-button>
          <a-button size="small" @click="() => handleReset(clearFilters)"> 重置 </a-button>
        </div>
      </div>
      <a-icon
        slot="filterIcon"
        slot-scope="filtered"
        type="search"
        :style="{ color: filtered ? '#108ee9' : undefined }"
      />
    </a-table>
  </div>
</template>

<script>
export default {
  props: {
    columns: {
      type: Array,
      default: () => []
    },
    dataSource: {
      type: Array,
      default: () => []
    },
    total: {
      type: Number,
      required: true
    },
    // listData: {
    //   type: Object
    // },
    visible: {
      type: Boolean,
      default: () => {
        return false
      }
    }
  },
  data() {
    return {
      confirmLoading: false,
      searchInput: null,
      searchText: '',
      selectedRowKeys: [],
      selectedRows: [],
      xscroll: 1300
    }
  },
  computed: {
    rowSelection() {
      if (this.isSelected) {
        return {
          onChange: (selectedRowKeys, selectedRows) => {
            // console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows)
            this.onSelectChange(selectedRowKeys, selectedRows)
          },
          selectedRowKeys: this.selectedRowKeys,
          getCheckboxProps: (record) => ({
            props: {
              // disabled: record.name === 'Disabled User', // Column configuration not to be checked
              // name: record.name
            }
          })
        }
      } else {
        return null
      }
    }
  },
  methods: {
    showQuality(record) {
      const routeUrl = this.$router.resolve({
          path: '/quality/reports/index',
          query: { id: record.id }
      })
      window.open(routeUrl.href, '_blank')
    },
    showModal1(e) {
      this.$parent.showModal(e)
    },
    // // // 以下三个都是弹出对话框的方法
    // // showModal() {
    // //   this.visible = true
    // // },
    // handleOk(e) {
    //   this.confirmLoading = true
    //   setTimeout(() => {
    //     this.visible = false
    //     this.confirmLoading = false
    //   }, 1000)
    // },
    // handleCancel(e) {
    //   // console.log('Clicked cancel button')
    //   this.visible = false
    // },
    // // 判断通用规则还是自定义规则
    // judge() {
    //   this.listData.data_object.forEach((item) => {
    //     if (item.rule_type === '0') {
    //       return this.data1.push(item)
    //     }
    //     if (item.rule_type === '1') {
    //       return this.data2.push(item)
    //     }
    //   })
    // },
    // 以下两个是切换运行日志或结果的方法
    // goModelView() {
    //   this.$router.push({
    //     path: basePath,
    //     query: {
    //       redirectPath: this.$route.path
    //     }
    //   })
    // },
    callback(key) {},
    handleReset(clearFilters) {
      clearFilters()
      this.searchText = ''
    },
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
    handleSearch(selectedKeys, confirm, dataIndex) {
      confirm()
      console.log(`object`, selectedKeys, dataIndex)
      this.searchText = selectedKeys[0]
      this.searchedColumn = dataIndex
      this.$emit('changeParams', dataIndex, selectedKeys[0])
    },
    onPageChange(e) {
      this.$emit('changeParams', 'pageNum', e)
    }
  },
  components: {
    // Journal,
    // Result
  },
  mounted() {},
  watch: {
    dataSource: {
      /* 当数据发生变化是置空选择的行 */ deep: true,
      immediate: true,
      handler(val) {
        this.selectedRowKeys = []
        this.selectedRows = []
        // this.$set(this.$data, 'selectedRowKeys', [])
        // this.$set(this.$data, 'selectedRows', [])
      }
    },
    columns: {
      deep: true,
      immediate: true,
      handler(val) {
        const length = this.columns.length
        if (length > 9) {
          this.xscroll = this.columns.length * 200 - 400
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
.ant-table-pagination.ant-pagination {
  float: unset;
  display: flex;
  justify-content: center;
  width: 100%;
}
.table-search-bar {
  border-radius: 5px;
  padding: 10px 10px;
  box-shadow: 0 0 10px 0 rgba(17, 32, 65, 0.08);
  & > input {
    margin-bottom: 8px;
    border-radius: 5px;
  }
  & > div {
    display: flex;
    justify-content: space-between;

    button {
      width: 80px;
      height: 28px;
      border-radius: 5px;
    }
  }
}
#audit-wrap {
  // width: 100%;
  margin: 0 20px;
  // margin-top: 20px;
  background: #ffffff;
  border-radius: 5px;
  box-sizing: border-box;
  // padding: 25px 0;
  // box-shadow: 0 0 10px 0 rgba(17, 32, 65, 0.08);
  .main {
    // padding: 0 40px;
    // margin-top: 20px;
    .table-operations {
      margin: 30px 0 35px;
    }
  }
}
</style>
