<!--
  @description:搜索商品导航标签
  @Modifier：haoFx
  @routerPath:
  @date：  2019/10/13-14:28
-->
<template>
  <div>
    <div class="item-class-show">
      <ul
        class="item-class-group"
        style="padding:0 15px;"
      >
        <li style="margin-top:10px;border-bottom:1px dashed #ccc;padding:5px 0;">
          <el-row>
            <el-col :span="2" class="item-class-name">
              品&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;牌 :
            </el-col>
            <el-col :span="19" class="item-class-select">
              <div :class="[tagsInfo[0].isMore?'hidden':'no_hidden']">
                <span class="cursor">
                  <button
                    :class="{ color: hasBrand ? false : true, el_i: true}"
                    @click="clickNoTag('品牌')"
                  >
                    不限
                  </button>
                </span>
                <span v-for="(item, index) in tagsInfo[0].tags" ref="item" :key="index" class="cursor">
                  <el-checkbox
                    v-if="!tagsInfo[0].isCheck"
                    v-model="item.checked"
                    :data-id="index"
                    :data-flag="tagsInfo[0].tagName"
                    @change="changeChecked($event,0,item,index,index)"
                  />
                  <!-- 如果是多选加color和是当前点击的name名称   -->
                  <button
                    :data-id="index"
                    :data-flag="tagsInfo[0].tagName"
                    :disabled="tagsInfo[0].disable"
                    :class="{color:item.checked||activescAddClick===item.attrName,el_i:!item.checked}"
                    @click="add(item,index,tagsInfo[0].tagName)"
                  >{{ item.attrName }}</button>
                </span>
              </div>
            </el-col>
            <el-col v-if="tagsInfo[0].tags != 0" :span="3">
              <span class="sm-wrap cursor more" style="cursor: pointer;" @click="openMore(0)">
                {{ tagsInfo[0].isMore?'更多':'收起' }}
                <i
                  :class="[tagsInfo[0].isMore?'el-icon-arrow-down':'el-icon-arrow-up']"
                />
              </span>
              <span class="sm-wrap cursor more" style="cursor: pointer;" @click="openCheck(0, '品牌')">
                {{ tagsInfo[0].isCheck?'多选':'取消' }}
                <i
                  :class="[tagsInfo[0].isCheck?'el-icon-plus':'el-icon-minus']"
                />
              </span>
            </el-col>
          </el-row>
        </li>
        <li style="margin-top:10px;border-bottom:1px dashed #ccc;padding:5px 0;">
          <el-row>
            <el-col :span="2" class="item-class-name">
              供&nbsp;&nbsp;应&nbsp;&nbsp;商 :
            </el-col>
            <el-col :span="19" class="item-class-select">
              <div :class="[tagsInfo[1].isMore?'hidden':'no_hidden']">
                <span class="cursor">
                  <button
                    :class="{ colors: hasSupplier ? false : true, el_is: true}"
                    @click="clickNoTag('供应商')"
                  >
                    不限
                  </button>
                </span>
                <span v-for="(item,indexs) in tagsInfo[1].tags" ref="item" :key="indexs" class="cursor">
                  <el-checkbox
                    v-if="!tagsInfo[1].isCheck"
                    v-model="item.checked"
                    :data-id="indexs"
                    :data-flag="tagsInfo[1].tagName"
                    @change="changeChecked($event,1,item,indexs,indexs)"
                  />
                  <button
                    :data-id="indexs"
                    :data-flag="tagsInfo[1].tagName"
                    :disabled="tagsInfo[1].disable"
                    :class="{color:item.checked||navindex===item.attrName,el_i:!item.checked}"
                    @click="adds(item,indexs,tagsInfo[1].tagName)"
                  >{{ item.attrName }}</button>
                </span>
              </div>
            </el-col>
            <el-col v-if="tagsInfo[1].tags != 0" :span="3">
              <span class="sm-wrap cursor more" style="cursor: pointer;" @click="openMore(1)">
                {{ tagsInfo[1].isMore?'更多':'收起' }}
                <i
                  :class="[tagsInfo[1].isMore?'el-icon-arrow-down':'el-icon-arrow-up']"
                />
              </span>
              <span class="sm-wrap cursor more" style="cursor: pointer;" @click="openCheck(1, '供应商')">
                {{ tagsInfo[1].isCheck?'多选':'取消' }}
                <i
                  :class="[tagsInfo[1].isCheck?'el-icon-plus':'el-icon-minus']"
                />
              </span>
            </el-col>
          </el-row>
        </li>
        <li style="margin-top:10px;border-bottom:1px dashed #ccc;padding:5px 0;">
          <el-row>
            <el-col :span="2" class="item-class-name">
              价&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格 :
            </el-col>
            <el-col :span="19" class="item-class-select">
              <div :class="[tagsInfo[2].isMore?'hidden':'no_hidden']">
                <span class="cursor">
                  <button
                    :class="{ colory: activesc ? false : true, el_iy: true}"
                    @click="clickNoTag('价格')"
                  >
                    不限
                  </button>
                </span>
                <span v-for="(item,i) in tagsInfo[2].tags" ref="item" :key="i" class="cursor">
                  <button
                    :data-id="i"
                    :data-flag="tagsInfo[2].tagName"
                    :disabled="tagsInfo[2].disable"
                    :class="activesc === item.attrName?'colory':'el_iy'"
                    @click="addy(item,i,tagsInfo[2].tagName)"
                  >{{ item.attrName }}</button>
                </span>
              </div>
            </el-col>
          </el-row>
        </li>
      </ul>
      <el-row v-if="isShow" class="item-class-group">
        <el-col :span="2" class="item-class-name">
          有无库存:
        </el-col>
        <el-col :span="19" class="item-class-select cursor">
          <span>
            <el-checkbox v-model="checked" @change="checkCilck">有库存</el-checkbox>
          </span>
        </el-col>
      </el-row>
      <el-row class="item-class-group" style="margin-top:5px;">
        <el-col :span="2" class="item-class-name">
          已选条件:
        </el-col>
        <el-col :span="21" class="cursor">
          <el-tag
            v-for="tag in searchTags"
            :key="tag.name"
            :disable-transitions="true"
            closable
            class="tagSpan"
            @close="handleClose(tag)"
          >
            {{ tag.name }}
          </el-tag>
        </el-col>
      </el-row>
    </div>
    <div class="s-more">
      <span class="sm-wrap cursor" style="cursor:pointer;" @click="opened">
        {{ isShow?'收起':'展开' }}
        <i :class="[isShow?'el-icon-arrow-up':'el-icon-arrow-down']" />
      </span>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: 'GoodsClassSearchNav',
  props: {
  },
  data() {
    return {
      listData: [],
      datas: [],
      activesc: '',
      activescAddClick: '',
      text: '',
      navindex: 0,
      type: '2',
      searchTags: [], // 筛选条件集合
      checked: true, // 有无库存
      isShow: true,
      tagsInfo: [
        {
          tagName: '品牌',
          tags: []
        },
        {
          tagName: '供应商',
          tags: []
        },
        {
          tagName: '价格',
          tags: []
        }
      ]
    }
  },
  computed: {
    ...mapGetters(['searchNavData']),
    // searchTags中品牌的数量
    hasBrand() {
      let num = 0
      this.searchTags.forEach(item => {
        if (item.flag === '品牌') {
          num++
        }
      })
      return num
    },
    // searchTags中供应商的数量
    hasSupplier() {
      let num = 0
      this.searchTags.forEach(item => {
        if (item.flag === '供应商') {
          num++
        }
      })
      return num
    }
  },
  watch: {
    searchNavData(val) {
      this.searchTags = []
      this.activesc = ''
      this.activescAddClick = ''
      this.navindex = ''
      if (val) {
        this.tagsInfo[0].tags = val.attrRelated.attrs
        this.tagsInfo[1].tags = val.departs
        this.tagsInfo.forEach(vals => {
          vals.isMore = true
          vals.isCheck = true
          vals.disable = false
          vals.tags.forEach(ele => {
            ele.checked = false
            ele.disable = false
          })
        })
        this.tagsInfo[2].tags = [
          { attrName: '500元以下' },
          { attrName: '500-2000元' },
          { attrName: '2000-4000元' },
          { attrName: '4000-6000元' },
          { attrName: '6000元以上' }
        ]
      }
    }
  },
  mounted() {
    // 获取品牌数据
    setTimeout(() => {
      if (this.searchNavData.attrRelated) {
        this.searchNavData.attrRelated.attrs.forEach(element => {
          element.departmentName = element.attrName
        })
        this.tagsInfo[0].tags = this.searchNavData.attrRelated.attrs
      } else {
        this.tagsInfo[0].tags = []
      }
      this.tagsInfo[1].tags = this.searchNavData.departs
      this.tagsInfo[2].tags = [
        { attrName: '500元以下' },
        { attrName: '500-2000元' },
        { attrName: '2000-4000元' },
        { attrName: '4000-6000元' },
        { attrName: '6000元以上' }
      ]
    }, 200)
    setTimeout(() => {
      this.tagsInfo.forEach(val => {
        val.isMore = true
        val.isCheck = true
        val.disable = false
        if (val.tags !== undefined) {
          val.tags.forEach(ele => {
            ele.checked = false
            ele.disable = false
          })
        }
      })
    }, 500)
  },
  methods: {
    // 点击不限tag
    clickNoTag(flag) {
      const lenArr = this.searchTags.filter(item => item.flag === flag)
      for (let i = 0; i < lenArr.length; i++) {
        this.handleClose(lenArr[i])
      }
    },
    // 有无库存
    checkCilck() {
      this.$emit('watchChilds', this.checked)
    },
    // 更多
    openMore(index) {
      const obj = this.tagsInfo[index]
      obj.tags.splice(40, obj.tags.length)
      obj.isMore = !obj.isMore
      this.$set(this.tagsInfo, index, obj)
    },
    // 多选
    openCheck(index, flag) {
      switch (index) {
        case 0:
          this.activescAddClick = ''
          break
        case 1:
          this.navindex = ''
          break
        case 2:
          this.activesc = ''
          break
      }
      // 清空 searchTags中 当前 flag 所有的 tag
      const resTags = this.searchTags.filter(val => val.flag !== flag)
      this.searchTags = resTags
      // 清空当前 flag 所有的 tag 的checked
      this.tagsInfo[index].tags.forEach(ele => {
        ele.checked = false
      })
      // 修改当前 tagsInfo 的 isCheck与disable
      const obj = this.tagsInfo[index]
      obj.isCheck = !obj.isCheck
      obj.disable = !obj.disable
      this.$set(this.tagsInfo, index, obj)

      this.$emit('watchChild', this.searchTags)
    },
    // 收起展开
    opened() {
      this.isShow = !this.isShow
    },
    // 多选
    changeChecked($event, infoIndex, item, index, i) {
      const obj = this.tagsInfo[infoIndex].tags[i]
      obj.checked = $event
      // 如果选中某一个搜索条件，就把选中状态改变，重新赋值
      this.$set(this.tagsInfo[infoIndex].tags[i], i, obj)
      if ($event) {
        // 如果选中，就在搜索条件里面添加该选中项
        const result = {}
        result.id = item.id
        result.flag = this.tagsInfo[infoIndex].tagName
        result.name = item.attrName
        this.searchTags.push(result)
        const flagobj = {}
        this.searchTags = this.searchTags.reduce(function(item, next) {
          flagobj[next.name] ? '' : (flagobj[next.name] = true && item.push(next))
          return item
        }, [])
      } else {
        // 如果没有选中，就去遍历所有的条件，看是否有选中的值
        this.tagsInfo[infoIndex].tags.forEach(val => {
          val.flag = this.tagsInfo[infoIndex].tagName
          val.name = val.attrName
          if (val.checked) {
            for (let i = 0; i < this.searchTags.length; i++) {
              if (this.searchTags[i].name !== val.attrName) {
                this.searchTags.push(val)
              }
            }
          } else {
            for (let i = 0; i < this.searchTags.length; i++) {
              if (this.searchTags[i].name === val.attrName) {
                this.searchTags.splice(i, 1)
              }
            }
          }
        })
        const result = {}
        this.searchTags = this.searchTags.reduce(function(item, next) {
          result[next.name] ? '' : (result[next.name] = true && item.push(next))
          return item
        }, [])
      }
      this.$emit('watchChild', this.searchTags)
    },
    // 选择品牌
    add(item, dataId, dataFlag) {
      this.activescAddClick = item.attrName
      const obj = {}
      obj.id = dataId
      obj.flag = dataFlag
      obj.name = item.attrName
      obj.checked = true
      // 如果供应商为单选
      if (this.tagsInfo[1].isCheck) {
        if (!this.searchTags.length) {
          this.searchTags.push(obj)
        } else {
          // 判断如果搜索条件里面，已经添加过某种搜索条件，就替换
          for (let i = 0; i < this.searchTags.length; i++) {
            if (this.searchTags[i].flag === obj.flag) {
              this.searchTags.splice(i, 1, obj)
            } else {
              this.searchTags.push(obj)
            }
          }

          // 把最终的搜索条件去重
          const result = {}
          this.searchTags = this.searchTags.reduce(function(item, next) {
            result[next.flag] ? '' : (result[next.flag] = true && item.push(next))
            return item
          }, [])
        }
      } else { // 如果供应商为多选,品牌为单选
        if (!this.searchTags.length) {
          this.searchTags.push(obj)
        } else {
          for (let i = 0; i < this.searchTags.length; i++) {
            if (this.searchTags[i].flag === obj.flag) { // obj.flag：供应商
              this.searchTags.splice(i, 1, obj)
              const searchTagsList = Array.from(new Set(this.searchTags))
              this.searchTags = searchTagsList
            } else {
              this.searchTags.push(obj)
            }
          }
        }
      }
      this.$emit('watchChild', this.searchTags)
    },
    // 选择供应商
    adds(item, dataId, dataFlag) {
      this.navindex = item.attrName
      const obj = {}
      obj.id = dataId
      obj.flag = dataFlag
      obj.name = item.attrName
      obj.checked = true
      // 如果品牌为单选
      if (this.tagsInfo[0].isCheck) {
        if (!this.searchTags.length) {
          this.searchTags.push(obj)
        } else {
        // 判断如果搜索条件里面，已经添加过某种搜索条件，就替换
          for (let i = 0; i < this.searchTags.length; i++) {
            if (this.searchTags[i].flag === obj.flag) {
              this.searchTags.splice(i, 1, obj)
            } else {
              this.searchTags.push(obj)
            }
          }

          // 把最终的搜索条件去重
          const result = {}
          this.searchTags = this.searchTags.reduce(function(item, next) {
            result[next.flag]
              ? ''
              : (result[next.flag] = true && item.push(next))
            return item
          }, [])
        }
      } else { // 如果品牌为多选,供应商为单选
        if (!this.searchTags.length) {
          this.searchTags.push(obj)
        } else {
          for (let i = 0; i < this.searchTags.length; i++) {
            if (this.searchTags[i].flag === obj.flag) { // obj.flag：供应商
              this.searchTags.splice(i, 1, obj)
              const searchTagsList = Array.from(new Set(this.searchTags))
              this.searchTags = searchTagsList
            } else {
              this.searchTags.push(obj)
            }
          }
        }
      }
      this.$emit('watchChild', this.searchTags)
    },
    // 选择价格
    addy(item, dataId, dataFlag) {
      this.activesc = item.attrName
      const obj = {}
      obj.id = dataId
      obj.flag = dataFlag
      obj.name = item.attrName
      obj.checked = true
      if (this.tagsInfo[0].isCheck && this.tagsInfo[1].isCheck) {
        if (!this.searchTags.length) {
          this.searchTags.push(obj)
        } else {
        // 判断如果搜索条件里面，已经添加过某种搜索条件，就替换
          for (let i = 0; i < this.searchTags.length; i++) {
            if (this.searchTags[i].flag === obj.flag) {
              this.searchTags.splice(i, 1, obj)
            } else {
              this.searchTags.push(obj)
            }
          }

          // 把最终的搜索条件去重
          const result = {}
          this.searchTags = this.searchTags.reduce(function(item, next) {
            result[next.flag] ? '' : (result[next.flag] = true && item.push(next))
            return item
          }, [])
        }
      } else {
        if (!this.searchTags.length) {
          this.searchTags.push(obj)
        } else {
          for (let i = 0; i < this.searchTags.length; i++) {
            if (this.searchTags[i].flag === obj.flag) {
              this.searchTags.splice(i, 1, obj)
              const searchTagsList = Array.from(new Set(this.searchTags))
              this.searchTags = searchTagsList
            } else {
              this.searchTags.push(obj)
            }
          }
        }
      }
      this.$emit('watchChild', this.searchTags)
    },
    handleClose(tag) {
      // this.searchTags.splice(this.searchTags.indexOf(tag), 1)
      // 判断筛选条件组合里面，含有清除筛选条件的id,把选种情况改为false
      for (let i = 0; i < this.tagsInfo.length; i++) {
        if (this.tagsInfo[i].tagName === tag.flag) {
          this.tagsInfo[i].tags.forEach(ele => {
            if (ele.attrName === tag.name) {
              switch (i) {
                case 0:
                  ele.checked = false
                  // 删除已选择的品牌
                  this.activescAddClick = ''
                  break
                case 1:
                  ele.checked = false
                  this.navindex = ''
                  break
                case 2:
                  ele.checked = false
                  this.activesc = ''
                  break
              }
            }
          })
        }
      }
      this.searchTags.splice(this.searchTags.indexOf(tag), 1)
      this.$emit('watchChild', this.searchTags)
    }
  }
}
</script>

<style scoped lang="less">
.item-class-show {
  width: 100%;
  background-color: #f1f1f1;
  padding-top: 10px;
  padding-bottom: 10px;
  .item-class-group {
    padding: 0 15px;
    .item-class-name {
      padding-left: 15px;
      line-height: 44px;
      color: #666;
      line-height: 35px;
      text-align: right;
    }
    .item-class-select span {
      margin: 5px 0 5px 15px;
      color: #666;
      line-height: 35px;
      border-right: 1px solid #ccc;
      padding-right: 15px;
      height: 33px;
      &:last-child {
        border-right: none;
      }
    }
    .tagSpan {
      height: 35px;
      line-height: 35px;
      color: #666;
      margin: 0 0 3px 15px;
      padding: 0 10px 0 10px;
      border-right: 1px solid #ccc;
    }
  }
}
.s-more {
  text-align: center;
  position: relative;
  top: -1px;
  background: #fff;
  .sm-wrap {
    width: 150px;
    position: relative;
    display: inline-block;
    margin-top: -1px;
    height: 28px;
    line-height: 28px;
    background-color: #f1f1f1;
    color: #666;
    i {
      margin-left: 12px;
    }
  }
}
.more {
  background: #fff;
  padding: 5px 8px;
  display: inline-block;
  margin-top: 3px;
  color: #666;
}
.hidden {
  height: 33px;
  overflow: hidden;
}
.el_i {
  border: none;
  background: none;
  color: #666;
}
.color {
  color: #ff6600;
  border: none;
  background: none;
}
.el_is {
  border: none;
  background: none;
  color: #666;
}
.colors {
  color: #ff6600;
  border: none;
  background: none;
}
.el_iy {
  border: none;
  background: none;
  color: #666;
}
.colory {
  color: #ff6600;
  border: none;
  background: none;
}
</style>
