<template>

    <div style="background-color: #f0f2f5; padding-bottom: 20px; min-height: 100%; " >
      <div style="padding: 20px; background-color: #fff;">
       药品详情
      </div>

<div class="content" v-if="item!=null">
    <div class="desct">
      药品信息
    </div>
        <el-descriptions title="" :column="3" border>

            <el-descriptions-item label="店铺名称"  >
                <span v-if="item!=null">{{storeName}}</span>
            </el-descriptions-item>
            <el-descriptions-item label="商品名称" >

            </el-descriptions-item>
            <el-descriptions-item label="商品图片" >
              <el-image v-if="item.imgUrl!=null"
                  style="width: 100px"
                  :src="item.imgUrl"
                  :preview-src-list="[item.imgUrl]">
              </el-image>
            </el-descriptions-item>
            <el-descriptions-item label="商品介绍"  >
                <span v-if="item!=null">{{item.productIntroduce}}</span>

            </el-descriptions-item>
            <el-descriptions-item label="关键字" >
                <span v-if="item!=null">{{item.keyword}}</span>
            </el-descriptions-item>
            <el-descriptions-item label="产品条码" >
                <span v-if="item!=null">{{item.barCode}}</span>
            </el-descriptions-item>
            <el-descriptions-item label="分类"  >
                <span v-if="item!=null">{{cateName}}</span>
            </el-descriptions-item>
            <el-descriptions-item label="商品价格" >
                <span v-if="item!=null">{{item.price}}</span>
            </el-descriptions-item>
            <el-descriptions-item label="市场价" >
                <span v-if="item!=null">{{item.otPrice}}</span>
            </el-descriptions-item>
            <el-descriptions-item label="单位名"  >
                <span v-if="item!=null">{{item.unitName}}</span>
            </el-descriptions-item>
            <el-descriptions-item label="排序" >
                <span v-if="item!=null">{{item.sort}}</span>
            </el-descriptions-item>
            <el-descriptions-item label="销量" >
                <span v-if="item!=null">{{item.stock}}</span>
            </el-descriptions-item>

            <el-descriptions-item label="状态" >

                   <dict-tag :options="specShowOptions" :value="item.isShow"/>
            </el-descriptions-item>
            <el-descriptions-item label="是否热卖" >

                <dict-tag :options="orOptions" :value="item.isHot"/>
            </el-descriptions-item>
            <el-descriptions-item label="是否优惠"  >

                <dict-tag :options="orOptions" :value="item.isBenefit"/>
            </el-descriptions-item>
            <el-descriptions-item label="是否精品" >

                <dict-tag :options="orOptions" :value="item.isBest"/>
            </el-descriptions-item>
            <el-descriptions-item label="是否新品" >

                <dict-tag :options="orOptions" :value="item.isNew"/>
            </el-descriptions-item>
            <el-descriptions-item label="是否包邮" >
               <dict-tag :options="orOptions" :value="item.isPostage"/>
            </el-descriptions-item>
            <el-descriptions-item label="是否在商品展示" >
               <dict-tag :options="orOptions" :value="item.isDisplay"/>
            </el-descriptions-item>
            <el-descriptions-item label="获得积分" >
                <span v-if="item!=null">{{item.giveIntegral}}</span>
            </el-descriptions-item>
            <el-descriptions-item label="成本价"  >
                <span v-if="item!=null">{{item.costPrice}}</span>
            </el-descriptions-item>
            <el-descriptions-item label="浏览量" >
                <span v-if="item!=null">{{item.views}}</span>
            </el-descriptions-item>
            <el-descriptions-item label="产品二维码地址" >
                <span v-if="item!=null">{{item.codeUrl}}</span>
            </el-descriptions-item>
            <el-descriptions-item label="商品类型" >
                 <dict-tag :options="productTypeOptions" :value="item.productType"/>
            </el-descriptions-item>
            <el-descriptions-item label="国药准字" >
                <span v-if="item!=null">{{item.prescribeCode}}</span>
            </el-descriptions-item>
            <el-descriptions-item label="规格"  >
                <span v-if="item!=null">{{item.prescribeSpec}}</span>
            </el-descriptions-item>
            <el-descriptions-item label="生产厂家" >
                <span v-if="item!=null">{{item.prescribeFactory}}</span>
            </el-descriptions-item>
            <el-descriptions-item label="处方名" >
                <span v-if="item!=null">{{item.prescribeName}}</span>
            </el-descriptions-item>



            <el-descriptions-item label="创建时间" >
                <span v-if="item!=null">{{item.createTime}}</span>
            </el-descriptions-item>
            <el-descriptions-item label="更新时间" >
                <span v-if="item!=null">{{item.updateTime}}</span>
            </el-descriptions-item>



        </el-descriptions>


    </div>
    <div class="content" v-if="item!=null">
      <div class="desct">
        药品描述
      </div>
        <span v-html="item.desc"></span>
     <!-- <el-descriptions  direction="vertical" :column="1" border >
         <el-descriptions-item label="药品描述" >

                  </el-descriptions-item>

      </el-descriptions> -->
    </div>
    </div>
</template>

<script>
  import { getAllStoreProductRule,genFormatAttr , addOrEdit,listStore, listProduct, getProduct, delProduct, addProduct, updateProduct, exportProduct } from "@/api/his/storeProduct.js";
  export default {
    name: "details",
    props:["data"],
    data() {
      return {
        storeName:[],
        storeOPtions:[],
        categoryOptions:[],
        orOptions: [],
        productTypeOptions: [],
        specShowOptions: [],
        specTypeOptions: [],
        statusOptions: [],
        cateName:[],
        statusOptions: [],
        item:null,
        form: {
          sreason: '',
        }
      }
    },
    created() {
      this.getDicts("sys_spec_show").then(response => {
            this.specShowOptions = response.data;
          });
      this.getDicts("sys_spec_type").then(response => {
           this.specTypeOptions = response.data;
         });
      this.getDicts("sys_product_type").then(response => {
           this.productTypeOptions = response.data;
         });
      this.getDicts("sys_company_status").then(response => {
           this.statusOptions = response.data;
         });
      this.getDicts("sys_company_or").then(response => {
           this.orOptions = response.data;
         });
      getAllStoreProductRule().then(response => {
        this.ruleList =response.data;
      });
      this.getDicts("sys_company_status").then(response => {
        this.statusOptions = response.data;
      });

    },
    methods: {
      getDetails(orderId,name,sn) {
        this.item=null;
        this.cateName=name;
        this.storeName=sn;
        getProduct(orderId).then(response => {
              this.item = response.data;
          });
      },
    }
  }
</script>
<style>
  .el-descriptions-item__content {
    max-width: 150px;
    min-width: 100px;
  }
  .content{
      height: 100%;
      background-color: #fff;
     padding: 0px 20px 20px;

      margin: 20px;
  }
  .el-descriptions-item__label.is-bordered-label{
    font-weight: normal;
  }
  .desct{
      padding-top: 20px;
      padding-bottom: 20px;
      color: #524b4a;
      font-weight: bold;
    }
</style>
