<template>
  <div>
    <!--<el-card class="el-card">-->
    <div style="display: flex;width: 100%;height: 100%">

      <!--<div style="display: flex;width: 20%;height: 130%">-->
      <div style="width: 45%;height: 340px;margin-bottom: 10px">
        <el-card style="width: 100%;height: 100%">
          <div slot="header" class="clearfix" style="margin-bottom: 10px;">
            <span style="font-weight: 700;">取货架列表
              <el-button-group style="float: right">
              <el-button style="margin-bottom: -5px " @click="printFreight(1,null)" type="primary">打印全部
              </el-button>
              <el-button style="margin-bottom: -5px " @click="onAddFreight" type="primary">新增取货架
              </el-button>
              </el-button-group>
            </span>

          </div>

          <el-table
            :data="freightList"
            :row-style="{ height: '32px' }"
            highlight-current-row
            @row-click="handChangeFreight"
          >
            <el-table-column type="index" label="序号">
            </el-table-column>
            <el-table-column
              width="100"
              prop="code"
              label="取货架编码"
            >
            </el-table-column>
            <el-table-column
              width="140"
              prop="remark"
              label="取货架说明"
            >
            </el-table-column>
            <el-table-column
              width="140"
              prop="layerCount"
              label="摆货层数量"
            >
            </el-table-column>
            <!--<el-table-column-->
            <!--  width="140"-->
            <!--  prop="name"-->
            <!--  label="摆货层数量">-->
            <!--</el-table-column>-->
            <el-table-column label="操作" fixed="right" width="100">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="small"
                  @click.native.stop="handleEdit(scope.row)"
                >编辑
                </el-button>
                <el-button
                  type="text"
                  size="small"
                  @click.native.stop="handleDel(scope.row)"
                >删除
                </el-button
                >
              </template>

            </el-table-column>
          </el-table>
          <el-pagination
            style="width: 100px"
            small
            @current-change="handleFreightCurrentChange"
            :current-page.sync="query.page"
            :page-size="query.limit"
            layout="total,prev, pager, next"
            :total="total"
          >
          </el-pagination>
        </el-card>
      </div>
      <div style="width: 322px;height: 340px;margin-bottom: 10px">
        <el-card style="width: 100%;height: 100%">
          <div slot="header" class="clearfix" style="margin-bottom: 10px;">
            <span style="font-weight: 700;">摆货层列表</span>
          </div>
          <el-table
            :data="layerList"
            :row-style="{ height: '32px' }"
            highlight-current-row
            @row-click="handChangeLayer"
          >
            <el-table-column
              width="100"
              prop="code"
              label="摆货层编码"
            >
            </el-table-column>
            <el-table-column
              width="120"
              prop="queueNum"
              label="出货槽数量"
            >
            </el-table-column>
            <el-table-column label="操作" width="60">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="small"
                  @click.native.stop="printFreight(2,scope.row)"
                >打印
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            style="width: 100px"
            small
            @current-change="handleLayerCurrentChange"
            :current-page.sync="LayerQuery.page"
            :page-size="LayerQuery.limit"
            layout="prev, pager, next"
            :total="LayerTotal"
          >
          </el-pagination>
          <!--<pagination-->
          <!--  :total="LayerTotal"-->
          <!--  :limit.sync="LayerQuery.limit"-->
          <!--  :page.sync="LayerQuery.page"-->
          <!--  @pagination="getLayers()"-->
          <!--  style="float: right; width: 100px">-->
          <!--&gt;-->
          <!--</pagination>-->
        </el-card>
      </div>
      <div style="width: 260px;height: 340px;margin-bottom: 10px">
        <el-card style="width: 100%;height: 100%">
          <div slot="header" class="clearfix" style="margin-bottom: 10px;">
            <span style="font-weight: 700;">出货槽列表</span>
          </div>
          <el-table
            :data="queueList"
            :row-style="{ height: '32px' }"
            highlight-current-row
            @row-click="loadLinkData"
          >
            <el-table-column
              prop="code"
              label="出货槽编号"
            >
            </el-table-column>
            <el-table-column label="操作" width="60">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="small"
                  @click.native.stop="printFreight(3,scope.row)"
                >打印
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            small
            @current-change="handleQueueCurrentChange"
            :current-page.sync="queueQuery.page"
            :page-size="queueQuery.limit"
            layout="prev, pager, next"
            :total="queueTotal"
          >
          </el-pagination>
          <!--<el-pagination-->
          <!--  layout="prev, pager, next"-->
          <!--  style="float: right"-->
          <!--  small-->
          <!--&gt;-->
          <!--</el-pagination>-->
        </el-card>
      </div>
    </div>
    <!--</el-card>-->
    <el-dialog
      title="取货架管理"
      :visible.sync="WorkplaceFreightDialogVisible"
      width="60%"
      v-if="WorkplaceFreightDialogVisible"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      @close="closeDialog"
    >
      <addWorkplaceFreightDialog
        :closeDialog="closeDialog"
        :rowData="rowData"
        :workplaceId="workplaceId"
      >
      </addWorkplaceFreightDialog>
    </el-dialog>
  </div>

</template>

<script>
import { deleteFreight, getWorkplaceFreightList, printAllFreight } from '@/api/basic/workPlace/SysWorkplaceFreight'
import addWorkplaceFreightDialog from './addWorkplaceFreightDialog'
import { getLayerList } from '@/api/basic/workPlace/SysWorkplaceLayer'
import { getQueueListPage } from '@/api/basic/workPlace/SysWorkplaceQueue'
import { isBlank } from '@/utils/strUtil'

export default {
  props: {
    workplaceId: {
      type: Object,
      required: true
    }
  },
  components: { addWorkplaceFreightDialog },
  data() {
    return {
      query: {
        page: 1,
        limit: 4,
        workPlaceIdFk: '',
        key: ''
        // code: null,
        // workplaceStatus: 1,
        // workPlaceClass: 2,
        // deptCode: this.$store.getters.locDeptCode
      },
      total: 0,
      LayerQuery: {
        page: 1,
        limit: 5,
        freightCode: '',
        freightCodes: []
      },
      LayerTotal: 0,
      queueQuery: {
        page: 1,
        limit: 5,
        layerCode: '',
        layerCodes: []
      },
      rowData: null,
      freightList: [],
      layerList: [],
      queueList: [],
      queueTotal: 0,
      WorkplaceFreightDialogVisible: false
    }
  },
  methods: {
    getList() {
      getWorkplaceFreightList(this.query).then(res => {
        if (res.code == 20000) {
          this.freightList = res.data.list || []
          if (this.freightList.length == 0) {
            this.queueList = []
            this.layerList = []
          } else {
            this.LayerQuery.freightCode = ''
            this.LayerQuery.freightCodes = this.freightList.map(item => item.code)
            this.getLayers()
          }
          this.total = res.data.total || 0
        } else {
          this.total = 0
          this.freightList = []
        }
      })
    },
    getLayers() {
      getLayerList(this.LayerQuery).then(res => {
        if (res.code == 20000) {
          this.layerList = res.data.list || []
          if (this.layerList.length == 0) {
            this.queueList = []
          } else {
            this.queueQuery.layerCode = ''
            this.queueQuery.layerCodes = this.layerList.map(item => item.code)
            this.getQueues()
          }
        } else {
          this.layerList = []
        }
      })
    },
    getQueues() {
      getQueueListPage(this.queueQuery).then(res => {
        if (res.code == 20000) {
          this.queueList = res.data.list || []
          this.queueTotal = res.data.total
        } else {
          this.queueTotal = 0
          this.queueList = []
        }
      })
    },
    handleFreightCurrentChange(newPage) {
      this.query.page = newPage
      this.getList()
    },
    handleQueueCurrentChange(newPage) {
      this.queueQuery.page = newPage
      this.getQueues()
    },
    handleLayerCurrentChange(newPage) {
      this.LayerQuery.page = newPage
      this.getLayers()
    },
    handChangeFreight(row) {
      this.LayerQuery.freightCode = row.code
      this.getLayers()
    },
    handChangeLayer(row) {
      this.queueQuery.layerCode = row.code
      this.getQueues()
    },
    handleEdit(row) {
      this.rowData = row
      this.WorkplaceFreightDialogVisible = true
    },
    handleDel(row) {
      this.$confirm('此操作将永久删除该取货架, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteFreight(row).then(res => {
          if (res.code == 20000) {
            this.getAllList(this.workplaceId)
            this.$message.success('删除成功')
          } else {
            this.$message.error(res.message)
          }
        })
      }).catch(() => {

      })

    },
    onAddFreight() {
      if (this.workplaceId == null) {
        return this.$message.error('请选择工位')
      }
      this.rowData = null
      this.WorkplaceFreightDialogVisible = true
    },
    printFreight(val, row) {
      //打印全部
      let query = {
        labelId: 8
      }
      if (val == 1) {

      } else if (val == 2) {
        query.layerCode = row.code
      }else {
        query.queueCode = row.code
      }

      printAllFreight(query).then(res => {
        const binaryData = []
        binaryData.push(res)
        let url = window.URL.createObjectURL(
          new Blob(binaryData, { type: 'application/pdf' })
        )
        // this.loading = false
        window.open(url)
      })
    },
    closeDialog() {
      this.getList()
      this.getLayers()
      this.getQueues()
      this.WorkplaceFreightDialogVisible = false
    },
    getAllList(workPlaceIdFk) {
      if (!isBlank(workPlaceIdFk)) {
        this.query.workPlaceIdFk = workPlaceIdFk
      }
      // this.LayerQuery.freightCode = ""
      this.getList()
      // this.getLayers()
      this.getQueues()
    }
  },
  created() {
    this.getList()
    this.getLayers()
    this.getQueues()
  }
}
</script>

<style scoped>

</style>
