<template>
  <div>
    <el-dialog
      :before-close="handleClose"
      :close-on-click-modal="false"
      :visible="visible"
      custom-class="bbsl-location-dialog"
      title="授权页面"
      width="50%"
    >
      <div>
        <el-form
          ref="formInfo"
          :model="this.parameter"
          :rules="rules"
          label-position="top"
          label-width="150px"
        >
          <el-row :gutter="24">
            <el-col :span="24">
              <el-form-item label="操作权限" prop="authType">
                <el-checkbox-group v-model="OperationList">
                  <el-checkbox
                    v-for="(item, index) in authTypeList"
                    :key="index"
                    :label="item.value"
                  >
                    {{ item.name }}
                  </el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="24">
              <el-form-item label="授权对象类型" prop="accessControlType">
                <el-radio
                  v-for="(item, index) in accessControlTypeList"
                  :key="index"
                  v-model="parameter.accessControlType"
                  :label="item.value"
                  @change="clearData()"
                >
                  {{ item.name }}
                </el-radio>
              </el-form-item>
            </el-col>
            <el-col v-if="parameter.accessControlType == 2" :span="24">
              <el-form-item label="已选中组织" prop="">
                <el-select
                  v-model="OrgsListIds"
                  multiple
                  placeholder="请选择组织"
                  style="width:80%"
                  v-on:click.native="selectOrgs"
                >
                  <el-option
                    v-for="(item, index) in OrgsLists"
                    :key="index"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
                <el-button @click="clear()">重 置</el-button>
              </el-form-item>
            </el-col>
            <el-col v-if="parameter.accessControlType == 3" :span="24">
              <el-form-item label="已选中用户" prop="">
                <el-select
                  v-model="UsersListIds"
                  multiple
                  placeholder="请选择用户"
                  style="width:80%"
                  v-on:click.native="selectUsers"
                >
                  <el-option
                    v-for="(item, index) in UsersList"
                    :key="index"
                    :label="item.fullname"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
                <el-button @click="clear()">重 置</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleSave">确 认</el-button>
        <el-button @click="handleClose">取 消</el-button>
      </span>
    </el-dialog>
    <SelectOrganize ref="OrgsModal"></SelectOrganize>
    <SelectUser ref="UsersModal"></SelectUser>
  </div>
</template>

<script>
import dictUtils from '@/components/dict/DictSelectUtils.js'
import SelectOrganize from './SelectOrganize.vue'
import SelectUser from './SelectUser.vue'

import givePower from '@/api/examination/givePower.js'

export default {
  name: 'givePower',
  components: {
    SelectOrganize,
    SelectUser
  },
  data() {
    return {
      // 操作权限
      OperationList: [],
      visible: false,
      parameter: {
        accessControlList: [],
        accessControlType: '',
        authType: '',
        typeId: ''
      },
      authTypeList: [],
      accessControlTypeList: [],
      // 组织列表
      OrgsLists: [],
      OrgsListIds: [],
      // 用户列表
      UsersListIds: [],
      UsersList: [],
      // 验证
      rules: {
        OperationList: [
          {
            required: true,
            message: '请选择操作权限',
            trigger: 'blur'
          }
        ],
        accessControlType: [
          {
            required: true,
            message: '请选择授权对象类型',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  created() {
    // 操作权限
    this.authTypeList = dictUtils.getDictItemsFromCache('czqx')
    // 权限受控类型
    this.accessControlTypeList = dictUtils.getDictItemsFromCache('qxsklx')
  },
  mounted() {
    // ref绑定自定义事件
    this.$refs.OrgsModal.$on('getOrgs', this.getOrg)
    this.$refs.UsersModal.$on('getUser', this.getUser)
  },
  methods: {
    clearData() {
      if (this.parameter.accessControlType == '1') {
        this.UsersList = []
        this.UsersListIds = []
        this.UsersList = []
        this.UsersListIds = []
      }
      if (this.parameter.accessControlType == '2') {
        this.UsersList = []
        this.UsersListIds = []
      }
      if (this.parameter.accessControlType == '3') {
        this.OrgsLists = []
        this.OrgsListIds = []
      }
    },
    clear() {
      this.OrgsListIds = []
      this.UsersListIds = []
    },
    getOrg(item) {
      this.OrgsLists = item
      this.OrgsLists.forEach(item => {
        this.OrgsListIds.push(item.id)
      })
    },
    getUser(item) {
      this.UsersList = item
      this.UsersList.forEach(item => {
        this.UsersListIds.push(item.id)
      })
    },
    selectOrgs() {
      this.$refs.OrgsModal.handleShow()
    },
    selectUsers() {
      this.$refs.UsersModal.handleShow()
    },
    add(val) {
      this.visible = true
      this.parameter.typeId = val.id
      this.getAuthorization()
    },
    // 关闭新增人员窗口
    handleClose() {
      this.visible = false
      this.OperationList = []
      this.OrgsLists = []
      this.OrgsListIds = []
      this.UsersList = []
      this.UsersListIds = []
      this.parameter = {
        accessControlList: [],
        accessControlType: '',
        authType: '',
        typeId: ''
      }
    },
    // 授权保存
    handleSave() {
      this.$refs.formInfo.validate(valid => {
        if (valid) {
          this.parameter.authType = this.OperationList.toString()
          // console.log(this.OrgsLists);
          if (this.OrgsLists.length != 0) {
            this.OrgsLists.forEach(item => {
              let obj = {}
              obj['accessControlId'] = item.id
              obj['accessControlName'] = item.name
              this.parameter.accessControlList.push(obj)
            })
          }
          if (this.UsersList.length != 0) {
            this.UsersList.forEach(item => {
              let obj = {}
              obj['accessControlId'] = item.id
              obj['accessControlName'] = item.fullname
              this.parameter.accessControlList.push(obj)
            })
          }
          console.log(this.parameter)
          givePower.saveGivePower(this.parameter, response => {
            if (response.state) {
              this.$notify({
                type: 'success',
                message: '授权成功',
                duration: 2000
              })
              this.handleClose()
            } else {
              this.$message.warning(response.message)
            }
          })
        }
      })
    },
    // 获取已授权数据
    getAuthorization() {
      givePower.getAllTypeId(this.parameter.typeId, item => {
        console.log(item)
        if (Object.keys(item.value).length != 0) {
          this.OperationList = item.value.authType.split(',')
          this.parameter.accessControlType = item.value.accessControlType
          if (this.parameter.accessControlType == '2') {
            item.value.accessControlList.forEach(ee => {
              let obj = {}
              obj['name'] = ee.accessControlName
              obj['id'] = ee.accessControlId
              this.OrgsLists.push(obj)
              this.OrgsListIds.push(ee.accessControlId)
            })
          }
          if (this.parameter.accessControlType == '3') {
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped></style>
