<!--品类详情弹窗-->
<template>
  <el-dialog title="品类详情" width="920px" :visible.sync="isShowInfo" append-to-body @close="close">
    <div v-if="form" class="contanier">
      <el-descriptions class="margin-top" title="" :column="2" border>
        <el-descriptions-item label="编号">
          {{ form.categoryCode }}
        </el-descriptions-item>
        <el-descriptions-item label="名称">
          {{ form.categoryName }}
        </el-descriptions-item>
        <el-descriptions-item label="父级品类">
          {{ form.pCategoryName || '无' }}
        </el-descriptions-item>
        <el-descriptions-item label="资质要求">
          {{ form.qualifyStr }}
        </el-descriptions-item>
        <el-descriptions-item label="备注" :span="2">
          {{ form.remark }}
        </el-descriptions-item>
        <el-descriptions-item label="产品参数" :span="2">
          <div v-for="(param,index) of form.productParams" class="param-line">
            <span>参数{{ index+1 }}：</span>
            <span class="param-name">参数名称:</span><span class="param-value">{{ param.paramName }}</span>
            <span class="param-name">排序:</span><span class="param-value">{{ param.paramOrder }}</span>
            <span class="param-name">必填:</span><span class="param-value">{{ param.paramRequire?'是':'否' }}</span>
          </div>
        </el-descriptions-item>
      </el-descriptions>
    </div>
  </el-dialog>
</template>

<script>
import { detail } from '@/api/product/category'

export default {
  props: {
    isShowInfo: {
      type: Boolean,
      default: true
    },
    dataInfo: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      form: {
        categoryCode: '',
        categoryName: '',
        pCategoryName: '',
        remark: '',
        qualifyStr: '',
        productParams: [
          {
            paramName: '',
            paramOrder: 0,
            paramRequire: '0'
          }
        ]
      }
    }
  },
  methods: {
    initDialog(id) {
      detail({ id }).then(res => {
        this.form = res.data
      })
    },
    close() {
      this.$emit('close')
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../../../assets/css/infoDialog.scss';
.param-line{
  line-height: 1.8;
  .param-name{
    margin-left: 10px;
  }
  .param-value{
    font-weight: bold;
    margin-left: 5px;
  }
}

</style>