<template>
  <div class="saga-product">
    <div class="sidebar">
      <div class="title">
        <span class="iconfont iconfenlei"></span>&nbsp;产品分类
      </div>
      <div class="product-classification">
        <el-popover
          trigger="hover"
          placement="right"
          v-for="major in productType"
          :key="major.Code"
          width="960">
          <div slot="reference" class="classification">
            <div class="major-content">
              <p class="name">{{`${major.Name} — ${major.Code}`}}</p>
              <p class="introduce">{{major.Note}}</p>
            </div>
          </div>
          <div v-for="system in major.DefMajor" :key="system.Code" v-show="major.DefMajor && major.DefMajor.length">
            <div style="margin-bottom: 10px">
              <img src="../../assets/images/rectangle.png" height="12">
              <span>{{system.Name}}</span>
            </div>
            <div class="sys" v-show="system.DefClass && system.DefClass.length">
              <span
                v-for="equip in system.DefClass"
                :key="equip.Code"
                @click="handleDetail(equip)"
              >
                {{equip.Name}}
              </span>
            </div>
          </div>
        </el-popover>
      </div>
    </div>
    <div class="brand">
      <saga-brand pageType="product"></saga-brand>
    </div>
  </div>
</template>

<script>
import sagaBrand from "@/components/brand/sagaBrand"
import { dictionDefMajor } from "@/api/dictionary"
import { mapGetters } from "vuex"
export default {
  name: "productBrand",
  components: {
    sagaBrand,
  },
  created() {
    this.getProductType()
  },
  data() {
    return {
      productType: []
    }
  },
  computed: {
    ...mapGetters('layout', ['dictionary']),
  },
  methods:{
    handleDetail(item) {
      this.$router.push({path: 'product/productDetail', query: {id: '1', name: '2', productId: '3'}})
    },
    getProductType() {// 获取产品类型数据
      let params = {
        Type: this.dictionary.dictionaryType,
        GroupId: this.dictionary.groupId,
        ProjectId: this.dictionary.projectId,
      }
      dictionDefMajor(params, res => {
        this.productType = res.Content
      })
    }
  }
}
</script>

<style scoped lang="less">
@bgc: #fff;
.saga-product {
  /*width: 1200px;*/
  /*margin: 20px auto 0 auto;*/
  margin-top: 90px;
  display: flex;
  .sidebar {
    /*margin-top: 20px;*/
    width: 200px;
    background: @bgc;
    display: inline-block;
    .title {
      height: 40px;
      line-height: 40px;
      background: #CBDFFC;
      color: #3A8DDE;
      padding-left: 10px;
    }
    .product-classification {
      background: @bgc;
      /*margin-top: -19px;*/
      .classification {
        cursor: pointer;
        .major-content{
          padding: 12px 0;
          margin: 0 16px;
          border-bottom: 1px solid #EFF0F1;
          .name {
            font-size: 14px;
            line-height: 22px;
            color: #1F2429;
            margin-bottom: 4px;
          }
          .introduce {
            color: #8D9399;
            font-size: 12px;
            letter-spacing: 0.5px;
            line-height: 18px;
          }
        }
      }
      .classification:hover {
        background: #E1F2FF;
        .name {
          color: #3A8DDE;
        }
        .introduce {
          color: #3A8DDE;
        }
      }
      .sys {
        padding: 10px;
        span {
          margin: 0 20px;
          color: #8D9399;
          display: inline-block;
        }
      }
    }
  }
  .brand {
    width: 980px;
    margin-left: 20px;
    background: @bgc;
    flex-grow: 1;
  }
}
</style>
<style lang="less">
.el-popover {
  p:first-child {
    /*border-left: 4px solid #3A8DDE;*/
    color: #1F2329;
    text-indent: 8px;
  }
  .sys {
    margin-left: 6px;
    span {
      /*text-indent: 6px;*/
      display: inline-block;
      cursor: pointer;
      color: #8D9399;
      line-height: 25px;
      margin-right: 40px;
      b {
        display: inline-block;
        width: 20px;
      }

    }
    span:hover {
      color: #3A8DDE
    }
  }
}
</style>
