<template lang="pug">
  div.comp
    q-list.result(v-if="hasList" :class="{'result-top': !isPK }")
      q-item(clickable v-for="item of list" :key="item.id")
        q-item-section(v-if="isPK" side @click="clickSelected(item)")
          q-avatar(rounded size="60px")
            img(v-if="item.isSelected" src="~dinkle/assets/icon/selected.png")
            img(v-else src="~dinkle/assets/icon/select.png")
        q-item-section(thumbnail side @click="clickItem(item)")
          img(:src="item.image | fmtOSSUrl")
        q-item-section(@click="clickItem(item)")
          p.text-h5.text-weight-bold {{ item.label }}
          div.cell-des
            p {{ item.factory }}
            p {{ item.code }}
          p.cell-relation 关联竞品:
            q-chip(clickable size="lg" v-for="sub of item.relation" :key="sub.id" @click="clickItem(sub)") {{ sub.factory }}
        q-item-section(avatar v-if="!isPK" side @click="addPKList(item)")
          q-avatar(square)
            img.result-pk(v-if="item.existPK" src="~dinkle/assets/icon/+pk-select.png")
            img.result-pk(v-else src="~dinkle/assets/icon/+pk.png")
    div.no-data(v-else)
      img(v-if="isPK" src="~dinkle/assets/image/no-data-pk.png")
      img(v-else src="~dinkle/assets/image/no-data-search.png")
</template>

<script>
export default {
  name: "comp-product-cell",
  props: {
    list: Array,
    isPK: Boolean,
    isForbidden: Boolean
  },
  data() {
    return {};
  },
  computed: {
    hasList() {
      return this.isForbidden || this.list.length;
    }
  },
  watch: {},
  filters: {},
  created() {},
  mounted() {},
  methods: {
    // 添加到pk列表
    addPKList(item) {
      if (item.existPK) return;
      item.existPK = true;
      this.$store.commit("dinkle/ADD_PK_LIST", item);
    },
    // 跳转到详情
    clickItem(item) {
      console.log('this.$route.query.search = "";', this.$route.query.search);
      this.$route.query.search = "";
      this.$router.push({
        name: "detail",
        query: {
          id: item.id
        }
      });
    },
    // pk数据选择
    clickSelected(item) {
      item.isSelected = !item.isSelected;
      this.$emit("selectChanged");
    }
  }
};
</script>

<style scoped lang="stylus">
.result
  padding 0 15px
  background-color #fff
  &-top
    margin-top 60px
  &-pk
    margin-top 5px
.no-data
  text-align center
  padding 40px 10px
  background-color #fff
  margin-top 60px
  img
    width 100%
.cell-des
  margin 5px 0
  p
    font-size 14px
    font-weight 400
.cell-relation
  font-weight 500
  font-size 12px
>>> .q-item__section--thumbnail img
  width 70px
  height auto
>>> .q-avatar__content, .q-avatar img:not(.q-icon)
  height auto
</style>
