<template>
  <div class="box">
    <el-select
      style="width: 215px;margin: 10px 20px;"
      v-model="queryParams.materialsCabinetId"
      placeholder="请选择物资柜"
      @change="handleCabinetChange"
    >
      <el-option
        v-for="dict in cabinets"
        :key="dict.value"
        :label="dict.label"
        :value="dict.value"
      />
    </el-select>
    <el-tabs style="padding: 10px;" v-model="activeName" @tab-click="handleClick">
      <!-- 动态渲染 Tab Pane -->
      <el-tab-pane v-for="(item, index) in allData"
                   :key="item.materialsTypeId"
                   :label="item.materialsTypeName + ' (' + item.exNumber + ')'"
                   :name="item.materialsTypeName"
      >

        <div class="allBox">
          <!-- 循环渲染每组旧物资和新物资 -->
          <div style="width: 600px;height: 380px;display: flex;flex-wrap: wrap;margin: 10px"
               v-for="(materialPair, idx) in item.materials" :key="'pair' + idx"
          >
            <!-- 旧物资 -->
            <div class="oldBox">
              <div class="old1">旧物资</div>
              <div class="old2"><img :src="materialPair.oldMaterial.materialsTypePicture" alt=""></div>
              <div class="old3">名 称：
                <el-input disabled style="width: 217px" type="text" v-model="materialPair.oldMaterial.materialsName"
                ></el-input>
              </div>
              <div class="old4" style="display: flex;">类 型：
                <Treeselect
                  disabled
                  style="width: 220px;margin-left: 4px"
                  v-model="materialPair.oldMaterial.materialsTypeId"
                  :options="materialstypeOptions"
                  :normalizer="normalizer"
                  placeholder="请选择物资类型"
                />
              </div>
              <div class="old5">型 号：
                <el-select disabled v-model="materialPair.oldMaterial.propertiesValueId" placeholder="请选择型号"
                           @click.native="handleChangeValue(materialPair.oldMaterial)"
                >
                  <el-option
                    v-for="option in PropertyValueList"
                    :key="option.value"
                    :label="option.label"
                    :value="option.value"
                  >
                  </el-option>
                </el-select>
              </div>
              <div class="old6">RFID：
                <el-input disabled style="width: 217px" type="text" v-model="materialPair.oldMaterial.materialsRfid"
                ></el-input>
              </div>
              <div class="old7" style="margin-left: 4px">有效期：
                <el-date-picker disabled clearable
                                style="width: 217px;"
                                v-model="materialPair.oldMaterial.expirationDate"
                                type="date"
                                value-format="yyyy-MM-dd"
                                placeholder="请选择库存有效期"
                >
                </el-date-picker>
              </div>
            </div>

            <!-- 新物资 -->
            <div class="newBox">
              <div class="new1">新物资</div>
              <div class="new2"><img :src="materialPair.newMaterial.materialsTypePicture" alt=""></div>
              <div class="new3">名 称：
                <el-input :disabled="materialPair.newMaterial.isLocked"  style="width: 217px" type="text" v-model="materialPair.newMaterial.materialsName"></el-input>
              </div>
              <div class="new4" style="display: flex">类 型：
                <Treeselect
                  @input="onMaterialTypeChange(materialPair.newMaterial.materialsTypeId,materialPair)"
                  :disabled="materialPair.newMaterial.isLocked"
                  style="width: 220px;margin-left: 4px;"
                  v-model="materialPair.newMaterial.materialsTypeId"
                  :options="materialstypeOptions"
                  :normalizer="normalizer"
                  placeholder="请选择物资类型"
                />
              </div>
              <div class="new5">型 号：
                <el-select :disabled="materialPair.newMaterial.isLocked"  v-model="materialPair.newMaterial.propertiesValueId" placeholder="请选择型号"
                           @click.native="handleChangeValue(materialPair.newMaterial.materialsTypeId)"
                >
                  <el-option
                    v-for="option in PropertyValueList"
                    :key="option.value"
                    :label="option.label"
                    :value="option.value"
                  >
                  </el-option>
                </el-select>
              </div>
              <div class="new6">RFID：
                <el-input :disabled="materialPair.newMaterial.isLocked"  style="width: 217px" type="text" v-model="materialPair.newMaterial.materialsRfid"></el-input>
              </div>
              <div class="new7" style="margin-left: 4px">有效期：
                <el-date-picker :disabled="materialPair.newMaterial.isLocked" clearable
                                style="width: 217px"
                                v-model="materialPair.newMaterial.expirationDate"
                                type="date"
                                value-format="yyyy-MM-dd"
                                placeholder="请选择库存有效期"
                >
                </el-date-picker>
              </div>
            </div>
            <div class="allBoxBtn">
              <el-button type="danger" v-if="!materialPair.newMaterial.isLocked" class="Btn" @click="confirm(materialPair)" >确定更换</el-button>
              <el-button type="info" v-else  class="Btn" @click="confirm(materialPair)">重新填写</el-button>
            </div>
          </div>

        </div>
        <el-button type="primary" @click="submit">提交</el-button>
      </el-tab-pane>
    </el-tabs>


  </div>
</template>
<script>
import { getIsMaterialsCabinets, insertReplaceRecord, selectExMaterialTypeById } from '@/api/mes/material/information'
import { PropertyValuePage } from '@/api/mes/standard/propertyForm'
import { listType, selectMaterialsTypeById } from '@/api/mes/material/typeindex'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'


export default {
  name: 'demo6',
  components: { Treeselect },
  data() {
    return {
      cabinets: [],//物资柜数据
      queryParams: {
        current: 1,
        size: -1,
        materialsCabinetId: '',
        propertyId: ''//型号的对应值
      },
      materialPair: {
        newMaterial: {
          materialsTypePicture: "",
          materialsName: "",
          materialsTypeId: null,
          propertiesValueId: null,
          materialsRfid: "",
          expirationDate: null,
          isLocked: false
        }
      },
      PropertyValueList: [],
      allData: null,//全部类型数据
      activeName: null,
      materialstypeOptions: null//物资类型
    }
  },

  mounted() {
    this.materialsCabinets()
    this.getTreeselect()
  },
  methods: {
    onMaterialTypeChange(val,materialPair){
    console.log(val,'拿到了')
      selectMaterialsTypeById(val).then((response) => {
        console.log(response,'拿到对应物资类型详细信息')
        const data = {
          pageSize: 99999999,
          pageNum: 1,
          propertyId: response.data.propertyIds,
        };
        // 更新物资图片
        materialPair.newMaterial.materialsTypePicture = response.data.materialsTypePicture;
        materialPair.newMaterial.propertyId=response.data.propertyIds
        materialPair.newMaterial.propertiesValueId=null
      });
    },
    handleClick(tab, event) {
      console.log(tab, event)
    },
    // 获取物资柜信息
    materialsCabinets() {
      getIsMaterialsCabinets(this.queryParams).then((response) => {
        if (response?.data?.records) {
          this.cabinets = response.data.records.map((item) => ({
            value: item.cabinetId,
            label: item.cabinetName
          }))
        }
      })
      PropertyValuePage(this.queryParams).then((response) => {
        console.log(response, '获取物资说明 ')
        this.PropertyValueList = response.data.records.map((item) => ({
          value: item.recordId,
          label: item.valueName
        }))
      })

    },
    handleChangeValue(val) {
      console.log(val, '拿到的全部下拉之')

      selectMaterialsTypeById(val).then((response) => {
        console.log(response,'拿到的对应类型详细信息')
        this.queryParams.propertyId = response.data.propertyIds
        PropertyValuePage(this.queryParams).then((response) => {
          console.log(response, '获取物资说明 ')
          this.PropertyValueList = response.data.records.map((item) => ({
            value: item.recordId,
            label: item.valueName
          }))
        })
      })

    },
    /** 转换数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children
      }
      return {
        id: node.materialsTypeId,
        label: node.materialsTypeName,
        children: node.children
      }
    },
    /** 查询物资类型下拉树结构 */
    getTreeselect() {
      const data = {
        current: 1,
        size: -1
      }

      listType(data).then((response) => {
        this.materialstypeOptions = this.handleTree(
          response.data.records,
          'materialsTypeId',
          'parentId',
          'children'
        )
      })
    },
    handleCabinetChange() {
      const data = {
        cabinetId: this.queryParams.materialsCabinetId
      }
      selectExMaterialTypeById(data).then((response) => {
        console.log(response, '获取到的类型总数居')
        this.allData = response.data
        this.allData.forEach(item => {
          item.materials = item.materials.map(material => {
            return {
              oldMaterial: { ...material }, // 复制一份原始的旧物资数据
              newMaterial: { ...material,isLocked:false } // 复制一份新的物资数据，初始与旧物资相同
            }
          })
        })
      })
    },

    //   确认更换
    confirm(material) {
      material.newMaterial.isLocked = !material.newMaterial.isLocked; // 锁定新物资
    // this.submit()
    },
    submit(){
      const tabData = this.allData.find(item => item.materialsTypeName === this.activeName);
      if (!tabData) {
        console.error('Tab data not found');
        return;
      }

      const data = tabData.materials.map(materialPair => ({
        expirationDate: materialPair.newMaterial.expirationDate,
        materialsName: materialPair.newMaterial.materialsName,
        materialsRfid: materialPair.newMaterial.materialsRfid,
        materialsTypeId: materialPair.newMaterial.materialsTypeId,
        oldMaterialsId: materialPair.oldMaterial.materialsId,
        propertiesProperty: materialPair.newMaterial.propertiesProperty,
        propertiesPropertyId: materialPair.newMaterial.propertiesPropertyId,
        propertiesValue: materialPair.newMaterial.propertiesValue,
        propertiesValueId: materialPair.newMaterial.propertiesValueId
      }));
      console.log(data, '确认呢更换参数')
      insertReplaceRecord(data).then(response => {
        console.log(response, '确认更换接口返回值')
        if (response.data) {
          this.$message.success('更换成功')
        }
      })
    }

  }

}
</script>
<style scoped lang="scss">
.allBox {
  width: 100%;
  height: 100%;
  display: flex;
  //background: yellow;
  flex-wrap: wrap;
}

.oldBox {
  width: 300px;
  height: 320px;
  //background: pink;
  border: 1px solid black;
}

.old1 {
  //background: yellow;
  text-align: center;
  border: 1px solid black;
  border-top: none;
  border-left: none;
  border-right: none;
}

.old2 {
  display: flex;
  justify-content: center;

  img {
    width: 80px;
    height: 60px;
  }
}

.old3, .old4, .old5, .old6 {
  padding-left: 12px;
  margin-bottom: 10px;
}

.newBox {
  width: 300px;
  height: 320px;
  //background: pink;
  border: 1px solid black;
  border-left: none;
}

.new1 {
  //background: yellow;
  text-align: center;
  border: 1px solid black;
  border-top: none;
  border-left: none;
  border-right: none;
}

.new2 {
  display: flex;
  justify-content: center;

  img {
    width: 80px;
    height: 60px;
  }
}

.new3, .new4, .new5, .new6 {
  padding-left: 12px;
  margin-bottom: 10px;
}

.allBoxBtn {
  width: 600px;
  height: 60px;
  //background: pink;
  display: flex;
  justify-content: flex-end;
  border: 1px solid black;
  border-top: none;
}

.Btn {
  width: 100px;
  height: 40px;
  margin-top: 10px;
  margin-right: 10px;
}

</style>
