<template>
  <div class="detail normal-panel" v-if="selectProduct">
    <div class="left">
      <el-image :src="selectProduct.attinfos[0].url" fit="fill"></el-image>
    </div>
    <div class="right container">
      <div class="header">
        <p class="title">{{selectProduct.itemname}}</p>
        <p class="code"><span class="small">编号:</span>{{selectProduct.itemno}}</p>
        <div class="price">
          <span class="small">价格:</span>
          <div class="number">
            <span class="new">￥<span style="font-size:24px">{{this.selectProduct.gradeprice}}</span></span>
            <span class="small"><span
                class="old">￥{{selectProduct.oldprice}}</span>{{`(/${this.selectProduct.unitname})`}}</span>
          </div>
        </div>
      </div>
      <div class="count-box">
        <span class="small">数量：</span>
        <div class="count-handle">
          <el-input-number size="small" v-model="count" @change="countChange" :min="1"></el-input-number>
        </div>
      </div>
      <div class="type">
        <span class="small">型号</span>
        <div class="content">
          <el-tag @click="typeClick(item)" v-for="(item,index) in detail" :key="index"
            :style="selectProduct.itemno == item.itemno ? 'background:#2b3e68;color:#ffffff' : ''">{{item.model}}
          </el-tag>
        </div>
      </div>
      <div class="shopping">
        <el-button size="small" type="primary" icon="el-icon-shopping-cart-1" @click="addCart">加入购物车</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { log } from '@antv/g2plot/lib/utils';
export default {
  name: '',
  data () {
    return {
      detail: '',
      count: 1,
      selectProduct: ''
    };
  },
  computed: {
  },
  watch: {
  },
  created () {
    this.getDetail()
  },
  methods: {
    async getDetail () {
      let res = await this.$api.requested({
        "id": "20220926142403",
        "version": 1,
        "content": {
          "sa_itemgroupid": this.$route.query.id
        }
      })
      this.detail = res.data
      this.selectProduct = this.detail ? this.detail[0] : ''
      console.log(this.selectProduct);

    },
    countChange (num) {
      this.count = num
      console.log(this.count, '数量');
    },
    typeClick (data) {
      console.log(data);
      this.selectProduct = data
      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 //货品编号
        },
      })
      console.log(res);

      if (res.code == 1) {
        this.$message({
          message: '加入购物车成功',
          type: 'success'
        })
      }
    }
  },
};
</script>

<style scoped>
* {
  box-sizing: border-box;
}
.detail {
  height: calc(100vh - 100px);
  display: flex;
  padding: 10px 10px 0 10px;
}
.detail .left {
  flex: 1.5;
  height: 100%;
  border: 1px solid rgba(0, 0, 0, 0.05);
}
.detail .right {
  flex: 3;
  height: 100%;
}
.detail .right .header {
  padding-bottom: 12px;
  border-bottom: 1px solid #cccccc;
}
.detail .right .header .title {
  font-size: 20px;
  font-weight: 700;
}
.detail .right .header .code {
  color: #0250a3;
  height: 50px;
  line-height: 50px;
}
.detail .right .header .price {
  display: flex;
  height: 50px;
  line-height: 50px;
}
.detail .right .header .price .number {
}
.detail .right .header .price .number .new {
  color: #dc3545;
  font-size: 12px;
  margin-right: 12px;
}
.detail .right .header .price .number .old {
  text-decoration: line-through;
}

.detail .right .count-box {
  display: flex;
  align-items: center;
  height: 80px;
  border-bottom: 1px solid #cccccc;
  padding: 12px 0;
  margin-bottom: 10px;
}

.detail .right .type {
  display: flex;
}
.detail .right .type .content {
  display: flex;
  flex-wrap: wrap;
  min-height: 100px;
  max-height: 300px;
  overflow-y: scroll;
  width: 100%;
}
.detail .right .type .content .el-tag {
  margin: 0 10px 10px 0;
  cursor: pointer;
}
.detail .right .shopping {
  padding-left: 100px;
}

.small {
  font-size: 12px;
  color: #a7a7a9;
  width: 100px;
}
</style>
