<template>
  <div>
    <div class="saga-brand-box mt90 por">
      <div class="breadcrumb-content">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item>所有品牌</el-breadcrumb-item>
          <el-breadcrumb-item>{{this.$route.query.BrandCname}}：</el-breadcrumb-item>
        </el-breadcrumb>
        <template v-for="item in system">
          <template v-for="i in item">
                  <span v-for="(j,index) in i.DefClass" v-if="j.show" class="select">{{j.AliasName}}
              <i class="el-icon-close" @click="deleteCurrent(index)"></i></span>
            <span class="total poa">共<b>{{total}}</b>件相关产品</span>
          </template>
        </template>

      </div>
      <template v-for="(item,index) in system">
        <div class="device-sys" v-for="(i,index) in item">
          <div class="left">{{i.AliasName}}:</div>
          <div class="main">
            <ul>
              <li v-for="(group,index) in i.DefClass"
                  style="cursor: pointer"
                  :key="index"
                  v-if="index < limitSys"
                  @click="currentSys(index,group)"
                  :class="group.show ? 'light':''">
                {{group.AliasName}}
              </li>
            </ul>
          </div>
          <div class="right" @click="allData" :class="more == '更多' ? 'dark' :'light'">
            <p style="cursor: pointer;">{{more}}
              <span :class="more=='更多' ? 'el-icon-caret-bottom':'el-icon-caret-top'"></span>
            </p>
          </div>
        </div>
      </template>

    </div>
    <div class="saga-brand-box mt20">
      <detailTable :table="table" @deleteProdType="deleteProdType"/>
    </div>
  </div>

</template>

<script>
  import detailTable from "../../public/detailTable";
  import {mapGetters} from "vuex"
  import {classQueryByBrand, prodTypeDelete, prodTypeQuery} from "@/api/product"

  export default {
    components: {detailTable},
    created() {
      this.getDate()
      this.getProductList()
    },
    mounted() {
    },

    data() {
      return {
        more: '更多',
        limitSys: 14,
        isShow: false,
        system: [],
        total: 0,
        table: [],
      }
    },
    computed: {
      ...mapGetters('layout', ['dictionary']),
    },
    methods: {
      getDate() {
        let param = {
          GroupId: this.dictionary.groupId,
          Type: this.dictionary.dictionaryType,
          ProjectId: this.dictionary.projectId,
          BrandID: this.$route.query.BrandID,
          Orders: 'name asc, createTime desc'
        }
        classQueryByBrand(param, res => {
          this.system = res.Content ? res.Content.map(i => {
            i.forEach(j => {
              j.DefClass.forEach((k, index) => {
                this.$set(k, 'show', false)
              })

            })
            return i
          }) : []
        })
      },
      getProductList() {
        let params = {
          GroupId: this.dictionary.groupId,
          Type: this.dictionary.dictionaryType,
          ProjectId: this.dictionary.projectId,
          Filters: `BrandID='${this.$route.query.BrandID}'`
        }
        prodTypeQuery(params, res => {
          this.total = res.Total
          this.table = res.Content.map(i => ({...i, Brand: this.$route.query}))
        })
      },
      deleteProdType(val) {
        let {Brand, ...params} = val
        prodTypeDelete([params], res => {
          this.$message.success('删除成功')
          this.getProductList()
          this.getDate()
        })
      },
      allData() {
        this.isShow = !this.isShow
        if (this.isShow) {
          this.more = '收起'
          this.limitSys = this.system.length
        } else {
          this.more = '更多'
          this.limitSys = 18
        }
      },
      currentSys(index, val) {
        for (let i = 0; i < this.system.length; i++) {
          for (let j = 0; j < this.system[i].length; j++) {
            let def = this.system[i][j].DefClass
            for (let k = 0; k < def.length; k++) {
              def[k].show = k == index ? true : false
              this.$emit('systemCode', def[k].Code)
            }
          }
        }
        let params = {
          GroupId: this.dictionary.groupId,
          Type: this.dictionary.dictionaryType,
          ProjectId: this.dictionary.projectId,
          Filters: `prodCode='${val.Code}';BrandID='${this.$route.query.BrandID}'`
        }
        prodTypeQuery(params, res => {
          this.total = res.Total
          this.table = res.Content.map(i => ({...i, Brand: this.$route.query}))
        })
      },
      deleteCurrent(index) {
        for (let i = 0; i < this.system.length; i++) {
          for (let j = 0; j < this.system[i].length; j++) {
            let def = this.system[i][j].DefClass
            for (let k = 0; k < def.length; k++) {
              def[k].show = k == index ? false : true
            }
          }
        }
        this.getProductList()

      }
    }
  }
</script>
<style lang="scss" scoped>
  .mt90 {
    margin-top: 90px;
  }

  .mt20 {
    margin-top: 20px;
  }

  .por {
    position: relative;
  }

  .poa {
    position: absolute;
  }

  .saga-brand-box {
    width: 100%;
    padding: 16px;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 1);

    .breadcrumb-content {
      display: flex;
      border-bottom: 1px solid #EFF0F1;
      padding-bottom: 20px;

      .total {
        text-align: right;
        color: #8D9399;
        right: 0;
        margin-right: 30px;

        b {
          color: #1F2429;
        }
      }

      .select {
        margin-left: 20px;
        display: inline-block;
        background: #EFF0F1;
        padding: 0 10px;
        line-height: 22px;
        cursor: pointer;
        margin-top: -3px;
      }
    }

    .device-sys {
      display: flex;
      margin-top: 10px;
      border-bottom: 1px solid #EFF0F1;
      padding-bottom: 10px;

      .left {
        padding-top: 6px;
        color: #8D9399;
        width: 120px;
      }

      .right {
        width: 100px;
        text-align: center;
        padding-top: 6px;

      }

      .main {
        color: #1F2429;
        width: 1020px;

        ul {
          li {
            display: inline-block;
            line-height: 25px;
            max-width: 98px;
            /*min-width: 80px;*/
            text-align: left;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            cursor: pointer;
            margin-right: 40px;
          }
        }
      }
    }

    /deep/ .el-breadcrumb__item:first-child .el-breadcrumb__inner:first-child {
      color: #8D9399
    }

    .dark {
      color: #8D9399
    }

    .light {
      color: #3A8DDE;
    }
  }

</style>
