<!--
 * @Author: wenjie 1454560336@qq.com
 * @Date: 2024-12-11 11:32:13
 * @LastEditors: wenjie 1454560336@qq.com
 * @LastEditTime: 2025-01-14 16:35:54
 * @FilePath: \mall4vs-bbc\src\views\modules\prod\prodInfo.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <el-dialog title="查看"
             :close-on-click-modal="false"
             :visible.sync="visible">

             <div class="box">
               <div class="item">
                  <div class="label">商品品牌</div>
                  <div class="value">{{dataForm.brandName||'无'}}</div>
                </div>
                <div class="item">
                  <div class="label">商品编码</div>
                  <div class="value">{{dataForm.spuCode||'无'}}</div>
                </div>
                 <div class="item">
                  <div class="label">商品名称</div>
                  <div class="value">{{dataForm.name||'无'}}</div>
                </div>
                 <div class="item">
                  <div class="label">商品状态</div>
                  <div class="value">{{dataForm.spuCode||'无'}}</div>
                </div>
                 <div class="item">
                  <div class="label">商品主图</div>
                  <img class="img" :src="picUrl(dataForm.images) " alt="">
                </div>
                 <div class="item">
                  <div class="label">商品图片</div>
                  <img class="img" :src="dataForm.imagesDetails" alt="">
                </div>
                  <div class="item">
                    <div class="label">商品视频</div>
                    <video v-if="dataForm.coverVideoUrl" class="img" :src="dataForm.coverVideoUrl"></video>
                    <div v-else class="value" ></div>
                </div>
                 <div class="item">
                  <div class="label">商品分类</div>
                  <div class="value">{{formatterType(dataForm.categoryInfo)}}</div>
                </div>
            
                 <div class="item">
                  <div class="label">重量/g</div>
                  <div class="value">{{dataForm.skuList[0].weightForUnit||'无'}}</div>
                </div>
                
                 <div class="item">
                  <div class="label">保质期/月</div>
                  <div class="value">{{dataForm.skuList[0].warranty||'无'}}</div>
                </div>
                 <div class="item">
                  <div class="label">售卖单位</div>
                  <div class="value">{{dataForm.skuList[0].unit||'无'}}</div>
                </div>
                 <div class="item">
                  <div class="label">商品规格</div>
                  <div class="value">{{dataForm.skuList[0].spec||'无'}}</div>
                </div>
             </div>
 
  </el-dialog>
</template>

<script>
export default {
  data () {
    return {
      visible: false,
      dataForm: {
        id: null,
        title: null,
        shopId: null,
        status: 1,
        isDefault: null,
        prodCount: null,
        seq: null,
        style: 0
      },
      dataRule: {
        title: [
          { required: true, message: '请输入表情名称', trigger: 'blur' }
        ],
        seq: [
          { required: true, message: '请输入排序值', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {

    formatterType(value){
      if(value&&Array.isArray(value)&&value.length>0){
        return value.map(item => item.name).join('、');
      }else{
        return ''
      }
    },
    picUrl(url) {
      if(!url) return
      if(url.indexOf('http') === -1) {
        return this.resourcesUrl + url.split(',')[0]
      }else {
        return url.split(',')[0]
      }
    },
    init (data) {
     this.visible = true
      if (data) {
        this.dataForm = Object.assign({}, data)
      } else {
          this.$nextTick(() => {
            this.dataForm = {
              "transName": "",
              "distance": "",
              "amount":"",
              "piece":"",
              "images":''
            }
          })
      }
    },
  }
}
</script>

<style lang="scss" >
.box{
  .item{
    display: flex;
    align-items: center;
    .label{
      font-size: 14px;
      line-height: 32px;
      color: rgba(164, 164, 164, 1);
      width: 100px;
      text-align: left;
      align-self: flex-start;
    }
    .value{
      font-size: 14px;
      line-height: 32px;
      color: #222;

    }
    .img{
      width: 150px;
    }
  }
}
</style>
