<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="ldNo">
                <template slot-scope="scope">
                  <span class="blue" @click.stop="handelOpenDetail(scope.row.ldNo)">{{scope.row.ldNo}}</span>
                </template>
                </table-column>
                <table-column
                label="状态">
                    <template slot-scope="scope">
                        {{ $utils.keyMatcher(scope.row.status, $keys.stockOut.loadingList.status).name }}
                    </template>
                </table-column>
                <table-column
                label="出库单状态">
                    <template slot-scope="scope">
                        {{ $utils.keyMatcher(scope.row.soStatus, $keys.stockOut.loadingList.soStatus).name }}
                    </template>
                </table-column>
                <table-column
                label="装车单类型">
                     <template slot-scope="scope">
                        {{ $utils.keyMatcher(scope.row.ldType, $keys.stockOut.loadingList.ldType).name }}
                    </template>
                </table-column>
                <table-column
                label="车牌号"
                prop="vehicleNo">
                </table-column>
                <table-column
                label="车型"
                prop="vehichleType">
                </table-column>
                <table-column
                label="驾驶员"
                prop="driver">
                </table-column>
                <table-column
                label="预计装车时间">
                    <template slot-scope="scope">
                        <p>从：{{scope.row.fmLdTime}}</p>
                        <p>到：{{scope.row.toLdTime}}</p>
                    </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
                            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>
import { createNamespacedHelpers } from 'vuex'
const { mapState } = createNamespacedHelpers('framework')
export default {
  data () {
    return {

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

  },
  methods: {

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

    // 每页显示条数
    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) {
      if (row.status !== '10') {
        return this.$message({ message: '不为创建状态,不能编辑', type: 'success' })
      }
      const url = this.$API.stockOut.loadingList.editList
      const param = { ldNo: row.ldNo }
      this.$https.post(url, param).then(res => {
        if (res.success) {
          this.$emit('handleOpenEditForm', 'edit', res.data)
        }
      })
    },

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

    getData (url, param) {
      return this.$https.post(url, param)
    },

    handelOpenDetail (id) {
      const detailUrl = this.$API.stockOut.loadingList.getDetailInfo
      const detailParam = { ldNo: id, 'page.currentPage': 1, 'page.limitCount': 10 }
      const url = this.$API.stockOut.loadingList.getDetailList
      const param = { ldNo: id }
      const getEntityStatus = this.$API.stockOut.loadingList.getEntityStatus
      const getSanUrl = this.$API.stockOut.loadingList.getScanQuery
      const getForLoading = this.$API.stockOut.loadingList.getForLoading
      this.$https.all([this.getData(url, param), this.getData(detailUrl, detailParam), this.getData(getSanUrl, detailParam), this.getData(getForLoading, detailParam), this.getData(getEntityStatus, detailParam)]).then(res => {
        const headData = res[0].data
        const goodsData = res[1].rows
        const getScanQuery = res[2].rows
        const getForLoading = res[3].rows
        const getEntityStatus = res[4].rows
        this.$emit('handelOpenDetail', 'detail', headData, goodsData, getScanQuery, getForLoading, getEntityStatus)
      })
    },
    // checkbox勾选
    handleSelectChange (selection) {
      const selectedIds = selection.map(item => item.ldNo).join(',')
      this.$emit('handleSelectChange', selectedIds)
    },
    // 附件管理
    toFile (row) {
      const config = {
        orderNo: row.ldNo, // 组件需要的当前选择的业务单号
      }
      this.$upload(config)
    },
  }
}
</script>
<style lang="scss" scoped>
    .mrg-b{
        margin-bottom: 20px;
    }
    .mrg-l{
        margin-left:10px;
    }
    .blue{
      cursor: pointer;
      color:#0682ea
    }
</style>
