<template>
  <div>
    <el-dialog title="项目权限列表" :visible.sync="dialog" width="950px" :close-on-click-modal="false" top="50px">
      <el-tree
        v-loading="loading"
        :data="treeData"
        ref="tree"
        node-key="id"
        :auto-expand-parent="false"
        @node-expand="openTreeNode"
        @node-collapse="closeTreeNode"
        :default-expanded-keys="openTreeNodeArr"
        :props="defaultProps">
                <span class="custom-tree-node" slot-scope="{ node, data }">
                    <span v-if="node.label">
                        <span class="marginR-10">{{ node.label }}</span>
                        <span>
                            <el-button
                              type="text"
                              size="mini"
                              v-permission="'rule_list_edit'"
                              @click.stop="() => mod(data)">
                                修改
                            </el-button>
                            <el-button
                              type="text"
                              size="mini"
                              v-permission="'rule_list_add'"
                              @click.stop="() => append(data)">
                                添加子节点
                            </el-button>
                            <el-button
                              type="text"
                              size="mini"
                              v-permission="'rule_list_del'"
                              @click.stop="() => remove(node, data)">
                                删除
                            </el-button>
                        </span>
                    </span>
                    <span v-else>
                        <div>
                            <el-button type="text" @click="append('new')"
                                       v-permission="'rule_list_add'">添加权限</el-button>
                        </div>
                    </span>
                </span>
      </el-tree>

      <div slot="footer" class="dialog-footer text-center">
        <el-button @click="dialog = false">取 消</el-button>
        <el-button type="danger" @click="handleSubmit">确 定</el-button>
      </div>
    </el-dialog>
    <ruleDialog v-if="ruleDialogData.show" v-model="ruleDialogData.show" :exData="ruleDialogData.exData"
                @success="getPermissionsTree"></ruleDialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import ruleDialog from './ruleDialog'

export default {
  props: {
    value: {
      type: Boolean,
      default: true
    },
    exData: {
      type: Object,
      default: function () {
        return {}
      }
    }
  },
  computed: {},
  components: {
    ruleDialog,
  },
  data () {
    return {
      ruleDialogData: {
        show: false,
        exData: {}
      },
      loading: true,
      defaultProps: {
        children: 'son',
        label: 'rule_title',
      },
      treeData: [],
      dialog: !!this.value,
      openTreeNodeArr: [],
    }
  },
  methods: {
    openTreeNode (obj, node) {
      this.openTreeNodeArr.push(node.key)
    },
    closeTreeNode (obj, node) {
      console.log({ node })
      this.openTreeNodeArr = this.openTreeNodeArr.filter(item => item != node.key)
    },
    mod (data) {
      this.ruleDialogData.exData = { ...data, rule_project_id: this.exData.id }
      this.ruleDialogData.show = true
    },
    append (data) {
      this.ruleDialogData.exData = {
        rule_project_id: this.exData.id,
        rule_project_name: this.exData.project_name,
        rule_pid: data == 'new' ? 0 : data.id
      }
      this.ruleDialogData.show = true
    },

    async remove (node, data) {
      this.$confirm('确定删除此条权限控制吗，前端须更改，不然无权限', '确定', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        this.delNode(data.id)
      }).catch(() => {})
    },
    async handleSubmit () {
      this.dialog = false
    },
    async delNode (id) {
      const data = await this.$fetch('/api/auth/rule/del', { id })
      if (data.code == 200) {
        this.getPermissionsTree()
      }
    },
    async getPermissionsTree () {
      this.loading = true
      const data = await this.$fetch('/api/auth/rule/list', { project_id: this.exData.id }, 'get')
      if (data.code == 200) {
        this.treeData = [...data.data, { append: 'new' }]
      }
      this.loading = false
    }
  },
  mounted () {
    this.getPermissionsTree()
  },
  watch: {
    dialog (val) {
      if (!val) this.$emit('input', val)
    }
  }
}
</script>

<style lang="scss" scoped>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  /* justify-content: space-between; */
  font-size: 14px;
  padding-right: 8px;
}
</style>
