<template>
  <div class="select-check">
    <p><span @touchstart.capture="open">{{text}}<icon class="Icon" type="warn"></icon></span></p>
    <transition name="component-fade" mode="out-in">
      <div class="select-content" v-if="show">
        <p class="select-up">请选择<icon class="Icon Icon_up" type="warn"></icon></p>
        <div>
          <checker
            class="checkbox"
            v-model="checkList"
            type="checkbox"
            default-item-class="select-item"
            selected-item-class="select-item-selected"
            @on-change="selected"
            >
            <checker-item v-for="item in list" :key="item.id" :value="item.id" >{{item.value}}</checker-item>
          </checker>
          <x-button class="select-btn" @click.native="submit">确　定</x-button>
        </div>
      </div>
    </transition>
    <!-- </transition-group> -->
    
  </div>
</template>
<script>
/*
  下拉多选
  数据：
  checkList: 选中列表集合;
  list: 选项列表集合;

  方法：
  selected: 选项发生改变之后的回调，返回选中项的id;
  submit: 点击确定之后的回调;
*/
  import { XButton, Checker, CheckerItem, Icon } from 'vux'
  export default {
    components: {
      XButton,
      Checker,
      CheckerItem,
      Icon
    },
    props: {
      text: {
        type: String,
        default: '请选择'
      },
      list: {
        type: Array,
        default: []
      },
      checkedList: {
        type: Array,
        default: []
      }
    },
    data () {
      return {
        show: false,
        checkList: []
      }
    },
    created () {
      let text;
      if (this.checkedList.length != 0) {
        text = '已选择' + this.checkedList.length + '个选项';
      } else {
        text = '请选择'
      }
      this.$emit('change-text', text)
    },
    mounted () {
      // console.warn(this.checkedList)
      this.checkList = this.checkedList
    },
    methods: {
      open () {
        this.show = true;
      },
      selected () {
        let text;
        if (this.checkList.length != 0) {
          text = '已选择' + this.checkList.length + '个选项';
        } else {
          text = '请选择'
        };
        this.$emit('change-text', text)
        this.$emit('change', this.checkList)
      },
      submit () {
        if (this.checkList.length > 0) {
          let text = '已选择' + this.checkList.length + '个选项';
          this.$emit('change-text', text)
          this.show = false;
        } else {
          this.$vux.toast.show({
            text: '请选择内容',
            type: 'text'
          })
        }
      }
    }
  }
</script>
<style lang="less" scoped>
  .select-check {
    p {
      font-size: 16px;
      color: #333;
      text-align: right;
      padding: 10px 5px 10px 0;
      border-bottom: 1px solid #d6d7dc;
      .Icon {
        position: relative;
        font-size: 0;
        margin-left: 15px;
      }
      .Icon:before {
        width: 0;
        height: 0;
      }
      .Icon:after {
        content: " ";
        display: inline-block;
        height: 10px;
        width: 10px;
        border-width: 2px 2px 0 0;
        border-color: #C8C8CD;
        border-style: solid;
        transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
        position: relative;
        top: -2px;
        position: absolute;
        top: 50%;
        margin-top: -8px;
        right: 2px;
      }
      .Icon_up {
        margin-left: 22px;
      }
      .Icon_up:after {
        border-width: 0 2px 2px 0;
        margin-top: -11px;
      }
    }
    .checkbox {
      padding: 10px 0;
      display: flex;
      flex-flow: row wrap;
      justify-content: space-between;
      .select-item {
        background-color: #f6f6f6;
        color: #999;
        font-size: 14px;
        text-align: center;
        padding: 5px 10px;
        margin-bottom: 10px;
        line-height: 18px;
        border: 1px solid #f6f6f6;
        border-radius: 5px;
        flex: 0 0 18%;
        box-sizing: border-box;
      }
      .select-item-selected {
        background-color: #c4d4e7;
        color: #999;
        border-color: #c4d4e7;
      }
      .select-item-disabled {
        color: #999;
      }
    }
    .select-btn {
      background-color: #c4d4e7;
      font-size: 16px;
      color: #fff;
      &:after{
        border: 0;
      }
      &:not(.weui-btn_disabled):active {
        background-color: #89a9cf;
        color: #fff;
      }
    }
  }
.component-fade-enter-active, .component-fade-leave-active {
  transition: opacity .3s ease;
}
.component-fade-enter, .component-fade-leave-to {
  opacity: 0;
}
</style>