<template>
  <div>
    <el-tabs v-model="activeName" @tab-click="handleClick" style="margin-left: 15px; margin-right: 15px;">
      <el-tab-pane label="库位查看" name="locationShow">
          <el-row :gutter="10" style="letter-spacing: 5px;">
            <el-col :span="8">
              <div class="grid-content bg-purpleA" @click="refresh()">黄色线芯A区(可用{{countA}})</div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content bg-purpleB" @click="refresh()">绿色线芯B区(可用{{countB}})</div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content bg-purpleC" @click="refresh()">红色线芯C区(可用{{countC}})</div>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="8">
              <el-card class="box-card scrollable">
                <el-descriptions border :column="2" size="small" :style="index==0?'': 'margin-top :15px'" v-for="(item,index) in materialDetailA" :key="item.materialBh">
                  <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle'>
                    <template slot="label">
                      库位
                    </template>
                    <el-link class="kw" :underline="false" type="primary" @click="operlogdialog(item.materialBh)">{{item.materialBh}}</el-link>
                  </el-descriptions-item>
                  <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle'>
                    <template slot="label">
                      状态
                    </template>
                    <span v-if = "item.materialState=='0'">
                      <el-tag size="mini" type="success">空闲</el-tag>
                    </span>
                    <span v-if = "item.materialState=='1'">
                      <el-tag size="mini" type="danger" @click="selectLocation(item)">可用</el-tag>
                    </span>
                  </el-descriptions-item>
                  <el-descriptions-item :span="2" :contentStyle='contentStyle' :labelStyle='labelStyle'>
                    <template slot="label">
                      指令号
                    </template>
                    {{item.materialZlh}}
                  </el-descriptions-item>
                  <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle'>
                    <template slot="label">
                      型号
                    </template>
                    {{item.materialXingh}}
                  </el-descriptions-item>
                  <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle'>
                    <template slot="label">
                      规格
                    </template>
                    {{item.materialGuig}}
                  </el-descriptions-item>
                  <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle'>
                    <template slot="label">
                      电压等级
                    </template>
                    {{item.materialDiany}}
                  </el-descriptions-item>
                  <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle'>
                    <template slot="label">
                      米数
                    </template>
                    {{item.materialMs}}
                  </el-descriptions-item>
                </el-descriptions>
              </el-card>
            </el-col>
            <el-col :span="8">
              <el-card class="box-card scrollable">
                <el-descriptions border :column="2" size="small" :style="index==0?'': 'margin-top :12px'" v-for="(item,index) in materialDetailB" :key="item.materialBh">
                  <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle'>
                    <template slot="label">
                      库位
                    </template>
                    <el-link class="kw" :underline="false" type="primary" @click="operlogdialog(item.materialBh)">{{item.materialBh}}</el-link>
                  </el-descriptions-item>
                  <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle'>
                    <template slot="label">
                      状态
                    </template>
                    <span v-if = "item.materialState=='0'">
                      <el-tag size="mini" type="success">空闲</el-tag>
                    </span>
                    <span v-if = "item.materialState=='1'">
                      <el-tag size="mini" type="danger" @click="selectLocation(item)">可用</el-tag>
                    </span>
                  </el-descriptions-item>
                  <el-descriptions-item :span="2" :contentStyle='contentStyle' :labelStyle='labelStyle'>
                    <template slot="label">
                      指令号
                    </template>
                    {{item.materialZlh}}
                  </el-descriptions-item>
                  <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle'>
                    <template slot="label">
                      型号
                    </template>
                    {{item.materialXingh}}
                  </el-descriptions-item>
                  <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle'>
                    <template slot="label">
                      规格
                    </template>
                    {{item.materialGuig}}
                  </el-descriptions-item>
                  <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle'>
                    <template slot="label">
                      电压等级
                    </template>
                    {{item.materialDiany}}
                  </el-descriptions-item>
                  <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle'>
                    <template slot="label">
                      米数
                    </template>
                    {{item.materialMs}}
                  </el-descriptions-item>
                </el-descriptions>
              </el-card>
            </el-col>
            <el-col :span="8">
              <el-card class="box-card scrollable">
                <el-descriptions border :column="2" size="small" :style="index==0?'': 'margin-top :12px'" v-for="(item,index) in materialDetailC" :key="item.materialBh">
                  <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle'>
                    <template slot="label">
                      库位
                    </template>
                    <el-link class="kw" :underline="false" type="primary" @click="operlogdialog(item.materialBh)">{{item.materialBh}}</el-link>
                  </el-descriptions-item>
                  <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle'>
                    <template slot="label">
                      状态
                    </template>
                    <span v-if = "item.materialState=='0'">
                      <el-tag size="mini" type="success">空闲</el-tag>
                    </span>
                    <span v-if = "item.materialState=='1'">
                      <el-tag size="mini" type="danger" @click="selectLocation(item)">可用</el-tag>
                    </span>
                  </el-descriptions-item>
                  <el-descriptions-item :span="2" :contentStyle='contentStyle' :labelStyle='labelStyle'>
                    <template slot="label">
                      指令号
                    </template>
                    {{item.materialZlh}}
                  </el-descriptions-item>
                  <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle'>
                    <template slot="label">
                      型号
                    </template>
                    {{item.materialXingh}}
                  </el-descriptions-item>
                  <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle'>
                    <template slot="label">
                      规格
                    </template>
                    {{item.materialGuig}}
                  </el-descriptions-item>
                  <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle'>
                    <template slot="label">
                      电压等级
                    </template>
                    {{item.materialDiany}}
                  </el-descriptions-item>
                  <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle'>
                    <template slot="label">
                      米数
                    </template>
                    {{item.materialMs}}
                  </el-descriptions-item>
                </el-descriptions>
              </el-card>
            </el-col>
          </el-row>
          <!-- 添加或修改材料管理对话框 -->
          <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
            <el-form ref="form" :model="form" :rules="rules" label-width="80px">
              <el-row>
                <el-col :span="12">
                  <el-form-item label="库位" prop="materialBh">
                    <el-input v-model="form.materialBh" :disabled="true"/>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="指令号" prop="materialZlh">
                    <el-input v-model="form.materialZlh"/>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="型号" prop="materialXingh">
                    <el-input v-model="form.materialXingh" placeholder="请输入型号"/>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="规格" prop="materialGuig">
                    <el-input v-model="form.materialGuig" placeholder="请输入规格"/>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="电压等级" prop="materialDiany">
                    <el-input v-model="form.materialDiany" placeholder="请输入电压等级" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="米数" prop="materialMs">
                    <el-input v-model="form.materialMs" placeholder="请输入米数" />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button type="primary" @click="submitForm">确 定</el-button>
              <el-button @click="cancel">取 消</el-button>
            </div>
          </el-dialog>
      </el-tab-pane>
      <el-tab-pane label="已选库位" name="locationSelected">
        <el-container>
          <el-main>
            <el-row :gutter="10" style="letter-spacing: 5px;">
              <el-col :span="8">
                <div class="grid-content bg-purpleA">黄色线芯A区</div>
              </el-col>
              <el-col :span="8">
                <div class="grid-content bg-purpleB">绿色线芯B区</div>
              </el-col>
              <el-col :span="8">
                <div class="grid-content bg-purpleC">红色线芯C区</div>
              </el-col>
            </el-row>
            <el-row :gutter="10">
              <el-col :span="8">
                <el-card class="box-card scrollable">
                  <el-descriptions border :column="2" size="small" :style="index==0?'': 'margin-top :15px'" v-for="(item,index) in selMaterialDetailA" :key="item.materialBh">
                    <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle'>
                      <template slot="label">
                        库位
                      </template>
                      <span class="kw">{{item.materialBh}}</span>
                    </el-descriptions-item>
                    <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle'>
                      <template slot="label">
                        操作
                      </template>
                      <el-button type="danger" icon="el-icon-delete" size="mini" circle @click="del(item)"></el-button>
                    </el-descriptions-item>
                    <el-descriptions-item :span="2" :contentStyle='contentStyle' :labelStyle='labelStyle'>
                      <template slot="label">
                        指令号
                      </template>
                      {{item.materialZlh}}
                    </el-descriptions-item>
                    <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle'>
                      <template slot="label">
                        型号
                      </template>
                      {{item.materialXingh}}
                    </el-descriptions-item>
                    <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle'>
                      <template slot="label">
                        规格
                      </template>
                      {{item.materialGuig}}
                    </el-descriptions-item>
                    <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle'>
                      <template slot="label">
                        电压等级
                      </template>
                      {{item.materialDiany}}
                    </el-descriptions-item>
                    <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle'>
                      <template slot="label">
                        米数
                      </template>
                      {{item.materialMs}}
                    </el-descriptions-item>
                  </el-descriptions>
                </el-card>
              </el-col>
              <el-col :span="8">
                <el-card class="box-card scrollable">
                  <el-descriptions border :column="2" size="small" :style="index==0?'': 'margin-top :12px'" v-for="(item,index) in selMaterialDetailB" :key="item.materialBh">
                    <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle'>
                      <template slot="label">
                        库位
                      </template>
                      <span class="kw">{{item.materialBh}}</span>
                    </el-descriptions-item>
                    <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle'>
                      <template slot="label">
                        操作
                      </template>
                      <el-button type="danger" icon="el-icon-delete" size="mini" circle @click="del(item)"></el-button>
                    </el-descriptions-item>
                    <el-descriptions-item :span="2" :contentStyle='contentStyle' :labelStyle='labelStyle'>
                      <template slot="label">
                        指令号
                      </template>
                      {{item.materialZlh}}
                    </el-descriptions-item>
                    <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle'>
                      <template slot="label">
                        型号
                      </template>
                      {{item.materialXingh}}
                    </el-descriptions-item>
                    <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle'>
                      <template slot="label">
                        规格
                      </template>
                      {{item.materialGuig}}
                    </el-descriptions-item>
                    <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle'>
                      <template slot="label">
                        电压等级
                      </template>
                      {{item.materialDiany}}
                    </el-descriptions-item>
                    <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle'>
                      <template slot="label">
                        米数
                      </template>
                      {{item.materialMs}}
                    </el-descriptions-item>
                  </el-descriptions>
                </el-card>
              </el-col>
              <el-col :span="8">
                <el-card class="box-card scrollable">
                  <el-descriptions border :column="2" size="small" :style="index==0?'': 'margin-top :12px'" v-for="(item,index) in selMaterialDetailC" :key="item.materialBh">
                    <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle'>
                      <template slot="label">
                        库位
                      </template>
                      <span class="kw">{{item.materialBh}}</span>
                    </el-descriptions-item>
                    <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle'>
                      <template slot="label">
                        操作
                      </template>
                      <el-button type="danger" icon="el-icon-delete" size="mini" circle @click="del(item)"></el-button>
                    </el-descriptions-item>
                    <el-descriptions-item :span="2" :contentStyle='contentStyle' :labelStyle='labelStyle'>
                      <template slot="label">
                        指令号
                      </template>
                      {{item.materialZlh}}
                    </el-descriptions-item>
                    <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle'>
                      <template slot="label">
                        型号
                      </template>
                      {{item.materialXingh}}
                    </el-descriptions-item>
                    <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle'>
                      <template slot="label">
                        规格
                      </template>
                      {{item.materialGuig}}
                    </el-descriptions-item>
                    <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle'>
                      <template slot="label">
                        电压等级
                      </template>
                      {{item.materialDiany}}
                    </el-descriptions-item>
                    <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle'>
                      <template slot="label">
                        米数
                      </template>
                      {{item.materialMs}}
                    </el-descriptions-item>
                  </el-descriptions>
                </el-card>
              </el-col>
            </el-row>
          </el-main>
          <el-footer style="margin:0 auto;">
            <el-button type="primary" @click="confirm()">确认</el-button>
          </el-footer>
        </el-container>
      </el-tab-pane>
    </el-tabs>
    <!-- 操作详情对话框 -->
    <el-dialog :title="operlogTitle" :visible.sync="operlogOpen" width="1000px" append-to-body>
      <operlog :materialBhProp="materialBhProp"></operlog>
    </el-dialog>
  </div>
</template>
<style>
  /*库位号样式*/
  .kw{
    font-size: 15px;color: black;font-weight: bold
  }

  /* 修改标签本身的样式 */
  .el-tag:hover {
    cursor: pointer; /* 将鼠标形状改为指针形状 */
  }

  /*卡片内容滚动条设置*/
  .scrollable::-webkit-scrollbar {
    display: none; /* 对于Webkit浏览器 */
  }
  .scrollable{
    overflow: auto; /* 自动开启滚动条 */
    max-height: 580px; /* 设置最大高度 */
  }

  /*最上方三大块样式*/
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
    display: flex; /* 设置为 Flexbox */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    cursor: pointer; /* 将鼠标形状改为指针形状 */
  }
  .bg-purpleA {
    background: #e6a700;
    color: white;
    font-weight: bold
  }
  .bg-purpleB {
    background: green;
    color: white;
    font-weight: bold
  }
  .bg-purpleC {
    background: red;
    color: white;
    font-weight: bold
  }
</style>
<script>
  import { listStorageLocation, checkStorageLocation,clearLocationLyCacheKey, confirmStorageLocation } from "@/api/storageLocation/storageConsuming";
  import operlog from "@/views/storageLocation/operlog.vue";

  export default {
    name: "locationConsuming.vue",
    components: {operlog},
    data() {
      return {
        activeName: 'locationShow',

        //内容样式
        contentStyle: {
          'text-align': 'center',
          'width': '150px'
        },
        //label样式
        labelStyle: { 'width': '80px' },

        queryParams: {
          materialBh: null,
          materialZlh: null,
          materialXingh: null,
          materialGuig: null,
          materialDiany: null,
          materialMs: null
        },

        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        //库位信息数据
        materialDetailA:[],
        materialDetailB:[],
        materialDetailC:[],

        //已选库位信息数据
        selMaterialDetailA:[],
        selMaterialDetailB:[],
        selMaterialDetailC:[],

        // 操作记录弹出层标题
        operlogTitle: "",
        // 操作记录是否显示弹出层
        operlogOpen: false,
        materialBhProp: "",

        // 表单参数
        form: {},
        // 表单校验
        rules: {
          materialZlh: [
            { required: true, message: "指令号不能为空", trigger: "blur" }
          ],
          materialXingh: [
            { required: true, message: "型号不能为空", trigger: "blur" }
          ],
          materialGuig: [
            { required: true, message: "规格不能为空", trigger: "blur" }
          ],
          materialDiany: [
            { required: true, message: "电压等级不能为空", trigger: "blur" }
          ],
          materialMs: [
            { required: true, message: "米数不能为空", trigger: "blur" }
          ],
        }
      }
    },
    created() {
      /*获取库位信息*/
      this.getStorageLocation();
    },
    computed:{
      countA(){
        // 使用 find 方法找到第一个符合条件的对象
        return this.materialDetailA.filter(task => task.materialState === '1').length;
      },
      countB(){
        // 使用 find 方法找到第一个符合条件的对象
        return this.materialDetailB.filter(task => task.materialState === '1').length;
      },
      countC(){
        // 使用 find 方法找到第一个符合条件的对象
        return this.materialDetailC.filter(task => task.materialState === '1').length;
      }
    },
    methods: {
      /*刷新库位信息*/
      refresh(){
        this.getStorageLocation();
      },

      /*获取库位信息*/
      getStorageLocation(){
        listStorageLocation(this.queryParams).then(response => {
          this.materialDetailA = response.materialDetailA;
          this.materialDetailB = response.materialDetailB;
          this.materialDetailC = response.materialDetailC;

          //已选库位数据
          this.selMaterialDetailA = response.selMaterialDetailA;
          this.selMaterialDetailB = response.selMaterialDetailB;
          this.selMaterialDetailC = response.selMaterialDetailC;
        });
      },

      /** 打开录入弹窗 */
      openDialog(item) {
        //校验库位是否已占用
        this.form.materialBh = item.materialBh;
        checkStorageLocation(this.form).then(response => {
          this.reset();
          this.open = true;
          this.title = "录入信息";
          this.form.materialBh = item.materialBh;
        }).catch((error) => {
          console.error(error);
        });
      },

      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            addStorageLocation(this.form).then(response => {
              this.$modal.msgSuccess("录入成功");
              this.open = false;
              this.getStorageLocation();
            });
          }
        });
      },

      // 取消按钮
      cancel() {
        cancelStorageLocation(this.form).then(response => {
          this.open = false;
          this.reset();
        }).catch((error) => {
          console.error(error);
        });

      },

      // 表单重置
      reset() {
        this.form = {
          materialBh: null,
          materialZlh: null,
          materialXingh: null,
          materialGuig: null,
          materialDiany: null,
          materialMs: null
        };
        this.resetForm("form");
      },

      /*===============================================领用操作==========================================*/
      // Tag标签页点击事件
      handleClick(tab, event) {
        console.log(tab, event);
      },

      //选择领用库位
      selectLocation(item){
        this.$confirm("是否选择该 "+item.materialBh+" 库位?","提示",{
          iconClass: "el-icon-question",//自定义图标样式
          confirmButtonText: "确认",//确认按钮文字更换
          cancelButtonText: "取消",//取消按钮文字更换
          showClose: false,//是否显示右上角关闭按钮
          type: "warning",//提示类型  success/info/warning/error
        }).then(()=>{
          var materialBh = item.materialBh;
          this.form.materialBh = materialBh;

          //校验是否已选
          var index = "";
          if(materialBh.indexOf('A-')==0){
            index = this.selMaterialDetailA.findIndex(item => item.materialBh === materialBh);
          }
          if(materialBh.indexOf('B-')==0){
            index = this.selMaterialDetailB.findIndex(item => item.materialBh === materialBh);
          }
          if(materialBh.indexOf('C-')==0){
            index = this.selMaterialDetailC.findIndex(item => item.materialBh === materialBh);
          }
          if (index !== -1) {
            this.$message({
              message: '该库位 '+ materialBh +' 已选,请勿重复选!',
              type: 'error'
            });
            return;
          }

          //校验库位是否被领用
          checkStorageLocation(this.form).then(response => {
            if(materialBh.indexOf('A-')==0){
              this.selMaterialDetailA.push(item)
            }
            if(materialBh.indexOf('B-')==0){
              this.selMaterialDetailB.push(item)
            }
            if(materialBh.indexOf('C-')==0){
              this.selMaterialDetailC.push(item)
            }
            this.$message({
              message: '已成功选择库位 '+ materialBh,
              type: 'success'
            });
          }).catch((error) => {
            console.error(error);
          });

        }).catch(() => {
          //取消操作
        });
      },
      //删除已选库位
      del(item){
        var materialBh = item.materialBh;
        this.form.materialBh = materialBh;
        if(materialBh.indexOf('A-')==0){
          const index = this.selMaterialDetailA.findIndex(item => item.materialBh === materialBh);
          if (index !== -1) {
            this.selMaterialDetailA.splice(index, 1);
          }
        }
        if(materialBh.indexOf('B-')==0){
          debugger
          const index = this.selMaterialDetailB.findIndex(item => item.materialBh === materialBh);
          if (index !== -1) {
            this.selMaterialDetailB.splice(index, 1);
          }
        }
        if(materialBh.indexOf('C-')==0){
          const index = this.selMaterialDetailC.findIndex(item => item.materialBh === materialBh);
          if (index !== -1) {
            this.selMaterialDetailC.splice(index, 1);
          }
        }

        //清除库位领用缓存
        clearLocationLyCacheKey(this.form).then(response => {
        }).catch((error) => {
          console.error(error);
        });
      },
      //确认完成认领
      confirm(){
        var materialBhArr = [];
        this.selMaterialDetailA.forEach(function(item,index,array) {
          materialBhArr.push(item.materialBh)
        })
        this.selMaterialDetailB.forEach(function(item,index,array) {
          materialBhArr.push(item.materialBh)
        })
        this.selMaterialDetailC.forEach(function(item,index,array) {
          materialBhArr.push(item.materialBh)
        })

        if(materialBhArr.length==0){
          this.$message({
            message: '没有选择库位领用,无法继续操作!',
            type: 'error'
          });
          return;
        }

        confirmStorageLocation(materialBhArr).then(response => {
          this.$modal.msgSuccess("领用成功");
          this.activeName =  'locationShow';
          this.getStorageLocation();
        });
      },
      //操作详情
      operlogdialog(materialBh){
        this.operlogTitle = "操作记录";
        this.operlogOpen = true;
        this.materialBhProp = materialBh;
      }
    }
  }
</script>
