<template lang="html">
  <div class="choose-material-page">
    <div v-transfer-dom>
      <x-dialog :show.sync="show" class="dialog-demo">
        <div class="material-title">请选择{{name}}</div>
        <div class="material-wrapper">
          <div class="material-classify">
            <div>
              <check-icon :value.sync="all_checked"  @click.native="checkAll(all_checked)">
                全部{{name}}（{{checkList.length}}/{{list.length}}）
              </check-icon>
              <div class="material-content">
                <checker
                  v-model="checkList"
                  type="checkbox"
                  default-item-class="item"
                  selected-item-class="item-selected"
                  disabled-item-class="item-disabled"
                  >
                    <checker-item class="brand_select" v-for="(item, index) in list" :key="index" :disabled="item.disabled" :value="item.id" @click.native="itemCheck(item.checked, index)">{{item.name}}</checker-item>
                  </checker>
              </div>
            </div>
          </div>
        </div>
        <div style="padding: 10px;">
          <flexbox>
            <flexbox-item>
              <x-button @click.native="cancel" mini style="background-color: #ffffff; color: #8EA8CF; border: 1px solid #8EA8CF; width: 100%;">关闭</x-button>
            </flexbox-item>
            <flexbox-item>
              <x-button @click.native="comfirm" mini style="background-color: #8EA8CF; color: #ffffff; border: 1px solid #8EA8CF; width: 100%;">确定</x-button>
            </flexbox-item>
          </flexbox>
        </div>
      </x-dialog>
    </div>
  </div>
</template>

<script>
import { XDialog, TransferDomDirective as TransferDom, Flexbox, FlexboxItem, CheckIcon, XButton, Checker, CheckerItem } from 'vux'
export default {
  props: ['show', 'list', 'checked_list', 'span', 'name'],
  directives: { TransferDom },
  components: { XDialog, Flexbox, FlexboxItem, CheckIcon, XButton, Checker, CheckerItem },
  beforeRouteEnter (to, from, next) {
    next()
  },
  mounted () {
    // console.warn(this.list)
    // console.warn(1)
  },
  data () {
    return {
      all_checked: true,
      checkList: []
    }
  },
  watch: {
    show (val) {
      // console.warn(val)
      this.checkList = JSON.parse(JSON.stringify(this.checked_list))
      if (val) {
        let check_list = _.filter(this.list, (val) => {
          let tem;
          if (val.disabled === false) {
            tem = val
          }
          return tem
        });
        // console.warn(check_list, this.checked_list)
        if (check_list.length > 0 && this.checked_list.length > 0 && check_list.length === this.checked_list.length) {
          this.all_checked = true
        } else {
          this.all_checked = false
        }
      } else {
        this.all_checked = false
      }
      // this.checkList = val;
      // setTimeout(() => {
      //   let arr = []
      //   for (let i = 0; i < $('.brand_select').length; i++) {
      //     arr.push($('.brand_select').eq(i).height())
      //   }
      //   let max = _.max(arr)
      //   $('.brand_select').height(max)
      // }, 100)
    }
  },
  computed: {
    // checkList () {
    //   return JSON.parse(JSON.stringify(this.checked_list));
    // }
  },
  methods: {
    checkAll (checked) {
      let check_list = _.filter(this.list, (val) => {
        let tem;
        if (val.disabled === false) {
          tem = val
        }
        return tem
      });
      // 勾选所有品牌
      if (checked) {
        // 选中
        for (let i = 0; i < check_list.length; i++) {
          check_list[i].checked = true;
        }
        this.checkList = _.map(check_list, val => val.id)
        // this.checked_list = id_list;
      } else {
        // 取消
        this.checkList = []
        for (let i = 0; i < check_list.length; i++) {
          check_list[i].checked = false;
        }
      }
    },
    itemCheck (checked, index) {
      // console.warn(this.checkList)
      let list = _.filter(this.list, (val) => {
        let tem;
        if (val.disabled === false) {
          tem = val
        }
        return tem
      });
      if (checked) {
        this.list[index].checked = false;
      } else {
        this.list[index].checked = true;
      }
      // console.warn(id_list)
      if (list.length !== this.checkList.length) {
        this.all_checked = false
      } else {
        this.all_checked = true
      }
    },
    changeCategory () {
    },
    cancel () {
      // 关闭选择框
      this.$emit('cancel', !this.show)
    },
    comfirm () {
      // 确认选择框
      this.$emit('comfirm', this.checkList)
    }
  }
}
</script>

<style lang="less">
  .material-title {
    line-height: 48px;
    font-size: 18px;
  }
  .material-classify {
    text-align: left;
    padding: 10px;
    .vux-checker-box {
      display: flex;
      flex-wrap: wrap;
    }
    .vux-check-icon {
      margin-bottom: 10px;
    }

  }
  .item {
    width: 31%;
    // flex-basis: 31%;
    line-height: 26px;
    text-align: center;
    border-radius: 3px;
    border: 1px solid #ccc;
    background-color: #f6f6f6;
    margin-bottom: 10px;
    margin-right: 2.5%;
    color: #333;
    display: flex!important;
    align-items: center;
    justify-content: center;
    &:nth-child(3n) {
      margin-right: 0;
    }
  }
  .weui-icon-circle {
    font-size: 20px!important;
  }
  .weui-icon-success {
    font-size: 20px!important;
  }
  .vux-check-icon > .weui-icon-success:before, .vux-check-icon > .weui-icon-success-circle:before {
    color: #c4d4e7 !important;
  }
  .item-selected {
    color: #2c426b;
    background-color: #c4d4e7;
  }
  .item-disabled {
    color: #cfcfcf;
    background-color: #ebeef7;
  }

  .weui-dialog {
    width: 90% !important;
    max-width: 400px;
  }

  @media screen and (min-width: 1024px) {
    .weui-dialog {
      width: 35%;
    }
  }

  .weui-btn:after {
    border: 0 !important;
  }
</style>