<script>
import {mapState} from "vuex";

export default {
  name: "AppAccountConfigManage",
  label: "配置管理",
  props: {
    instance: Function,
    dict: Object,
    permissions: Function
  },
  data() {
    return {
      columns: [
        {label: "序号", type: "index"},
        {label: "账号", prop: "userName"},
        {label: "姓名", prop: "name"},
        {label: "角色", prop: "roleName"},
        {label: "所属端", prop: "type", dict: "roleType", width: 120, align: 'center'},
        {label: "状态", prop: "configStatus", dict: "configStatus", width: 120, align: 'center'},
      ],
      tableData: [],
      page: {pageNum: 1, pageSize: 10, total: 0},
      search: {name: ""},
      dialog: false,
      userId: "",
      treeData: []
    }
  },
  computed: {
    ...mapState(['user'])
  },
  methods: {
    getTableData() {
      this.instance.post("/user/config/page", null, {
        params: {...this.page, ...this.search}
      }).then(res => {
        if (res?.data) {
          this.tableData = res.data?.records
          this.page.total = res.data.total
        }
      })
    },
    getTreeData() {
      const {userId} = this
      this.instance.post("/siteUser/querySiteByUserId", null, {params: {userId}}).then(res => {
        if (res?.data) {
          this.treeData = res.data
        }
      })
    },
    handleDelete(node) {
      this.$confirm("是否要删除该节点?").then(() => {
        this.instance.post("/siteUser/del", null, {params: {ids: node.id}}).then(res => {
          if (res?.code == '0' && res?.data != 1) {
            this.$message.success("删除成功!")
            this.getTreeData()
          } else {
            this.$message.error(res.msg)
          }
        })
      })
    },
    createNode(data) {
      this.$prompt("请输入名称").then(({value}) => {
        const {userId} = this
        this.instance.post("/siteUser/add", null, {params: {name: value, parentId: data.id, userId}}).then(res => {
          if (res?.code == '0' && res?.data != 1) {
            this.$message.success("新增成功!")
            this.getTreeData()
          } else {
            this.$message.error(res.msg)
          }
        })
      })
    }
  },
  created() {
    this.dict.load("roleType", "configStatus")
    this.getTableData()
  }
}
</script>

<template>
  <ai-page class="AppAccountConfigManage" :title="$options.label">
    <ai-search-bar>
      <template #right>
        <el-input size="small" placeholder="搜索账号" v-model="search.name" clearable
                  @change="page.pageNum=1, getTableData()" @getList="getTableData"/>
      </template>
    </ai-search-bar>
    <ai-table :tableData="tableData" :colConfigs="columns" :dict="dict" @getList="getTableData"
              :total="page.total" :current.sync="page.pageNum" :size.sync="page.pageSize">
      <el-table-column slot="options" label="操作" fixed="right" align="center">
        <template slot-scope="{row}">
          <div class="table-options">
            <el-button type="text" @click="dialog=true,userId=row.id">配置</el-button>
          </div>
        </template>
      </el-table-column>
    </ai-table>
    <ai-dialog v-model="dialog" title="认证材料" width="500px" @close="userId=''"
               @open="getTreeData" customFooter>
      <el-button class="mar-b8" type="primary" @click="createNode(treeData)">新增根节点</el-button>
      <el-tree :data="treeData" :props="{label:'name'}" default-expand-all>
        <template slot-scope="{node,data}">
          <div class="flex" style="width: 100%">
            <span class="fill" v-text="node.label"/>
            <el-button size="mini" type="text" @click="createNode(data)">增加子节点</el-button>
            <el-button size="mini" type="text" @click="handleDelete(data)">删除</el-button>
          </div>
        </template>
      </el-tree>
      <el-button slot="footer" @click="dialog=false,getTableData()">关闭</el-button>
    </ai-dialog>
  </ai-page>
</template>

<style scoped lang="scss">
.AppAccountConfigManage {
  height: 100%;
}
</style>
