<template>
  <div class="app-container">
    <el-button @click="cancel">返回</el-button>
    <h3>基本信息</h3>
    <el-form :model="form" ref="form" label-width="160px" disabled>
      <el-form-item label="平台商品分类" prop="merchantCategoryName">
        <el-input v-model="form.merchantCategoryName" placeholder=""></el-input>
      </el-form-item>
      <el-form-item label="商家商品分组" prop="productCategoryList">
        <template v-if="form.productCategoryList">
          <el-tag v-for="(v, i) in form.productCategoryList" :key="i" style="margin: 0 10px 5px 0">
            {{ v.categoryName }}
          </el-tag>
        </template>
      </el-form-item>
      <el-form-item label="供应商" prop="supplierName">
        <el-input v-model="form.supplierName" placeholder=""></el-input>
      </el-form-item>
      <el-form-item label="商品名称" prop="title">
        <el-input v-model="form.title" placeholder="" />
      </el-form-item>
      <el-form-item label="商品短标题" prop="shortTitle">
        <el-input v-model="form.shortTitle" placeholder="" />
      </el-form-item>
      <el-form-item label="商品封面图片" prop="coverImage">
        <imageUpload v-model="form.coverImage" disabled unique="coverImage" :limit="1" />
      </el-form-item>
      <el-form-item label="商品多图片" prop="images">
        <imageUpload v-model="form.images" disabled unique="images" :limit="5" />
      </el-form-item>
      <el-form-item label="商品视频" prop="videoUrl">
        <video width="300px" :src="form.videoUrl" controls></video>
      </el-form-item>
      <el-form-item class="w100" label="商品内容" prop="content">
        <editor v-model="form.content" readOnly :min-height="192" />
      </el-form-item>
      <el-form-item label="排序" prop="orderIndex">
        <el-input v-model="form.orderIndex" placeholder=""></el-input>
      </el-form-item>
      <!-- <el-form-item label="最大市价" prop="maxMarketPrice">
        <el-input v-model="form.maxMarketPrice" placeholder=""></el-input>
      </el-form-item>
      <el-form-item label="最小市价" prop="minMarketPrice">
        <el-input v-model="form.minMarketPrice" placeholder=""></el-input>
      </el-form-item>
      <el-form-item label="最大售价" prop="maxSalePrice">
        <el-input v-model="form.maxSalePrice" placeholder=""></el-input>
      </el-form-item>
      <el-form-item label="最小售价" prop="minSalePrice">
        <el-input v-model="form.minSalePrice" placeholder=""></el-input>
      </el-form-item> -->
      <!-- <el-form-item label="最大兑换积分数" prop="maxPoints">
        <el-input v-model="form.maxPoints" placeholder=""></el-input>
      </el-form-item>
      <el-form-item label="最小兑换积分数" prop="minPoints">
        <el-input v-model="form.minPoints" placeholder=""></el-input>
      </el-form-item> -->
      <el-form-item label="每人限购数" prop="purchaseLimit">
        <el-input v-model="form.purchaseLimit" placeholder=""></el-input>
        <span style="color: #666666; margin-left: 10px">0代表不限购</span>
      </el-form-item>
      <el-form-item label="初始销量" prop="initialSales">
        <el-input v-model="form.initialSales" placeholder=""></el-input>
      </el-form-item>
      <el-form-item label="单位" prop="unit">
        <el-input v-model="form.unit" placeholder=""></el-input>
      </el-form-item>
      <!-- <el-form-item label="支付方式" prop="productPaymentMode">
        <el-select v-model="form.productPaymentMode" placeholder="" clearable style="width: 100%">
          <el-option v-for="(v, i) in paymentModeList" :key="i" :label="v.label" :value="v.value" />
        </el-select>
      </el-form-item> -->
      <el-form-item label="是否可以赠送积分" prop="canGivePoint">
        <el-select v-model="form.canGivePoint" placeholder="" clearable style="width: 100%">
          <el-option label="是" :value="true" />
          <el-option label="否" :value="false" />
        </el-select>
      </el-form-item>
      <el-form-item label="赠送积分率" prop="givePointRate" v-if="form.canGivePoint">
        <el-input v-model="form.givePointRate">
            <template slot="append">%</template>
        </el-input>
      </el-form-item>

      <el-form-item label="商品类型" prop="productUseType">
        <el-input :value="form.productUseType == 0 ? '商城商品' : form.productUseType == 1 ? '店铺商品' : ''"></el-input>
      </el-form-item>

      <!-- <el-form-item label="是否可以自提" prop="canSelfPickup">
        <el-select v-model="form.canSelfPickup" placeholder="" clearable style="width: 100%">
          <el-option label="是" :value="true" />
          <el-option label="否" :value="false" />
        </el-select>
      </el-form-item> -->
      <el-form-item label="包邮" prop="freeShippingStatus">
        <el-select v-model="form.freeShippingStatus" placeholder="" clearable style="width: 100%">
          <el-option label="是" :value="true" />
          <el-option label="否" :value="false" />
        </el-select>
      </el-form-item>
      <el-form-item v-if="!form.freeShippingStatus" label="物流模板" prop="logisticsTemplateId">
        <el-input v-model="form.freightTemplateName" placeholder=""></el-input>
      </el-form-item>
      <!-- <el-form-item label="查询是否是热销" prop="hot">
        <el-select v-model="form.hot" placeholder="" clearable style="width: 100%">
          <el-option label="是" :value="true" />
          <el-option label="否" :value="false" />
        </el-select>
      </el-form-item> -->
      <!-- <el-form-item label="新品" prop="newStatus">
        <el-select v-model="form.newStatus" placeholder="" clearable style="width: 100%">
          <el-option label="是" :value="true" />
          <el-option label="否" :value="false" />
        </el-select>
      </el-form-item>
      <el-form-item label="推荐置顶" prop="recommendStatus">
        <el-select v-model="form.recommendStatus" placeholder="" clearable style="width: 100%">
          <el-option label="是" :value="true" />
          <el-option label="否" :value="false" />
        </el-select>
      </el-form-item> -->
      <!-- <el-form-item label="显示价格" prop="showPrice">
        <el-select v-model="form.showPrice" placeholder="" clearable style="width: 100%">
          <el-option label="是" :value="true" />
          <el-option label="否" :value="false" />
        </el-select>
      </el-form-item> -->
      <el-form-item label="是否单规格" prop="singleSku">
        <el-select v-model="form.singleSku" placeholder="" clearable style="width: 100%">
          <el-option label="是" :value="true" />
          <el-option label="否" :value="false" />
        </el-select>
      </el-form-item>
      <h3>拓展信息</h3>
      <div v-if="form.singleSku">
        <el-form-item label="图片" prop="cover">
          <imageUpload v-model="form.productSkuSetList[0].cover" unique="cover" :limit="1" />
        </el-form-item>
        <el-form-item label="商品编码" prop="code">
          <el-input v-model="form.productSkuSetList[0].code" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="成本价价格" prop="costPrice">
          <el-input v-model="form.productSkuSetList[0].costPrice" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="市场价格" prop="marketPrice">
          <el-input v-model="form.productSkuSetList[0].marketPrice" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="销售价格" prop="salePrice">
          <el-input v-model="form.productSkuSetList[0].salePrice" placeholder=""></el-input>
        </el-form-item>
        <!-- <el-form-item label="兑换积分" prop="exchangePoint">
          <el-input v-model="form.productSkuSetList[0].exchangePoint" placeholder=""></el-input>
        </el-form-item> -->
        <el-form-item label="重量(KG)" prop="weight">
          <el-input v-model="form.productSkuSetList[0].weight" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="体积(M3)" prop="volume">
          <el-input v-model="form.productSkuSetList[0].volume" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="库存" prop="stock">
          <el-input v-model="form.productSkuSetList[0].stock" placeholder=""></el-input>
        </el-form-item>
      </div>
      <div v-else>
        <el-form-item class="w100" label="规格项" v-if="form.skuTable && form.skuTable.length">
          <el-card shadow="hover" v-for="(v, i) in form.skuTable" :key="v.id" class="box-card">
            <div class="flex-between">
              <div>
                <span>规格:</span>
                <el-tag class="m-10">{{ v.head.name }}</el-tag>
              </div>
            </div>
            <div>
              <span class="m-10" style="display:inline-block;" v-for="(k, j) in v.values" :key="j">{{ k.name }}</span>
            </div>
          </el-card>
        </el-form-item>
        <el-form-item label="规格" class="w100">
          <el-table :data="form.productSkuSetList || []" style="width: 100%" border class="specTable">
            <el-table-column prop="skuSetName" label="规格" align="center">
            </el-table-column>
            <el-table-column prop="cover" label="图片" align="center">
              <template slot-scope="scope">
                <imagePreview v-if="scope.row.cover" :src="scope.row.cover" width="100px" height="100px" />
              </template>
            </el-table-column>
            <el-table-column prop="code" label="商品编码" align="center">
            </el-table-column>
            <el-table-column prop="costPrice" label="成本价" align="center">
            </el-table-column>
            <el-table-column prop="marketPrice" label="市场价格" align="center">
            </el-table-column>
            <el-table-column prop="salePrice" label="销售价格" align="center">
            </el-table-column>
            <!-- <el-table-column prop="exchangePoint" label="兑换积分" align="center">
            </el-table-column> -->
            <el-table-column prop="weight" label="重量(KG)" align="center">
            </el-table-column>
            <el-table-column prop="volume" label="体积(M3)" align="center">
            </el-table-column>
            <el-table-column prop="stock" label="库存" align="center">
            </el-table-column>
          </el-table>
        </el-form-item>
      </div>
    </el-form>
    <el-button style="margin-left:150px;" @click="cancel">返回</el-button>
  </div>
</template>

<script>
import { shopProductInfo } from '@/api/goods';
import { AuditStatusEnum } from '@/utils/statusEnum.js'
export default {
  data() {
    return {
      AuditStatusEnum,
      form: {},
      loading: false,
      paymentModeList: [
        { label: "纯现金", value: 0 },
        { label: "积分兑换", value: 1 },
        { label: "积分抵扣", value: 2 },
      ],
    }
  },
  created() {
    this.getDetails()
  },
  methods: {
    getDetails() {
      this.loading = true
      shopProductInfo(this.$route.query.productId).then(res => {
        this.form = res.data
      }).finally(() => {
        this.loading = false
      })
    },
    cancel() {
      this.$router.go(-1)
    }
  }
}
</script>

<style lang='scss' scoped>
::v-deep .el-form-item__content {
  width: 700px;
}

.w100 {
  ::v-deep .el-form-item__content {
    width: auto;
  }
}

::v-deep .el-input.is-disabled .el-input__inner,
::v-deep .el-range-editor.is-disabled,
::v-deep .el-range-editor.is-disabled input,
::v-deep .el-textarea.is-disabled .el-textarea__inner {
  background-color: #fff;
  color: rgb(96, 98, 102);
}

.m-10 {
  margin: 0 10px 5px 10px;
}

.box-card {
  margin-bottom: 10px;

  &:last-child {
    margin-bottom: 0;
  }
}

h3 {
  margin-left: 60px;
  font-weight: 700;
}
</style>