<template>
  <el-dialog
    :close-on-click-modal="false"
    :title="title"
    :type="type"
    :visible.sync="isVisible"
    width="60%"
    top="50px"
    class="group-dialog"
  >
    <div class="add-dialog-component">
      <el-form
        ref="form"
        :model="params"
        label-width="80px"
      >
        <el-form-item label="页面名称">
          <el-input
            v-model="params.name"
            :disabled="isCheck"
          />
        </el-form-item>
      </el-form>
      <div class="add-btn-wrap">
        <el-button
          class="add"
          type="primary"
          size="small"
          @click="onSubmit"
        >确定</el-button>
        <el-button
          class="add"
          size="small"
          @click="close"
        >取消</el-button>
      </div>
    </div>
  </el-dialog>
</template>
<script>
import Custom from '@/api/Custom'
let id = 1000
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    type: {
      type: String,
      default: 'add'
    }
  },
  data () {
    return {
      params: {
        config: '',
        isCustom: true,
        isDelete: 0,
        name: ''
      },
      treeData: []
    }
  },
  computed: {
    isVisible: {
      get () {
        return this.dialogVisible
      },
      set () {
        this.close()
        this.reset()
      }
    },
    title () {
      const stateMap = {
        add: '添加页面',
        edit: '修改页面',
        check: '查看页面'
      }
      return stateMap[this.type]
    },
    isCheck () {
      return this.type === 'check'
    }
  },
  methods: {
    close () {
      this.$emit('close')
    },
    reset () {
      this.params = {
        config: '',
        isCustom: true,
        isDelete: 0,
        name: ''
      }
      this.treeData = []
    },
    addCustom () {
      this.treeData.push({
        placeholder: '输入一级索引',
        addTips: '添加二级目录',
        categoryName: '',
        categoryPath: '',
        depth: 1,
        id: id++
      })
      console.log(this.treeData)
    },
    append (data) {
      const { categoryName } = data
      const depth = data.depth + 1
      let newChild
      if (depth < 3) {
        newChild = {
          placeholder: '输入二级索引',
          addTips: '添加三级目录',
          depth,
          parentName: categoryName,
          categoryName: '',
          categoryPath: '',
          childs: [],
          id: id++
        }
        if (!data.childs) {
          this.$set(data, 'childs', [])
        }
      } else {
        newChild = {
          parentName: categoryName,
          categoryName: '',
          id: id++
        }
      }
      data.childs.push(newChild)
    },
    remove (node, data) {
      const parent = node.parent
      const children = parent.data.childs || parent.data
      const index = children.findIndex(d => d.id === data.id)
      children.splice(index, 1)
    },
    onSubmit () {
      if (this.type === 'add') {
        this.addGroup()
      } if (this.type === 'edit') {
        this.updateGroup()
      } else {
        this.isVisible = false
      }
    },
    async addGroup () {
      const res = await Custom.addTemplate(this.params)
      const resData = res.data
      const { code } = resData
      if (code === 0) {
        this.isVisible = false
        this.$message({
          message: this.$t('tips.createSuccess'),
          type: 'success'
        })
        this.$emit('success')
      }
    },
    async updateGroup () {
      const res = await Custom.updateTemplate(this.params)
      const resData = res.data
      const { code } = resData
      if (code === 0) {
        this.isVisible = false
        this.$message({
          message: this.$t('tips.updateSuccess'),
          type: 'success'
        })
        this.$emit('success')
      }
    },
    setParams (val = []) {
      const vm = this
      if (val['params']) {
        vm.params = val['params']
      }
    }
  }
}
</script>
<style lang="less">
.add-dialog-component {
  .tree-box {
    .el-tree-node__content {
      margin-bottom: 15px;
      height: auto;
    }
  }
}
</style>
<style lang="less" scoped>
.add-dialog-component {
  padding: 15px 20px;
  max-height: 60vh;
  overflow: auto;
  .add-btn-wrap {
    text-align: center;
  }
}
</style>
