<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"
            :data="tableData"
            :filteredLabels="storeLables"
            @selection-change='handleSelectChange'
            @row-click="toCheck">
            <table-column
                type="selection"
                fixed
                align="center">
            </table-column>
            <table-column
                label="入库单号"
                prop="asnNo">
                <template slot-scope="scope">
                  <span class="blue" @click.stop="handleOpenDetail(scope.row.asnNo)">{{scope.row.asnNo}}</span>
                </template>
            </table-column>
            <table-column
                label="状态">
                <template slot-scope="scope">
                  <p>{{ $utils.keyMatcher(scope.row.status, $keys.stockIn.status).name }}</p>
                  <p>{{ $utils.keyMatcher(scope.row.auditStatus, $keys.stockIn.auditStatus).name }}</p>
                  <p>{{ $utils.keyMatcher(scope.row.holdStatus, $keys.stockIn.holdStatus).name }}</p>
                </template>
            </table-column>
            <table-column
                label="类型">
                <template slot-scope="scope">
                    {{ $utils.keyMatcher(scope.row.asnType, $keys.stockIn.asnType).name }}
                </template>
            </table-column>
            <table-column
                label="货主">
                <template slot-scope="scope">
                    <p>{{scope.row.ownerCode}}</p>
                    <p>{{scope.row.ownerName}}</p>
                </template>
            </table-column>
            <table-column
                label="供应商"
                prop="supplierName">
            </table-column>
            <table-column
                label="物流单号"
                prop="logisticNo">
            </table-column>
            <table-column
                label="订单时间"
                prop="orderTime">
            </table-column>
            <table-column
                label="预收数"
                prop="sumQtyAsnEa">
            </table-column>
              <table-column
                label="预收重量"
                prop="sumAsnWeight"
                :render-header="renderWeightHeader">
                <template slot-scope="scope">
                  {{scope.column.unit === 'KG' ? (+scope.row.sumAsnWeight * 1000).toFixed($consts.numFix.KG) : (+scope.row.sumAsnWeight).toFixed($consts.numFix.TON)}}
                </template>
              </table-column>
            <table-column
                label="预计到货时间"
            min-width="110">
                <template slot-scope="scope">
                    <p>{{scope.row.fmEta}}</p>
                    <p>{{scope.row.toEta}}</p>
                </template>
            </table-column>
            <table-column
                label="创建人"
                prop="creatorLoginName">
            </table-column>
            <table-column label="操作" width="150" fixed="right">
                <template slot-scope="scope">
                  <el-badge style="margin-right: 20px;" :value="scope.row.fileNumber">
                    <el-tooltip content="附件" placement="top">
                      <el-button
                        size="mini"
                        type="primary"
                        icon="el-icon-tickets"
                        plain
                        circle
                        @click.stop="toFile(scope.row)"
                      ></el-button>
                    </el-tooltip>
                  </el-badge>
                  <el-tooltip content="编辑" placement="top">
                    <el-button
                        size="mini"
                        type="primary"
                        icon="el-icon-edit"
                        plain
                        circle
                        @click="handleEdit(scope.$index, scope.row)" v-auth="50100020127"></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)" v-auth="50100020128"></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>
import EditForm from './add-form'
export default {
  components: {
    EditForm
  },
  data () {
    return {
      // currentPage: 1,
      // pageSize: 10,
      editVisible: false,
      model: {
        type: ''
      },
      headData: {},
      carData: [],
      goodsData: [],
      storeKey: 'preReceiving',
    }
  },
  mounted () {

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

    // 点击表格行
    toCheck (row) {
      this.$refs.table.toggleRowSelection(row)
    },

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

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

    getData (url, param) {
      return this.$https.post(url, param)
    },
    // 编辑
    handleEdit (index, row) {
      if (row.status !== '00' || row.auditStatus === '99') return this.$message.warning('非创建状态或已审核不能编辑')
      const headUrl = this.$API.stockIn.preReceiving.headList
      const goodsUrl = this.$API.stockIn.preReceiving.goodsList
      const carUrl = this.$API.stockIn.preReceiving.carList
      const param = { asnNo: row.asnNo, 'page.currentPage': 1, 'page.limitCount': 10 }

      this.$https.all([this.getData(headUrl, param), this.getData(carUrl, param), this.getData(goodsUrl, param)]).then(res => {
        this.headData = res[0]
        let carData = res[1].rows || []
        carData.map(item => { return (item['isChecked'] = false) })
        this.carData = carData
        const currentPage = res[1].currentPage
        const total = res[1].total
        const limit = res[1].limit
        this.goodsData = res[2].rows
        this.$emit('handleOpenEditForm', 'edit', this.headData, this.carData, this.goodsData, currentPage, limit, total)
      })
    },

    // 删除当前行数据
    handleDelete (index, row) {
      const url = this.$API.stockIn.preReceiving.delList
      const param = {
        asnNos: row.asnNo
      }
      this.$confirm('是否删除此条数据？', '删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$https.post(url, param).then(res => {
          if (res.success) {
            this.$emit('getList')
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },

    // 进入详情
    handleOpenDetail (id) {
      const headUrl = this.$API.stockIn.preReceiving.getDetailHead
      const goodsUrl = this.$API.stockIn.preReceiving.getDetailGoods
      const carUrl = this.$API.stockIn.preReceiving.getDetailCar
      const param = { asnNo: id, 'page.currentPage': 1, 'page.limitCount': 10 }

      this.$https.all([this.getData(headUrl, param), this.getData(carUrl, param), this.getData(goodsUrl, param)]).then(res => {
        this.headData = res[0]
        let carData = res[1].rows || []
        carData.map(item => { return (item['isChecked'] = false) })
        this.carData = carData
        const currentPage = res[1].currentPage
        const total = res[1].total
        const limit = res[1].limit
        this.goodsData = res[2].rows
        this.$emit('handleOpenDetail', 'detail', this.headData, this.carData, this.goodsData, currentPage, limit, total)
      })
    },

    // checkbox勾选,存储id
    handleSelectChange (selection) {
      const selectedIds = selection.map(item => item.asnNo).join(',')
      this.$emit('handleSelectChange', selectedIds)
    },
    // 附件管理
    toFile (row) {
      const config = {
        orderNo: row.asnNo, // 组件需要的当前选择的业务单号
      }
      this.$upload(config)
    },
  }
}
</script>
<style lang="scss" scoped>
    .mrg-b{
        margin-bottom: 20px;
    }
    .mrg-l{
        margin-left:10px;
    }
    .blue{
      cursor:pointer;
      color:#0682ea
    }
</style>
