<template>
  <div class="main">
    <!-- 轮播图 -->
    <swiper class="swiper" :options="swiperOptions">
      <swiper-slide v-for="slide of swiperList" :key="slide">
        <img class="swiper-image" :src="slide | fmtOSSUrl" />
      </swiper-slide>
    </swiper>
    <!-- 操作按钮 -->
    <div class="row function-v justify-around">
      <div
        v-for="(item, idx) in functions"
        :key="idx"
        @click="productionOperate(idx)"
      >
        <img :src="detailInfo.existPK && !idx ? item.select : item.img" />
        <p>{{ item.title }}</p>
      </div>
    </div>
    <!-- 内部\外部消息切换 -->
    <q-btn-toggle
      v-model="currentBtn"
      spread
      no-caps
      unelevated
      toggle-color="negative"
      color="#F2F2F2"
      text-color="#878787"
      :options="options"
    />
    <!-- 技术规格 -->
    <div v-if="currentBtn === 'one'" class="content-v">
      <div class="product-explain">
        <p>
          <span>厂商</span>
          <span>{{ detailInfo.productFactory }}</span>
        </p>
        <p>
          <span>产品类型</span>
          <span>{{ detailInfo.productType }}</span>
        </p>
        <p>
          <span>系列码</span>
          <span>{{ detailInfo.productCode }}</span>
        </p>
        <p>
          <span>产品品号</span>
          <span>{{ detailInfo.productNumber }}</span>
        </p>
        <p>
          <span>订货号</span>
          <span>{{ detailInfo.bookNumber }}</span>
        </p>
        <p>产品概述</p>
        <p class="bg-white product-desc">{{ detailInfo.productDesc }}</p>
        <p></p>
        <p>关联竞品</p>
        <ul class="text-primary ellipsis-2-lines">
          <li
            v-for="relation of detailInfo.relationEntityList"
            :key="relation.id"
            @click="relationQuery(relation)"
          >
            {{ relation.refProductNumber }}
          </li>
        </ul>
      </div>
      <!-- 产品参数 -->
      <div>
        <div class="param-title">产品参数</div>
        <div class="product-params">
          <div v-for="(param, idx) in detailInfo.params" :key="param">
            <ul class="col">
              <p class="param-type" :class="{ 'param-type-1': idx === 0 }">
                {{ param }}
              </p>
              <li
                class="row justify-between"
                v-for="(item, index) of detailInfo.paramEntityList[param]"
                :key="index"
              >
                <span>{{ item.name }}</span>
                <span>{{ item.value }}</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <!-- 商务信息 -->
    <div v-else class="content-v product-explain">
      <p>
        <span>指导价格</span>
        <span>{{ detailInfo.normalPrice }}</span>
      </p>
      <p>
        <span>A工厂库存</span>
        <span>{{ detailInfo.stockCount1 }}</span>
      </p>
      <p>
        <span>B工厂库存</span>
        <span>{{ detailInfo.stockCount2 }}</span>
      </p>
      <p>
        <span>最小包装数据</span>
        <span>{{ detailInfo.minSpec }}</span>
      </p>
      <p>
        <span>交期</span>
        <span>{{ detailInfo.deliveryTime }}</span>
      </p>
    </div>
  </div>
</template>

<script>
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/css/swiper.css";
import { queryProductDetail } from "dinkle/service/api";
export default {
  name: "",
  components: { Swiper, SwiperSlide },
  data() {
    return {
      // swiper 配置
      swiperOptions: {
        autoplay: true,
        loop: true,
        grabCursor: true,
        setWrapperSize: true,
        a11y: true,
        roundLengths: true,
        spaceBetween: 10,
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
          hideOnClick: true
        }
      },
      // 轮播图列表
      swiperList: [],
      // 外部/内部消息切换
      currentBtn: "one",
      options: [
        { label: "技术规格", value: "one" },
        { label: "商务信息", value: "two" }
      ],
      // 产品操作按钮
      functions: [
        {
          title: "加入PK",
          img: require("dinkle/assets/icon/+pk.png"),
          select: require("dinkle/assets/icon/+pk-select.png")
        },
        {
          title: "查看图纸",
          img: require("dinkle/assets/icon/look.png")
        },
        {
          title: "一键对比",
          img: require("dinkle/assets/icon/pk-relation.png")
        }
      ],
      // 产品详情
      detailInfo: {
        existPK: false
      }
    };
  },
  filters: {},
  computed: {},
  watch: {},
  methods: {
    productionOperate(idx) {
      // 加入pk
      if (!idx) {
        if (this.detailInfo.existPK) return;
        this.detailInfo.existPK = true;
        const item = this.detailInfo;
        const relation = item.relationEntityList.map(sub => ({
          id: sub.refProductId,
          factory: sub.refProductFactory
        }));
        const detial = {
          id: item.id,
          label: item.productNumber,
          factory: item.productFactory,
          code: item.productCode,
          image: item.productImage,
          isSelected: false,
          existPK: false,
          relation
        };
        this.$store.commit("dinkle/ADD_PK_LIST", detial);
        return;
      }
      // 查看图纸
      if (idx == 1) {
        const src = this.detailInfo.productDrawingPdf;
        if (src) window.open(`${process.env.VUE_APP_OSS_URL}/${src}`);
        return;
      }
      // 一键对比
      if (idx == 2) {
        const arr = this.detailInfo.relationEntityList.map(
          item => item.refProductId
        );
        arr.push(this.detailInfo.id);
        this.$router.push({
          name: "pkList",
          query: { ids: arr.join(",") }
        });
        return;
      }
    },
    // 查询产品详情
    async queryDetail() {
      const res = await queryProductDetail({ productId: this.$route.query.id });
      const data = res.data;
      // 轮播资源拼接处理
      const arr = [];
      if (data.productDrawingImage)
        arr.push(...data.productDrawingImage.split(","));
      if (data.productImage) arr.push(...data.productImage.split(","));
      this.swiperList = arr;
      // 参数分类处理
      const params = {};
      data.paramEntityList.forEach(item => {
        // 初始化值, 也需要读取数据
        if (!([item.paramType] in params)) {
          params[item.paramType] = [];
        }
        params[item.paramType].push({
          name: item.paramName,
          value: item.productValue || "/"
        });
      });
      data.paramEntityList = params;
      data.params = Object.keys(params);
      this.detailInfo = { ...this.detailInfo, ...res.data };
    },
    // 点击查询关联竞品
    relationQuery({ refProductId } = {}) {
      this.$router.push({
        name: "detail",
        query: { id: refProductId }
      });
    }
  },
  created() {
    this.queryDetail();
  },
  async mounted() {}
};
</script>

<style scoped lang="stylus">
.main
  background #fff
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #313131;
  font-size: 12px;
.swiper
  --swiper-theme-color: #ff6600;
  &-image
    width: 100%;
.function-v
  background-color #fff
  height 70px
  align-content center
  align-items center
  margin-bottom 10px
  text-align center
  p
    color #878787
  img
    width 30px
    margin-bottom 4px
.content-v
  padding 10px 9px 9px 9.5px
.product-explain
  p
    display flex
    padding 5px
    align-content: center;
    line-height 20px
    &:nth-child(2n - 1)
      background #F2F2F2
    span:first-child
      width 30%
      margin-right 10px
    span:last-child
      color #595959
  .product-desc
    color #595959
  ul
    padding 5px 0
    li
      color #3C8EF4
      line-height 20px
      padding 5px
      &:hover
        text-decoration underline
.product-params
  background #F2F2F2
  padding-bottom 15px
.param-type
li
  padding 3px 8px 3px 10px
  span:first-child
    color #878787
.param-type-1
  background #fff
  padding auto 0
.param-title
  padding 3px
  background #F2F2F2
.q-btn-toggle
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  background-color #F2F2F2
  height 40px
</style>
