<template>
  <el-dialog :visible.sync="visible" v-bind="modalOptions" append-to-body>
    <el-form ref="formData" :model="formData" size="mini" label-position="left" label-suffix=":" label-width="200px">
      <!-- 选品信息 -->
      <el-form-item label="ID" prop="productId">
        {{ formData.productId || '--' }}
      </el-form-item>
      <el-form-item label="品牌ID" prop="brandId">
        {{ formData.brandId || '--' }}
      </el-form-item>
      <el-form-item label="关联分类ID" prop="classifyId">
        {{ formData.classifyId || '--' }}
      </el-form-item>
      <el-form-item label="创建时间" prop="createTime">
        {{ formData.createTime || '--' }}
      </el-form-item>
      <el-form-item label="是否支持积分抵扣" prop="ifCredit">
        <span v-if="formData.ifCredit">是</span>
        <span v-else-if="(formData.ifCredit === 0) || (formData.ifCredit === null)">否</span>
        <span v-else>--</span>
      </el-form-item>
      <el-form-item v-if="formData.ifCredit" label="单笔订单最多抵扣积分" prop="creditLimit">
        {{ typeof formData.creditLimit === 'number' ? formData.creditLimit : '--' }}
      </el-form-item>
      <el-form-item label="是否支持花呗分期" prop="ifHuabei">
        <span v-if="formData.ifHuabei">是</span>
        <span v-else-if="(formData.ifHuabei === 0) || (formData.ifHuabei === null)">否</span>
        <span v-else>--</span>
      </el-form-item>
      <el-form-item label="是否需要物流" prop="ifLogistics">
        <span v-if="formData.ifLogistics">是</span>
        <span v-else-if="(formData.ifLogistics === 0) || (formData.ifLogistics === null)">否</span>
        <span v-else>--</span>
      </el-form-item>
      <el-form-item label="配送属性" prop="distribution">
        <span v-if="formData.distribution === 1">线下核销</span>
        <span v-else-if="formData.distribution === 2">快递</span>
        <span v-else-if="formData.distribution === 3">支付即核销</span>
        <span v-else>--</span>
      </el-form-item>
      <el-form-item label="是否允许超卖" prop="ifOversold">
        <span v-if="formData.ifOversold">是</span>
        <span v-else-if="(formData.ifOversold === 0) || (formData.ifOversold === null)">否</span>
        <span v-else>--</span>
      </el-form-item>
      <el-form-item label="是否选品" prop="ifSelection">
        <span v-if="formData.ifSelection">是</span>
        <span v-else-if="(formData.ifSelection === 0) || (formData.ifSelection === null)">否</span>
        <span v-else>--</span>
      </el-form-item>
      <el-form-item label="商品图片" prop="images">
        <div v-if="formData.images && formData.images.length">
          <el-image
            v-for="(item, index) in formData.images.map(i => i.imgPath)" :key="index"
            :src="common.seamingImgUrl(item)" style="width:80px;height:80px;margin-right: 10px;" fit="cover"
            :preview-src-list="formData.images.map(i => common.seamingImgUrl(i.imgPath))"
          />
        </div>
        <span v-else>--</span>
      </el-form-item>
      <el-form-item label="sku最高价格" prop="maxPrice">
        {{ typeof formData.maxPrice === 'number' ? formData.maxPrice : '--' }}
      </el-form-item>
      <el-form-item label="会员价区间" prop="memberSection">
        {{ formData.memberSection || '--' }}
      </el-form-item>
      <el-form-item label="供货价区间" prop="manufacturerBasePriceInterval">
        {{ formData.manufacturerBasePriceInterval || '--' }}
      </el-form-item>
      <el-form-item label="原价区间" prop="sectionOriginalPrice">
        {{ formData.sectionOriginalPrice || '--' }}
      </el-form-item>
      <el-form-item label="售价区间" prop="sectionPrice">
        {{ formData.sectionPrice || '--' }}
      </el-form-item>
      <el-form-item label="原价" prop="originalPrice">
        {{ typeof formData.originalPrice === 'number' ? formData.originalPrice : '--' }}
      </el-form-item>
      <!-- <el-form-item label="规格名和值数据" prop="names">
        {{ formData.names || '--' }}
        </el-form-item> -->
      <el-form-item label="售价" prop="price">
        {{ typeof formData.price === 'number' ? formData.price : '--' }}
      </el-form-item>
      <el-form-item label="简介" prop="productBrief">
        {{ formData.productBrief || '--' }}
      </el-form-item>
      <el-form-item label="商品型号" prop="productMarque">
        {{ formData.productMarque || '--' }}
      </el-form-item>
      <el-form-item label="商品名称" prop="productName">
        {{ formData.productName || '--' }}
      </el-form-item>
      <el-form-item label="商品描述" prop="productText">
        {{ formData.productText || '--' }}
      </el-form-item>
      <el-form-item label="驳回原因" prop="reject">
        {{ formData.reject || '--' }}
      </el-form-item>
      <el-form-item label="售价区间" prop="section">
        {{ formData.section || '--' }}
      </el-form-item>
      <el-form-item label="商品状态" prop="shelveState">
        <span v-if="formData.shelveState === 0">已下架</span>
        <span v-else-if="formData.shelveState === 1">已上架</span>
        <span v-else-if="formData.shelveState === 2">待审核</span>
        <span v-else-if="formData.shelveState === 3">审核失败</span>
        <span v-else>--</span>
      </el-form-item>
      <el-form-item label="关联商品分组ID" prop="shopGroupId">
        {{ formData.shopGroupId || '--' }}
      </el-form-item>
      <el-form-item label="关联店铺ID" prop="shopId">
        {{ formData.shopId || '--' }}
      </el-form-item>
      <!-- <el-form-item label="规格数据" prop="skus">
        {{ formData.skus || '--' }}
        </el-form-item> -->
      <el-form-item label="商品排序ID" prop="sortId">
        {{ formData.sortId || '--' }}
      </el-form-item>
      <el-form-item label="库存" prop="stockNumber">
        {{ typeof formData.stockNumber === 'number' ? formData.stockNumber : '--' }}
      </el-form-item>
      <el-form-item label="关联供应商ID" prop="supplierId">
        {{ formData.supplierId || '--' }}
      </el-form-item>
      <el-form-item label="供应商名称" prop="supplierName">
        {{ formData.supplierName || '--' }}
      </el-form-item>
      <el-form-item label="销量" prop="volume">
        {{ typeof formData.volume === 'number' ? formData.volume : '--' }}
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>

export default {
  name: 'DetailModal',
  data() {
    return {
      modalOptions: {
        closeOnClickModal: false,
        width: '800px',
        title: '查看选品详情'
      },
      visible: false,
      formData: {
        productId: '',
        shopId: '',
        productName: '',
        productBrief: '',
        shopGroupId: '',
        sectionPrice: '',
        sectionOriginalPrice: '',
        classifyId: '',
        supplierId: '',
        supplierName: '',
        ifLogistics: '',
        distribution: '',
        sortId: '',
        shelveState: '',
        ifOversold: '',
        ifHuabei: '',
        productText: '',
        images: '',
        skus: '',
        productImage: '',
        skuImage: '',
        section: '',
        memberSection: '',
        price: '',
        originalPrice: '',
        stockNumber: '',
        volume: '',
        createTime: '',
        names: '',
        ifCredit: '',
        creditLimit: '',
        maxPrice: '',
        reject: '',
        brandId: '',
        productMarque: '',
        ifSelection: '',
        shopParentId: '',
        goodParentId: '',
        originalPriceInterval: '',
        manufacturerBasePriceInterval: '',
        manufacturerGuidePriceInterval: ''
      }
    }
  },
  methods: {
    handleClose() {
      this.visible = false
    },
    handleOpen(params = {}) {
      this.formData = Object.assign(this.$options.data().formData, params)
      if (params.id) {
        this.getInfo(params.id)
      }
      this.visible = true
    },
    async getInfo(id) {
      // const loading = this.$loading({ text: '加载中' })
      // try {
      //   const res = await xxx({ id })
      //   this.formData = Object.assign(this.$options.data().formData, res.data, {
      //     id: res.data.id || '',
      //   })
      // } finally {
      //   loading.close()
      // }
    }
  }
}
</script>
