<template>
  <div class="audit-qualitycontrol">
    <div class="aq-top-tab">
      <el-tabs v-model="type" @tab-click="handleClick">
        <el-tab-pane label="筛查病例数据" name="0"></el-tab-pane>
        <el-tab-pane label="随访病例数据" name="1"></el-tab-pane>
      </el-tabs>
    </div>
    <div class="aq-bot-table">
      <div class="table-top-tab">
        <el-tabs v-model="auditStatus" type="card" @tab-click="handleClick">
          <el-tab-pane label="待审核" name="0"></el-tab-pane>
          <el-tab-pane label="已审核" name="1"></el-tab-pane>
        </el-tabs>
        <div v-show="auditStatus == 1" class="keyExplain">
          字段说明<img src="~@/assets/img/DataCenter/question.png" alt="" />
        </div>
      </div>
      <div class="bot-table">
        <customs-table
          ref="table"
          :table-data="tableData"
          :columns="columns"
          :header-class="'newHeader'"
          :list-loading="listLoading"
          :current-page="pageIndex"
          :total-count="total"
          :page-sizes="pageSizes"
          :page-size="pageSize"
          @pageSizeChange="handleSizeChange"
          @currentPageChange="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>
<script>
import CustomsTable from "@/components/CustomsTable"
import paginationMixin from "@/components/TabComponents/mixin"
export default {
  components: {
    CustomsTable,
  },
  mixins: [paginationMixin],
  data() {
    return {
      type: "0",
      auditStatus: "0",
      listLoading: false,
      columns: [
        {
          label: "医联体",
          minWidth: 120,
          value: "title",
        },
        {
          label: "已审核（例）",
          minWidth: 120,
          value: "file",
        },
        {
          label: "待审核（例）备份",
          minWidth: 120,
          value: "uploadTime",
        },
        {
          label: "最新上报时间",
          minWidth: 120,
          value: "editTime",
        },
        {
          label: "操作",
          width: 220,
          fixed: "right",
          operType: "button",
          operations: [
            {
              func: this.auditHandle,
              label: "审核",
              type: "text",
            },
          ],
        },
      ],
      tableData: [
        {
          title: "第一个",
          isOpen: true,
        },
      ],
    }
  },
  watch: {},
  mounted() {},
  methods: {
    handleClick() {
      console.log("type:" + this.type, "auditStatus" + this.auditStatus)
      if (this.auditStatus == 1) {
        this.columns[this.columns.length - 1].operations[0].label =
          "修改审核意见"
      } else {
        this.columns[this.columns.length - 1].operations[0].label = "审核"
      }
    },
    auditHandle(data, i) {
      console.log(data, i)
      this.$router.push({
        path: "/auditdetail",
        query: {
          id: i,
        },
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.audit-qualitycontrol {
  padding: 20px 0;
  .table-top-tab {
    margin-bottom: 15px;
    position: relative;
    .keyExplain {
      position: absolute;
      display: flex;
      align-items: center;
      right: 0;
      top: 10%;
      font-size: 16px;
      font-family: AlibabaPuHuiTiR;
      color: #999999;
      img {
        width: 18px;
        height: 18px;
        margin-left: 5px;
        transform: translateY(1px);
      }
    }
  }
  .aq-bot-table {
    padding: 20px;
    ::v-deep {
      .el-tabs__nav {
        border: none;
      }
      .el-tabs__item {
        margin-right: 10px;
        border: 1px solid #e4e7ed;
        border-radius: 5px 5px 0 0;
      }
      .is-active {
        background: #4e68ff;
        color: #fff;
      }
    }
  }
}
::v-deep {
  .el-tabs__item {
    padding-left: 20px !important;
    font-size: 18px;
    font-family: AlibabaPuHuiTiM;
  }
  .is-active {
    color: #4e68ff;
  }
}
</style>