<template>
  <div class="cascader-option">
    <Divider>选项</Divider>
    <Tree
      :data="list"
      :render="renderContent"
      class="cascader-tree"></Tree>
    <div class="options-add" @click="openModal(null,true)" v-if="!disabled">
      <Icon type="md-add-circle" :size="16" /> 添加父级
    </div>
    <Modal
      v-model="visiable"
      title="添加选项"
      @on-ok="addOptions">
        <Input v-model="label" placeholder="请输入选项名" style="marginBottom: 10px" />
        <Input v-model="value" placeholder="请输入选项值">
          <Select v-model="type" slot="append" style="width: 90px">
              <Option value="string">字符串</Option>
              <Option value="number">数字</Option>
          </Select>
        </Input>
    </Modal>
  </div>
</template>
<script>
export default {
  name: 'CascaderOption',
  props: {
    list: {
      type: Array,
      default() {
        return []
      },
    },
    isNew: Boolean,
  },
  data() {
    return {
      buttonProps: {
        type: 'default',
        size: 'small',
      },
      // 弹窗数据
      visiable: false,
      label: '',
      value: '',
      type: 'string',
      temp: null, //临时数据
      isRoot: false, //是否根数据
    }
  },
  computed: {
    //你好
    disabled() {
      return !this.isNew
    },
  },
  methods: {
    renderContent(h, { root, node, data }) {
      return h('span', {
        style: {
          display: 'inline-block',
          width: '100%',
        },
      }, [
        h('span', data.label),
        h('span', {
          style: {
            display: 'inline-block',
            float: 'right',
            marginRight: '32px',
          },
        }, this.disabled ? [] : [
          h('Button', {
            props: Object.assign({}, this.buttonProps, {
              icon: 'ios-add',
            }),
            style: {
              marginRight: '8px',
            },
            on: {
              click: () => { this.openModal(data, false) },
            },
          }),
          h('Button', {
            props: Object.assign({}, this.buttonProps, {
              icon: 'ios-remove',
            }),
            on: {
              click: () => { this.remove(root, node, data) },
            },
          }),
        ]),
      ])
    },
    remove(root, node, data) {
      const parentKey = root.find(el => el === node).parent
      //不是根节点
      if (parentKey || parentKey === 0) {
        const parent = root.find(el => el.nodeKey === parentKey).node
        const index = parent.children.indexOf(data)
        parent.children.splice(index, 1)
      } else { //根节点
        const index = this.list.indexOf(node.node)
        this.list.splice(index, 1)
      }
    },
    openModal(temp, isRoot) {
      this.visiable = true
      this.label = ''
      this.value = ''
      this.type = 'string'
      this.temp = temp
      this.isRoot = isRoot
    },
    addOptions() {
      if (this.isRoot) {
        this.list.push({
          value: this.value,
          label: this.label,
          type: this.type,
          expand: true,
        })
      } else {
        const children = this.temp.children || []
        children.push({
          value: this.value,
          label: this.label,
          type: this.type,
          expand: true,
        })
        this.$set(this.temp, 'children', children)
      }
    },
  },
}
</script>
<style lang="scss" scoped>
 .options-add{
    cursor: pointer;
    color: #17b3a3;
    padding: 5px;
    &:hover{
      color: #45c2b5;
    }
  }
 .cascader-tree ::v-deep.ivu-tree-title{
    width: 100%;
  }
  .ivu-divider{
    &::before,&::after{
      top:0%
    }
  }
</style>