<template>
  <div class="main">
    <div class="main-top">
      <q-toggle
        v-model="onlyDiff"
        color="negative"
        left-label
        label="仅看差异"
        dense
      ></q-toggle>
      <div>
        <p></p>
        <span>表示参数优势 </span>
      </div>
    </div>
    <div class="main-info">
      <p v-for="prop of propInfo" :key="prop.prop">
        <span>{{ prop.label }} </span>
        <span
          v-for="(info, idx) of proInfo"
          :key="info.id"
          v-show="
            !proInfo[idx - 1] ||
              !onlyDiff ||
              (proInfo[idx - 1][prop.prop] != info[prop.prop]) | fmtOnlyDiff
          "
        >
          {{ info[prop.prop] }}</span
        >
      </p>
    </div>
    <!-- 产品参数 -->
    <div class="main-bottom">
      <div class="main-info main-params" v-for="prop of propParams" :key="prop">
        <div>{{ prop }}</div>
        <p v-for="params of propParamsObj[prop]" :key="params">
          <span>{{ params }}</span>
          <span
            v-for="(pro, idx) of proParmas"
            :key="idx"
            v-show="
              !proParmas[idx - 1] ||
                !onlyDiff ||
                proParmas[idx - 1][prop][params] != pro[prop][params]
            "
          >
            <!-- 可能没有该分类 -->
            {{ pro[prop] ? pro[prop][params] : "—" }}
          </span>
        </p>
      </div>
    </div>
  </div>
</template>
<script>
import { queryProductDetailList } from "dinkle/service/api";

export default {
  name: "",
  components: {},
  data() {
    return {
      // 仅看差异
      onlyDiff: false,
      // 产品信息
      proInfo: [],
      // 产品参数
      proParmas: [],
      // info字段
      propInfo: [
        {
          prop: "productFactory",
          label: "厂商"
        },
        {
          prop: "productType",
          label: "产品类型"
        },
        {
          prop: "productCode",
          label: "系列码"
        },
        {
          prop: "productNumber",
          label: "产品品号"
        },
        {
          prop: "bookNumber",
          label: "订货号"
        },
        {
          prop: "productDesc",
          label: "产品说明"
        }
      ],
      // 参数字段
      propParams: [],
      propParamsObj: {}
    };
  },
  filters: {},
  computed: {},
  watch: {},
  methods: {
    // 查询PK数据
    async queryPKList() {
      const res = await queryProductDetailList({
        productIds: this.$route.query.ids
      });
      // 产品参数
      const data = res.data;
      this.proInfo = data.filter(item => item && item.id);
      // 参数分类处理
      const arr = [];
      this.proInfo.forEach(item => {
        const params = {};
        item.paramEntityList.forEach(sub => {
          // 初始化值, 也需要读取数据
          if (!([sub.paramType] in params)) {
            params[sub.paramType] = {};
          }
          params[sub.paramType][sub.paramName] = sub.productValue || "—";
        });
        arr.push(params);
      });
      this.proParmas = arr;
      // 参数类型处理
      this.propParamsObj = await this.$store.dispatch("dinkle/SYNC_PARAM_LIST");
      this.propParams = Object.keys(this.propParamsObj);
    }
  },
  created() {
    this.queryPKList();
  }
};
</script>
<style scoped lang="stylus">
.main
  background-color #fff
  padding 15px 20px
  &-top
    display flex
    justify-content space-between
    align-items center
    div
      display flex
      justify-content space-between
      align-items center
      p
        width 18px
        height 18px
        background-color: #D4EBEB
      span
        font-size 14px
        margin-left 5px
  &-info
    margin-top 30px
    border 0.25px solid #E0E0E0
    p
      display flex
      align-content: center;
      justify-content space-between
      text-align center
      width 100%
      &:nth-child(2n)
        background #F2F2F2
      span
        border 0.25px solid #E0E0E0
        line-height 20px
        padding 10px
        width 100%
        font-size 11px
  &-params
    margin-top 0
    > div
      padding 10px
      font-size 13px
      font-weight 500
    p
      &:nth-child(2n)
        background #fff
      &:nth-child(2n -1)
        background #F2F2F2
  &-bottom
    margin 20px 0 10px 0
>>> .q-toggle__label
  font-weight bold
</style>
