<template>
    <el-container>
      <el-header style="height: 40px">
        <div>
          <div class="divLeft colorYellow">
            任务中
          </div>
          <div class="divLeft colorWhite">
            空
          </div>
          <div class="divLeft colorGreen">
            有货
          </div>
          <div class="divLeft colorRed">
            不合格
          </div>
<!--          <div class="divLeft">-->
<!--            库存<icon-svg name="steel" class="site-sidebar__menu-icon"></icon-svg>-->
<!--          </div>-->
          <div class="divLeft">
            【托盘】<svg-icon class-name="pallet-icon" icon-class="pallet" @click.stop="click" />
          </div>
        </div>
      </el-header>
      <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="600px" label-position="right">
        <el-form-item label="仓库" prop="warehouseId" v-show="false">
          <el-select v-model="queryParams.warehouseId" placeholder="请选择所属仓库" clearable size="small" style="width: 100%" >
            <el-option
              v-for="dict in this.warehouseCombo"
              :key="dict.warehouseId"
              :label="dict.warehouseName"
              :value="dict.warehouseId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="区域" prop="zoneId">
          <el-select v-model="queryParams.zoneId" placeholder="请选择库区" clearable size="small" style="width: 100%">
            <el-option
              v-for="dict in this.locationZoneCombo"
              :key="dict.zoneId"
              :label="dict.zoneName"
              :value="dict.zoneId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="刷新时间" labelWidth="80px">
          <el-select v-model="timerValue" @change="timerChange()"  placeholder="" clearable size="small" style="width: 50%" >
              <el-option
                v-for="item in timerOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>

          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
      <el-main>
        <el-card v-for="zone in locationZoneList" v-bind:key="zone.zoneName" class="box-card">
          <div slot="header" class="clearfix">
            <span style="font-weight: bold">{{zone.zoneName}}</span>
          </div>
          <div class="divBoxCol" v-for="col in zone.basLocationGuiColDTOS">
            <div v-for="o in col.baseLocationGuiDTOList" v-bind:key="o.id" class="text item divBox" @click="changeLocation(o)">
              <div class="divMinBox" v-show="o.locationNo!=null">
                {{o.locationNo}}<!--(<font class="pointcss">{{o.agvStation}}</font>)-->
              </div>
              <div>
                <div v-show="o.isEmpty=='Y'" :class="{'locDiv': true,'colorWhite': true, 'colorYellow': o.stockStatus!='00'}">
                </div>
                <div v-show="o.isEmpty=='N'" :class="{'locDiv': true,'colorGreen': o.isEmptyPlate != 'Y','colorRed': o.lotatt05 == 'BHG','colorYellow': o.stockStatus!='00'}">
                  <div class="divMinFontBox" v-show="o.isEmpty=='N' && o.isEmptyPlate != 'Y' ">
                    <div style="color: #FFFFFF;font-size:10px;">{{o.lotatt01}}&nbsp;&nbsp; </div>
<!--                    <div v-show="o.skuName!=null" style="color: #FFFFFF;font-size:10px;">{{o.skuName}}</div>-->
<!--                    <div v-show="o.lotatt05!=null" style="color: #FFFFFF">{{o.lotatt05}}</div>-->
<!--                    <div v-show="o.lotatt08!=null" style="color: #FFFFFF">{{o.lotatt08}}</div>-->
                  </div>
                  <div class="divMinFontBoxEmptyPlate" v-show="o.isEmptyPlate == 'Y'">
                    <svg-icon class-name="pallet-icon" icon-class="pallet" @click.stop="click" style="width: 60px;height: 35px;">{{o.id}}</svg-icon>
                    <div style="color: #191970;font-size:12px;">{{o.skuName}}&nbsp;&nbsp;</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </el-main>
      <!-- 点击库位弹出展示框做修改  -->
      <el-dialog title="操作" :visible.sync="open" width="1000px" append-to-body>
        <el-form>
          <el-form-item>
            <el-button type="primary" @click="lockLoc()">锁定/解锁</el-button>
            <el-button type="primary" @click="occupyLoc()">有货/无货</el-button>
            <el-button type="primary" @click="clearLoc()">清空</el-button>
            <!--<el-button type="primary" @click="submitForm">初始化一个空托盘</el-button>-->
          </el-form-item>
        </el-form>
        <el-divider content-position="center">批次属性信息</el-divider>
        <el-table v-loading="loading" :data="form.lotattList">
          <el-table-column label="物料" align="center" prop="sku" width="200"/>
          <el-table-column label="物料名称" align="center" prop="skuName" width="200"/>
          <el-table-column label="库位" align="center" prop="locationNo" width="200"/>
          <el-table-column label="库存数量" align="center" prop="qty"/>
          <el-table-column label="已分配数量" align="center" prop="qtyallocated" width="200"/>
          <el-table-column
            v-for="(item, index) in itemOption"
            :key="index_back"
            :label="item.label"
            align="center" :prop="item.prop" width="200">
          </el-table-column>
        </el-table>
        <!--<el-descriptions title="批次属性" :column="2" border>
          <el-descriptions-item v-for="(item, index) in itemOption" :label="item.label">{{form[`${item.prop}`]}}</el-descriptions-item>
        </el-descriptions>-->
      </el-dialog>
    </el-container>
</template>
<script>
import { clearLocRequest,locationInvView,queryLocationZoneDict,lockLocRequest,lotattConfigList
  ,lotattInfo,occupyLocRequest,queryWarehouseDict} from "@/api/ams/locationView";

  export default {
    data () {
      return {
        timerOptions: [{
          value: 60000,
          label: '1分钟'
        }, {
          value: 300000,
          label: '5分钟'
        }, {
          value: 600000,
          label: '10分钟'
        }, {
          value: 900000,
          label: '15分钟'
        }, {
          value: 1200000,
          label: '20分钟'
        },
          {
            value: 5000,
            label: '5秒'
          }],
        timerValue: 5000,
        open: false,
        showSearch: true,
        dataForm: {
          zoneId: ''
        },
        queryParams: {
          zoneId: '',
          warehouseId: ''
        },
        locationZoneList: [],
        locationList: {'a': [1, 2, 3]},
        locationClearVisible: false,
        // 表单参数
        form: {
          lotatt01: '',
          lotatt02: '',
          lotatt03: '',
          lotatt04: '',
          lotatt05: '',
          lotatt06: '',
          lotatt07: '',
          lotatt08: '',
          lotatt09: '',
          lotatt10: '',
          lotatt11: '',
          lotatt12: '',
          lotatt13: '',
          lotatt14: '',
          lotatt15: '',
          lotatt16: '',
          lotatt17: '',
          lotatt18: '',
          lotattList: null
        },
        itemOption: []
      }
    },
    mounted () {
    },
    activated () {
    },
    created () {
      // this.getWarehouseList()
      this.getBasZoneList()
      this.getDataList()
      this.getItemopention()
      this.timer = setInterval(this.getDataList, this.timerValue);
    },
    beforeDestroy () {
      clearInterval(this.timer)
    },
    methods: {
      handleQuery() {
        this.getDataList();
      },
      clearInterval () {
        clearInterval(this.timer)
      },
      timerChange(){
        this.clearInterval ();
        this.timer = setInterval(this.getDataList, this.timerValue);
      },
      getItemopention(){
        lotattConfigList().then(response => {
          let data = response.data
          for(let i=0;i<data.length;i++) {
            let obj = new Object();
            obj.label = data[i].lotattName
            obj.prop = data[i].lotattId
            this.itemOption.push(obj)
          }
        })
      },
      getDataList () {
        this.dataListLoading = true
        locationInvView(this.queryParams).then(response => {
          this.locationZoneList = response.data
        })
        this.dataListLoading = false
      },
      changeLocation(o){
        this.selected(o)
        // alert(o.locationNo);
      },
      resetQuery() {//重置搜索
        this.resetForm("queryForm");
        this.getDataList();
      },
      selected(item) {
        if (item.locationNo) {
          this.currentSelect = parseInt(item.id)
          this.open = true;
          lotattInfo(this.currentSelect).then(response => {
            this.form.lotattList = response.data
            this.loading = false;
          })
        }

      },
      lockLoc() {
        let that = this
        this.$modal.confirm('是否确认要锁定/解锁？').then(function() {
          lockLocRequest(that.currentSelect).then(response => {
            if (response.code === 200) {
              that.open = false;
              that.$modal.msgSuccess(response.msg);
              that.search();
            } else {
              that.$modal.msgError(response.msg);
            }
          });
        });
      },
      occupyLoc() {
        let that = this
        this.$modal.confirm('是否确认要修改库位状态？').then(function() {
        occupyLocRequest(that.currentSelect).then(response => {
          if (response.code === 200) {
            that.open = false;
            that.$modal.msgSuccess(response.msg);
            that.search();
          } else {
            that.$modal.msgError(response.msg);
          }
          });
        });
      },
      clearLoc() {
        let that = this
        this.$modal.confirm('是否确认要清空库存？').then(function() {
          clearLocRequest(that.currentSelect).then(response => {
            if (response.code === 200) {
              that.open = false;
              that.$modal.msgSuccess(response.msg);
              that.search();
            } else {
              that.$modal.msgError(response.msg);
            }
          });
        });
      },
      getBasZoneList() {
        queryLocationZoneDict().then(response => {
          this.locationZoneCombo = response.data
        })
      },
      getWarehouseList() {
        queryWarehouseDict().then(response => {
          this.warehouseCombo = response.data
        });
      },
    }
  }
</script>

<style>

.pointcss{
  color: hotpink;
}

.divBoxCol {
  width: 150px;
  display: block;
  float: left;
}

.divBox {
  width: 130px;
  height: 90px;
  display: block;
  float: left;
  margin-left: 2px;
}

.divMinBox {
  margin-top: 0px;
  height: 15px;
  width: 100%;
  text-align: center;
  font-weight: bold;
}

.divMinFontBox {
  margin-top: 2px;
  height: 10px;
  width: 100%;
  text-align: center;
  /*font-size: 1px;*/
}

.locDiv {
  float: left;
  display: inline-block;
  width: 130px;
  height: 70px;
  margin-top: 1px;
  text-align: center;
  margin-left: 1px;
  border: solid 1px;
}

.colorWhite {
  background-color: #e6ece6;
}

.colorGreen {
  background-color: #19a708;
}

.colorRed {
  background-color: #c73c2d;
}

.colorYellow {
  background-color: #e2cd0f;
}

.divLeft {
  border-top: 1px;
  border-color: #2b373d;
  text-align: left;
  display: inline-block;
  height: 30px;
  width: 80px;
  text-align: center;
  margin-top: 42.5px;
  padding-top: 5px;
}

.box-card{
  width: 100%;
  display:inline-block;
  overflow: hidden;
}
</style>