<template>
  <div id="" class="page-body">
    <div class="page-header">
      <h1 class="page-title">角色管理</h1>
      <el-breadcrumb>
        <el-breadcrumb-item :to="{path: '/'}">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{name: 'userManage'}">系统管理</el-breadcrumb-item>
        <el-breadcrumb-item>角色管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="filter-container">
      <div class="checkBtn">
        <el-button type="primary" size="medium" @click="batchImport">添加角色</el-button>
      </div>
    </div>
    <el-table ref="tableData" stripe border :data="tableData" :header-cell-style="{ background: '#dddfe6',color: '#555960',textAlign: 'center' }" :cell-style="{ textAlign: 'center' }" height="600px" @row-click="openModal">
      <el-table-column
        type="index"
        width="50"
      />
      <el-table-column prop="userName" label="角色名称" />
      <el-table-column prop="describe" label="角色描述" />
      <el-table-column prop="createTime" label="创建时间" />
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" content="修改" placement="top-end">
            <el-button id="mod" size="mini" type="warning" class="el-icon-edit" />
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="删除" placement="top-end">
            <el-button id="del" size="mini" type="danger" class="el-icon-delete" />
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="授权" placement="top-end">
            <el-button id="permission" size="mini" type="warning" class="el-icon-orange" />
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-box">
      <el-pagination
        background
        :current-page="currentPage"
        :page-sizes="[15, 30, 50]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="count"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <div class="modal">
      <el-dialog
        :title="userStatus? '添加角色' : '修改角色'"
        :visible.sync="showUserForm"
        width="30%"
        :before-close="handleClose"
      >
        <el-form ref="form" :model="form" label-width="140px" :rules="rules">
          <el-form-item label="角色名称" prop="userName">
            <el-input v-model="form.userName" size="medium" auto-complete="off" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="角色描述" prop="describe">
            <el-input v-model="form.describe" size="medium" auto-complete="off" placeholder="请输入" />
          </el-form-item>
        </el-form>
        <el-row type="flex" justify="center">
          <el-button
            style="width: 100px"
            type="primary"
            size="medium"
            @click="saveData"
          >确定</el-button>
          <el-button
            size="medium"
            style="margin-left: 10px; width: 100px"
            type="info"
            plain
            @click="showUserForm = false;clearInput();resetForm();"
          >取消</el-button>
        </el-row>
      </el-dialog>
      <el-dialog
        title="权限分配"
        :visible.sync="showAuthorForm"
        width="30%"
        :before-close="handleCloseAuthor"
      >
        <el-form ref="form2" :model="form" label-width="10px" :rules="rules">
          <el-form-item label="" prop="sex">
            <el-select v-model="author" multiple placeholder="请选择" size="medium" style="width:100%">
              <el-option
                v-for="item in authorOption"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-form>
        <el-row type="flex" justify="center">
          <el-button
            style="width: 100px"
            type="primary"
            size="medium"
            @click="saveAuthorData"
          >确定</el-button>
          <el-button
            size="medium"
            style="margin-left: 10px; width: 100px"
            type="info"
            plain
            @click="showAuthorForm = false;resetForm2();"
          >取消</el-button>
        </el-row>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  name: 'RoleManage',
  data() {
    return {
      // 新建
      userStatus: true,
      // 数据model
      recordEnabled: 0,
      showUserForm: false,
      showAuthorForm: false,
      delDialogVisible: false,
      currentPage: 1,
      pagesize: 15,
      count: 0,
      form: {
        userName: '',
        describe: ''
      },
      rules: {
        userName: [
          { required: true, message: '请输入角色名称', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        unit: [
          { required: true, message: '请输入单位', trigger: 'blur' }
        ]
      },
      author: ['用户管理','角色管理'],
      tableData: [
        {
          userName: 'admin',
          describe: '管理员',
          createTime: '2022.3.4 12: 20: 00'
        },
        {
          userName: 'admin',
          describe: '管理员',
          createTime: '2022.3.4 12: 20: 00'
        },
        {
          userName: 'admin',
          describe: '管理员',
          createTime: '2022.3.4 12: 20: 00'
        }

      ],
      companyOption: [
        {
          label: '深海所',
          value: '深海所'
        },
        {
          label: '机构B',
          value: '机构B'
        }
      ],
      sexOption: [
        {
          label: '男',
          value: '男'
        },
        {
          label: '女',
          value: '女'
        }
      ],
      authorOption: [
        {
          label: '用户管理',
          value: '用户管理'
        },
        {
          label: '角色管理',
          value: '角色管理'
        },
        {
          label: '单位管理',
          value: '单位管理'
        },
        {
          label: '字典管理',
          value: '字典管理'
        },
        {
          label: '统计分析',
          value: '统计分析'
        },
        {
          label: '数据汇交',
          value: '数据汇交'
        },
        {
          label: '数据检索',
          value: '数据检索'
        }
      ]
    }
  },
  created() {
    const isLogin = localStorage.getItem('isLogin')
    if (isLogin == 'false') {
      this.$router.push({ name: 'home' })
      return
    }
    // this.init()
  },
  methods: {
    batchImport() {
      this.showUserForm = true
      this.userStatus = true
    },
    tableIndex(index) {
      return (this.currentPage - 1) * this.pagesize + index + 1
    },
    openModal(row, event, column) {
      // 判断操作内容
      var opType = column.target.id
      if (opType == 'del') {
        this.$confirm('确定删除选中的数据吗？此操作不可撤销！', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            this.deleteData(row.id)
          })
          .catch((error) => {
            console.log(error)
          })
      } else if (opType == 'mod') {
        this.showUserForm = true
        this.userStatus = false
        this.form = JSON.parse(JSON.stringify(row))
      } else if (opType == 'permission') {
        this.showAuthorForm = true
      }
    },
    async deleteData(id) {
      this.loading = true
      const data = {
        id
      }
      try {
        const res = await deletePlanPage(data)
        if (res.code == 2000) {
          this.init()
        }
      } catch (error) {
        console.log(error)
        this.loading = false
      }
    },
    init() {
      this.currentPage = 1
      this.getData()
    },
    // 初始页currentPage、初始每页数据数pagesize和数据data
    handleSizeChange: function(size) {
      this.pagesize = size
      this.getData()
    },
    handleCurrentChange: function(currentPage) {
      this.currentPage = currentPage
      this.getData()
    },
    fuzzyQueryFunction() {
      this.currentPage = 1
      this.getData()
    },
    reset() {
      this.queryName = ''
    },
    getData() {
      // 分页查询以及带条件模糊查询方法
      this.$http
        .post(process.env.baseUrl + '/node/findPage', { pageRequest: { pageNum: this.currentPage, pageSize: this.pagesize }, queryName: this.queryName })
        .then(res => {
          if (res.code == 2000) { // 1表示成功
            this.tableData = res.data.page.content
            this.count = res.data.page.totalSize
          } else {
            this.$message.error(res.msg) // 后台出现异常的提示
          }
        })
    },
    saveData() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if (this.showStatus) {
            this.addFunction()
          } else {
            this.updateFunction()
          }
        } else {
          return false
        }
      })
    },
    saveAuthorData() {
      this.showAuthorForm = false
    },
    async addFunction() {
      this.loading = true
      const data = {
        deviceId: this.form.deviceId,
        deviceName: this.form.deviceName,
        description: this.form.description,
        // userId: 123456,
        userName: this.$store.state.user.user
      }
      try {
        const res = await addPlanPage(data)
        if (res.code === 2000) {
          this.$emit('handleConfirm')
        }
      } catch (error) {
        console.log(error)
      }
      this.loading = false
    },
    async updateFunction() {
      this.loading = true
      const data = {
        deviceId: this.form.deviceId,
        deviceName: this.form.deviceName,
        description: this.form.description,
        // userId: 123456,
        userName: this.$store.state.user.user,
        id: Number(this.id)
      }
      try {
        const res = await updatePlanPage(data)
        if (res.code === 2000) {
          this.$emit('handleConfirm')
        }
      } catch (error) {
        console.log(error)
      }
      this.loading = false
    },
    resetForm() {
      this.$refs['form'].resetFields()
    },
    resetForm2() {
      this.$refs['form2'].resetFields()
    },
    handleClose(done) { // 加一个点击遮罩和关闭按钮时的回调函数
      this.clearInput()
      this.resetForm()
      done()
    },
    handleCloseAuthor(done) {
      done()
    },
    clearInput() {
      this.form = {
        userName: '',
        name: '',
        describe: '',
        address: '',
        unit: ''
      }
    }
  }
}
</script>

