<template>
<div class="container normal-panel">
  <div class="product-detail container">
    <el-row :gutter="20">
      <el-col :span="7">
        <img style="width:100%" :src="mainData.attinfos?mainData.attinfos[0].url:''">
      </el-col>
      <el-col :span="17">
        <div>
          <p class="productName normal-margin">{{mainData.itemname}}</p>
          <p class="normal-margin" style="color:#888;">编码:&emsp;{{mainData.itemno}}</p>
          <p class="normal-margin">价格:&emsp;<span class="product-price">¥{{mainData.gradeprice}}</span>&nbsp;<span class="text-throughline">¥{{mainData.gradeprice}}</span></p>
          <div class="line normal-margin"></div>
          <div>
            <p class="normal-margin">规格:&emsp;{{mainData.spec}}</p>
          </div>
          <div class="flex-align-center" style="margin-bottom:30px">
            <p>数量:&emsp;</p>
            <el-input-number v-model="num" :min="mainData.orderminqty" :step="mainData.orderaddqty" label="描述文字"></el-input-number>
          </div>
          <p class="normal-margin">型号:&emsp;{{mainData.model}}</p>
          <!-- <p class="normal-margin">材质:&emsp;{{mainData.model}}</p> -->
          <el-button class="normal-margin" type="primary" style="width:200px" @click="insertToShopCart">加入购物车</el-button>
          <div style="display:flex">
            <p>相关链接:&emsp;</p>
            <div>
              <div v-for="item in mainData.technicalinfo" :key="item.index">
                <div class="file-link" v-for="att in item.attinfos" :key="att.index">
                  <el-tag size="mini">{{item.type}}</el-tag><a :href="att.url">{{att.document}}</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</div>
</template>

<script>
export default {
  data () {
    return {
      num:0,
      mainData:{}
    }
  },
  methods:{
    async productDetailData () {
      const res = await this.$api.requested({
        "id": 20220927130202,
        "content": {
          "itemid": this.$route.query.id
        }
      })
      this.mainData = res.data
      this.num = res.data.orderminqty
    },
    async insertToShopCart () {
      const res = await this.$api.requested({
        "id": 20220924095102,
        "content": {
            "sa_brandid": this.mainData.sa_brandid, //品牌id
            "itemid": this.mainData.itemid, //货品id
            "qty": this.num, //数量
            "itemno": this.mainData.itemno //货品编号
        },
      })
      this.tool.showMessage(res)
    }
  },
  mounted () {
    this.productDetailData()
  }
}

</script>
<style>
</style>
<style scoped>
.product-detail{
  background: #fff;
  width: 80%;
  margin:30px 0;
  border-radius: 10px;
}
.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
}
.file-link{
  font-size: 12px;
  margin-bottom:10px
}
.file-link a{
  text-decoration: none;
  margin-left:10px;
  color:#999
}
.file-link a:hover{
  color:#4F7BFD;
  text-decoration: underline;
}
</style>