<template>
<div class="list">
  <el-table
    ref="table"
    stripe
    border
    :max-height="tableMaxHeight"
    :data="list"
    @selection-change="selectionChange"
    @row-click="toCheck"
  >
    <table-column type="selection" fixed align="center"></table-column>
    <table-column label="转移单号" prop="tfNo">
      <template slot-scope="scope">
        <span class="detail-no" @click.stop="toDetail(scope.row.tfNo)">{{scope.row.tfNo}}</span>
      </template>
    </table-column>
    <table-column label="状态" prop="status">
      <template slot-scope="scope">
        <div>{{ $utils.keyMatcher(scope.row.status, $keys.inventory.tfOrder.status).name }}</div>
        <div>{{ $utils.keyMatcher(scope.row.auditStatus, $keys.common.auditStatus).name }}</div>
      </template>
    </table-column>
    <table-column label="源货主/目标货主" prop="ebcuNameCn">
      <template slot-scope="scope">
        <div>{{scope.row.ebcuNameCn}}</div>
        <div>{{scope.row.toOwnerName || '-'}}</div>
      </template>
    </table-column>
    <table-column label="转移原因" prop="reasonCode">
      <template slot-scope="scope">
        <div>{{ $utils.keyMatcher(scope.row.reasonCode, $keys.inventory.tfOrder.reasonCode).name }}</div>
      </template>
    </table-column>
    <table-column label="操作" width="150" fixed="right">
      <template slot-scope="scope">
        <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-button
          v-auth="50300070117"
          title="编辑"
          size="mini"
          type="primary"
          icon="el-icon-edit"
          plain
          circle
          @click.stop="toEdit(scope.row)"
        ></el-button>
        <el-button
          v-auth="50300070118"
          title="删除"
          size="mini"
          type="danger"
          icon="el-icon-delete"
          plain
          circle
          @click.stop="toDelete(scope.row)"
        ></el-button>
      </template>
    </table-column>
  </el-table>
  <el-pagination
    class="pagination"
    @size-change="sizeChange"
    @current-change="currentChange"
    :current-page="currentNo"
    :page-sizes="[10, 20, 30, 40, 50]"
    :page-size="pageSize"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total"
  ></el-pagination>
</div>
</template>

<script>
export default {
  props: ['list', 'total', 'currentNo', 'pageSize'],
  created () {
  },
  mounted () {
  },

  data () {
    return {
      // currentNo: 1,
      // pageSize: 20,
    }
  },
  methods: {
    // 点击表格行
    toCheck (row) {
      this.$refs.table.toggleRowSelection(row)
    },
    // 页码变化
    currentChange (currentNo) {
      const query = { 'page.currentPage': currentNo, 'page.limitCount': this.pageSize }
      this.$emit('getList', query)
    },
    // 每页条数变化
    sizeChange (pageSize) {
      const query = { 'page.limitCount': pageSize, 'page.currentPage': this.currentNo }
      this.$emit('getList', query)
    },
    toEdit (row) {
      const allowedStatus = ['00']
      const allowedAuditStatus = ['00']
      if (!allowedStatus.includes(row.status) || !allowedAuditStatus.includes(row.auditStatus)) {
        this.$message.warning('该状态下不能编辑哦')
      } else {
        this.$emit('toCreator', row.tfNo, 'edit')
      }
    },
    // 前往详情
    toDetail (tfNo) {
      this.$emit('toCreator', tfNo)
    },
    toDelete (row) {
      this.$confirm(`是否要删除 ?`)
        .then(() => {
          const url = this.$API.inventory.tfOrder.delete
          const param = { wmTfOrderQueryItemBean: JSON.stringify([row]) }
          this.$https.post(url, param)
            .then(data => {
              this.$emit('getList')
            })
        })
    },
    // 勾选变化
    selectionChange (selection) {
      this.$emit('selectionChange', selection)
    },
    toFile (row) {
      const config = {
        orderNo: row.tfNo, // 组件需要的当前选择的业务单号
      }
      this.$upload(config)
    },
  },
}
</script>

<style lang="scss" scoped>
.pagination {
  margin-top: 20px;
}
.detail-no {
  color: #0682ea;
  &:hover {
    cursor: pointer;
  }
}
</style>
