<template>
  <div>
    <div class="mrg-b">
      <!--<drop-filter :columns="wholeLabels" :storeKey="storeKey" :storeLabels="storeLables"-->
                   <!--@doFilter="labels => storeLables = labels"></drop-filter>-->
      <el-table
        ref="table"
        stripe
        border
        :max-height="tableMaxHeight"
        :filteredLabels="storeLables"
        :data="tableData"
        @selection-change='handleSelectChange'>
        <table-column
          type="selection"
          fixed
          align="center">
        </table-column>
        <table-column
          label="库位编码"
          prop="locCode">
          <template slot-scope="scope">
            <span class="blue" @click.stop="handleOpenDetail(scope.row.locCode)">{{scope.row.locCode}}</span>
          </template>
        </table-column>
        <table-column
          label="库位名称"
          prop="def1">
        </table-column>
        <table-column
          label="所属库区"
          prop="zoneName">
        </table-column>
        <table-column
          label="库位状态">
          <template slot-scope="scope">
            {{ $utils.keyMatcher(scope.row.status, $keys.warehouseBasic.status).name || '-' }}
          </template>
        </table-column>
        <table-column
          label="使用类型">
          <template slot-scope="scope">
            {{ $utils.keyMatcher(scope.row.locUseType, $keys.warehouseBasic.locUseType).name || '-' }}
          </template>
        </table-column>
        <table-column
          label="库位种类">
          <template slot-scope="scope">
            {{ $utils.keyMatcher(scope.row.cdwlCategory, $keys.warehouseBasic.cdwlCategory).name || '-' }}
          </template>
        </table-column>
        <table-column
          label="固定/动态拣货位">
          <template slot-scope="scope">
            {{ $utils.keyMatcher(scope.row.locPkType, $keys.warehouseBasic.locPkType).name || '-' }}
          </template>
        </table-column>
        <table-column
          label="是否启用">
          <template slot-scope="scope">
            {{ $utils.keyMatcher(scope.row.isEnable, $keys.warehouseBasic.isEnable).name || '-' }}
          </template>
        </table-column>
        <table-column
          label="操作"
          minWidth="150"
          fixed="right">
          <template slot-scope="scope">
            <el-tooltip content="查看附件" placement="top">
              <el-badge style="margin-right: 20px;" :value="scope.row.fileNumber">
                <el-button
                  title="查看附件"
                  size="mini"
                  type="primary"
                  icon="el-icon-tickets"
                  plain
                  circle
                  @click.stop="toFile(scope.row)"
                ></el-button>
              </el-badge>
            </el-tooltip>
            <el-tooltip content="编辑" placement="top">
              <el-button
                size="mini"
                type="primary"
                icon="el-icon-edit"
                plain
                circle
                @click="handleEdit(scope.$index, scope.row)"></el-button>
            </el-tooltip>
            <el-tooltip content="删除" placement="top">
              <el-button
                size="mini"
                type="danger"
                icon="el-icon-delete"
                plain
                circle
                @click="handleDelete(scope.$index, scope.row)"></el-button>
            </el-tooltip>
          </template>
        </table-column>
      </el-table>
    </div>
    <div>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {

      storeKey: 'libraryPlace'
    }
  },
  props: {
    tableData: {
      type: Array,
      default: () => []
    },
    total: Number,
    pageSize: Number,
    currentPage: Number,
  },
  methods: {

    // 每页显示条数
    handleSizeChange (pageSize) {
      const query = { 'page.limitCount': pageSize, 'page.currentPage': this.currentPage }
      this.$emit('getList', query)
    },

    // 当前页码
    handleCurrentChange (currentPage) {
      const query = { 'page.limitCount': this.pageSize, 'page.currentPage': currentPage }
      this.$emit('getList', query)
    },

    // 编辑行
    handleEdit (index, row) {
      const rowData = Object.assign({}, row)
      this.$emit('handleOpenForm', 'edit', rowData)
    },

    // 详情
    handleOpenDetail (id) {
      const url = this.$API.warehouseBasic.libraryPlace.getDetailList
      const param = { locCode: id }
      this.$https.post(url, param).then(res => {
        const data = res.rows[0]
        this.$emit('handleOpenForm', 'detail', data)
      })
    },

    // 删除行
    handleDelete (index, row) {
      const url = this.$API.warehouseBasic.libraryPlace.delList
      const param = { locs: [row] }
      const config = {
        headers: { 'Content-Type': 'application/json' },
        transformRequest: [],
      }

      this.$confirm('是否删除此条数据？', '删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$https.post(url, param, config).then(res => {
          if (res.errorMsg && res.errorMsg !== '操作成功') {
            this.$message.error(res.errorMsg)
          }
          this.$emit('getList')
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },

    // checkbox勾选
    handleSelectChange (rows) {
      const ids = rows.map(item => item.locCode)
      this.$emit('handleSelectChange', rows, ids)
    },
    // 附件管理
    toFile (row) {
      const config = {
        orderNo: row.locCode, // 组件需要的当前选择的业务单号
        businessType: 'LIVE',
      }
      this.$upload(config)
    },
  }
}
</script>
<style lang="scss" scoped>
  .mrg-b {
    margin-bottom: 20px;
  }

  .mrg-l {
    margin-left: 10px;
  }

  .blue {
    cursor: pointer;
    color: #0682ea
  }
</style>
