<template>
  <div class="main-container-text">
    <div class="title">角色信息</div>
    <div class="header">
      <el-button type="primary" plain @click="handleAddRole"><i class="el-icon-plus" />新增角色</el-button>
      <div class="header-right">
        <el-button icon="el-icon-delete" circle @click="handleDel" />
        <el-button icon="el-icon-refresh" circle @click="handleRefresh" />
      </div>
    </div>
    <el-table
      v-loading="loading"
      element-loading-text="拼命加载中"
      :data="tableData"
      :header-cell-style="headerStyle"
      height="69vh"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        width="55"
        align="center"
      />
      <el-table-column
        prop="role_code"
        label="角色代码"
        align="center"
      />
      <el-table-column
        prop="role_name"
        label="角色名"
        align="center"
      />
      <el-table-column
        show-overflow-tooltip
        prop="module_name"
        label="系统权限"
        align="center"
      />
      <el-table-column
        prop="description"
        label="具体描述"
        align="center"
      />
      <el-table-column
        label="操作"
        align="center"
      >
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="my-pagination" style="text-align: center">
      <el-pagination
        background
        layout="prev, pager, next"
        :current-page.sync="page"
        :total="total"
        :page-size.sync="page_size"
        @current-change="pageChange"
      />
    </div>
    <el-dialog
      :close-on-click-modal="false"
      :visible.sync="dialogVisible"
      :title="title"
      width="80%"
      @close="onClose"
    >
      <el-row
        v-loading="loadingForm"
        element-loading-text="拼命加载中"
        class="form-container"
        :gutter="15"
        destroy-on-close
        @close="onClose"
      >
        <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
          <el-col :span="12">
            <el-form-item label="角色代码" prop="role_code">
              <el-input v-model="formData.role_code" placeholder="请输入角色代码" clearable :style="{width: '100%'}" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="角色名" prop="role_name">
              <el-input v-model="formData.role_name" placeholder="请输入角色名" clearable :style="{width: '100%'}" />
            </el-form-item>
          </el-col>
          <el-col v-if="drug_module_idOptions.length !== 0">
            <el-form-item label="试剂权限" prop="drug_module_id">
              <el-checkbox-group v-model="formData.drug_module_id" size="medium">
                <el-checkbox
                  v-for="item in drug_module_idOptions"
                  :key="item.module_id"
                  :label="item.module_id"
                >{{ item.module_name }}</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
          <el-col v-if="standard_module_idOptions.length !== 0">
            <el-form-item label="危化品权限" prop="standard_module_id">
              <el-checkbox-group v-model="formData.standard_module_id" size="medium">
                <el-checkbox
                  v-for="item in standard_module_idOptions"
                  :key="item.module_id"
                  :label="item.module_id"
                >{{ item.module_name }}</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
          <el-col v-if="consumables_module_idOptions.length !== 0">
            <el-form-item label="对照品权限" prop="consumables_module_id">
              <el-checkbox-group v-model="formData.consumables_module_id" size="medium">
                <el-checkbox
                  v-for="item in consumables_module_idOptions"
                  :key="item.module_id"
                  :label="item.module_id"
                >{{ item.module_name }}</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
          <!-- <el-col v-if="instrument_module_idOptions.length !== 0">
            <el-form-item label="仪器权限" prop="instrument_module_id">
              <el-checkbox-group v-model="formData.instrument_module_id" size="medium">
                <el-checkbox
                  v-for="item in instrument_module_idOptions"
                  :key="item.module_id"
                  :label="item.module_id"
                >{{ item.module_name }}</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-col> -->
          <el-col v-if="client_module_idOptions.length !== 0">
            <el-form-item label="终端权限" prop="client_module_id">
              <el-checkbox-group v-model="formData.client_module_id" size="medium">
                <el-checkbox
                  v-for="item in client_module_idOptions"
                  :key="item.module_id"
                  :label="item.module_id"
                >{{ item.module_name }}</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="具体描述" prop="description">
              <el-input
                v-model="formData.description"
                type="textarea"
                placeholder="请输入具体描述"
                :autosize="{minRows: 4, maxRows: 4}"
                :style="{width: '100%'}"
              />
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <div slot="footer" style="text-align: center">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="handelConfirm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { get_role_list, get_module_list, add_update_role, get_role_module } from '@/api/user/user'
import stringify from '@/utils/stringify'
export default {
  name: 'Role',
  data() {
    return {
      page: 1,
      page_size: 15,
      total: 0,
      title: '',
      dialogVisible: false,
      loading: false,
      loadingForm: false,
      tableData: [{}],
      headerStyle: { 'background': '#E6E6E6' },
      multipleSelection: [],
      formData: {
        role_id: undefined,
        role_code: undefined,
        role_name: undefined,
        // 高危化品管理
        drug_module_id: [],
        // 危化品管理
        standard_module_id: [],
        // 对照品管理
        consumables_module_id: [],
        // 仪器管理
        instrument_module_id: [],
        // 终端管理
        client_module_id: [],
        description: undefined
      },
      rules: {
        role_code: [{
          required: true,
          message: '请输入角色代码',
          trigger: 'blur'
        }],
        role_name: [{
          required: true,
          message: '请输入角色名',
          trigger: 'blur'
        }],
        drug_module_id: [],
        client_module_id: [],
        standard_module_id: [],
        consumables_module_id: [],
        instrument_module_id: [],
        description: []
      },
      drug_module_idOptions: [],
      client_module_idOptions: [],
      standard_module_idOptions: [],
      consumables_module_idOptions: [],
      instrument_module_idOptions: []
    }
  },
  created() {
    this.getList()
    this.getModelList()
  },
  methods: {
    getList() {
      const data = {
        page: this.page,
        page_size: this.page_size
      }
      this.loading = true
      get_role_list(stringify(data)).then(res => {
        this.tableData = res.data.data_list
        this.total = res.data.total_count
      }).finally(() => (this.loading = false))
    },
    getModelList() {
      get_module_list().then(res => {
        this.drug_module_idOptions = res.data.drug_manage
        this.client_module_idOptions = res.data.client_manage
        this.standard_module_idOptions = res.data.standard_manage
        this.consumables_module_idOptions = res.data.consumables_manage
        this.instrument_module_idOptions = res.data.instrument_manage
      })
    },
    pageChange(page) {
      this.page = page
      this.getList()
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handleAddRole() {
      this.title = '添加角色'
      this.dialogVisible = true
    },
    handleDel() {
      if (this.multipleSelection.length === 0) {
        this.$message.warning('请选择需要删除的角色')
        return
      }
      this.$confirm(`确定要删除角色 ${this.multipleSelection[0].role_name} 吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    handleRefresh() {
      this.getList()
    },
    handleEdit(index, row) {
      this.title = '编辑角色'
      this.dialogVisible = true
      this.loadingForm = true
      this.formData.role_id = row.role_id
      this.formData.role_code = row.role_code
      this.formData.role_name = row.role_name
      this.formData.description = row.description
      const data = {
        'role_id': row.role_id
      }
      get_role_module(stringify(data)).then(
        res => {
          this.formData.client_module_id = res.data.filter(item => (item.have === 1 && item.module_type === '1')).map(item => item.module_id)
          this.formData.drug_module_id = res.data.filter(item => (item.have === 1 && item.module_type === '2')).map(item => item.module_id)
          this.formData.standard_module_id = res.data.filter(item => item.have === 1 && item.module_type === '3').map(item => item.module_id)
          this.formData.consumables_module_id = res.data.filter(item => item.have === 1 && item.module_type === '4').map(item => item.module_id)
          this.formData.instrument_module_id = res.data.filter(item => item.have === 1 && item.module_type === '5').map(item => item.module_id)
        }
      ).finally(() => { this.loadingForm = false })
    },
    onClose() {
      this.formData = {
        role_id: undefined,
        role_code: undefined,
        role_name: undefined,
        drug_module_id: [],
        client_module_id: [],
        standard_module_id: [],
        consumables_module_id: [],
        instrument_module_id: [],
        description: undefined
      }
      this.$refs['elForm'].resetFields()
    },
    close() {
      this.dialogVisible = false
    },
    handelConfirm() {
      this.$refs['elForm'].validate(valid => {
        if (!valid) return
        const data = JSON.parse(JSON.stringify(this.formData))
        data.drug_module_id = JSON.stringify(data.drug_module_id)
        data.client_module_id = JSON.stringify(data.client_module_id)
        data.standard_module_id = JSON.stringify(data.standard_module_id)
        data.consumables_module_id = JSON.stringify(data.consumables_module_id)
        data.instrument_module_id = JSON.stringify(data.instrument_module_id)
        add_update_role(stringify(data)).then(res => {
          this.$message.success(res.msg)
          this.getList()
          this.onClose()
        })
        this.close()
      })
    }
  }
}
</script>
<style scoped>
>>>.el-dialog__body{
  margin-right: 50px;
}
</style>

<style lang="scss" scoped>
.main-container-text{
  min-height:calc(100vh - 110px) ;
  padding: 1rem;
  margin: 1rem;
  background: white;
  .title{
    font-size: 20px;
    font-weight: bold;
    color: #000000;
  }
  .header{
    margin: 1rem 0 1rem 0;
    .el-input{
      width: 9.375rem;
      margin-right: 1rem;
    }
    .el-select {
      margin-right: 1rem;
    }
    .header-right{
      float: right;
    }
  }
}
</style>
