<template>
  <div>
    <div class="saga-brand-box mt90 por">
      <div class="breadcrumb-content">
        <div style="width: 1020px">
          <el-breadcrumb
            separator-class="el-icon-arrow-right"
            style="max-width: 470px;display: inline-block"
          >
            <el-breadcrumb-item>所有分类</el-breadcrumb-item>
            <el-breadcrumb-item>{{this.$route.query.major}}</el-breadcrumb-item>
            <el-breadcrumb-item>{{this.$route.query.system}}</el-breadcrumb-item>
            <el-breadcrumb-item>{{this.$route.query.class}}</el-breadcrumb-item>
          </el-breadcrumb>
          <span
            v-for="(item,index) in allSelect"
            :key="index"
            v-if="item.check && item.name != '全部'"
            class="select"
          >{{item.BrandCname}}
          <i class="el-icon-close" @click="deleteCurrent(item,index)"></i></span>
        </div>


        <span class="total poa">共<b>{{total}}</b>件相关产品</span>
      </div>
      <div class="device-sys">
        <div class="left">品牌:</div>

        <div class="main" :class="more=='收起'? 'mt30':''">
          <ul v-if="more=='更多'">
            <li
              v-for="(item,index) in allDate"
              :key="index"
              v-if="index < 9"
              v-show="item.name != '全部'"
              :class="item.check ?'light':''">
                <span @click="handleCurrentBrand(item,index)" style="cursor: pointer">
                  {{item.BrandCname}}
                </span>
            </li>
          </ul>
          <template v-else>
            <div :class="more=='收起' ? 'check':''">
              <span
                class="saga-product-letter"
                v-for="(list, letter,index) in brandList"
                :key="index"
                @click="handleLetter(index,list,letter)"
                :class="idx=== index?'litter-light':''"
              > {{letter}}</span>
            </div>
            <ul>
              <li
                v-for="(item,index) in allDate"
                :key="index"
                v-show="item.name != '全部'"
                :class="item.check ?'light':''">
                <span @click="handleCurrentBrand(item,index)" style="cursor: pointer">
                  {{item.BrandCname}}
                </span>
              </li>
            </ul>
          </template>
        </div>
        <div class="right" :class="more == '更多' ? 'dark' :'light'" style="position:relative;">
          <el-dropdown @command="handleCommand" style="line-height: 40px;" v-show="more=='收起'"
                       :class="more=='收起'?'pos-drop':''">
        <span class="el-dropdown-link">
          {{sortName}}<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-for="(val, key) in sortMap" :key="key" :command="key">{{val}}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <p style="cursor: pointer;" @click="allData" :class="more=='收起'? 'pos-down':''">{{more}}
            <span :class="more=='更多' ? 'el-icon-caret-bottom':'el-icon-caret-top'"></span>
          </p>
        </div>
      </div>
    </div>
    <div class="saga-brand-box mt20">
      <detailTable :table="table"/>
    </div>
  </div>

</template>

<script>
  import detailTable from "../../public/detailTable";
  import {prodTypeQuery} from "@/api/product"
  import {brandQueryByClass} from "@/api/brand"
  import {mapGetters} from "vuex"


  export default {
    data() {
      return {
        idx: 0,
        more: '更多',
        isShow: true,
        brandList: [],
        allDate: [],
        temporary: [],//全部数据
        allSelect: [],//选择的数据
        sortMap: {
          zh: "中文排序",
          en: "英文排序",
        },
        sortName: "中文排序",
        sort: "zh",
        total: 0,
        table: []

      }
    },
    components: {detailTable},
    created() {
      this.getDate()
      this.getProductList()
    },
    mounted() {
    },
    computed: {
      ...mapGetters('layout', ['dictionary']),
    },
    methods: {
      getDate() {
        let param = {
          GroupId: this.dictionary.groupId,
          ProjectId: this.dictionary.projectId,
          Type: this.sort,
          ClassCode: this.$route.query.code,
          Orders: 'name asc, createTime desc'
        }
        brandQueryByClass(param, res => {
          this.brandList = res.Content ? res.Content[0] : []
          this.brandList = Object.assign({
            '全部': [{
              name: '全部'
            }
            ]
          }, this.brandList)
          this.temporary = []
          this.allDate = []
          this.allSelect = []
          for (let key in this.brandList) {
            if (Array.isArray(this.brandList[key])) {
              let list = this.temporary.concat(this.brandList[key])
              list.map(i => this.$set(i, 'check', false))
              this.temporary = list
              this.allDate = list
              this.allSelect = list
            }
          }
        })
      },
      getProductList() {
        let params = {
          "Cascade": [
            {"Name": "brand"}
          ],
          Filters: `prodCode='${this.$route.query.code}'`
        }
        prodTypeQuery(params, res => {
          this.total = res.Total
          this.table = res.Content.map(i => ({...i, brandName: i.Brand.BrandCname}))
        })
      },
      handleCommand(command) {// 切换排序方式
        this.sortName = this.sortMap[command]
        this.sort = command
        this.idx = 0
        this.getDate()
        this.getProductList()
      },
      allData() {
        this.isShow = !this.isShow
        if (this.isShow) {
          this.more = '收起'
        } else {
          this.more = '更多'
        }
      },
      handleLetter(index, list, letter) {
        this.idx = index
        this.allDate = list
        if (index == 0) {
          this.allDate = this.temporary
        }
      },
      handleCurrentBrand(item, index) {
        item.check = !item.check
        this.allSelect.map((i, idx) => {
          if (idx == index) {
            i.check = item.check
          }
        })
        this.handleQuery(this.allSelect)
      },
      deleteCurrent(item, index) {
        item.check = false
        this.allSelect.map((i, idx) => {
          if (idx == index) {
            i.check = item.check
          }
        })
        this.handleQuery(this.allSelect)
      },
      handleQuery(arr) {
        let filter = this.allSelect.filter(i => i.check), str = ''
        str = filter.map(i => `brandID='${i.BrandID}'`).join(' or ')
        if (str) {
          let params = {
            "Cascade": [
              {"Name": "brand"}
            ],
            Filters: `prodCode='${this.$route.query.code}';(${str})`

          }
          prodTypeQuery(params, res => {
            this.total = res.Total
            this.table = res.Content.map(i => ({...i, brandName: i.Brand.BrandCname}))
          })
        } else {
          this.getProductList()
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
  .mt90 {
    margin-top: 90px;
  }

  .mt20 {
    margin-top: 20px;
  }

  .mt30 {
    margin-top: 30px;
  }

  .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: 20px;
        cursor: pointer;
        margin-top: -3px;
        margin-bottom: 10px;
      }
    }

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

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

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

      }

      .main {
        color: #1F2429;
        width: 1020px;
        max-height: 150px;
        overflow: auto;

        ul {
          li {
            display: inline-block;
            line-height: 25px;
            width: 230px;
            margin-right: 20px;
            text-align: left;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            cursor: pointer;
          }
        }
      }

      .saga-product-letter {
        display: inline-block;
        padding: 3px;
        background: #EEEEEE;
        margin-right: 5px;
        font-size: 12px;
        cursor: pointer;
      }
    }

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

    .dark {
      color: #8D9399
    }

    .light {
      color: #3A8DDE;
    }

    .litter-light {
      background: #D1E3F4 !important;
      color: #3A8DDE;
    }

    .check {
      position: absolute;
      top: 5px;
    }

    .pos-drop {
      top: -10px;
      left: -80px;

    }

    .pos-down {
      position: relative;
      top: -38px;
    }
  }

</style>
