<template>
  <div class="baseinfo-container">
    <basicInfoVue ref="basicInfoRef" />
    <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.fixCode }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 品牌 </template>
        {{ info.brand }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 供应商</template>
        {{ info.supplierName }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 供应商电话 </template>
        {{ info.supplierMobile }}
      </el-descriptions-item>
      <el-descriptions-item :span="2">
        <template slot="label">
          {{ sourceType == 1 ? '入库单号' : '出库单号' }}
        </template>
        <!-- <el-link style="color: #70B603" @click="jumpDetails">{{info.warehouseDetail.bizNum}}</el-link> -->
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 所在部门 </template>
        {{ info.ownershipDeptName }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 所在工序</template>
        {{ info.processName }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 权属部门 </template>
        {{ info.ownershipDeptName }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 当前权属人</template>
        {{ info.ownershipUserName }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 权属人电话</template>
        {{ info.ownershipUserMobile }}
      </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>
        {{ categoryVehicle.levelNum }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">材质</template>
        {{ categoryVehicle.materialQuality }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">长</template>
        {{
          categoryVehicle.vehicleLen ? categoryVehicle.vehicleLen + 'mm' : null
        }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">宽</template>
        {{ categoryVehicle.wilde ? categoryVehicle.wilde + 'mm' : null }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">高</template>
        {{ categoryVehicle.hight ? categoryVehicle.hight + 'mm' : null }}
      </el-descriptions-item>
    </el-descriptions>

    <warehouseConfigVue ref="warehouseConfigRef" />
    <productInfoVue ref="productInfoRef" />
    <planVue ref="planRef" />
    <qualityConfig ref="qualityConfigRef" />
    <footerVue ref="footerVueRef" />

    <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>
    <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 info.extInfoSelf"
        :key="index"
        :span="1"
      >
        <template slot="label"> {{ item.key }} </template>
        <div>{{ item.value }}</div>
      </el-descriptions-item>
    </el-descriptions>

    <!--   <DetailsDialog
      ref="detailsDialogRef"
    /> -->
  </div>
</template>

<script>
  // import {getAssetInfo} from "@/api/ledgerAssets/asset"
  // import DetailsDialog from '@/views/ledgerAssets/components/outstoreDetailsDialog.vue'
  import { getImageUrl } from '@/utils/file.js';
  import { getAssetInfo } from '@/api/ledgerAssets';
  import { getDetails } from '@/api/classifyManage/itemInformation';
  import dictMixins from '@/mixins/dictMixins';
  import basicInfoVue from '../../components/basicInfo.vue';
  import warehouseConfigVue from '../../components/warehouseConfig.vue';
  import productInfoVue from '../../components/productInfo.vue';
  import planVue from '../../components/plan.vue';
  import qualityConfig from '../../components/qualityConfig.vue';
  import footerVue from '../../components/footer.vue';

  import { sysDict } from '@/utils/sys';
  export default {
    mixins: [dictMixins],
    props: {
      rowId: {
        type: String,
        default: ''
      }
    },
    components: {
      basicInfoVue,
      warehouseConfigVue,
      productInfoVue,
      planVue,
      qualityConfig,
      footerVue
    },
    data() {
      return {
        info: {
          category: {},
          extInfoSelf: []
        },
        // 设备图片
        imageUrl: '',
        sourceType: null,
        categoryVehicle: {}
      };
    },
    created() {
      this.getDetilInfo();
      this.requestDict('生命周期');
      this.requestDict('周转车材质');
    },
    methods: {
      async getDetilInfo() {
        const res = await getAssetInfo(this.rowId);
        if (res) {
          this.info = res;
          this.sourceType =
            res.positionList.length > 0 ? res.positionList[0].type : '';
          this.$set(this.info, 'category', res.category);
          this.$set(
            this.info,
            'extInfoSelf',
            res.extInfoSelf ? res.extInfoSelf : []
          );
          // this.$set(this.info, 'warehouseDetail', res.data.warehouseDetail)
          // 设备图片
          if (typeof res.imageUrl != 'string') {
            this.imageUrl = getImageUrl(res.imageUrl.storePath);
          }
          const rep = await getDetails(res.categoryId);
          console.log('==', rep);
          this.$nextTick(() => {
            this.$refs.basicInfoRef.getDetailInfoAugr(rep.category);
            this.$refs.warehouseConfigRef.getDetailInfoAugr(rep.categoryWms);
            this.$refs.productInfoRef.getDetailInfoAugr(rep.categoryMes);
            this.$refs.planRef.getDetailInfoAugr(rep.categoryAps);
            this.$refs.qualityConfigRef.getDetailInfoAugr(rep.categoryQms);
            this.$refs.footerVueRef.getDetailInfoAugr(rep.category);
          });
          this.categoryVehicle = {
            ...rep.categoryVehicle,
            materialQuality: await sysDict(
              '周转车材质',
              rep.categoryVehicle.materialQuality
            )
          };
        }
      },
      // 打开详情弹窗
      jumpDetails() {
        if (!this.info.warehouseDetail) {
          return;
        }
        this.$refs.detailsDialogRef.init(
          this.info.warehouseDetail,
          this.sourceType
        );
      }
    }
  };
</script>

<style lang="scss" scoped>
  .baseinfo-container {
    background-color: #fff;
    padding: 0px 20px 20px;
    .content {
      padding: 0 20px;
    }
    .basic-details-title {
      font-size: 16px;
      margin: 15px 0;
    }
    .upload-container {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      .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%;
        }
      }
    }
  }
</style>
