<template>
  <div class="dialog" v-if="dialogForm">
    <div class="head_box">
      <span class="title">详情</span>
      <div>
        <el-button size="small" @click="close">关闭</el-button>
      </div>
    </div>
    <div class="cntinfo">
      <el-tabs v-model="activeName" @change="formData.keyCount++">
        <el-tab-pane label="库房使用详情" name="first">
          <el-form :model="listQuery" :label-width="230" label-position="left">
            <div class="form-row">
              <el-form-item label="库房所属单位">
                <el-input v-model="listQuery.kfssdw" disabled/>
              </el-form-item>
            </div>

            <div class="form-row">
              <el-form-item label="库房使用单位">
                <el-input v-model="listQuery.kfsydw" disabled/>
              </el-form-item>
              <el-form-item label="库房使用单位代码">
                <el-input v-model="listQuery.kfsydwdm" disabled/>
              </el-form-item>
            </div>

            <div class="form-row">
              <el-form-item label="库房编号">
                <el-input v-model="listQuery.kfdh" disabled/>
              </el-form-item>
              <el-form-item label="库房名称">
                <el-input v-model="listQuery.kfmc" disabled/>
              </el-form-item>
            </div>

            <div class="form-row">
              <el-form-item label="库房所在地">
                <el-input v-model="listQuery.kfszd" disabled/>
              </el-form-item>
              <el-form-item label="库房地址">
                <el-input v-model="listQuery.kfdz" disabled/>
              </el-form-item>
            </div>

            <div class="form-row">
              <el-form-item label="存储品种">
                <el-input v-model="listQuery.ccpz" disabled/>
              </el-form-item>
              <el-form-item label="库房类型">
                <el-input v-model="listQuery.kflx" disabled/>
              </el-form-item>
            </div>
            <div class="form-row">
              <el-form-item label="库房使用状态">
                <el-input v-model="listQuery.kfsyzt" disabled/>
              </el-form-item>
              <el-form-item label="库房性质">
                <el-input v-model="listQuery.kfxz" disabled/>
              </el-form-item>
            </div>
            <div class="form-row">
              <el-form-item label="租用开始时间">
                <el-input v-model="listQuery.zykssj" disabled/>
              </el-form-item>
              <el-form-item label="租用结束时间">
                <el-input v-model="listQuery.zyjssj" disabled/>
              </el-form-item>
            </div>

            <div class="form-row" style="color:#000"> <h1>库房入料信息</h1> </div>
            <MyTable
              :tableData="formData.tableData"
              :tableColumn="formData.tableColumn"
              :tableHeight="formData.tableHeight"
              :key="formData.keyCount"
              :tableConfiger="formData.tableConfiger"
              :controlsWidth="formData.controlsWidth"
            >
            </MyTable>
            <div class="form-row" style="color:#000"> <h1>库房出料信息</h1> </div>
            <MyTable
              :tableData="formData.tableData2"
              :tableColumn="formData.tableColumn2"
              :tableHeight="formData.tableHeight"
              :key="formData.keyCount"
              :tableConfiger="formData.tableConfiger"
              :controlsWidth="formData.controlsWidth"
            >
            </MyTable>
            
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="库房详情" name="second">
          <el-form :model="listQuery" :label-width="230" label-position="left">
            <div class="form-row" style="color:#000"> <h1>库房基本信息</h1> </div>

            <div class="form-row">
              <el-form-item label="库房名称">
                <el-input v-model="listQuery.kfmc" disabled/>
              </el-form-item>
              <el-form-item label="所属单位">
                <el-input v-model="listQuery.ssdw" disabled/>
              </el-form-item>
            </div>
            <div class="form-row">
              <el-form-item label="库房序号">
                <el-input v-model="listQuery.kfxh" disabled/>
              </el-form-item>
              <el-form-item label="库房类型">
                <el-input v-model="listQuery.kflx" disabled/>
              </el-form-item>
            </div>
            <div class="form-row">
              <el-form-item label="所在库区">
                <el-input v-model="listQuery.kfxh" disabled/>
              </el-form-item>
              <el-form-item label="库区所在地">
                <el-input v-model="listQuery.kflx" disabled/>
              </el-form-item>
            </div>
            <div class="form-row">
              <el-form-item label="核定容量">
                <el-input v-model="listQuery.hdrl" disabled/>
              </el-form-item>
              <el-form-item label="存储品种">
                <el-input v-model="listQuery.ccpz" disabled/>
              </el-form-item>
            </div>

            
           
            <div class="form-row" style="color:#000"> <h1>库房物品信息</h1> </div>
            <MyTable
              :tableData="formData.tableData3"
              :tableColumn="formData.tableColumn3"
              :tableHeight="formData.tableHeight"
              :key="formData.keyCount"
              :tableConfiger="formData.tableConfiger"
              :controlsWidth="formData.controlsWidth"
            >
            </MyTable>
            
          </el-form>

          
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script setup>
import MyTable from "@/components/aboutTable/MyTable.vue";
import { ref ,reactive} from 'vue';

const dialogForm = ref(false);
const listQuery = ref({});
const activeName = ref('first');
const formData = reactive({
  tableData: [
    {  index: 1,  rksj: "2025/10/10 10:10:10",  wpmc: "xxx",  wplx: "雷管",wpbh:'1565',rksl:12 ,scrq:'2023/10/10 10:10:10',yxq:'2023/10/10 10:10:10'},
    {  index: 2,  rksj: "2025/10/10 10:10:10",  wpmc: "xxx",  wplx: "雷管",wpbh:'1565',rksl:12 ,scrq:'2023/10/10 10:10:10',yxq:'2023/10/10 10:10:10'},
  ],
  tableData2: [
    {  index: 1,  rksj: "2025/10/10 10:10:10",  wpmc: "xxx",  wplx: "雷管",wpbh:'1565',rksl:12 ,scrq:'2023/10/10 10:10:10',yxq:'2023/10/10 10:10:10'},
    {  index: 2,  rksj: "2025/10/10 10:10:10",  wpmc: "xxx",  wplx: "雷管",wpbh:'1565',rksl:12 ,scrq:'2023/10/10 10:10:10',yxq:'2023/10/10 10:10:10'},
  ],
  tableData3: [
    {  index: 1,   wpmc: "xxx",wpdm:'1245',hdccl:'12',dldw:'' },
  ],
  tableHeight: 300,
  keyCount: 0,
  tableConfiger: {
    rowHieght: 61,
    showSelectType: "null",
    loading: false,
    haveControls:null
  },
  tableColumn: [
    { label: "入库时间", prop: "rksj" },
    { label: "物品名称", prop: "wpmc" },
    { label: "物品类型", prop: "wplx" },
    { label: "物品编号", prop: "wpbh" },
    { label: "入库数量", prop: "rksl" },
    { label: "生产日期", prop: "scrq" },
    { label: "有效期", prop: "yxq" },
  ],
  tableColumn2: [
    { label: "出库时间", prop: "rksj" },
    { label: "物品名称", prop: "wpmc" },
    { label: "物品类型", prop: "wplx" },
    { label: "物品编号", prop: "wpbh" },
    { label: "入库数量", prop: "rksl" },
    { label: "生产日期", prop: "scrq" },
    { label: "有效期", prop: "yxq" },
  ],
  tableColumn3: [
    { label: "物品名称", prop: "wpmc" },
    { label: "物品代码", prop: "wpdm" },
    { label: "核定存储量", prop: "hdccl" },
    { label: "度量单位", prop: "dldw" },
  ],
});


// 初始化数据
const init = (type, row) => {
  dialogForm.value = true;
  if (row) {
    listQuery.value = { ...row };
  } else {
    listQuery.value = {};
  }
};

const close = () => {
  dialogForm.value = false;
  listQuery.value = {};
};

defineExpose({init});
</script>

<style lang="scss" scoped>
.dialog {
  padding: 20px;
  :deep(.el-form-item__label) {
    background-color: #F7FAFB;
    padding: 0px 8px;
    color: #000;
    font-weight: 500;
    border: 1px solid #E3E7ED;
  }

  .head_box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
  }
  
  .cntinfo{
    height: calc(100% - 70px);
    overflow: hidden;
    overflow-y: auto;
    ::v-deep .el-table {
      background: transparent;
    }
  }

  .form-row {
    display: flex;
    
    .el-form-item {
      flex: 1;
    }
  }

  .image-preview {
    width: 100%;
    min-height: 300px;
    border: 1px solid #E3E7ED;
    display: flex;
    align-items: center;
    justify-content: center;
    
    img {
      max-width: 100%;
      max-height: 500px;
      object-fit: contain;
    }
    
    .no-image {
      color: #999;
      font-size: 14px;
    }
  }

   ::v-deep .el-input__inner{
    height: 36px !important;
    line-height: 36px !important;
    border-radius: 0;
    color: #777575;
  }
}

.el-form-item--default{
  margin-bottom: 0px;
}
</style>
