<!--产品详情弹窗-->
<template>
  <el-dialog title="详情" width="920px" :visible.sync="dialogShow" append-to-body @close="close">
    <div v-loading="loading" class="contanier">
      <el-descriptions v-if="form" class="margin-top" title="" label-class-name="description-label" :column="2" border>
        <el-descriptions-item label="产品型号">
          {{ form ? form.productCode : '' }}
        </el-descriptions-item>
        <el-descriptions-item label="产品名称">
          {{ form ? form.productName : '' }}
        </el-descriptions-item>
        <el-descriptions-item label="产品品牌">
          {{ form ? form.brandName : '' }}
        </el-descriptions-item>
        <el-descriptions-item label="产品品类">
          {{ form ? form.categoryStr : '' }}
        </el-descriptions-item>
        <el-descriptions-item label="产品版本">
          {{ form ? form.productEdition : '' }}
        </el-descriptions-item>
        <el-descriptions-item label="国际69码">
          {{ form ? form.internationalCode : '' }}
        </el-descriptions-item>
        <el-descriptions-item label="包装尺寸">
          {{ form ? form.productPackageSize : '' }}
        </el-descriptions-item>
        <el-descriptions-item label="产品颜色">
          {{ form ? form.productColor : '' }}
        </el-descriptions-item>
        <el-descriptions-item label="产品状态">
          {{ form ? form.productStatus : '' }}
        </el-descriptions-item>
        <el-descriptions-item label="产品材质">
          {{ form ? form.productMaterialQuality : '' }}
        </el-descriptions-item>
        <el-descriptions-item label="产品重量">
          {{ form ? form.productWeight : '' }}
        </el-descriptions-item>
        <el-descriptions-item v-if="form" label="是否为IOT产品">
          {{ form&&form.productNetworkMode=='1' ? '是' : '否' }}
        </el-descriptions-item>
        <el-descriptions-item label="照片" :span="2">
          <div v-if="form.productPicture" style="display: flex">
            <div>
              <el-image :src="imageUrl+form.productPicture" style="height: 150px;width:auto" fit="scale-down" />
            </div>
          </div>
          <span v-else>无</span>
        </el-descriptions-item>
        <el-descriptions-item v-for="param of form.paramValues" :key="param.paramId" :label="param.paramName">
          {{ param.paramValue }}
        </el-descriptions-item>
      </el-descriptions>
    </div>
  </el-dialog>
</template>

<script>
import { productDetail } from '../../../api/product/product'
import { infoDialog } from '../../../utils/myUtils/mixins/infoDialog' // 抽离porp 和 methods
export default {
  mixins: [infoDialog],
  data() {
    return {
      dialogShow: false,
      loading: false,
      form: null,
      imageUrl: this.baseConfig.baseUrl + '/static/'
    }
  },
  methods: {
    initDialog(id) {
      this.dialogShow = true
      this.loading = true
      productDetail({ id: id }).then(res => {
        this.form = res
        this.loading = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../../../assets/css/infoDialog.scss';
</style>
<style>
.description-label{
  width: 140px !important;
}
</style>