<template>
  <a-select v-bind="$attrs" v-model="innerValue" show-arrow @change="onChange">
    <img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
    <div slot="dropdownRender" slot-scope="menu">
      <v-nodes :vnodes="menu" />
      <a-divider style="margin: 0;" />
      <div
        style="padding: 4px 12px; cursor: pointer;"
        @mousedown="e => e.preventDefault()"
      >
        <a-checkbox v-model="allVal" @change="checkedAll"><span @click.prevent="handleClick">ALL</span></a-checkbox>
      </div>
    </div>
  </a-select>
</template>
<script>
export default {
  props: {
    value: {
        type: [String, Number, Array],
    },
    allChecked: {
      type: Boolean,
      default:false
    }
  },
  components: {
    VNodes: {
      functional: true,
      render: (h, ctx) => ctx.props.vnodes,
    },
  },
  data() {
    return {
      innerValue: this.value,
      allVal:this.allChecked
    }
  },
  methods: {
    checkedAll(val) {
      this.$emit('changeAll', val.target.checked)
    },
    handleClick(e) {
      console.log("dfasdfasfad", e);
      this.allVal = !this.allVal
      this.$emit('changeAll', this.allVal)
    },
    onChange(val) {
      this.$emit('input', val)
      this.$emit('change', val)
    }
  },
  watch: {
    value: {
      handler(val) {
        this.innerValue = val
      },
      deep: true
    },
    allChecked: {
      handler(val) {
        this.allVal = val
      }
    }
  }
}
</script>
<style lang="less" scoped>
.ant-select {
  width: 100%;
  .ant-select-arrow-icon {
    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  }
  &-open {
    .ant-select-arrow-icon {
      transform: rotate(180deg);
    }
  }
}
.ant-select-dropdown-content{
  position: relative;
  background: #03353f;
}
</style>
