<template>
  <ai-detail class="rightsAdd">
    <ai-title :title="addTitle" slot="title" isShowBottomBorder isShowBack @onBackClick="back"/>
    <template #content>
      <el-form size="small" ref="rightsForm" :model="form" label-width="120px" :rules="rules">
        <ai-card title="基本信息">
          <template #content>
            <el-form-item label="应用角色名称" prop="roleName">
              <el-input v-model="form.roleName" placeholder="请输入应用角色名称" clearable/>
            </el-form-item>
          </template>
        </ai-card>
        <ai-card title="权限信息">
          <template #content>
            <el-form-item label="应用" prop="appId">
              <ai-select placeholder="请选择应用" v-model="form.appId" :selectList="top.appList"
                         @change="getPermissions"/>
            </el-form-item>
            <el-form-item label="权限列表" prop="menus" v-if="form.appId">
              <div class="roleList">
                <el-input v-model="filterText" placeholder="请输入..." clearable suffix-icon="iconfont iconSearch"
                          @change="$refs.tree.filter(filterText)" :validate-event="false"/>
                <div class="tree_list">
                  <el-tree class="filter-tree" ref="roleTree"
                           :data="roleList"
                           show-checkbox
                           :props="defaultProps"
                           default-expand-all
                           :check-strictly="false"
                           node-key="id"
                           :default-checked-keys="form.menus"
                           :filter-node-method="filterNode"
                           @check="handleMenusSelect"/>
                </div>
              </div>
            </el-form-item>
          </template>
        </ai-card>
      </el-form>
    </template>
    <template #footer>
      <el-button @click="back()">取消</el-button>
      <el-button type="primary" @click="confirm">保存</el-button>
    </template>
  </ai-detail>
</template>
<script>

export default {
  name: "rightsAdd",
  inject: ['top'],
  props: {
    instance: Function,
    dict: Object,
    permissions: Function
  },
  data() {
    return {
      form: {},
      roleName: '',
      id: '',
      appList: [],
      roleList: [],
      defaultProps: {
        children: 'list',
        label: 'name'
      },
      treeList: [],
      filterText: '',
      msgTitle: '添加',
    }
  },
  created() {
    if (this.isEdit) {
      let {id, appId, name: roleName} = this.$route.query
      this.form = {appId, menus: [], id, roleName}
      this.getPermissions()
      this.msgTitle = '编辑'
    }
  },
  computed: {
    isEdit() {
      return this.$route.query.id
    },
    addTitle() {
      return this.isEdit ? '编辑应用角色' : '新增应用角色'
    },
    rules() {
      return {
        roleName: {required: true, message: '请输入应用角色名称'},
        appId: {required: true, message: '请选择应用'},
        menus: {required: true, message: '请选择权限列表内容'},
      }
    }
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    //应用名称选择 获取权限列表
    getId(data) {
      if (data.list.length) {
        data.list.forEach(item => {
          this.getId(item)
        })
      } else {
        if (data.checked) {
          this.form.menus?.push(data.id)
        }
      }
    },
    getPermissions() {
      this.filterText = ''
      let {appId: id, id: roleId} = this.form
      this.instance.post(this.top.actions.detail, null, {
        params: {id, roleId}
      }).then(res => {
        if (res?.data) {
          this.roleList = [res.data];
          if (this.isEdit) {
            this.roleList.forEach(e => this.getId(e))
          }
          this.roleList = this.roleList.filter(item => !(item.component && item.isApp == 0 && item.isMenu == 0))
        }
      })
    },
    handleMenusSelect(node, selected) {
      this.$set(this.form, 'menus', [...selected?.checkedKeys])
      this.$refs.rightsForm.validateField('menus')
    },
    //保存提交
    confirm() {
      this.$refs.rightsForm.validate(v => {
        if (v) {
          let menus = [this.$refs.roleTree?.getHalfCheckedKeys(), this.$refs.roleTree?.getCheckedKeys()]?.flat()?.toString()
          this.instance.post(this.top.actions.modify, null, {
            params: {...this.form, menus}
          }).then(res => {
            if (res?.msg == "success") {
              this.$message.success(`${this.msgTitle}应用角色成功`)
              this.back()
              this.top.searchList()
            }
          })
        }
      })
    },
    //取消 返回
    back() {
      this.$router.push({})
    }
  }
}
</script>
<style lang="scss" scoped>
.rightsAdd {
  width: 100%;
  height: 100%;
  position: relative;

  .el-form-item {
    .el-select {
      width: 100%;
    }

    &.is-error {
      .roleList {
        border-color: #f46;
      }
    }
  }

  .roleList {
    background-color: #fcfcfc;
    border-radius: 2px;
    border: solid 1px #d0d4dc;
    padding: 8px;

    .input {
      display: flex;
      justify-content: space-between;
      padding: 5px;
      margin: 0;
    }

    .tree_list {
      padding: 5px;
      height: 370px;
      overflow: auto;
    }
  }

}
</style>
