<template>

  <div v-if="options!== null && options.attrs!==null" class="de-select-grid-class">
    <div class="de-select-grid-search">
      <el-input v-model="keyWord" :placeholder="$t('deinputsearch.placeholder')" size="mini" prefix-icon="el-icon-search" clearable />
    </div>
    <div>
      <el-tree
        v-if="options!== null && options.attrs!==null"
        ref="deSelectGrid"
        :data="options.attrs.datas"
        :props="defaultProp"
        :indent="0"
        :filter-node-method="filterNode"
        class="de-filter-tree"
        default-expand-all
      >
        <span slot-scope="{ node, data }" class="custom-tree-node-list father">
          <span style="display: flex;flex: 1;width: 0;">
            <el-radio v-if="!options.attrs.multiple" v-model="options.value" :label="data.id" @change="changeRadioBox"><span> {{ node.label }} </span></el-radio>
            <el-checkbox v-if="options.attrs.multiple" v-model="data.checked" :label="data.id" @change="changeCheckBox(data)"><span> {{ node.label }} </span></el-checkbox>
          </span>
          <span v-if="!options.attrs.multiple && options.value && options.value === data.id" class="child">
            <span style="margin-left: 12px;" @click.stop>
              <span class="el-dropdown-link">
                <el-button
                  icon="el-icon-circle-close"
                  type="text"
                  size="small"
                  @click="cancelRadio(data)"
                />
              </span>
            </span>
          </span>
        </span>
      </el-tree>

    </div>

  </div>

</template>

<script>

export default {

  props: {
    element: {
      type: Object,
      default: null
    },
    inDraw: {
      type: Boolean,
      default: true
    },
    inScreen: {
      type: Boolean,
      required: false,
      default: true
    }
  },
  data() {
    return {
      options: null,
      // value: null,
      checked: null,
      defaultProp: {
        id: 'id',
        label: 'text',
        children: 'children'
      },
      keyWord: null
    }
  },
  computed: {
    operator() {
      return this.options.attrs.multiple ? 'in' : 'eq'
    }
  },
  watch: {
    'options.attrs.multiple': function(value) {
      const datas = JSON.parse(JSON.stringify(this.options.attrs.datas))
      this.options.attrs.datas = []
      this.options.attrs.datas = datas
      const sourceValue = this.options.value
      const sourceValid = !!sourceValue && Object.keys(sourceValue).length > 0
      if (value) {
        !sourceValid && (this.options.value = [])
        sourceValid && !Array.isArray(sourceValue) && (this.options.value = sourceValue.split(','))
        !this.inDraw && (this.options.value = [])
        this.setMutiBox()
      } else {
        !sourceValid && (this.options.value = null)
        sourceValid && Array.isArray(sourceValue) && (this.options.value = sourceValue[0])
        !this.inDraw && (this.options.value = null)
      }
    },
    keyWord(val) {
      this.$refs.deSelectGrid.filter(val)
    }
  },
  created() {
    this.options = this.element.options
    this.setMutiBox()
    this.setRadioBox()
    // this.setCondition()
  },
  mounted() {
    // this.$nextTick(() => {
    //   this.options && this.options.value && this.changeValue(this.options.value)
    // })
    this.options && this.options.value && Object.keys(this.options.value).length > 0 && this.initValue(this.options.value)
  },
  methods: {
    initValue(value) {
      // this.options.value = [value]
      this.setCondition()
    },
    setMutiBox() {
      if (this.options && this.options.attrs.multiple) {
        this.options.attrs.datas.forEach(data => {
          data.checked = (this.options.value && this.options.value.includes(data.id))
        })
      }
    },
    setRadioBox() {
      if (this.options && !this.options.attrs.multiple) {
        if (Array.isArray(this.options.value) && this.options.value.length > 0) {
          // this.value = this.options.value.length[0]
        }
      }
    },

    setCondition() {
      const param = {
        component: this.element,
        value: Array.isArray(this.options.value) ? this.options.value : [this.options.value],
        operator: this.operator
      }
      this.inDraw && this.$store.commit('addViewFilter', param)
    },
    changeCheckBox(data) {
      const values = Array.isArray(this.options.value) ? this.options.value : this.options.value ? [this.options.value] : []
      const index = values.indexOf(data.id)
      if (index < 0 && data.checked) {
        values.push(data.id)
      }
      if (index >= 0 && !data.checked) {
        values.splice(index, 1)
      }

      this.options.value = values
      this.setCondition()
    },
    changeRadioBox(value) {
      // this.options.value = []
      // if (this.value) this.options.value = [this.value]
      this.setCondition()
    },
    cancelRadio(data) {
      this.options.value = null
      this.changeRadioBox()
    },
    filterNode(value, data) {
      if (!value) return true
      return data[this.defaultProp.label].indexOf(value) !== -1
    }
  }
}
</script>

<style lang="scss" scoped>
.custom-tree-node-list {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding:0 8px;
  }
  .father .child {
    display: none;
  }
  .father:hover .child {
    display: inline;
  }
.de-filter-tree {
  >>>span.is-leaf {
    width: 5px !important;
    padding: 6px 0 !important;
  }
}
.de-select-grid-search {
  >>>input {
    border-radius: 0px;
  }
}
</style>
