<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"
    >
      <!-- 商品信息 -->
      <div style="display: flex;padding-bottom: 14px;font-size: 16px;font-weight: bold;">
        <div
          style="width: 4px;height: 14px;margin-left: 6px;margin-right: 6px;background-color: #0519D4;border-radius: 2px;"
        >
        </div>
        <div>商品详情</div>
      </div>
      <el-form-item label="商品名称" prop="productName">
        {{ formData.productName || '--' }}
      </el-form-item>
      <el-form-item label="商品卖点" prop="productBrief">
        {{ formData.productBrief || '--' }}
      </el-form-item>
      <el-form-item label="商品图片" prop="images">
        <!-- 4机构证明材料，营业执照 -->
        <div v-if="formData.images && formData.images.length">
          <el-image
            v-for="(item, index) in formData.images.map(i => i.imgPath)" :key="index" :src="item"
            style="width:80px;height:80px;margin-right: 10px;" fit="cover"
            :preview-src-list="formData.images.map(i => i.imgPath)"
          />
        </div>
        <span v-else>--</span>
      </el-form-item>
      <el-form-item label="官方分类" prop="classifyName">
        {{ formData.classifyName || '--' }}
      </el-form-item>
      <el-form-item label="商家分组" prop="shopGroupName">
        {{ formData.shopGroupName || '--' }}
      </el-form-item>
      <el-form-item label="商家名称" prop="shopName">
        {{ formData.shopName || '--' }}
      </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>

      <div style="display: flex;padding-bottom: 14px;font-size: 16px;font-weight: bold;">
        <div
          style="width: 4px;height: 14px;margin-left: 6px;margin-right: 6px;background-color: #0519D4;border-radius: 2px;"
        >
        </div>
        <div>商品款式</div>
      </div>
      <el-row class="detail-box">
        <el-col :span="24">
          <el-table
            :data="formData.skus" style="width: 100%"
            :header-cell-style="{ background: '#EEF3FF', color: '#333333' }"
          >
            <el-table-column v-for="(skuAttr, index) in formData.names.filter(i => i.skuName && i.values.some((attr) => attr.skuValue))" :key="index" :label="skuAttr.skuName">
              <template slot-scope="scope">
                <div v-if="scope.row.skuAttrCodeDTOList && scope.row.skuAttrCodeDTOList[index]">
                  {{ handleAttrValue(scope.row.skuAttrCodeDTOList && scope.row.skuAttrCodeDTOList[index]) }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="售价">
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.price" maxlength="9" disabled
                  oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"
                />
              </template>
            </el-table-column>
            <el-table-column label="原价">
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.originalPrice" maxlength="9" disabled
                  oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"
                />
              </template>
            </el-table-column>
            <el-table-column label="库存">
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.stockNumber" maxlength="9" disabled
                  oninput="value=value.replace(/[^\d]/g,'')"
                />
              </template>
            </el-table-column>
            <el-table-column label="重量(KG)">
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.weight" maxlength="9" disabled
                  oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"
                />
              </template>
            </el-table-column>
            <el-table-column label="SKU">
              <template slot-scope="scope">
                <el-input v-model="scope.row.sku" maxlength="20" disabled />
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>

      <el-card>
        <div style="display: flex;padding-bottom: 14px;font-size: 16px;font-weight: bold;">
          <div
            style="width: 4px;height: 14px;margin-left: 6px;margin-right: 6px;background-color: #0519D4;border-radius: 2px;"
          >
          </div>
          <div>商品简介</div>
        </div>
        <div v-html="formData.productText" />
      </el-card>
    </el-form>
  </el-dialog>
</template>

<script>
import { getProductById } from '@/api/commodity'

export default {
  name: 'DetailModal',
  data() {
    return {
      modalOptions: {
        closeOnClickModal: false,
        width: '800px',
        title: '商品详情'
      },
      visible: false,
      formData: {
        productId: '',
        productName: '',
        productBrief: '',
        images: '',
        classifyName: '',
        shopGroupName: '',
        shopName: '',
        shelveState: '',
        productText: '',
        skus: [],
        names: []
      }
    }
  },
  methods: {
    handleClose() {
      this.visible = false
    },
    handleOpen(params = {}) {
      this.formData = Object.assign(this.$options.data().formData, params)
      if (params.productId) {
        this.getInfo(params.productId)
      }
      this.visible = true
    },
    async getInfo(id) {
      const loading = this.$loading({ text: '加载中' })
      try {
        const res = await getProductById({ productId: id })
        this.formData = Object.assign(this.$options.data().formData, res.data, {
          productId: res.data.productId || '',
          productName: res.data.productName || '',
          productBrief: res.data.productBrief || '',
          images: res.data.images || [],
          classifyName: res.data.classifyName || '',
          shopGroupName: res.data.shopGroupName || '',
          shopName: res.data.shopName || '',
          productText: res.data.productText || '',
          shelveState: res.data.shelveState,
          skus: res.data.skus || [],
          names: res.data.names || []
        })
      } finally {
        loading.close()
      }
    },
    handleAttrValue(map) {
      const hasChilds =
        this.formData.names &&
        this.formData.names.filter((skuAttr) => {
          const hasChild = skuAttr.values.some((attr) => attr.skuValue)
          return skuAttr.skuName && hasChild
        })
      if (!map) {
        return ''
      }
      const { code, valueCode } = map
      let codeStr = ''
      hasChilds.map((item) => {
        const { values } = item
        values &&
          values.some((attr) => {
            const isSome = item.code === code && attr.valueCode === valueCode
            if (isSome) {
              codeStr = attr.skuValue
            }
            return isSome
          })
      })
      return codeStr
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep img {
	width: 100px;
	height: 100px;
}
</style>

