<template>
  <section class="addAccountRole">
    <ai-detail>
      <ai-title slot="title" :title="pageTitle" isShowBottomBorder isShowBack @onBackClick="$router.push({})"/>
      <template #content>
        <ai-card title="基本信息">
          <template #content>
            <el-form size="small" label-width="120px">
              <el-form-item required label="账号角色名称">
                <el-input clearable v-model="roleName" placeholder="请输入..."/>
              </el-form-item>
            </el-form>
          </template>
        </ai-card>
        <ai-card title="角色信息(必选)">
          <template #content>
            <el-form size="small" label-width="120px">
              <el-form-item required label="角色列表">
                <div class="roleList">
                  <p class="input">
                    <el-input placeholder="请输入..." size="small" v-model="filterText" suffix-icon="iconfont iconSearch">
                    </el-input>
                    <el-button icon="iconfont iconDelete" size="small" @click="filterText=''">清空</el-button>
                  </p>
                  <div class="tree_list">
                    <el-tree
                        class="filter-tree"
                        :data="roleList"
                        show-checkbox
                        :props="defaultProps"
                        default-expand-all
                        :check-strictly="true"
                        node-key="id"
                        :default-checked-keys="defaultId"
                        :filter-node-method="filterNode"
                        ref="tree">
                    </el-tree>
                  </div>
                </div>
              </el-form-item>
            </el-form>
          </template>
        </ai-card>
      </template>
      <template #footer>
        <el-button @click="toAppRole">取消</el-button>
        <el-button type="primary" @click="confirm">保存</el-button>
      </template>
    </ai-detail>
  </section>
</template>
<script>

export default {
  name: "addAccountRole",
  inject: {instance: {}},
  data() {
    return {
      roleName: '',
      id: '',
      roleList: [],
      searchVal: '',
      defaultProps: {
        children: 'roles',
        label: 'name'
      },
      treeList: [],
      defaultId: [],
      filterText: ''
    }
  },
  computed: {
    isAdd() {
      return !this.$route.query?.info?.id
    },
    pageTitle() {
      return this.isAdd ? "新增账号角色" : "编辑账号角色"
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  created() {
    this.getAppList();
    if (JSON.stringify(this.$route.query) != '{}') {
      this.roleName = this.$route.query.info.name;
      this.id = this.$route.query.info.id;
      this.$route.query.info.appRoleList.forEach(e => {
        this.defaultId.push(e.id)
      })
    }
  },
  methods: {
    //查询下拉列表
    getAppList() {
      this.instance.post(`/admin/role-app/list-all`).then(res => {
        if (res.code == 0) {
          this.roleList = res.data;
          this.roleList.forEach(e => {
            e.disabled = true;
          })
        }
      })
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    confirm() {
      let crr = [];
      let arrCheckList = [];
      arrCheckList = this.$refs.tree.getCheckedKeys();
      for (let i = 0; i < arrCheckList.length; i++) {
        crr.push(arrCheckList[i]);
      }
      if (!this.roleName) {
        this.$message.error('请输入账号角色名称')
        return;
      }
      if (crr.length == 0) {
        this.$message.error('请选择角色列表')
        return;
      }
      this.instance.post(`/admin/role-acc/modify?appRoles=${crr}`, null, {
        params: {
          roleName: this.roleName,
          id: this.id
        }
      }).then(res => {
        if (res?.code == 0) {
          this.$message({message: '保存成功', type: 'success'});
          this.toAppRole()
        }
      })
    },
    //取消 返回
    toAppRole() {
      this.$router.push({})
    }
  }
}
</script>
<style lang="scss" scoped>
.addAccountRole {
  height: 100%;

  .roleList {
    display: inline-block;
    width: 340px;
    height: 420px;
    background-color: #fcfcfc;
    border-radius: 2px;
    border: solid 1px #d0d4dc;

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

    .tree_list {
      height: 370px;
      overflow: auto;
    }
  }
}
</style>
