<template>
 <div style="margin-top: 5px;">
  <div style="margin-left: 5px; margin-right: 5px;">
   <el-row :gutter="10" style="letter-spacing: 5px;">
    <el-col :span="8">
      <div class="grid-content bg-purpleA">黄色线芯A区(余{{countA}})</div>
    </el-col>
    <el-col :span="8">
      <div class="grid-content bg-purpleB">绿色线芯B区(余{{countB}})</div>
    </el-col>
    <el-col :span="8">
      <div class="grid-content bg-purpleC">红色线芯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>
              <span class="kw">{{item.materialBh}}</span>
            </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" @click="openDialog(item)">空闲</el-tag>
              </span>
              <span v-if = "item.materialState=='1'">
                <el-tag size="mini" type="danger">占用</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>
              <span class="kw">{{item.materialBh}}</span>
            </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" @click="openDialog(item)">空闲</el-tag>
              </span>
              <span v-if = "item.materialState=='1'">
                <el-tag size="mini" type="danger">占用</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>
              <span class="kw">{{item.materialBh}}</span>
            </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" @click="openDialog(item)">空闲</el-tag>
              </span>
              <span v-if = "item.materialState=='1'">
                <el-tag size="mini" type="danger">占用</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>
  </div>
  <!-- 添加或修改材料管理对话框 -->
  <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>
 </div>
</template>
<style>
  /*库位号样式*/
  .kw{
    font-size: 15px;color: black;font-weight: bold
  }

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

  /*卡片内容滚动条设置*/
  ::-webkit-scrollbar {
    display: none; /* Chrome Safari */
  }
  .scrollable{
    overflow: auto; /* 自动开启滚动条 */
    max-height: 600px; /* 设置最大高度 */
  }

  /*最上方三大块样式*/
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
    display: flex; /* 设置为 Flexbox */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
  }
  .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, addStorageLocation, checkStorageLocation,cancelStorageLocation } from "@/api/storageLocation/storageLocation";

  export default {
        name: "locationSet",
        data() {
          return {
            //内容样式
            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:[],
            // 表单参数
            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 === '0').length;
        },
        countB(){
          // 使用 find 方法找到第一个符合条件的对象
          return this.materialDetailB.filter(task => task.materialState === '0').length;
        },
        countC(){
          // 使用 find 方法找到第一个符合条件的对象
          return this.materialDetailC.filter(task => task.materialState === '0').length;
        }
      },
      methods: {
        /*获取库位信息*/
        getStorageLocation(){
          listStorageLocation(this.queryParams).then(response => {
            this.materialDetailA = response.materialDetailA;
            this.materialDetailB = response.materialDetailB;
            this.materialDetailC = response.materialDetailC;
          });
        },

        /** 打开录入弹窗 */
        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");
        }
      }
    }
</script>
