<template>
  <div class="baseinfo-container">
    <div class="basic-details-title border-none">
      <span class="border-span">基本信息</span>
    </div>
    <el-descriptions title="" :column="4" size="medium" border>
      <el-descriptions-item>
        <template slot="label"> 设备编码 </template>
        {{ info.code }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 设备名称 </template>
        {{ basicInfo.name }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 型号</template>
        {{ basicInfo.modelType }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 规格 </template>
        {{ basicInfo.specification }}
      </el-descriptions-item>
      <el-descriptions-item :span="2">
        <template slot="label"> 分类 </template>
        {{ basicInfo.categoryLevelPath }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 采购日期 </template>
        {{ info.productTime }}
      </el-descriptions-item>
      <!-- <el-descriptions-item>
        <template slot="label"> 生产日期 </template>
        {{ basicInfo.productTime }}
      </el-descriptions-item> -->
      <el-descriptions-item>
        <template slot="label"> 过保日期 </template>
        {{ info.expirationTime }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 计量单位 </template>
        {{ basicInfo.measuringUnit }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 标准产能 </template>
        {{ setbzcn(basicInfo.extendField) }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 生命周期</template>
        <div v-if="info.source == 1" style="color: #70b603">在用</div>
        <div v-if="info.source == 2" style="color: #f59a23">在库</div>
        <div v-if="info.source == 3" style="color: #aaaaaa">消耗</div>
        <!-- {{ basicInfo.sourceDICT }} -->
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 网络状态</template>
        {{
          basicInfo.networkStatus === 1
            ? '在线'
            : basicInfo.networkStatus === 0
            ? '离线'
            : ''
        }}
      </el-descriptions-item>
    </el-descriptions>

    <div class="basic-details-title border-none">
      <span class="border-span">资产信息</span>
    </div>

    <el-descriptions title="" :column="4" size="medium" border>
      <el-descriptions-item
        v-for="(item, index) in prodOpt"
        :key="index"
        :span="item.span || 1"
      >
        <template slot="label" v-if="item.key == 'bizNum'">{{
          info.source == 2 ? '入库单号' : '出库单号'
        }}</template>
        <template slot="label" v-else> {{ item.label }} </template>
        <div v-if="item.key == 'bizNum'">
          <el-link style="color: #70b603" @click="jumpDetails">{{
            info.warehouseDetail && info.warehouseDetail.bizNum
          }}</el-link>
        </div>
        <div v-else-if="item.key == 'detailLocation'">
          {{ initDetailLocation(item.value) }}
        </div>
        <div v-else>{{ item.value }}</div>
      </el-descriptions-item>
    </el-descriptions>

    <div class="basic-details-title border-none">
      <span class="border-span">仓储配置</span>
    </div>
    <el-descriptions title="" :column="4" size="medium" border>
      <el-descriptions-item>
        <template slot="label"> 启用库存预警</template>
        {{ dictType[categoryWms.isWarn] }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">允许拆包</template>
        {{ dictType[categoryWms.isUnpack] }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">安全库存</template>
        {{ categoryWms.secureInventory }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">最小库存</template>
        {{ categoryWms.minInventory }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 最大库存</template>
        {{ categoryWms.maxInventory }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">盘点模式</template>
        {{ dictPd[categoryWms.inventoryMode] }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">质保预警参考</template>
        <!-- <DictSelection
                dictName="质保预警参考"
                clearable
                v-model="categoryWms.warrantyWarnRefer"
              >
              </DictSelection> -->
        {{ categoryWms.warrantyWarnRefer }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">保质期</template>
        {{ categoryWms.warrantyPeriod ? categoryWms.warrantyPeriod + '/' : null
        }}{{ categoryWms.warrantyPeriodUnit }}
      </el-descriptions-item>
    </el-descriptions>

    <div class="basic-details-title border-none">
      <span class="border-span">生产信息</span>
    </div>
    <el-descriptions title="" :column="4" size="medium" border>
      <el-descriptions-item>
        <template slot="label"> 是否齐套件</template>
        {{ dictType[categoryMes.isCompleteSet] }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">消耗波动</template>
        {{ categoryMes.consumWave ? categoryMes.consumWave + '%' : null }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">变动损耗率</template>
        {{
          categoryMes.changeLossRate ? categoryMes.changeLossRate + '%' : null
        }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">固定损耗数</template>
        {{ categoryMes.fixLossNum }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">排程类型</template>
        {{ categoryMes.apsType }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">允许改型</template>
        {{ dictType[categoryMes.isModify] }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">允许返工返修</template>
        {{ dictType[categoryMes.isRework] }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">是否返回料</template>
        {{ dictType[categoryMes.isRematerial] }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">是否副产品</template>
        {{ dictType[categoryMes.isByProduct] }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">是否废品</template>
        {{ dictType[categoryMes.isWaste] }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">是否不良品</template>
        {{ dictType[categoryMes.isDefective] }}
      </el-descriptions-item>
    </el-descriptions>

    <div class="basic-details-title border-none">
      <span class="border-span">备注信息</span>
    </div>
    <el-descriptions title="" :column="4" size="medium" border>
      <el-descriptions-item>
        <template slot="label">附件信息</template>
        {{ categoryObj.fileName }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">备注</template>
        {{ categoryObj.remark }}
      </el-descriptions-item>
    </el-descriptions>

    <div class="basic-details-title border-none">
      <span class="border-span">关联信息</span>
    </div>
    <!-- <linkMsg
      v-if="isLink"
      ref="linkMsgRef"
      :id="categoryObj.id"
      :categoryLevelId="categoryObj.categoryLevelId"
      :categoryLevelGroupId="categoryObj.categoryLevelGroupId"
    /> -->

    <div class="basic-details-title border-none">
      <span class="border-span">文档信息</span>
    </div>
    <div class="upload-container">
      <div class="img-box">
        <img src="~@/assets/upload-placeholder.svg" alt="" v-if="!imageUrl" />
        <img v-else :src="imageUrl" alt="设备图片" />
      </div>
      <div class="file-list">
        <div
          :class="{ disabled: !item.storePath }"
          @click="openfile(item)"
          v-for="(item, index) in fileList"
          :key="index"
          class="file-box"
        >
          {{ item.t_name }}
        </div>
      </div>
    </div>
    <div class="basic-details-title border-none">
      <span class="border-span">物联参数</span>
    </div>
    <el-row>
      <el-col style="padding-left: 30px">
        <span style="color: #3e3e3e; padding-right: 20px; font-size: 14px"
          >是否启用物联</span
        >
        <el-switch
          v-model="info.isIotEnable"
          disabled
          active-text="开"
          inactive-text="关"
          :active-value="1"
          :inactive-value="0"
        >
        </el-switch>
      </el-col>
      <el-col style="margin-top: 20px; padding-left: 30px; font-size: 14px">
        <span style="color: #3e3e3e">物联ID</span>
        <span style="color: #3e3e3e; padding-left: 10px">{{ info.iotId }}</span>
      </el-col>
    </el-row>
    <div class="basic-details-title border-none">
      <span class="border-span">扩展信息</span>
    </div>
    <div class="kzzd">
      <el-row>
        <el-col
          :span="24"
          v-for="(item, index) in info.extInfoSelf"
          :key="index"
          style="margin-bottom: 20px"
        >
          <div class="add-col">
            <el-input
              disabled
              class="col-input"
              v-model="item.key"
              placeholder="参数名称"
            ></el-input>
            <el-input
              disabled
              class="col-input"
              v-model="item.value"
              placeholder="参数值"
            ></el-input>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- <DetailsDialog ref="detailsDialogRef" /> -->
  </div>
</template>

<script>
  import { getAssetInfo } from '@/api/ledgerAssets';
  import { getImageUrl } from '@/utils/file.js';
  import { getFile } from '@/api/system/file/index.js';
  // import DetailsDialog from '@/views/ledgerAssets/components/outstoreDetailsDialog.vue'
  import { getDetails } from '@/api/classifyManage/itemInformation';
  import { sysDict, isExit } from '@/utils/sys';
  // import linkMsg from './link-msg.vue';
  import { getUserPage } from '@/api/system/organization';
  export default {
    props: ['id'],
    components: {
      // DetailsDialog
      // linkMsg
    },
    data() {
      return {
        isLink: true,
        categoryObj: {},
        dictType: {
          1: '是',
          0: '否'
        },
        dictPd: {
          1: '逐个盘点',
          2: '批量盘点'
        },
        categoryMes: {
          isModify: '',
          isRework: '',
          isRematerial: '',
          isByProduct: '',
          isWaste: '',
          isDefective: ''
        },
        categoryWms: {}, //仓储
        prodOpt: [
          { label: '固资编码', key: 'fixCode', value: '' },
          { label: '投产日期', key: 'createTime', value: '' },
          { label: '所属厂房', key: 'factoryRoomName', value: '' },
          // { label: '所属工序', key: 'roteName', value: '' },
          { label: '维护部门', key: 'repairGroupName', value: '' },
          { label: '维护人', key: 'repairUserName', value: '' },
          { label: '维护人电话', key: 'repairUserMobil', value: '' },
          { label: '出库单号', key: 'bizNum', value: '' },
          { label: '权属部门', key: 'ownershipGroupName', value: '' },
          { label: '权属人', key: 'ownershipUserName', value: '' },
          { label: '权属人电话', key: 'ownershipUserMobile', value: '' },
          { label: '品牌', key: 'brand', value: '' },
          { label: '供应商', key: 'supplierName', span: 2, value: '' },
          { label: '供应商电话', key: 'supplierMobile', value: '' },
          { label: '设备用途', key: 'purpose', value: '' },
          { label: '设备位置', key: 'detailLocation', span: 2, value: '' },
          { label: '颜色', key: 'color', value: '' },
          { label: '重量', key: 'weight', value: '' }
        ],
        fileList: [
          { t_name: '使用说明书' },
          { t_name: '生产许可证书' },
          { t_name: '防爆合格证书' },
          { t_name: '检验报告' },
          { t_name: '检验周期说明' },
          { t_name: '图纸资料' },
          { t_name: '产品合格证' }
        ],
        // 基本信息
        basicInfo: {
          assetCode: '',
          assetName: '',
          // 资产管理物品信息
          information: '',
          productTime: '',
          expirationTime: '',
          networkStatus: '',
          sourceDICT: ''
        },
        // 设备图片
        imageUrl: '',
        // 扩展字段
        extInfoSelf: [],
        // 所有信息
        info: {}
      };
    },
    created() {
      this.getInfo();
    },
    methods: {
      // 获取设备详情
      getInfo() {
        getAssetInfo(this.id).then(async (data) => {
          this.info = data;
          this.basicInfo = data.category.category;
          if (data.attUrl && data.attUrl.length > 0) {
            // 文档信息
            data.attUrl.forEach((item, index) => {
              Object.assign(this.fileList[item.sort - 1], item);
            });
          }
          // 资产信息
          for (const item of this.prodOpt) {
            // 地址
            if (item.key == 'detailLocation') {
              item.value =
                data.positionList[0]?.pathName +
                '/' +
                data.positionList[0]?.detailPosition;
              // ?.map((i) => i.name)
              // .join(',');
            } else {
              item.value = data[item.key] || this.basicInfo[item.key];
            }
          }
          // 设备图片
          if (data.imageUrl.storePath) {
            this.imageUrl = getImageUrl(data.imageUrl.storePath);
          } else {
            this.imageUrl = null;
          }
          console.log(data.category);
          this.isLink = false;
          this.categoryWms = {
            ...data.category.categoryWms,
            warrantyWarnRefer: await sysDict(
              '质保预警参考',
              data.category.categoryWms.warrantyWarnRefer
            ),
            warrantyPeriodUnit: await sysDict(
              '保质期单位',
              data.category.categoryWms.warrantyPeriodUnit
            )
          };
          this.categoryMes = {
            ...data.category.categoryMes,
            apsType: await sysDict(
              '排程类型',
              data.category.categoryMes.apsType
            )
          };
          this.categoryObj = {
            ...data.category.category,
            fileName: data.category.category.remarkAttach
              ? data.category.category.remarkAttach
                  .map((item) => item.name)
                  .join(', ')
              : ''
          };
          this.isLink = true;
        });
      },
      // 设置标准产能
      setbzcn(val) {
        if (!val) {
          return '';
        }
        let item = JSON.parse(val);
        return item.standardCapacity || '';
      },
      openfile(row) {
        if (row.storePath) {
          getFile({ objectName: row.storePath }, row.name);
        }
      },
      // 打开详情弹窗
      jumpDetails() {
        if (!this.info.warehouseDetail) {
          return;
        }
        this.$refs.detailsDialogRef.init(
          this.info.warehouseDetail,
          this.info.source
        );
      },
      // 设备位置
      initDetailLocation(val) {
        // console.log(val);
        let list = String(val)
          .split(',')
          .filter((n) => {
            return n !== 'null';
          });
        return list.join('/');
      }
    }
  };
</script>

<style lang="scss" scoped>
  .baseinfo-container .basic-details-title {
    font-size: 16px;
    margin: 15px 0;
  }
  .baseinfo-container {
    background-color: #fff;
    padding: 0px 20px 20px;
    .content {
      padding: 0 20px;
    }
    .upload-container {
      display: flex;
      .img-box {
        width: 280px;
        height: 342px;
        border: 1px solid rgba(215, 215, 215, 1);
        display: flex;
        justify-content: center;
        align-items: center;
        img {
          max-width: 100%;
        }
      }
      .file-list {
        margin-left: 50px;
        flex: 1;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        justify-items: baseline;
        align-content: flex-start;
        .file-box {
          width: 30%;
          margin-bottom: 20px;
          height: 57px;
          text-align: center;
          line-height: 55px;
          border: 1px solid #1890ff;
          color: #1890ff;
          cursor: pointer;
          &.disabled {
            cursor: not-allowed;
            border-color: rgba(215, 215, 215, 1);
            color: rgba(215, 215, 215, 1);
          }
        }
      }
    }
  }
  .kzxx-wrap {
    .item {
      display: flex;
      .key {
        margin-right: 10px;
      }
    }
  }
  .kzzd {
    width: 500px;
    .add-col {
      display: flex;
      .col-input {
        & + .col-input {
          margin-left: 10px;
        }
      }
      .del {
        margin-left: 10px;
      }
    }
  }
</style>
