<template>
  <div>

    <el-table v-loading='loading' :data='tableData' tooltip-effect="dark" border
      @selection-change="handleSelectionChange">
      <el-table-column type="selection" align="center" width="55"></el-table-column>
      <el-table-column prop="caseNo" width="80" align="center" show-overflow-tooltip label="盒号"></el-table-column>
      <el-table-column prop="archiveNum" width="120" align="center" show-overflow-tooltip label="档案数量">
        <template slot-scope="scope">
          <el-tag effect="dark" type="primary" size="mini">{{scope.row.archiveNum ? scope.row.archiveNum : 0}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column width="220" prop="labelId" align="center" show-overflow-tooltip label="档案盒编号"></el-table-column>
      <el-table-column prop="boxName" width="150" align="center" show-overflow-tooltip label="档案盒类型"></el-table-column>
      <el-table-column prop="" width="120" align="center" show-overflow-tooltip label="入库状态">
        <template slot-scope="scope">
          <el-tag effect="dark" v-if="scope.row.state === 0" type="danger" size="mini">未入库</el-tag>
          <el-tag effect="dark" v-if="scope.row.state === 1" type="success" size="mini">已入库</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="retention" width="120" align="center" show-overflow-tooltip label="保管期限"></el-table-column>
      <el-table-column prop="filingYear" align="center" width="120" show-overflow-tooltip label="归档年度">
      </el-table-column>
      <el-table-column prop="archiveCtgNo" align="center" show-overflow-tooltip label="机构"></el-table-column>
      <el-table-column prop="boxPosition" align="center" width="120" show-overflow-tooltip label="完整位置">
      </el-table-column>
      <el-table-column prop="storageTime" align="center" width="120" show-overflow-tooltip label="入库时间">
      </el-table-column>
      <el-table-column prop="" align="center" show-overflow-tooltip label="借出状态" width="120">
        <template slot-scope="scope">
          <el-tag effect="dark" v-if="scope.row.borrowState === 0" type="success" size="mini">未借出</el-tag>
          <el-tag effect="dark" v-if="scope.row.borrowState === 1" type="primary" size="mini">已借出</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" fixed="right" width="190">
        <template slot-scope="scope">
          <el-button @click="detail(scope.row)" size="mini" type="text" v-show='scope.row.caseNo'>详情</el-button>
          <el-button @click="edit('修改',scope.row)" size="mini" type="text" v-if=' showButtons.edit'>修改</el-button>
          <el-button @click="selectda(scope.row)" size="mini" type="text" v-if="showButtons.addDel"
            style="color:#E8AF1A;font-weight:600">添加档案
          </el-button>
          <el-button @click="del(scope.row.id)" size="mini" type="text" v-if="showButtons.del" style="color:#FF4949">
            删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @current-change="handleCurrentChange" @size-change="handleSizeChange"
      layout="total, prev, pager, next, sizes" :page-size="pagination.pageSize" :page-sizes="[10, 20, 30, 50]"
      :current-page="pagination.pageNum" :total="pagination.total">
    </el-pagination>
  </div>
</template>
<script>
  export default {
    props: {
      loading: {
        type: Boolean,
        default: () => {},
      },
      tableData: {
        type: Array,
        default: () => [],
      },
      pagination: {
        type: Object,
        default: () => {},
      },
      showButtons: {
        type: Object,
        default: () => {},
      },
    },
    data() {
      return {

      }
    },
    methods: {
      handleCurrentChange(val) {
        this.pagination.pageNum = val;
        this.$emit("getData");
      },
      handleSizeChange(val) {
        this.pagination.pageSize = val;
        this.pagination.pageNum = 1;
        this.$emit("getData");
      },
      handleSelectionChange(val) {
        this.$emit('handleSelectionChange', val)
      },
      del(id) {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$store.dispatch('fileBoxManagement/deleteData', {
            ids: id
          }).then(res => {
            this.$emit('getData')
          })
        }).catch(() => {});
      },
      edit(str, val) {
        this.$emit('edit', str, val)
      },
      selectda(row) {
        this.$emit('selectda', row)
      },
      detail(row) {

        this.$emit('detail', row)
      }
    }
  }

</script>
<style lang='scss' scoped>

</style>
