<template>

  <div class="execution">
    <basic-container v-loading="loading">

      <div class="zm_info_header">
        <span>商品详情</span>
      </div>

      <div class="zm_info_body">

        <div class="layout_h">
          <div class="zm_info_row">
            <div class="zm_label">创建时间</div>
            <div>{{info ? info.createTime : ''}}</div>
          </div>
          <div class="zm_info_row">
            <div class="zm_label">商品ID</div>
            <div>{{info ? info.goodsId : ''}}</div>
          </div>
        </div>

        <div class="layout_h" style="margin-top: 16px;">
          <div class="zm_info_row">
            <div class="zm_label">商品名称</div>
            <div>{{info ? info.goodsName : ''}}</div>
          </div>
          <div class="zm_info_row">
            <div class="zm_label">商品分类</div>
            <div>{{info ? info.classifyName : ''}}</div>
          </div>
        </div>

        <div class="layout_h" style="margin-top: 16px;">
          <div class="zm_info_row">
            <div class="zm_label" style="align-self: flex-start;">商品规格</div>
            <el-table style="align-self: flex-start;" :data="form.skus" size="mini">
                <el-table-column v-for="(spec, index) in specs" :key="index" :label="spec.specName" min-width="120">
                    <template slot-scope="scope">
                      <span>{{titleValue(spec, scope.row)}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="价格" min-width="160">
                  <template slot-scope="scope">
                    <span>{{scope.row.merchantPrice}}</span>
                  </template>
                </el-table-column>
                <el-table-column label="商品图片" min-width="160">
                  <template slot-scope="scope">
                    <div class="demo-image__preview">
                      <el-image style="width: 36px; height: 36px" fit="cover" :src="scope.row.goodsImage"
                        :preview-src-list="[scope.row.goodsImage]" />
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="商品库存" min-width="160">
                  <template slot-scope="scope">
                    <span>{{scope.row.stock}}</span>
                  </template>
                </el-table-column>
            </el-table>
          </div>
        </div>

        <div class="layout_h" style="margin-top: 16px;" v-if="listImage.length > 0">
          <div class="zm_info_row" >
            <div class="zm_label">商品列表图</div>
            <el-image v-for="(src, index) in listImage" :key="index" style="width: 72px; height: 108px" fit="cover" :src="src" :preview-src-list="listImage" />
          </div>
        </div>

        <div class="layout_h" style="margin-top: 16px;" v-if="detailImage.length > 0">
          <div class="zm_info_row" >
            <div class="zm_label">商品详情图</div>
            <el-image v-for="(src, index) in detailImage" :key="index" style="width: 72px; height: 108px" fit="cover" :src="src" :preview-src-list="detailImage" />
          </div>
        </div>

        <div class="layout_h" style="margin-top: 16px;" v-if="goodsVideo">
          <div class="zm_info_row" >
            <video :src="goodsVideo" width="320" height="240" prop="video" controls="controls">
            </video>
          </div>
        </div>

        <div class="layout_h" style="margin-top: 16px;" v-if="authVideo">
          <div class="zm_info_row" >
            <video :src="authVideo" width="320" height="240" prop="video" controls="controls">
            </video>
          </div>
        </div>

        <div class="layout_h" style="margin-top: 16px;">
          <div class="zm_info_row">
            <div class="zm_label">累计剩余库存</div>
            <div>{{info ? info.stock : ''}}</div>
          </div>
          <div class="zm_info_row">
            <div class="zm_label">状态</div>
            <div>{{info ? info.stateName : ''}}</div>
          </div>
        </div>

        <div class="layout_h" style="margin-top: 16px;">
          <div class="zm_info_row">
            <div class="zm_label">审核状态</div>
            <div>{{info ? info.auditStateName : ''}}</div>
          </div>
        </div>

        <div class="layout_h" style="margin-top: 16px;">
          <div class="zm_info_row">
            <div class="zm_label">商品详情</div>
            <div style="width: 480px;" v-html="info ? info.goodsDetails : ''"></div>
          </div>
        </div>

      </div>

      <div class="zm_info_header" v-if="info && info.auditTime">
        <span>审核信息</span>
      </div>

      <div class="zm_info_body" v-if="info && info.auditTime">
        <div class="zm_info_row" style="width: auto;">
          <div class="zm_label">审核时间</div>
          <div>{{info ? info.auditTime : ''}}</div>
        </div>
        <div class="zm_info_row" style="width: auto;margin-top: 16px;">
          <div class="zm_label">审核结果</div>
          <div>{{info ? info.auditStateName : ''}}</div>
        </div>
        <div class="zm_info_row" style="width: auto;margin-top: 16px;">
          <div class="zm_label">审核备注</div>
          <div>{{info ? info.auditRemark : ''}}</div>
        </div>
      </div>

      <div class="layout_v">
        <el-button class="self_center" @click="handleClose">返回</el-button>
      </div>

    </basic-container>

  </div>

</template>

<script>
  import {getGoodsDetails, getGoodsInfo} from '@/api/mall/merchantMallgoods'
  import {ZmMixin} from '@/mixins/ZmMixin.js'
  export default {
    mixins: [ZmMixin],
    data() {
      return {
        loading: false,
        //选择的规格
        specs: [],
        info: {},
        form: {}
      }
    },
    mounted() {
      this.loadInfo()
    },
    computed: {
      id() {
        return this.$route.query.id
      },
      //对应表头的值
      titleValue() {
        return (spec, row) => {
          for (let s of row.specs) {
            if (s.specId == spec.specId) {
              return s.name
            }
          }
          return "未知"
        }
      },
      listImage() {
        if(this.form && this.form.listImage) {
          return this.form.listImage.split(',')
        }
        return []
      },
      detailImage() {
        if(this.form && this.form.detailImage) {
          return this.form.detailImage.split(',')
        }
        return []
      },
      goodsVideo() {
        if(this.form && this.form.videoUrl) {
          return this.form.videoUrl
        }
        return ''
      },
      authVideo() {
        if(this.form && this.form.authUrl) {
          return this.form.authUrl
        }
        return ''
      }
    },
    methods: {
      //回填数据
      refill(data) {
        let skus = data.skus
        if(skus && skus.length > 0) {
          let specs = skus[0].specs.map(r => {
            return {
              specId: r.specId,
              specName: r.specName
            }
          })
          this.specs = specs
        }
        this.form = {
          ...data
        }
      },
      loadInfo() {
        this.loading = true
        getGoodsDetails({
          id: this.id
        }).then(r => {
          this.loading = false
          this.refill(this.zmRes(r))
          return getGoodsInfo({id: this.id})
        }).then(r => {
          this.info = this.zmRes(r)
        }).catch(r => {
          console.log(r)
          this.loading = false
          this.error('加载信息失败')
        })

      },
      handleClose() {
        this.$router.go(-1)
      }
    }
  }
</script>

<style scoped>
  .zm_info_header {
    padding: 10px 16px;
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #606266;
    font-weight: 700;
    background: #dedede;
  }

  .zm_info_body {
    display: flex;
    flex-direction: column;
    padding: 16px;
  }

  .zm_info_row {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 0;
    flex-grow: 1;
  }

  .zm_label {
    width: 120px;
  }


</style>
