<template>
  <div class="aegle-drop-sel-box">
    <!-- <div class="aegle-drop-sel" :style="{borderRadius: dropDownVisible && isSel ? '4px 4px 0 0' : '4px'}" v-clickoutside="() => toggleDropDownVisible(false)"> -->
    <div class="aegle-drop-sel" :style="{borderRadius: dropDownVisible && isSel ? '4px 4px 0 0' : '4px'}">
      <div class="aegle-drop-head" @click="changeVisibale(!dropDownVisible)" :style="{borderColor: dropDownVisible ? '#eee' : '#F6F9FF'}">
        <el-checkbox @change="changeValue" v-model="values" :disabled="disabled" @click.stop.native="" :label="label"></el-checkbox>
        <i v-if="isSel" @click.stop="changeVisibale(!dropDownVisible)" class="el-icon-arrow-down" :class="{down: dropDownVisible}"></i>
      </div>
    </div>
    <el-collapse-transition v-if="isSel">
      <div v-show="dropDownVisible && isSel" class="aegle-drop-wrapper"><slot></slot></div>
    </el-collapse-transition>
  </div>
</template>
<script>
import { isDef } from 'element-ui/src/utils/shared';
export default {
    name: 'SpDropSel',
  model: {
    props: 'value',
    event: 'change'
  },
  props: {
    value: [String,Number],
    disabled: {
      type: Boolean,
      default: false
    },
    isSel: {
      type: Boolean,
      default: false
    },
    label: {
      type: String,
      default: 'String'
    }
  },
  // directives: { Clickoutside },
  watch: {
    value(v){
      this.values = v == 1 ? true : false
      this.dropDownVisible = this.isSel && v ? true :false
      // if(!v){
      //   this.dropDownVisible = false
      // }
    },
    dropDownVisible(){
      // this.$forceUpdate()
    }
  },
  data() {
    return {
      dropDownVisible: false,
      values: ''
    }
  },
  created() {
    // this.dropDownVisible = !this.disabled
    this.dropDownVisible = this.isSel && this.value == 1 ? true : false;
  },
  methods: {
    changeVisibale(){
      if(this.values){
        this.toggleDropDownVisible(!this.dropDownVisible)
      }
    },
    toggleDropDownVisible(visible) {
      const { dropDownVisible } = this;
      visible = isDef(visible) ? visible : !dropDownVisible;
      if (visible !== dropDownVisible) {
        this.dropDownVisible = visible;
      }
    },
    changeValue(e) {
      this.toggleDropDownVisible(e ? true : false)
      this.$emit('change',this.values ? 1 : 0)
    }
  },
  mounted() {
    this.values = this.value == 1 ? true : false;
  }
}
</script>
<style lang="less" scoped>
.aegle-drop-sel {
  border: 1px solid #eeeeee;
  border-radius: 4px;
  position: relative;
  box-sizing: border-box;
  .aegle-drop-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 12px;
    height: 42px;
    background: #f6f9ff;
    i {
      color: rgba(0,0,0,0.2);
      transform: rotate(0deg);
      transition: transform linear 300ms;
    }
    .down {
      transform: rotate(-180deg);
      transition: transform linear 300ms;
    }
  }
  
}
.aegle-drop-sel-box {
  // position: absolute;
  // top: 0;
  // left: 0;

  .aegle-drop-wrapper {
    height: auto;
    box-sizing: border-box;
    // width: calc(100% + 2px);
    background-color: #fff;
    padding: 12px;
    border: 1px solid #eeeeee;
    border-top: none;
    border-radius: 0 0 4px 4px;
    position: relative;
    .symptom-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      text-align: left;
      color: rgba(0,0,0,0.60);
      margin: 12px 0 4px;
      sup {
        color: #E92626;
      }
      span:last-child {
        color: rgba(0,0,0,0.40);
      }
    }
  }
}
</style>