<template>
  <div class="top">
    <div class="left">
      <el-button round style="float: right" type="primary" @click="addRole">添加</el-button>
      <el-table :data="roleTableData" height="300px" highlight-current-row stripe style="width: 100%"
                @row-click="roleRowClick">
        <el-table-column align="center" label="角色编号">
          <template #default="scope">
            {{ scope.row.角色编号 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="角色名称">
          <template #default="scope">
            {{ scope.row.角色名称 }}
          </template>
        </el-table-column>
        <el-table-column align="center" fixed="right" label="操作">
          <template #default="scope">
            <el-link type="error" @click="deleteRole(scope.row)">删除</el-link>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="right">
      <el-table :data="permissionTableData" height="300px" stripe style="width: 100%">
        <el-table-column align="center" label="是否分配" width="60">
          <template #default="scope">
            <el-checkbox v-model="scope.row.是否分配" :false-value="0" :true-value="1"
                         size="large" @click="setRolePermission(scope.row)"/>
          </template>
        </el-table-column>
        <el-table-column label="序号" type="index" width="80"/>
        <el-table-column align="center" label="权限模块">
          <template #default="scope">
            {{ scope.row.权限模块 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="路径">
          <template #default="scope">
            {{ scope.row.path }}
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
  <div class="main">
    <el-button round type="primary" @click="resetPeopleUpdate();showPeopleUpdate = true">添加</el-button>
    <el-table :data="peopleTableData" height="400px" stripe style="width: 100%;margin: 0 auto">
      <el-table-column label="序号" type="index" width="80"/>
      <el-table-column align="center" label="姓名">
        <template #default="scope">
          {{ scope.row.姓名 }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="角色名称">
        <template #default="scope">
          {{ scope.row.角色名称 }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="工号" width="200">
        <template #default="scope">
          {{ scope.row.登录账号 }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="登陆密码">
        <template #default="scope">
          {{ scope.row.登录密码 }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="门禁1权限">
        <template #default="scope">
          <el-tag v-if="scope.row.门禁1权限" type="success">有权限</el-tag>
          <el-tag v-if="!scope.row.门禁1权限" type="danger">无权限</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="门禁2权限">
        <template #default="scope">
          <el-tag v-if="scope.row.门禁2权限" type="success">有权限</el-tag>
          <el-tag v-if="!scope.row.门禁2权限" type="danger">无权限</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="门禁3权限">
        <template #default="scope">
          <el-tag v-if="scope.row.门禁3权限" type="success">有权限</el-tag>
          <el-tag v-if="!scope.row.门禁3权限" type="danger">无权限</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="班次">
        <template #default="scope">
          {{ scope.row.班次 }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="班组">
        <template #default="scope">
          {{ scope.row.班组 }}
        </template>
      </el-table-column>
      <el-table-column align="center" fixed="right" label="操作">
        <template #default="scope">
          <el-link type="warning" @click="updatePeople(scope.row)">修改</el-link>
          &nbsp;
          <el-link type="error" @click="deletePeople(scope.row)">删除</el-link>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <t-dialog
      v-model:visible="showPeopleUpdate"
      :confirm-on-enter="true"
      :header="peopleUpdate.AID ? '修改人员' : '新增人员'"
      :on-close="close"
      :on-confirm="updatePeopleSubmit"
      draggable
      width="30%"
  >
    <el-form
        :model="peopleUpdate"
        label-position="right"
        label-width="auto"
        style="max-width: 600px"
    >
      <el-form-item label="姓名">
        <el-input v-model="peopleUpdate.name"/>
      </el-form-item>
      <el-form-item label="角色">
        <t-select v-model="peopleUpdate.role" placeholder="请选择">
          <t-option v-for="item in roleTableData" :key="item.角色编号" :label="item.角色名称" :value="item.角色编号"/>
        </t-select>
      </el-form-item>
      <el-form-item label="工号">
        <el-input v-model="peopleUpdate.userName"/>
      </el-form-item>
      <el-form-item label="登录密码">
        <el-input v-model="peopleUpdate.password"/>
      </el-form-item>
      <el-form-item label="门禁1权限">
        <t-select v-model="peopleUpdate.RKE1" placeholder="请选择">
          <t-option :value="1" label="有权限"/>
          <t-option :value="0" label="无权限"/>
        </t-select>
      </el-form-item>
      <el-form-item label="门禁2权限">
        <t-select v-model="peopleUpdate.RKE2" placeholder="请选择">
          <t-option :value="1" label="有权限"/>
          <t-option :value="0" label="无权限"/>
        </t-select>
      </el-form-item>
      <el-form-item label="门禁3权限">
        <t-select v-model="peopleUpdate.RKE3" placeholder="请选择">
          <t-option :value="1" label="有权限"/>
          <t-option :value="0" label="无权限"/>
        </t-select>
      </el-form-item>
      <el-form-item label="班次">
        <el-input v-model="peopleUpdate.classes"/>
      </el-form-item>
      <el-form-item label="班组">
        <el-input v-model="peopleUpdate.teamGroup"/>
      </el-form-item>
    </el-form>
  </t-dialog>
</template>

<script setup>
import {inject, onMounted, reactive, ref} from 'vue'
import {useAppStore} from "@/store/app.js";
import {ElMessage, ElMessageBox} from "element-plus";

const store = useAppStore();
const CreateData = inject('CreateData')
const ExecDatabase = inject('ExecDatabase')

const showPeopleUpdate = ref(false)

const roleTableData = reactive([])
const permissionTableData = reactive([])
const peopleTableData = reactive([])
const peopleUpdate = reactive({
  AID: 0,
  name: '', // 名称
  classes: '', // 班次
  teamGroup: '', // 班组
  role: '', // 角色
  userName: '', // 用户名
  password: '', // 密码
  RKE1: 0, // 门禁
  RKE2: 0,
  RKE3: 0
})

onMounted(() => {
  getRoleData()
  getPeopleTableData()
});

const getRoleData = () => {
  var param = []
  var Data = CreateData('11', '基础表_人员角色_查询', param)
  ExecDatabase(Data).then(response => {
    roleTableData.length = 0
    if (response.data.length > 0) {
      roleTableData.push(...response.data)
    }
  })
}

const roleRowClick = (row, column, event) => {
  getRolePermissionData(row.角色编号)
}

const getRolePermissionData = (roleId) => {
  var param = []
  param.push(['角色编号', roleId])
  var Data = CreateData('11', '基础表_模块分配_页面分配_查询', param)
  ExecDatabase(Data).then(response => {
    permissionTableData.length = 0
    if (response.data.length > 0) {
      permissionTableData.push(...response.data)
    }
  })
}

const setRolePermission = (row) => {
  var param = []
  param.push(['角色编号', row.查询角色])
  param.push(['模块编号', row.AID])
  var Data = CreateData('11', '基础表_模块分配_角色分配模块', param)
  ExecDatabase(Data).then(response => {
    if (response.data.length > 0) {
      if (response.data[0].result === 1) {
        ElMessage.success(response.data[0].msg)
        getRolePermissionData(row.查询角色)
      } else {
        ElMessage.error(response.data[0].msg)
      }
    } else {
      ElMessage.error('数据异常')
    }
  })
}

const getPeopleTableData = () => {
  var param = []
  var Data = CreateData('11', '基础表_用户与角色_查询', param)
  ExecDatabase(Data).then(response => {
    peopleTableData.length = 0
    if (response.data.length > 0) {
      peopleTableData.push(...response.data)
    }
  })
}

const updatePeople = (row) => {
  resetPeopleUpdate()
  console.log(row)
  peopleUpdate.AID = row.AID
  peopleUpdate.name = row.姓名
  peopleUpdate.classes = row.班次
  peopleUpdate.teamGroup = row.班组
  peopleUpdate.role = row.用户角色
  peopleUpdate.userName = row.登录账号
  peopleUpdate.password = row.登录密码
  peopleUpdate.RKE1 = row.门禁1权限
  peopleUpdate.RKE2 = row.门禁2权限
  peopleUpdate.RKE3 = row.门禁3权限

  showPeopleUpdate.value = true
  console.log(peopleUpdate)
}

const resetPeopleUpdate = () => {
  peopleUpdate.AID = 0
  peopleUpdate.name = ''
  peopleUpdate.classes = ''
  peopleUpdate.teamGroup = ''
  peopleUpdate.role = ''
  peopleUpdate.userName = ''
  peopleUpdate.password = ''
  peopleUpdate.RKE1 = 0
  peopleUpdate.RKE2 = 0
  peopleUpdate.RKE3 = 0
}

const updatePeopleSubmit = () => {
  var param = []
  param.push(['AID', peopleUpdate.AID])
  param.push(['姓名', peopleUpdate.name])
  param.push(['用户角色', peopleUpdate.role])
  param.push(['登录账号', peopleUpdate.userName])
  param.push(['登录密码', peopleUpdate.password])
  param.push(['门禁1权限', peopleUpdate.RKE1])
  param.push(['门禁2权限', peopleUpdate.RKE2])
  param.push(['门禁3权限', peopleUpdate.RKE3])
  param.push(['班次', peopleUpdate.classes])
  param.push(['班组', peopleUpdate.teamGroup])
  var Data = CreateData('11', '基础表_用户角色_新增修改', param)
  ExecDatabase(Data).then(response => {
    if (response.data.length > 0) {
      if (response.data[0].result === 1) {
        ElMessage.success(response.data[0].msg)
        getPeopleTableData()
        showPeopleUpdate.value = false;
      } else {
        ElMessage.error(response.data[0].msg)
      }
    } else {
      ElMessage.error('数据异常')
    }
  })
}


const addRole = () => {
  ElMessageBox.prompt('请输入添加的角色名称？', '提示').then(({value}) => {
    var param = []
    param.push(['角色名称', value])
    var Data = CreateData('11', '基础表_人员角色_增加', param)
    ExecDatabase(Data).then(response => {
      if (response.data.length > 0) {
        if (response.data[0].result === 1) {
          ElMessage.success(response.data[0].msg)
          getRoleData()
        } else {
          ElMessage.error(response.data[0].msg)
        }
      } else {
        ElMessage.error('数据异常')
      }
    })
  })
}

const deleteRole = (row) => {
  // 弹窗确认是否删除
  ElMessageBox.confirm('是否删除此角色？', '警告').then(() => {
    var param = []
    param.push(['AID', row.AID])
    var Data = CreateData('11', '基础表_人员角色_删除', param)
    ExecDatabase(Data).then(response => {
      if (response.data.length > 0) {
        if (response.data[0].result === 1) {
          ElMessage.success(response.data[0].msg)
          getRoleData()
        } else {
          ElMessage.error(response.data[0].msg)
        }
      } else {
        ElMessage.error('数据异常')
      }
    })
  })
}

const deletePeople = (row) => {
  // 弹窗确认是否删除
  ElMessageBox.confirm('是否删除该用户？', '警告').then(() => {
    var param = []
    param.push(['AID', row.AID])
    var Data = CreateData('11', '基础表_用户角色_删除', param)
    ExecDatabase(Data).then(response => {
      if (response.data.length > 0) {
        if (response.data[0].result === 1) {
          ElMessage.success(response.data[0].msg)
          getPeopleTableData()
        } else {
          ElMessage.error(response.data[0].msg)
        }
      } else {
        ElMessage.error('数据异常')
      }
    })
  })
}
</script>

<style lang="scss" scoped>

.top {
  display: flex;
  justify-content: space-evenly;
  margin-top: 30px;

  > div {
    border: 1px solid #a8a8a8;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
  }

  .left {
    width: 30vw;
  }

  .right {
    width: 65vw;
  }
}

.main {
  width: 97vw;
  margin: 20px auto;
  border: 1px solid #a8a8a8;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
}

</style>
