<template>
  <el-dialog :close-on-click-modal="false" title="详情" width="74%" :visible.sync="visible">
    <div>
      <el-card class="box-card">
        <span class="addTitle">商品详情</span>
        <el-button type="success" class="btnList" @click="back">关闭</el-button>
        <el-button
          v-if="productItem.shelveState === 2" type="primary" class="btnList"
          @click="examineShow(productData)"
        >
          审核
        </el-button>
      </el-card>
      <el-card class="box-card">
        <label>商品详情</label>
        <div class="GoodBox">
          <el-row class="detail-box">
            <el-col :span="12">
              <div>商品名称：{{ productItem.productName }}</div>
              <div>商品卖点：{{ productItem.productBrief }}</div>
              <div>
                商品图片：
                <div>
                  <img
                    v-for="(item, index) in productItem.images" :key="index" class="proImage" :src="item.imgPath"
                    alt="" @click="handlePictureCardPreview(item)"
                  >
                </div>
              </div>
              <div>商品款式：</div>
            </el-col>
            <el-col :span="12">
              <div>官方分类：{{ productItem.classifyName }}</div>
              <div>商家分组：{{ productItem.shopGroupName }}</div>
              <div>商家名称：{{ productItem.shopName }}</div>
              <div>
                商品状态：
                <span v-if="productItem.shelveState == 0">已下架 </span>
                <span v-if="productItem.shelveState == 1">已上架</span>
                <span v-if="productItem.shelveState == 2">待审核</span>
                <span v-if="productItem.shelveState == 3">审核失败</span>
              </div>
            </el-col>
          </el-row>
          <el-row class="detail-box">
            <el-col :span="24">
              <el-table
                :data="productItem.skuList" style="width: 100%"
                :header-cell-style="{ background: '#EEF3FF', color: '#333333' }"
              >
                <el-table-column v-for="(skuAttr, index) in skuAttrName" :key="index" :label="skuAttr.skuName">
                  <template slot-scope="scope">
                    {{
                      scope.row.skuAttrCodeDTOList &&
                        scope.row.skuAttrCodeDTOList[index]
                        | attrValueFilter(productItem.skuAttrList)
                    }}
                  </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>
        </div>
      </el-card>

      <el-card class="box-card">
        <label>商品简介</label>
        <!-- <Tinymce
        ref="content"
        v-model="productItem.productText"
        class="tinymce-wrap"
        :height="180"
      /> -->
        <br>
        <br>
        <div v-html="productItem.productText" />
      </el-card>

      <el-dialog :visible.sync="dialogVisible" append-to-body class="check-image-dialog" title="查看图片" center="center">
        <div class="img">
          <img width="80%" height="80%" :src="dialogImageUrl" alt>
        </div>
      </el-dialog>
    </div>
  </el-dialog>
</template>

<script>
// import Tinymce from '@/components/Tinymce';
import { getProductById } from '@/api/commodity'
// import { uploadUrl } from '@/utils/request';
// import StyleInformation from './addComponent';
export default {
  name: 'AddCommodity',
  components: {
    // Tinymce,
    // StyleInformation,
  },
  filters: {
    attrValueFilter(map, list) {
      const hasChilds =
        list &&
        list.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
    }
  },
  props: {
    examineShow: {
      type: Function,
      default: null
    }
  },
  data() {
    return {
      visible: false,
      dialogVisible: false,
      dialogImageUrl: '',
      productItem: {},
      productData: {
        productId: 0,
        isDetail: true
      }
    }
  },
  computed: {
    skuAttrName() {
      return (
        this.productItem.skuAttrList &&
        this.productItem.skuAttrList.filter((skuAttr) => {
          const hasChilds = skuAttr.values.some((attr) => attr.skuValue)
          return skuAttr.skuName && hasChilds
        })
      )
    }
  },
  methods: {
    show(id) {
      this.visible = true
      this.productData.productId = id
      this.details()
    },
    handlePictureCardPreview(item) {
      this.dialogImageUrl = item.imgPath
      this.dialogVisible = true
    },

    // 返回
    back() {
      this.visible = false
    },
    // 获取详情
    async details() {
      const res = await getProductById({ productId: this.productData.productId })
      console.log(res)
      this.productItem = res.data
      this.productItem.skuAttrList = res.data.names
      this.productItem.skuAttrList.forEach((item) => {
        var data = {}
        var arr = Object.keys(data)
        if (arr.length === 0) {
          item.needImg = false
        }
      })
      console.log(this.productItem.skuAttrList, 'skuAttrList')
      this.productItem.skuList = this.productItem.skus
    }
  }
}
</script>

<style scoped lang='scss'>
@import url("../../../styles/elDialog.scss");

.box-card {
	margin: 20px;
}

.btnList {
	float: right;
	padding: 3px 0;
	width: 100px;
	height: 48px;
	border-radius: 4px;
	margin-right: 30px;
}

.addTitle {
	font-size: 24px;
	color: #333333;
	line-height: 50px;
}

.GoodBox {
	padding: 40px;

	.detail-box {
		div {
			line-height: 60px;

			.proImage {
				margin-right: 20px;
				width: 80px;
				height: 80px;
			}
		}
	}
}

.tinymce-wrap {
	margin-top: 10px;
}

.check-image-dialog {
	margin-top: -100px;
	text-align: center;

	.img {
		text-align: center;
	}
}
</style>
