<template>
  <view>
    <xd-right-to-left
      :show.sync="uiShow"
      min-width="90vw"
      :bar-height="100"
      :z-index="2001"
      :click-mash-close="true"
    >
      <view class="xd-filter__dailog">
        <view class="xd-filter__dailog-item" v-for="(item,index) in filterList" :key="item.id">
          <view class="xd-filter__dailog-show-more">
            <view>{{item.title}}</view>
            <view
              style="display: flex"
              v-if="item.showMore"
              @click="handleShowMore(item,index,item.close)"
            >
              <text style="margin-right: 5px">{{ item.showMoreText }}</text>
              <xd-font-icon
                :icon="
                    item.close ? 'iconjiantouxia' : 'iconicon_arrow_top'
                  "
                size="22"
              ></xd-font-icon>
            </view>
          </view>
          <view class="xd-filter__dailog-item-buttons">
            <view v-for="(BItem,BIndex) in item.options" :key="BItem.id">
              <xd-tag
                :selected="BItem.selected"
                :inverted="!BItem.selected"
                width="150"
                type="primary"
                radius="10rpx"
                @click="handleSelect(item,BItem,BIndex,index)"
              >{{ BItem.label }}
              </xd-tag
              >
            </view>
          </view>
        </view>

        <view class="xd-filter__dailog-btn">
          <view>
            <xd-button
              @click="handleClear"
              radius="10rpx"
              type="default"
              size="mini"
            >重置
            </xd-button
            >
          </view>
          <view>
            <xd-button
              @click="handleConfirm"
              radius="10rpx"
              type="primary"
              size="mini"
            >确认
            </xd-button
            >
          </view>
        </view>
      </view>
    </xd-right-to-left>

  </view>
</template>

<script>
  import XdRightToLeft from "../XdRightToLeft/XdRightToLeft";
  import XdTag from "../XdTag/XdTag";
  import XdFontIcon from "../XdFontIcon/XdFontIcon";
  import XdButton from "../XdButton/XdButton";

  /**
   * XdTabScroll 全局Ui
   * @description 左右滚动项目路径
   * @property list {String} 父组件传进来的数据 默认：null
   * @property show {Boolean} 弹框是否展示
   * @property max {Number} 单个区块最大展示tag数
   *
   * @event {Function} confirm    改变事件
   */
  export default {
    name: 'XdFilter',
    components: {
      XdRightToLeft,
      XdTag,
      XdFontIcon,
      XdButton
    },
    props: {
      list: {
        type: Array | null,
        default() {
          return []
        }
      },
      show: {
        type: Boolean,
        default: false
      },
      max: {
        type: Number,
        default: 9
      }
    },
    data() {
      return {
        uiShow: false,
        selectList: {}, //选中列表
        uiList: [],

        testList: [
          {
            title: '国产/进口',
            key: 'import',
            top_show: 1,
            multiple: true,
            options: [
              {
                label: '国产',
                key: 'attr-6-国产',
                selected: true,
              },
              {
                label: '进口',
                key: 'attr-6-进口',
                selected: false
              }, {
                label: '进口',
                key: 'attr-6-进口',
                selected: false
              },
              {
                label: '进口',
                key: 'attr-6-进口',
                selected: false
              },
              {
                label: '进口',
                key: 'attr-6-进口',
                selected: false
              },
              {
                label: '进口',
                key: 'attr-6-进口',
                selected: false
              },
              {
                label: '进口',
                key: 'attr-6-进口',
                selected: false
              },
              {
                label: '进口',
                key: 'attr-6-进口',
                selected: false
              },
              {
                label: '进口',
                key: 'attr-6-进口',
                selected: false
              },
              {
                label: '进口',
                key: 'attr-6-进口',
                selected: false
              },
              {
                label: '进口',
                key: 'attr-6-进口',
                selected: true
              }
            ]
          },
          {
            title: '尺寸(英寸)',
            key: 'size',
            multiple: true,
            top_show: 1,
            options: [
              {
                label: '1英寸',
                key: 'attr-5-1英寸',
                selected: false
              },
              {
                label: '2英寸',
                key: 'attr-5-2英寸',
                selected: false
              },
              {
                label: '10寸',
                key: 'attr-5-10寸',
                selected: false
              }
            ]
          },
          {
            title: '口味',
            key: 'taste',
            top_show: 1,
            multiple: false,
            options: [
              {
                label: '原味',
                key: 'attr-2-原味',
                selected: false
              },
              {
                label: '奶油',
                key: 'attr-2-奶油',
                selected: false
              },
              {
                label: '巧克力',
                key: 'attr-2-巧克力',
                selected: false
              }
            ]
          },
          {
            title: '人群',
            key: 'people',
            top_show: 1,
            multiple: false,
            options: [
              {
                label: '小朋友',
                key: 'attr-1-小朋友',
                selected: false
              },
              {
                label: '爱人',
                key: 'attr-1-爱人',
                selected: false
              },
              {
                label: '长辈',
                key: 'attr-1-长辈',
                selected: false
              }
            ]
          },
          {
            title: '使用人数',
            key: 'number',
            top_show: 1,
            multiple: false,
            options: [
              {
                label: '2人',
                key: 'attr-7-2人',
                selected: false
              },
              {
                label: '3-6人',
                key: 'attr-7-3-6人',
                selected: false
              },
              {
                label: '6-10人',
                key: 'attr-7-6-10人',
                selected: false
              }
            ]
          }
        ],
        filterList: [], //展示的数组
        all: [], //完整的筛选选项
        spliceList: [], //截取后的数组
      };
    },

    watch: {
      show(val) {
        this.uiShow = val;
      },

      uiShow(value) {
        this.$emit('update:show', value);
      }
    },

    computed: {},

    created() {
      if (this.list === null) {
        this.uiList = this.$xdUniHelper.cloneDeep(this.testList);
      } else {
        this.uiList = this.$xdUniHelper.cloneDeep(this.list);
      }
      this.uiShow = this.show;
      this.init()
    },

    mounted() {

    },

    methods: {
      init() {
        //1、将请求数据处理为两个数组：（1）、包含全部过滤选项的数组 （2）、截取后的数组
        this.uiList.map((item, index) => {
          //(1) 检查是否有默认选中项
          let flag = item.options.some(item => item.selected)
          if (flag) {
            this.selectList[item.key] = []
          }
          item.options.map((SItem, SIndex) => {
            SItem.id = SIndex;
            SItem.parent_id = index
            if (SItem.selected) {
              //(2) 添加默认选中项
              this.selectList[item.key].push(SItem)
            }
          })
          this.all.push(item.options)
          if (item.options.length > this.max) {
            this.spliceList.push(this.$xdUniHelper.cloneDeep(item.options).splice(0, this.max))
          } else {
            this.spliceList.push(item.options)
          }
        })

        //2、对最终展示的数组的options进行默认赋值
        this.filterList = this.uiList.map((item, index) => {
          if (item.options.length > this.max) {
            item['showMore'] = true
            item['showMoreText'] = '展开'
            item['close'] = true
          }
          item.options = this.spliceList[index]
          item.id = index
          return item
        })
      },

      // 展示更多列表
      handleShowMore(item, index, val) {
        //1、val为true时，需要展开列表，文本为'关闭 2、val为false时，需要关闭列表，文本为展开
        if (val) {
          let temp = this.$xdUniHelper.cloneDeep(this.all[index])
          for (let key in this.selectList) {
            if (key === item.key) {
              temp.map(MItem => {
                MItem.selected = false
                this.selectList[key].map(SItem => {
                  if (SItem.key === MItem.key && SItem.id === MItem.id) {
                    MItem.selected = SItem.selected
                  }
                })
              })
            }
          }
          this.filterList[index]['close'] = !val
          this.filterList[index]['showMoreText'] = '关闭'
          this.filterList[index]['options'] = temp
        } else {
          let temp = this.$xdUniHelper.cloneDeep(this.spliceList[index])
          for (let key in this.selectList) {
            if (key === item.key) {
              temp.map(MItem => {
                MItem.selected = false
                this.selectList[key].map(SItem => {
                  if (SItem.key === MItem.key && SItem.id === MItem.id) {
                    MItem.selected = SItem.selected
                  }
                })
              })
            }
          }
          this.filterList[index]['close'] = !val
          this.filterList[index]['showMoreText'] = '展开'
          this.filterList[index]['options'] = temp
        }

      },

      // 选中过滤项
      handleSelect(item, BItem, BIndex, index) {
        //1、获取selectList的key集合
        let keys = Object.keys(this.selectList)
        //2、判断当前区块是否操作过，如果操作过直接进行添加或者删除，如果没有在selectList中添加对应的数组
        if (!keys.find(KItem => item.key === KItem)) {
          this.selectList[item.key] = []
        }
        //3、判断是多选区块还是但选区块
        if (item.multiple) {
          BItem.selected = !BItem.selected
          BItem.multiple = item.multiple
          //4、多选状态下判断是选中还是取消选中
          if (BItem.selected) {
            //5、处理多选下选择不限的情况
            if(BItem.value === 0) {
              this.selectList[item.key] = []
                this.filterList.map((SItem, index, arr) => {
                  if (SItem.key === item.key) {
                    SItem.options.map(MItem => {
                      if (MItem.value !== 0) {
                        MItem.selected = false
                      }
                    })
                  }
                })
              this.selectList[item.key].push(BItem)
            } else {
              this.selectList[item.key].map((SItem, index, arr) => {
                if (SItem.value === 0) {
                  arr.splice(index, 1)
                }
              })

              this.filterList.map((SItem, index, arr) => {
                if (SItem.key === item.key) {
                  SItem.options.map(MItem => {
                    if (MItem.value === 0) {
                      MItem.selected = false
                    }
                  })
                }
              })
              this.selectList[item.key].push(BItem)
            }

          } else {
            this.selectList[item.key].map((SItem, index, arr) => {
              if (SItem.id === BItem.id && SItem.parent_id === BItem.parent_id) {
                arr.splice(index, 1)
              }
            })
          }
        } else {
          BItem.selected = true
          BItem.multiple = item.multiple
          //4、单选状态下替换
          this.selectList[item.key].splice(0, 1, BItem)
          this.filterList.map((SItem, index, arr) => {
            if (SItem.key === item.key) {
              SItem.options.map(MItem => {
                if (MItem.id !== BItem.id) {
                  MItem.selected = false
                }
              })
            }
          })
        }
        // }
        this.$emit('onChange', this.selectList)
      },

      /**
       * @description 重置
       */
      handleClear() {
        if(Object.keys(this.selectList).length > 0) {
          for (let key in this.selectList) {
            this.selectList[key] = []
          }

          this.filterList.map(item => {
            item.options.map(SItem => {
              if (SItem.value === 0) {
                SItem.selected = true
                this.selectList[item.key] = []
                this.selectList[item.key].push(SItem)
              } else {
                SItem.selected = false
              }
            })
          })
        }
        this.$emit('clear')
      },

      /**
       * @description 确认
       */
      handleConfirm() {
        this.$emit('confirm', this.selectList)
      }
    }
  }
</script>

<style lang="less">
  .xd-filter {
    &__dailog {
      padding: unit(70, rpx) unit(10, rpx) 0;

      &-item {
        padding: 0 unit(12, rpx);
        margin-top: unit(20, rpx);

        &-buttons {
          display: flex;
          justify-content: flex-start;
          flex-wrap: wrap;

          & > view {
            flex-shrink: 0;
            margin-left: unit(20, rpx);
            margin-top: unit(20, rpx);
          }

        }

        & > view:first-child {
          height: unit(40, rpx);
          line-height: unit(40, rpx);
          font-size: @xd-font-size-base;
          font-weight: bold;
        }
      }

      &-btn {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: unit(80, rpx);
        padding-bottom: unit(20, rpx);

        & > view {
          width: 46%;
          margin: 0 unit(12, rpx);
        }
      }

      &-show-more {
        display: flex;
        justify-content: space-between;
      }
    }

  }

</style>
