<template>
  <div class="choose_store_multi">
    <div v-transfer-dom>
      <x-dialog :show.sync="show" class="dialog-demo">
        <div class="store-title">{{title}}</div>
        <div class="wrap-scroll">
          <!-- <div class="store-wrapper">
            <check-icon class="store-all-checked" :value.sync="category_checked" @click.native="checkAll">
              所有品牌的门店（<span style="color: #8EA8CF;">{{category_num}}</span>/{{category_sum}}）
            </check-icon>
          </div> -->
          <div class="store-classify">
            <div v-for="(b, bi) in data_list" :key="bi">
              <div style="border-top: 1px dashed #eee; width: 100%;"></div>
              <flexbox class="brand-classify-title">
                <flexbox-item :span="10">
                  <check-icon v-if="b.city_count != 0" class="brand-classify-checked" @click.native="changeCategory(b, 'brand')" :value.sync="b.checked">
                    所有{{b.name}}门店（<span style="color: #8EA8CF;">{{b.num}}</span>/{{b.city_count}}）
                  </check-icon>
                  <check-icon v-else class="brand-classify-checked" :value="false">
                    所有{{b.name}}门店（<span style="color: #8EA8CF;">{{b.num}}</span>/{{b.city_count}}）
                  </check-icon>
                </flexbox-item>
                <flexbox-item @click.native="fold(bi, 'brand')">
                  <div style="padding-top: 0.2rem; padding-left: 0.5rem;">
                    <i class="fa fa-chevron-down" style="font-size: 0.7rem; color: #838383;"></i>
                  </div>
                </flexbox-item>
              </flexbox>
              <div class="brand-content">
                <div class="store-classify">
                  <div v-for="(c, ci) in b.city_list" :key="ci">
                    <div style="border-top: 1px dashed #eee; width: 100%;"></div>
                    <flexbox class="store-classify-title">
                      <flexbox-item style="text-indent:2px;" :span="10">
                        <check-icon v-if="c.store_count != 0" class="store-classify-checked" :value.sync="c.checked" @click.native="changeCategory(c, 'city', b)">
                          所有{{c.name}}{{b.name}}门店（<span style="color: #8EA8CF;">{{c.num}}</span>/{{c.store_count}}）
                        </check-icon>
                        <check-icon v-else class="store-classify-checked" :value="false">
                          所有{{c.name}}{{b.name}}门店（<span style="color: #8EA8CF;">{{c.num}}</span>/{{c.store_count}}）
                        </check-icon>
                      </flexbox-item>
                      <flexbox-item @click.native="fold(bi, 'store', ci)">
                        <div style="padding-top: 0.2rem; padding-left: 0.5rem;">
                          <i class="fa fa-chevron-down" style="font-size: 0.7rem; color: #838383;"></i>
                        </div>
                      </flexbox-item>
                    </flexbox>
                    <div class="store-content">
                      <div class="store-list">
                        <div v-for="(s, si) in c.store_list" :key="si" @click="itemCheck(s, b, ci)" class="store-item">
                          <div v-if="!s.disabled"
                          :class="[s.checked ? 'flex-checked' : '', 'flex-store']">
                          {{s.name}}
                          </div>
                          <div v-else class="flex-store flex-disabled"> {{s.name}} </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="control-wrapper">
          <flexbox>
            <flexbox-item>
              <x-button class="close-btn" @click.native="cancel" mini>关闭</x-button>
            </flexbox-item>
            <flexbox-item>
              <x-button class="confirm-btn" @click.native="confirm" mini>确定</x-button>
            </flexbox-item>
          </flexbox>
        </div>
      </x-dialog>
    </div>
  </div>
</template>

<script>
import { XDialog, TransferDomDirective as TransferDom, Flexbox, FlexboxItem, CheckIcon, XButton } from 'vux'
import { Observable } from 'rxjs/Rx'
export default {
  directives: { TransferDom },
  components: { XDialog, Flexbox, FlexboxItem, CheckIcon, XButton },
  props: ['show', 'list', 'title', 'checkList'],
  data () {
    return {
      data_list: [],
      category_num: 0,
      category_checked: false
    }
  },
  watch: {
    list () {
      this.data_list = [];
      this.category_num = 0;
      this.category_checked = false;
      Observable.from([...this.list])
        .map(b => {
          // 品牌
          b.checked = false;
          b.num = 0;
          b.city_count = 0;
          b.city_list.forEach(c => {
            // 城市
            let cnt = 0;
            c.checked = false;
            c.num = 0;
            // c.store_count = c.store_list.length;
            // b.city_count += c.store_count;
            c.store_list.forEach(s => {
              // 门店
              s.checked = false;
              if (!s.disabled) {
                cnt++;
              }
            })
            c.store_count = cnt;
            b.city_count += c.store_count;
          })
          return b;
        }).subscribe(v => {
          this.data_list.push(v);
          // 判断是否有已选中
          if (this.checkList.length) {
            v.city_list.forEach((c, ci) => {
              c.store_list.forEach(s => {
                this.checkList.forEach(checkStore => {
                  if (checkStore.store_id === s.store_id) {
                    this.itemCheck(s, v, ci, true)
                  }
                })
              })
            })
          }
          // 分别计算已选中的
        }).unsubscribe();
      setTimeout(() => {
        for (let i = 0; i < $('.store-item').length; i++) {
          if (i % 2 !== 0) {
            continue;
          }
          if ($($('.store-item')[i]).height() > $($('.store-item')[i + 1]).height() && $($('.store-item')[i + 1]).height() !== 0) {
            $($('.store-item')[i + 1]).children('div').css('height', $($('.store-item')[i]).height() + 'px')
          } else if ($($('.store-item')[i]).height() < $($('.store-item')[i + 1]).height()) {
            $($('.store-item')[i]).children('div').css('height', $($('.store-item')[i + 1]).height() + 'px')
          }
        }
      }, 100);
    }
  },
  computed: {
    category_sum () {
      // 获取门店总数
      let sum = 0;
      this.data_list.forEach(b => {
        b.city_list.forEach(c => {
          sum += c.store_count;
        })
      })
      return sum;
    }
  },
  methods: {
    fold (index, str, i) {
      let has_class = $($(`.${str}-classify-title`)[index]).siblings(`.${str}-content`).hasClass('fold-content');
      if (i && index - 1 >= 0) {
        // 不为第一组品牌中的城市
        index = this.data_list[index - 1].city_count + i;
      } else {
        // 不是城市或是第一组品牌中的城市
        i ? index = i : '';
      }
      if (has_class) {
        // 展开
        $($(`.${str}-classify-title`)[index]).siblings(`.${str}-content`).removeClass('fold-content');
        $($(`.${str}-classify-title`)[index]).find('i').addClass('fa-chevron-down').removeClass('fa-chevron-right');
      } else {
        // 折叠
        $($(`.${str}-classify-title`)[index]).siblings(`.${str}-content`).addClass('fold-content');
        $($(`.${str}-classify-title`)[index]).find('i').addClass('fa-chevron-right').removeClass('fa-chevron-down');
      }
    },
    itemCheck (item, b, ci, bool) {
      // 选中/取消选中单条
      // item.checked = !item.checked;
      bool ? item.checked = bool : item.checked = !item.checked;
      // 计算父类的选中个数
      if (item.checked) {
        b.num++;
        b.city_list[ci].num++;
        this.category_num++;
      } else {
        b.num--;
        b.city_list[ci].num--;
        this.category_num--;
      }
      this.checkIcon();
    },
    /*
    *   计算num数量判断逻辑：
    *     1、如果点击状态为切换状态时，不等于目标状态的门店为待切换门店。
    *     2、待切换门店切换状态时，增加或减少num（根据父类的选择状态判断）。
    *     3、切换父类状态时，需要避免计算时累加或累减之前已切换过状态且无需在切换的门店。
    *     4、只需要计算待切换状态的门店。
    *     5、根据被点击父类的状态判断是增加还是减少，选中为增，取消选中为减。
    *     6、最后根据num和count来判断子类被点击选中或取消选中时，切换父类的选中状态。
    *   ------------------------------------------------------------------------
    */
    changeCategory (item, type, brand) {
      // 选中分类
      // checkicon会自动重置，当用户看到选中时，传入的是false
      item.checked ? item.checked = true : item.checked = false;
      if (type === 'brand') {
        // 品牌分类
        Observable.from(item.city_list)
          .map(v => {
            v.checked = item.checked;
            v.store_list.forEach(s => {
              if (!s.disabled) {
                // 计算选中数量
                if (s.checked == !item.checked && item.checked) {
                  v.num++;
                  item.num++;
                  this.category_num++;
                } else if (s.checked == !item.checked && !item.checked) {
                  v.num--;
                  item.num--;
                  this.category_num--;
                }
                s.checked = item.checked;
              }
            })
            return v;
          }).subscribe().unsubscribe();
      } else if (type === 'city') {
        // 城市分类
        Observable.from(item.store_list)
        .map(v => {
          if (!v.disabled) {
            // 计算选中数量
            if (v.checked == !item.checked && item.checked) {
              brand.num++;
              item.num++;
              this.category_num++;
            } else if (v.checked == !item.checked && !item.checked) {
              brand.num--;
              item.num--;
              this.category_num--;
            }
            v.checked = item.checked;
          }
          return v;
        }).subscribe().unsubscribe();
      }
      this.checkIcon();
    },
    checkAll () {
      // 全选
      let allCheck = this.category_checked;
      allCheck ? allCheck = true : allCheck = false;
      let arr = [...this.data_list];
      this.data_list = [];
      Observable.from(arr)
        .map(v => {
          v.checked = allCheck;
          v.city_list.forEach(c => {
            c.checked = allCheck;
            c.store_list.forEach(s => {
              if (!s.disabled) {
                if (s.checked == !allCheck && allCheck) {
                  v.num++;
                  c.num++;
                  this.category_num++;
                } else if (s.checked == !allCheck && !allCheck) {
                  v.num--;
                  c.num--;
                  this.category_num--;
                }
                s.checked = allCheck;
              }
            })
          })
          return v;
        }).subscribe(v => {
          this.data_list.push(v);
        }).unsubscribe();
    },
    checkIcon () {
      // 根据选中个数和总数来判断是否让父菜单选中
      this.data_list.forEach(b => {
        b.num === b.city_count ? b.checked = true : b.checked = false;
        b.city_list.forEach(c => {
          c.num === c.store_count ? c.checked = true : c.checked = false;
        })
      })
      // 总分类数
      this.category_sum === this.category_num ? this.category_checked = true : this.category_checked = false;
      let arr = [...this.data_list];
      this.data_list.splice(0, [...arr]);
    },
    cancel () {
      this.$emit('cancel');
    },
    confirm () {
      // 返回选中
      let data = [];
      Observable.create(store$ => {
        this.data_list.forEach(b => {
          b.city_list.forEach(c => {
            c.store_list.forEach(s => {
              if (s.checked && !s.disabled) {
                s.route_name = c.name;
                store$.next(s);
              }
            })
          })
        })
      }).subscribe(v => {
        data.push(v);
      }).unsubscribe();
      if (!data.length) {
        this.$vux.toast.show({
          type: 'warn',
          text: '请至少选择一个！'
        });
        return;
      }
      this.$emit('confirm', data);
    }
  }
}
</script>

<style lang="less">
.choose_store_multi {
}
.store-title {
  padding: 0.5rem;
  font-size: 18px;
  border-bottom: 1px solid #eee;
}
.wrap-scroll {
  max-height: 30rem;
  overflow-y: auto;
}
.store-wrapper {
  text-align: left;
  .store-all-checked {
    font-size: 0.9rem;
    padding: 0.5rem 0.2rem;
  }
}

.store-classify {
  .store-classify-checked,
  .brand-classify-checked {
    font-size: 0.9rem;
    padding: 0.4rem 0.2rem 0.1rem 0.85rem;
  }
  .store-classify-title,
  .brand-classify-title {
    margin-bottom: 0.5rem;
  }
  .store-content,
  .brand-content {
    border-bottom: 1px dashed #eee;
    .store-list {
      &:after {
        display: block;
        content: "";
        clear: both;
      }
      &>div {
        float: left;
        margin-left: 2%;
        width: 48%;
        padding-bottom: 10px;
        .flex-store {
          text-align: center;
          background-color: #f6f6f6;
          color: #333;
        }
        .flex-checked {
          color: #2c426b;
          background-color: #c4d4e7;
        }
        .flex-disabled {
          color: #ccc;
          background-color: #eaeff7;
        }
      }
    }
  }
  .store-content {
    padding: 0 1rem;
  }
  .fold-content {
    height: 0;
    overflow: hidden;
    padding-bottom: 0;
  }
}
.control-wrapper {
  padding: 10px;
  .close-btn {
    background-color: #ffffff;
    color: #8EA8CF;
    border: 1px solid #8EA8CF;
    width: 100%;
  }
  .confirm-btn {
    background-color: #8EA8CF;
    color: #ffffff;
    border: 1px solid #8EA8CF;
    width: 100%;
  }
}
.vux-check-icon > .weui-icon-success:before, .vux-check-icon > .weui-icon-success-circle:before {
  color: #8ea8cf !important;
}
</style>