<template>
<div class="container normal-panel">
  <div class="product-detail container flex-align-stretch">
    <div class="flex-align-stretch column">
      <el-image class="thumImage mt-10" :class="item.attachmentid === actImage.attachmentid?'act':''" v-for="item in selectProduct.attinfos" :key="item.index" :src="item.url" @click="actImage = item" fit="contain" />
    </div>
    <el-image style="width:400px;height:400px;margin-right:30px" :src="actImage?actImage.url:''" fit="contain" />
    <div style="flex:1">
      <p class="productName normal-margin">{{selectProduct.itemname}}</p>
      <p class="normal-margin" style="color:#888;">编码:&emsp;{{selectProduct.itemno}}</p>
      <p class="normal-margin">价格:&emsp;<span class="product-price">¥{{tool.formatAmount(selectProduct.gradeprice,2)}}</span>&nbsp;<span class="text-throughline">¥{{tool.formatAmount(selectProduct.gradeprice,2)}}</span></p>
      <div class="line normal-margin"></div>
      <div>
        <p class="normal-margin">规格:&emsp;{{selectProduct.spec}}</p>
      </div>
      <div class="flex-align-center" style="margin-bottom:30px">
        <p>数量:&emsp;</p>
        <el-input-number v-model="count" :min="selectProduct.orderminqty" :step="selectProduct.orderaddqty" size="small" label="描述文字"></el-input-number>
      </div>
      <p class="normal-margin">当前型号:&emsp;{{selectProduct.model}}</p>
      <div class="type">
        <div class="content normal-margin">
          <p class="inline-16">领域:</p>
          <el-tag class="inline-16" @click="actTradefield = item.tradefield" v-for="(item,index) in tradefield" :key="index" size="small" :effect="actTradefield === item.tradefield ? 'dark' : 'plain'">{{item.tradefield}}
          </el-tag>
        </div>
      </div>
      
      <el-button class="normal-margin" type="primary" style="width:200px" icon="el-icon-shopping-cart-full" @click="addCart">加入购物车</el-button>
      <div style="display:flex">
        <p style="width:150px">相关链接:&emsp;</p>
        <div>
          <div v-for="item in selectProduct.technicalinfo" :key="item.index">
            <a class="file-link" v-for="doc in item.attinfos" :key="doc.index" :href="doc.url">{{doc.document}}</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</template>

<script>
export default {
  name: '',
  data () {
    return {
      detail: '',
      count: 1,
      selectProduct: '',
      actImage:{},
      tradefield:[],
      actTradefield:''
    };
  },
  computed: {
  },
  watch: {
  },
  created () {
    this.getDetail()
  },
  methods: {
    async getDetail () {
      const res = await this.$api.requested({
        "id": 20220927130202,
        "content": {
          "itemid": this.$route.query.id
        }
      })
      this.detail = res.data
      this.selectProduct = this.detail
      this.actImage = this.detail.attinfos[0]
      this.tradefield  = this.detail.tradefield
      this.actTradefield = this.detail.tradefield[0].tradefield
      this.num = res.data.orderminqty
    },
    countChange (num) {
      this.count = num
    },
    typeClick (data) {
      this.selectProduct = data
      this.actImage = data.attinfos[0]
      this.actTradefield = data.tradefield[0].tradefield
      this.count = 1
    },
    
    async addCart () {
      let res = await this.$api.requested({
        "id": 20220924095102,
        "content": {
          "sa_brandid": this.$route.query.brandid, //品牌id
          "itemid": this.selectProduct.itemid, //货品id
          "qty": this.count, //数量
          "itemno": this.selectProduct.itemno, //货品编号
          "tradefield":this.actTradefield
        },
      })
      this.tool.showMessage(res)
    }
  },
};
</script>

<style scoped>
.product-detail{
  height: calc(100vh - 210px);
  overflow-y: scroll;
  width: 900px;
}
.productName{
  font-size: 1.75rem !important;
  color: #333 !important;
}
.line{
  border-bottom: 1px dashed #e3e5ea;
}
.border-left {
  border-left:1px solid #e3e5ea
}
.product-price {
  font-size: 1.25rem !important;
  color: red;
}
.product-itemno{
  font-size: 12px;
  color:#888;
  margin-bottom: 20px;
}
.text-throughline{
  font-size: 14px;
  text-decoration: line-through;
  color:#999
}
.product-detail p{
  font-size: 14px;
  color:#888 ;
}
.productName{
  font-size: 1.75rem !important;
  color: #333 !important;
}
.line{
  border-bottom: 1px dashed #e3e5ea;
}
.border-left {
  border-left:1px solid #e3e5ea
}
.product-price {
  font-size: 1.25rem !important;
  color: red;
}
.product-itemno{
  font-size: 12px;
  color:#888;
  margin-bottom: 20px;
}
.text-throughline{
  font-size: 14px;
  text-decoration: line-through;
  color:#999
}
.thumImage{
  width:100px;
  height:100px;
  margin-right:30px;
  border:1px solid #f1f2f3;
  cursor: pointer;
  
}
.column{
  flex-direction: column;
}
.act{
  border:1px solid #607d8b;
}
.file-link{
  font-size: 12px;
  margin-bottom:16px;
  color:#3848f6
}
.file-link a{
  text-decoration: none;
  margin-left:10px;
  color:#999
}
.file-link:hover{
  color:#4F7BFD;
  text-decoration: underline;
}
</style>
