<template>
  <div>
      <el-card>
        <el-form :model="query" label-width="auto" v-show="showSearch" size="mini" class="order-el-form">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="编码/名称:" class="query-form-item">
                <el-input v-model="query.key" placeholder="请输入货架编码/货架名称" clearable style="width: 80%">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="所属工位:" class="query-form-item">
                <el-select
                  v-model="query.workPlaceIdFk"
                  filterable
                  remote
                  clearable
                  style="width: 80%"
                >
                  <el-option
                    v-for="item in workPlaces"
                    :key="item.code"
                    :label="item.label"
                    :value="item.code"
                  />
                </el-select>
              </el-form-item>
            </el-col>

          </el-row>
        </el-form>
        <div class="top-right-btn">
          <el-button-group>
            <el-button icon="el-icon-view" type="primary" @click="hideSearch">显示/隐藏搜索栏</el-button>
            <el-button type="primary" icon="el-icon-refresh" @click="onReset">重置</el-button>
            <el-button type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
            <el-button type="primary" icon="el-icon-plus" @click="addWorkplaceFreight">新增货架</el-button>
          </el-button-group>
        </div>
        <el-table v-loading="loading" :data="freightList" style="width: 100%" :row-style="{height: '32px' }"
                  highlight-current-row @current-change="handCurrentChange"
        >
          <el-table-column type="index" label="序号"></el-table-column>
          <el-table-column label="所属工位" prop="workPlaceName" ></el-table-column>
          <el-table-column label="货架编码" prop="code" ></el-table-column>
          <el-table-column label="货架名称" prop="name" ></el-table-column>
          <el-table-column label="创建时间" prop="createTime" ></el-table-column>
          <el-table-column label="备注" prop="remark"></el-table-column>
          <el-table-column label="操作" fixed="right" width="240">
            <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>
        <pagination
          :total="total"
          :limit.sync="query.limit"
          :page.sync="query.page"
          @pagination="getList"
        >
        </pagination>
      </el-card>
    <el-tabs type="border-card" style="margin: 15px">
      <el-tab-pane>
        <span slot="label">{{ freightName }}-货架列表</span>
        <el-form :model="queueQuery" label-width="auto" v-show="showSearch" size="mini" class="order-el-form">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="货位编码:" class="query-form-item">
                <el-input v-model="queueQuery.key" placeholder="请输入货位编码" clearable style="width: 80%">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="top-right-btn">
          <el-button-group>
            <!--<el-button icon="el-icon-view" type="primary" @click="hideSearch">显示/隐藏搜索栏</el-button>-->
            <el-button type="primary" icon="el-icon-refresh" @click="onQueueReset">重置</el-button>
            <el-button type="primary" icon="el-icon-search" @click="onQueueSubmit">查询</el-button>
            <el-button type="primary" icon="el-icon-plus" @click="addWorkplaceQueue">新增货位</el-button>
            <!--<el-button type="primary" icon="el-icon-plus" @click="updateWorkplaceQueue">编辑货位</el-button>-->
          </el-button-group>
        </div>
        <el-table v-loading="loading" :data="queueList" style="width: 100%" :row-style="{height: '32px' }"
        >
          <el-table-column type="index" label="序号"></el-table-column>
          <el-table-column label="货位编码" prop="code"></el-table-column>
          <el-table-column label="货位层级" prop="layer"></el-table-column>
          <el-table-column label="产品名称" prop="productName"></el-table-column>
          <el-table-column label="产品规格" prop="productSpec"></el-table-column>
          <el-table-column label="操作" fixed="right">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                @click="removeQueue(scope.row)"
              >移除货位
              </el-button>
              <!--@click.native.stop="printLabel(scope.row)"-->
            </template>
          </el-table-column>
        </el-table>
        <pagination
          :total="queueTotal"
          :limit.sync="queueQuery.limit"
          :page.sync="queueQuery.page"
          @pagination="getQueues()"
        >
        </pagination>
      </el-tab-pane>

    </el-tabs>


    <el-dialog
      :title="fromMap[fromName]"
      :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"
      >

      </addWorkplaceFreightDialog>
    </el-dialog>
    <el-dialog
      :title="titleMap[titleName]"
      :visible.sync="WorkplaceQueueDialogVisible"
      width="60%"
      v-if="WorkplaceQueueDialogVisible"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      @close="closeQueueDialog"
    >
      <addWorkplaceQueueDialog
        :closeDialog="closeQueueDialog"
        :freightData="freightData"
        :titleName="titleName"
      >
      </addWorkplaceQueueDialog>
    </el-dialog>
  </div>
</template>

<script>
import { filterWorkOptimize } from '@/api/basic/workPlace/sysWorkplaceManage'
import addWorkplaceFreightDialog from "./addWorkplaceFreightDialog"
import addWorkplaceQueueDialog from "./addWorkplaceQueueDialog"
import { getWorkplaceFreightList,deleteFreight} from '@/api/basic/workPlace/SysWorkplaceFreight'
import { deleteQueue, getQueueListByFreightCode } from '@/api/basic/workPlace/SysWorkplaceQueue'



export default {
  components: {addWorkplaceFreightDialog,addWorkplaceQueueDialog},
  data() {
    return {
      showSearch: true,
      query: {
        page: 1,
        limit: 10,
        workPlaceIdFk: "",
        key: "",
        // code: null,
        // workplaceStatus: 1,
        // workPlaceClass: 2,
        // deptCode: this.$store.getters.locDeptCode
      },
      queueQuery: {
        page: 1,
        limit: 10,
        key: "",
        freightCode: ""
      },
      total: 0,
      queueTotal:0,
      workPlaces: [],
      WorkplaceFreightDialogVisible:false,
      WorkplaceQueueDialogVisible: false,
      fromName: 'add',
      fromMap:{
        'add' : '新增货架',
        'edit': '编辑货架'
      },
      titleName: 'add',
      titleMap:{
        'add' : '新增货位',
        'edit': '编辑货位'
      },


      //
      freightName: '',
      queueList: [],
      freightList:[],
      freightData: {},
      rowData: null,
    }
  },
  methods: {
    hideSearch() {
      this.showSearch = !this.showSearch
    },
    findWorkPlace(val) {
      let query = {
        // chargeUser: _this.$store.getters.userId,
        userIdFlag: true,
        key: val,
        page: 1,
        limit: 10,
        workPlaceClass:2
      }
      filterWorkOptimize(query)
        .then((response) => {
          this.workPlaces = response.data || [];
        })
        .catch(() => {
          this.options.getWorkPlaceList = [];
        });
    },
    closeDialog() {
      this.getList()
      this.WorkplaceFreightDialogVisible = false
    },
    closeQueueDialog(){
      this.getQueues()
      this.WorkplaceQueueDialogVisible = false
    },
    getList(){
      getWorkplaceFreightList(this.query).then(res => {
        if (res.code == 20000){
          this.freightList = res.data.list || []
          this.total =  res.data.total || 0
        }else {
          this.total = 0
          this.freightList = []
        }
      })
    },
    onSubmit(){
        this.queueList = []
        // this.workplaceName = '工位'
        this.query.page = 1
        this.getList()
    },
    onReset(){
      this.queueList = []
      this.$router.push({
        path: ''
      })
      this.query = {
        page: 1,
        limit: 10,
        workPlaceIdFk: "",
        key: "",
      }
      this.getList()
    },
    //
    addWorkplaceFreight(){
      this.fromName = 'add'
      this.rowData = null
      this.WorkplaceFreightDialogVisible = true
    },
    handleEdit(row){
      this.fromName = 'edit'
      this.rowData = row
      this.WorkplaceFreightDialogVisible = true
    },
    handleDel(row) {
      this.$confirm('此操作将永久删除该货架, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteFreight(row).then(res => {
          if (res.code != 20000) {
            this.$message.error(res.message)
          } else {
            this.$message.success('删除成功')
            this.getList()
          }
        })
      }).catch(() => {

      })
    },
    handCurrentChange(row){
      this.freightName = row.name
      this.freightData = row
      this.queueQuery.freightCode = row.code
      this.getQueues()
    },
    //获取货位列表
    getQueues(){
      getQueueListByFreightCode(this.queueQuery).then(res => {
        if (res.code == 20000){
          this.queueList = res.data.list || []
          this.queueTotal = res.data.total || 0
        }else {
          this.queueTotal =  0
          this.queueList = []
          this.$message.error("获取错误")
        }
      }).catch(() => {
        this.queueList = []
      })
    },
    onQueueSubmit(){
      if (this.freightData.code == null){
        return this.$message.error("请选择货架!")
      }
      this.queueQuery.page = 1
      this.getQueues();
    },
    onQueueReset(){
      this.$router.push({
        path: ''
      })
      this.queueQuery = {
        page: 1,
        limit: 10,
        key: "",
        freightCode: "",
      }
      this.queueQuery.freightCode = this.freightData.code
      this.getQueues();
    },
    //新增一行货位 后续改成多行
    addWorkplaceQueue(){
      if (this.freightData.code == null){
        return this.$message.error("请选择货架!")
      }
      this.titleName = 'add'
      this.WorkplaceQueueDialogVisible = true
    },
    updateWorkplaceQueue(){
      if (this.freightData.code == null){
        return this.$message.error("请选择货架!")
      }
      this.titleName = 'edit'
      this.WorkplaceQueueDialogVisible = true
    },
    removeQueue(row){
      let query = {
        id : row.id
      }
      this.$confirm('此操作将永久删除该货位, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteQueue(query).then(res => {
          if (res.code == 20000){
            this.$message.success("删除成功")
            this.getQueues()
          }else {
            this.$message.error("删除失败")
          }
        })
      }).catch(() => {

      })

    }
  },
  created() {
    this.findWorkPlace("")
    this.getList()
  }
}
</script>

<style scoped>

</style>
