<template>
  <div class="app-container">
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="40%" v-dialogDrag append-to-body>
      <el-form ref="formRef" :model="formData" :rules="formRules" v-loading="formLoading" label-width="80px">
        <el-row :gutter="1">
          <el-col :span="24">
            <el-form-item label="档案名称" prop="dictLabel">
              <el-input v-model="formData.dictLabel" placeholder="请输入档案名称"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="1">
          <el-col :span="24">
            <el-form-item label="查看权限" prop="queryRoleIds">
              <el-select
                style="width: 100%"
                filterable
                clearable
                v-model="formData.queryRoleIds" multiple placeholder="请选择有查看权限的角色"
              >
                <el-option
                  v-for="(item, index) in roleList"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="1">
          <el-col :span="24">
            <el-form-item label="新增权限" prop="createRoleIds">
              <el-select
                style="width: 100%"
                filterable
                clearable
                v-model="formData.createRoleIds" multiple placeholder="请选择有新增权限的角色"
              >
                <el-option
                  v-for="(item, index) in roleList"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="1">
          <el-col :span="24">
            <el-form-item label="修改权限" prop="updateRoleIds">
              <el-select
                style="width: 100%"
                filterable
                clearable
                v-model="formData.updateRoleIds" multiple placeholder="请选择有修改权限的角色"
              >
                <el-option
                  v-for="(item, index) in roleList"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="1">
          <el-col :span="24">
            <el-form-item label="删除权限" prop="deleteRoleIds">
              <el-select
                style="width: 100%"
                filterable
                clearable
                v-model="formData.deleteRoleIds" multiple placeholder="请选择有修改权限的角色"
              >
                <el-option
                  v-for="(item, index) in roleList"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="1">
          <el-col :span="24">
            <el-form-item label="下载权限" prop="downloadRoleIds">
              <el-select
                style="width: 100%"
                filterable
                clearable
                v-model="formData.downloadRoleIds" multiple placeholder="请选择有下载权限的角色"
              >
                <el-option
                  v-for="(item, index) in roleList"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm" :disabled="formLoading">确 定</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

import {updateArchivesRoleAndDict} from '@/api/company/archives/archivesRole'
import {getRoleList} from '@/api/company/staff'

export default {
  name: 'ArchivesCatalogForm',
  data(){
    return{
      dialogTitle: null,
      dialogVisible: false,
      // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
      formLoading: false,
      formData: {
        dictType: null,
        dataId: null,
        queryRoleIds: null,
        updateRoleIds: null,
        createRoleIds: null,
        deleteRoleIds: null,
        downloadRoleIds: null,
        dictLabel: null,
      },
      formRules:{
        queryRoleIds: [{required: true, message: "查看权限不能为空", trigger: "blur"}],
        updateRoleIds: [{required: true, message: "修改权限不能为空", trigger: "blur"}],
        deleteRoleIds: [{required: true, message: "删除权限不能为空", trigger: "blur"}],
        createRoleIds: [{required: true, message: "新增权限不能为空", trigger: "blur"}],
        downloadRoleIds: [{required: true, message: "下载权限不能为空", trigger: "blur"}],
        dictLabel: [{required: true, message: "档案名称不能为空", trigger: "blur"}],
      },
      roleList: [],
    }
  },
  methods:{
    /** 打开弹窗 */
    async open(data) {
      this.dialogVisible = true
      this.reset()
      // 修改时，设置数据
      if (data.dataId) {
        this.formData = {
          ...data,
          queryRoleIds: data.queryRoleIds ? data.queryRoleIds.split(",").map(item => parseInt(item)) : null,
          createRoleIds: data.createRoleIds ? data.createRoleIds.split(",").map(item => parseInt(item)) : null,
          updateRoleIds: data.updateRoleIds ? data.updateRoleIds.split(",").map(item => parseInt(item)) : null,
          deleteRoleIds: data.deleteRoleIds ? data.deleteRoleIds.split(",").map(item => parseInt(item)) : null,
          downloadRoleIds: data.downloadRoleIds ? data.downloadRoleIds.split(",").map(item => parseInt(item)) : null
        }
      }
      await this.listRoles()
      this.formData.dictType = data.activeTab
      this.dialogTitle = data.dataId ? '修改档案目录' : '新增档案目录'
    },
    async listRoles(){
      const res = await getRoleList()
      this.roleList = res.data
    },
    /** 提交按钮 */
    async submitForm(){
      // 校验主表
      await this.$refs['formRef'].validate()
      this.formLoading = true
      try {
        const data = {
          ...this.formData,
          queryRoleIds: this.formData.queryRoleIds.join(","),
          updateRoleIds: this.formData.updateRoleIds.join(","),
          deleteRoleIds: this.formData.deleteRoleIds.join(","),
          createRoleIds: this.formData.createRoleIds.join(","),
          downloadRoleIds: this.formData.deleteRoleIds.join(","),
        }
        // 修改的提交
        if (data.dataId) {
          await updateArchivesRoleAndDict(data)
          this.$modal.msgSuccess('修改成功')
          this.dialogVisible = false
          this.$emit('success')
          return
        }
        // 添加的提交
        await updateArchivesRoleAndDict(data)
        this.$modal.msgSuccess('新增成功')
        this.dialogVisible = false
        this.$emit('success')
      } finally {
        this.formLoading = false
      }
    },
    /** 表单重置 */
    reset() {
      this.formData = {
        dictType: null,
        dataId: null,
        queryRoleIds: null,
        updateRoleIds: null,
        createRoleIds: null,
        deleteRoleIds: null,
        downloadRoleIds: null,
        dictLabel: null,
      }
      this.resetForm('formRef')
    }
  }
}
</script>

<style scoped>

</style>
