  <!--
  @description: 新增商品查看
  @Modifier: 杨胜国
  @routerPath:
  @date: 2020-2-25 13:20:35
-->
<template>
  <el-dialog
    v-dialogDrag
    :visible.sync="dialog"
    title="详情"
    width="950px"
    custom-class="el-dialog__body-p0 shop_mall_dialog"
  >
    <div class="p8">
      <el-form
        ref="form"
        :model="formData"
        :inline-message="true"
      >
        <table class="from_table">
          <tr>
            <td>
              <!-- 类型 -->
              商品编码
            </td>
            <td>
              {{ formData.productCode }}
            </td>
            <td>
              <!-- 供应商名称 -->
              商品名称
            </td>
            <td>
              {{ formData.productName }}
            </td>
          </tr>
          <tr>
            <td>
              品牌
            </td>
            <td>
              {{ formData.brandName }}
            </td>
            <td>
              <!-- 备注 -->
              商品分类
            </td>
            <td>
              {{ formData.productClassification }}
            </td>
          </tr>
          <tr>
            <td>
              商品单位
            </td>
            <td>
              {{ formData.unit }}
            </td>
            <td>
              协议供货
            </td>
            <td>
              电商直采
            </td>
          </tr>
          <tr>
            <td>
              生产地
            </td>
            <td>
              {{ formData.productArea || '无' }}
            </td>
            <td>
              型号
            </td>
            <td>
              {{ formData.model || '无' }}
            </td>
          </tr>
          <tr>
            <td>
              协议供货中间商
            </td>
            <td>
              {{ formData.protocolMiddleAgency || '无' }}
            </td>
            <td>
              库存量
            </td>
            <td>
              {{ formData.inventoryQuantity }}
            </td>
          </tr>
          <tr>
            <td>
              市场价(元)
            </td>
            <td>
              {{ formData.marketPrice }}
            </td>
            <td>
              价格(元)
            </td>
            <td>
              {{ formData.commodityPrice }}
            </td>
          </tr>
          <!-- <tr>
            <td>
              佣金比例(%)
            </td>
            <td>
              {{ formData.commissionRate }}
            </td>
            <td>
              服务费金额（元）
            </td>
            <td>
              {{ formData.serviceAmount }}
            </td>
          </tr> -->
          <tr>
            <td>
              商品类型
            </td>
            <td>
              {{ filterDictText(typeList, formData.productType) }}
            </td>
            <td>
              有无折扣范围
            </td>
            <td>
              {{ filterDictText(discountRangeList, formData.discountRange) }}
            </td>
          </tr>
          <tr>
            <td>
              审核结果
            </td>
            <td>
              {{ formData.auditStatus === '00' ? '待审核' : formData.auditStatus === '01' ? '审核通过' : '驳回' }}
            </td>
            <td>
              审核意见
            </td>
            <td>
              {{ formData.auditOpinion || '无' }}
            </td>
          </tr>
          <tr v-if="formData.discountRange==='00'" class="smwidth">
            <td>
              折扣范围
            </td>
            <td colspan="3">
              <div v-for="(item, ind) in formData.protocolDiscount" :key="ind" style="margin:5px 0;">
                <span>折扣单位：</span>
                {{ item.discountUnit }}
                <span>折扣范围：</span>
                {{ item.discountStartRange }}--
                {{ item.discountEndRange }}
                <span>折扣率：</span>
                {{ item.discountRate }}
              </div>
            </td>
          </tr>
          <tr>
            <td>
              商品详情
            </td>
            <td colspan="3" class="description" v-html="formData.productDescription">
              <!-- {{ formData.productDescription }} -->
            </td>
          </tr>
          <tr>
            <td>
              主图
            </td>
            <td colspan="3">
              <downloadFile :data="mainFileType" />
            </td>
          </tr>
          <tr>
            <td>
              缩略图
            </td>
            <td colspan="3">
              <downloadFile :data="thumbnailFileType" />
            </td>
          </tr>
        </table>
      </el-form>
    </div>
    <!--底部操作按钮-->
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialog = false">关 闭</el-button>
    </span>
  </el-dialog>
</template>

<script>
/* 接口*/
import { getProductDetails } from '@/api/shoppingmall/products'
/* 常用方法 */
import { filterDictText } from '@/assets/js/utils'// 常用方法
// 组件
import downloadFile from '@comp/common/updownload/downloadFile'
/* 混合开发方法-参数字段*/
export default {
  name: 'CommodityManageDialog',
  components: {
    downloadFile
  },
  data() {
    return {
      dialog: false, // 弹框状态
      typeList: [ // 暂时自定义
        { typename: '标准化商品', typecode: '00' },
        { typename: '非标准化商品', typecode: '01' }
      ],
      discountRangeList: [ // 暂时自定义 有无折扣范围
        { typename: '有折扣范围', typecode: '00' },
        { typename: '无折扣范围', typecode: '01' }
      ],
      formData: {},
      // 主图
      mainFileType: {
        bizId: '', // 业务主键Id
        fileType: 'ds_product_main_picture' // 文件类型
      },
      // 缩略图
      thumbnailFileType: {
        bizId: '', // 业务主键Id
        fileType: 'ds_product_auxiliary_picture' // 文件类型
      }
    }
  },
  computed: {
  },
  created() {
  },
  methods: {
    filterDictText,
    // 打开弹框-主键id
    openDialog(id) {
      this.dialog = true
      this.initData(id)
      // 项目采购邀请函
      this.mainFileType.bizId = id
      // 项目采购文件
      this.thumbnailFileType.bizId = id
    },
    // 查询数据
    initData(id) {
      const data = {
        id: id
      }
      getProductDetails(data.id).then(res => {
        this.formData = res.data
      })
    }
  }
}
</script>

<style scoped lang="less">
/deep/ .description{
  img{
    width: 200px;
    height: 200px;
  }
}
</style>
