<template>
  <div class="view-user">
    <el-row :gutter="20" align="middle" type="flex">
      <el-col :span="12">
        <div class="grid-content bg-purple">
          <el-button type="success" class="btn" @click="addUser">新增</el-button>
          <el-button type="warning" class="btn" @click="deleteBtn()">删除</el-button>
        </div>
      </el-col>
      <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple">
          <el-input placeholder="请输入用户名/登录账号/所属部门" v-model="keyword" class="input-with-select">
            <el-button slot="append" icon="el-icon-search" @click="findUser"></el-button>
          </el-input>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="20" align="middle" type="flex">
      <el-col :span="24">
        <LTable :pagination="pagination" :dataSource="tableData" ref="Ltable" :options="options" :fetch="getUserList" :columns="columns" @select-all="selectAll" @selection-change="selection"></LTable>
      </el-col>
    </el-row>
    <CrudDialog v-bind="modalConfig" ref="NewDialogRef" @crudDialogSubmit="crudDialogSubmit"></CrudDialog>
    <RoleDialog ref="RoleDialog" @handSubmit="handSubmit" />
  </div>
</template>

<script>
import RoleDialog from './roleDialog.vue'
import { userList, addUser, deleteUser, changeStatus, deptTree, userUpdate } from '@/api/system/user'
import { getAvmatCategoriesTree } from '@/api/basicData/dataSailingMaterialClassification'
import { columns, options, modalConfig } from './index'
import { useMessage } from '@/utils/element-ui'
import { constructThree } from '@/utils/index'

export default {
  name: 'SysUser',
  components: { RoleDialog },
  data() {
    // 这里存放数据
    return {
      keyword: '',
      options,
      tableData: [],
      modalConfig: modalConfig(this),
      columns: columns(this),
      // 当前行row的数据
      prowersetuprow: {},
      // 弹出框显示和隐藏
      powersetupdialogboole: false,
      removeArr: [],
      pagination: {
        total: 0,
        pageSize: 10,
        pageIndex: 1
      },
      valueOptions: [],
      majorOptions: []
    }
  },

  mounted() {
    this.getDeptTree()
    this.initGetAvmatCategoriesTree()
  },

  methods: {
    async getDeptTree() {
      const { data, code } = await deptTree()
      if (code == 200) {
        this.valueOptions = data
        this.modalConfig.formItems[2].valueOptions = data
      }
    },

    async initGetAvmatCategoriesTree() {
      const { data, code } = await getAvmatCategoriesTree()
      if (code == 200) {
        this.modalConfig.formItems[3].valueOptions = [{ avmatCategoriesName: '全部', avmatCategoriesId: '*', children: data }]
      }
    },

    async findUser() {
      const { data, code } = await userList({ ...this.pagination, pageIndex: 1, keyword: this.keyword })
      if (code == 200) {
        this.tableData = data.list
        this.pagination.total = data.totalCount
      }
    },

    async getUserList() {
      const { data, code } = await userList(this.pagination)
      if (code == 200) {
        this.tableData = data.list
        this.pagination.total = data.totalCount
      }
    },
    handSubmit() {
      this.getUserList()
    },
    addUser() {
      let config = {
        type: 'add',
        dataShow: {
          gender: 1
        }, // 回填的值（字段对应上）
        title: '新增用户'
      }
      this.modalConfig.formItems[1].disabled = false
      this.$refs.NewDialogRef.open(config)
    },

    async crudDialogSubmit(data) {
      const { dialogData, type } = data
      if (type == 'upDate') {
        const { code } = await userUpdate(dialogData)
        if (code == 200) {
          this.getUserList()
          this.$message({
            type: 'success',
            message: '编辑成功!'
          })
        }
      }
      if (type == 'add') {
        const { code } = await addUser(dialogData)
        if (code == 200) {
          this.getUserList()
          this.$message({
            type: 'success',
            message: '新增成功!'
          })
        }
      }
    },

    // 全选
    selectAll(data) {
      this.removeArr = []
      if (data.length > 0) {
        data.forEach((item) => {
          this.removeArr.push(item.userId)
        })
      } else {
        this.removeArr = []
      }
    },
    // 单选
    selection(data) {
      this.removeArr = []
      data.forEach((item) => {
        this.removeArr.push(item.userId)
      })
    },

    compileBtn(row) {
      let config = {
        type: 'upDate',
        dataShow: row,
        title: '编辑用户'
      }
      this.modalConfig.formItems[1].disabled = true

      this.$refs.NewDialogRef.open(config)
    },

    toggle(selectRow, statu) {
      this.$confirm(`是否${statu}选中用户`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const { code } = await changeStatus({ userId: selectRow, status: statu == '启用' ? 0 : 1 })
          if (code == 200) {
            this.getUserList()
            this.$refs.Ltable.clearSelection()
            this.$message({
              type: 'success',
              message: '操作成功!'
            })
          }
        })
        .catch(() => {})
    },

    async deleteBtn() {
      this.$confirm('是否确认删除选中数据', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const { code } = await deleteUser(this.removeArr.join(','))
          if (code == 200) {
            this.getUserList()
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.$refs.Ltable.clearSelection()
          }
        })
        .catch(() => {})
    },
    handRemove(row) {
      this.$confirm('是否确认删除该数据', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const { code } = await deleteUser(row.userId)
          if (code == 200) {
            this.getUserList()
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
          }
        })
        .catch(() => {})
    },

    refurbish(code, msg) {
      useMessage(code == '200' ? 'success' : 'error', msg)
      this.getlistUser()
      this.$refs.Ltable.clearSelection()
    },

    powerSetup(row) {
      this.$refs.RoleDialog.openRoleDialog(row)
    }
  }
}
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
