<template>

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

      <el-form :inline="true"  class="demo-form-inline">
        <!-- 商品详情 -->
        <div class="zm_info_header">
          <span>商品详情</span>
        </div>
        <el-row>
          <el-col :span="12"><div class="grid-content bg-purple">
            <el-form-item label="创建时间">
              <span>{{info.createTime || ''}}</span>
            </el-form-item>
          </div></el-col>
          <el-col :span="12"><div class="grid-content bg-purple-light">
            <el-form-item label="商品ID">
              <span>{{info.goodsId || ''}}</span>
            </el-form-item>
          </div></el-col>
        </el-row>

        <el-row>
          <el-col :span="12"><div class="grid-content bg-purple">
            <el-form-item label="商品名称">
              <span>{{info.goodsName || ''}}</span>
            </el-form-item>
          </div></el-col>
          <el-col :span="12"><div class="grid-content bg-purple-light">
            <el-form-item label="商品分类">
              <span>{{info.classifyName || ''}}</span>
            </el-form-item>
          </div></el-col>
        </el-row>

        <el-row>
          <el-col :span="24"><div class="grid-content bg-purple">
            <el-form-item label="商品规格">
                <div style="margin-top: 50px;padding:0px;margin-left:70px;border: 1px solid silver ">
                  <el-row :gutter="15">
                    <el-col :span="24">
                      <el-table class="tableClass" :data="formData.result" >
                        <el-table-column
                          v-for="key in formData.listkey"
                          :key="key"
                          :prop="key"
                          :label="key"></el-table-column>
                      </el-table>
                    </el-col>
                  </el-row>
                </div>
            </el-form-item>
          </div>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24"><div class="grid-content bg-purple">
            <el-form-item label="商品列表图"  label-width="100px" style="float: left">
              <el-image v-for="(item, index) in goodsImageList" class="image_item" :key="index" :src="item"
                        :preview-src-list="goodsImageList" fit="cover">
              </el-image>
            </el-form-item>
          </div></el-col>
        </el-row>

        <el-row>
          <el-col :span="24"><div class="grid-content bg-purple">
            <el-form-item label="商品详情图"  label-width="100px">
              <el-image v-for="(item, index) in goodsImageDetail" class="image_item" :key="index" :src="item"
                        :preview-src-list="goodsImageDetail" fit="cover">
              </el-image>
            </el-form-item>
          </div></el-col>
        </el-row>

        <el-row>
          <el-col :span="24"><div class="grid-content bg-purple">
            <el-form-item label="商品视频" label-width="100px">
              <video :src="goodsVideo" width="320" height="240" prop="video" controls="controls">
              </video>
            </el-form-item>
          </div></el-col>
        </el-row>

        <el-row>
          <el-col :span="24"><div class="grid-content bg-purple">
            <el-form-item label="商品认证视频" label-width="100px">
              <video :src="certificationVideoUrl" width="320" height="240" prop="video" controls="controls">
              </video>
            </el-form-item>
          </div></el-col>
        </el-row>

        <el-row>
          <el-col :span="12"><div class="grid-content bg-purple">
            <el-form-item label="累计剩余库存">
              <span>{{info.stock || ''}}</span>
            </el-form-item>
          </div></el-col>
          <el-col :span="12"><div class="grid-content bg-purple-light">
            <el-form-item label="状态">
              <span>{{info.stateName || ''}}</span>
            </el-form-item>
          </div></el-col>
        </el-row>

        <el-row>
          <el-col :span="24"><div class="grid-content bg-purple">
            <el-form-item label="审核状态" label-width="100px">
              <span>{{info.auditStateName || ''}}</span>
            </el-form-item>
          </div></el-col>
        </el-row>

        <el-row>
          <el-col :span="24"><div class="grid-content bg-purple">
            <el-form-item label="商品详情" label-width="100px">
                <editor :content="initContent" height="300px" style="margin-top: 30px"/>
            </el-form-item>
          </div></el-col>
        </el-row>

        <!-- 审核信息 -->
        <div class="zm_info_header">
          <span>审核信息</span>
        </div>
        <el-row>
          <el-col :span="24"><div class="grid-content bg-purple">
            <el-form-item label="审核时间 ：" prop="content">
              <span>{{info.auditTime || ''}}</span>
            </el-form-item>
          </div></el-col>
        </el-row>

        <el-row>
          <el-col :span="24"><div class="grid-content bg-purple">
            <el-form-item label="审核结果 ：" prop="content">
              <span>{{info.auditStateName || ''}}</span>
            </el-form-item>
          </div></el-col>
        </el-row>

        <el-row>
          <el-col :span="24"><div class="grid-content bg-purple">
              <el-form-item label="审核备注 ：" prop="content">
                <span>{{info.auditRemark || ''}}</span>
              </el-form-item>
          </div></el-col>
        </el-row>

        <el-row>
          <el-col :span="24"><div class="grid-content bg-purple-dark" style="width: 600px;margin:0px auto">
            <el-button type="primary" size="medium"@click="$router.go(-1)">返回</el-button>
          </div></el-col>
        </el-row>
      </el-form>
    </basic-container>

  </div>

</template>

<script>
  import {getGoodsInfo} from '@/api/mall/merchantMallgoods'
  import {ZmMixin} from '@/mixins/ZmMixin.js'
  export default {
    mixins: [ZmMixin],
    components: {
      'editor': () => import('@/components/ckeditor/index.vue')
    },
    data() {
      return {
        goodsVideo:'',
        certificationVideoUrl:'',
        isLogistics: '',isElectronicContract:'',isVerified: '',  isAPay: '', isUploadVideo: '',
        formData: {
          result: [],
          listkey:[],
        },
        editing: false,
        saving: false,
        loading: false,
        info: {},
        form: {
          goodsDetails:''
        },
        rules: {
        }
      }
    },
    mounted() {
      this.loadInfo()
    },
    computed: {
      initContent() {
        return this.form.goodsDetails? this.form.goodsDetails:'初始化'
      },
      id() {
        return this.$route.query.id
      },
      goodsImageDetail() {
        if (this.info) {
          let urls = []
          let shopImg = this.info.goodsImageDetail
          if (shopImg) {
            urls = shopImg.split(",")
          }
          return urls
        }
        return []
      },
      goodsImageList() {
        if (this.info) {
          let urls = []
          let shopImg = this.info.goodsImageList
          if (shopImg) {
            urls = shopImg.split(",")
          }
          return urls
        }
        return []
      },
    },
    methods: {
      generateTable(r){
        this.formData.listkey=[]
        this.formData.result=[]
        this.formData.result=r
        //提取表头字段====
        for (let i = 0, l = this.formData.result.length; i < l; i++) {
          for (let key in this.formData.result[i]) {
            if (this.formData.listkey.indexOf(key)==-1){
              this.formData.listkey.push(key)
            }else{
            }
          }
        }
      },
      loadInfo() {
        this.loading = true
        getGoodsInfo({
          id: this.id
        }).then(r => {
          this.loading = false
          this.info = this.zmRes(r)
          let table=[]
          for (let i = 0; i <r.data.data.skus.length ; i++) {
            table.push({商家价格:''})
            table.push({图片:''})
            table.push({商品库存:''})
            table[i].商家价格=r.data.data.skus[i].merchantPrice
            table[i].图片=r.data.data.skus[i].goodsImage
            table[i].商品库存=r.data.data.skus[i].stock
          }
          this.generateTable(table)
        }).catch(r => {
          this.loading = false
          this.error('加载信息失败')
        })

      },
    }
  }
</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 .zm_info_row:not(:first-child) {
    margin-top: 10px;
  }

  .image_item {
    width: 100px;
    height: 100px;
    margin-right: 10px;
  }


</style>
