<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;">取货架列表
            </span>
            <span>
              <el-button-group style="float: right">
              <el-button style="margin-bottom: -5px " @click="printRegion()" type="primary">打印区域
              </el-button>
              <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
              prop="code"
              label="取货架编码"
            >
            </el-table-column>
            <el-table-column
              prop="name"
              label="取货架说明"
            >
            </el-table-column>
            <!--<el-table-column-->
            <!--  width="140"-->
            <!--  prop="layerCount"-->
            <!--  label="摆货层数量"-->
            <!--&gt;-->
            <!--</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>
          <div class="pagination-container">
            <el-pagination
              small
              @current-change="handleFreightCurrentChange"
              :current-page.sync="query.page"
              :page-size="query.limit"
              layout="total,prev, pager, next"
              :total="total"
            >
            </el-pagination>
          </div>

        </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="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="100"
              prop="name"
              label="摆货层名称"
            >
            </el-table-column>
            <el-table-column label="操作" width="90" fixed="right">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="small"
                  @click.native.stop="printFreight(2,scope.row)"
                >打印
                </el-button>
                <el-button
                  type="text"
                  size="small"
                  @click.native.stop="deleteLayer(scope.row)"
                >删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination-container">
            <el-pagination
              small
              @current-change="handleLayerCurrentChange"
              :current-page.sync="LayerQuery.page"
              :page-size="LayerQuery.limit"
              layout="total,prev, pager, next"
              :total="LayerTotal"
            >
            </el-pagination>
          </div>

          <!--<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: 360px;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
              prop="name"
              label="槽位名称"
            >
            </el-table-column>
            <el-table-column label="操作" width="120">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="small"
                  @click.native.stop="printFreight(3,scope.row)"
                >打印
                </el-button>
                <el-button
                  type="text"
                  size="small"
                  @click.native.stop="editQueue(scope.row)"
                >编辑
                </el-button>
                <el-button
                  type="text"
                  size="small"
                  @click.native.stop="deleteQueue(scope.row)"
                >删除
                </el-button>

              </template>
            </el-table-column>
          </el-table>
          <div class="pagination-container">
            <el-pagination
              small
              @current-change="handleQueueCurrentChange"
              :current-page.sync="queueQuery.page"
              :page-size="queueQuery.limit"
              layout="total,prev, pager, next"
              :total="queueTotal"
            >
            </el-pagination>

          </div>


          <!--<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>

    <!--</el-card>-->
    <el-dialog
      title="槽位编辑"
      :visible.sync="WorkplaceQueueDialogVisible"
      width="60%"
      v-if="WorkplaceQueueDialogVisible"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      @close="QueuecloseDialog"
    >
      <editQueueDialog
        :closeDialog="QueuecloseDialog"
        :rowData="queueRowData"
        :workplaceId="workplaceId"
      >
      </editQueueDialog>
    </el-dialog>
  </div>

</template>

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

export default {
  props: {
    workplaceId: {
      type: Object,
      required: true
    }
  },
  components: { addWorkplaceFreightDialog,editQueueDialog },
  data() {
    return {
      query: {
        page: 1,
        limit: 5,
        workPlaceIdFk: '',
        key: '',
        code: null,
        // 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,
      queueRowData:null,
      freightList: [],
      layerList: [],
      queueList: [],
      queueTotal: 0,
      WorkplaceFreightDialogVisible: false,
      WorkplaceQueueDialogVisible: false,
      freightCode: null,
      layerCode: null,
    }
  },
  methods: {
    getList() {
      getWorkplaceFreightList(this.query).then(res => {
        if (res.code == 20000) {
          this.freightList = res.data.list || []
          if (this.freightList.length == 0) {
            this.queueList = []
            this.queueTotal = 0
            this.LayerTotal = 0
            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 || []
          this.LayerTotal = res.data.total
          if (this.layerList.length == 0) {
            this.queueList = []
            this.queueTotal = 0
          } else {
            this.queueQuery.layerCode = ''
            this.queueQuery.layerCodes = this.layerList.map(item => item.code)
            this.getQueues()
          }
        } else {
          this.LayerTotal = 0
          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.freightCode = row.code
      this.queueQuery.layerCode = null
      this.layerCode = null
      this.getLayers()
    },
    handChangeLayer(row) {
      this.queueQuery.layerCode = row.code
      this.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) {
      if (isBlank(this.workplaceId)){
        return this.$message.error("请选择工位")
      }
      //打印全部
      let query = {
        labelId: 8
      }
      if (val == 1) {
        query.workPlaceIdFk = this.workplaceId
      } 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)
      })
    },
    printRegion(){
      //打印区域

    },
    closeDialog() {
      this.getList()
      this.getLayers()
      this.getQueues()
      this.WorkplaceFreightDialogVisible = false
    },
    QueuecloseDialog() {
      this.getList()
      this.getLayers()
      this.getQueues()
      this.WorkplaceQueueDialogVisible = false
    },
    getAllList(workPlaceIdFk) {
      if (!isBlank(workPlaceIdFk)) {
        this.query.workPlaceIdFk = workPlaceIdFk
        this.getList()
      }
      // this.LayerQuery.freightCode = ""

      // this.getLayers()
      // this.getQueues()
    },
    editQueue(row){
      this.queueRowData = row
      this.WorkplaceQueueDialogVisible = true
    },
    deleteQueue(row){
      this.$confirm('此操作将永久删除该槽位, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteQueue(row).then(res => {
          if (res.code == 20000){
            this.getFreightList()
            this.$message.success("删除成功")
          }else {
            this.$message.error("删除失败")
          }
        }).catch(() => {

        })

        // deleteQueueByCode(){
        //
        // }
      })
    },
    deleteLayer(row){
      let query = {
        code : row.code
      }
      this.$confirm('此操作将永久删除该摆货层及出货槽位, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteLayer(query).then(res => {
          if (res.code == 20000){
            this.getFreightList()
            this.$message.success("删除成功")
          }else {
            this.$message.error(res.message)
          }
        })
      }).catch(() => {

      })
    },
    getFreightList(){
      getWorkplaceFreightList(this.query).then(res => {
        if (res.code == 20000) {
            this.freightList = res.data.list || []
            this.total = res.data.total || 0
            this.LayerQuery.freightCode = this.freightCode
            this.getLayerList()
        } else {
          this.total = 0
          this.freightList = []
        }
      })
    },
    getLayerList(){
      getLayerList(this.LayerQuery).then(res => {
        if (res.code == 20000) {
            this.layerList = res.data.list || []
            this.LayerTotal = res.data.total
          console.log("shsjhshshs",this.layerCode)
          if (this.layerCode != null){
            this.queueQuery.layerCode = this.layerCode
          }
            this.getQueues()
        } else {
          this.LayerTotal = 0
          this.layerList = []
        }
      })
    }
  },
  created() {
    // this.getList()
    // this.getLayers()
    // this.getQueues()
  }
}
</script>

<style scoped>
.pagination-container {
  display: flex;
  justify-content: flex-end;
}
</style>
