<script setup lang='ts'>
import request from '~/utils/request'
import { user } from '~/store/index'

const props = defineProps<{
  disabled: boolean
}>()

const _ykl_lc_ = JSON.parse(sessionStorage.getItem('ykl_lc')!)

let dialogVisible = $ref(false)

const form = reactive({
  ykl_qxsz: '1',
  ykl_qxszry: [],
})

const RoleList = [
  { user_role_id: '63', user_role_name: '省级管理员' },
  { user_role_id: '66', user_role_name: '市级管理员' },
  { user_role_id: '69', user_role_name: '县级管理员' },
  { user_role_id: '72', user_role_name: '校级管理员' },
  { user_role_id: '75', user_role_name: '所有教师' },
  { user_role_id: 'pyjs', user_role_name: '批阅教师' },
  { user_role_id: 'pyzz', user_role_name: '批阅组长' },
  { user_role_id: 'jczz', user_role_name: '检查组长' },
  { user_role_id: '76', user_role_name: '学生' },
]

interface MemberItem { user_id: string; user_realname: string; user_role_name: string }
let MemberList = $ref<MemberItem[]>([])

function handleClickLink() {
  if (props.disabled)
    return

  request({
    url: '/yzy/kmksyjlc/detail',
    data: {
      ykl_id: _ykl_lc_.ykl_id,
    },
  }).then((res) => {
    if (res.code === '1') {
      form.ykl_qxsz = res.data.one_info.ykl_qxsz
      if (form.ykl_qxsz === '3') {
        form.ykl_qxszry = JSON.parse(res.data.one_info.ykl_qxszry)
      }
      else if (form.ykl_qxsz === '4') {
        form.ykl_qxszry = JSON.parse(res.data.one_info.ykl_qxszry)
        MemberList = JSON.parse(res.data.one_info.ykl_qxszry)
      }
      console.log('设置成绩查看权限 初始化 : ', form)
      dialogVisible = true
    }
    else {
      ElMessage({
        message: res.msg,
        type: 'error',
        grouping: true,
      })
    }
  }).catch((error) => {
    console.error(error)
    ElMessage({
      message: '操作失败',
      type: 'error',
      grouping: true,
    })
  })

  // dialogVisible = true
}

function handleYklQxszChange() {
  form.ykl_qxszry = []
}

function handleSubmit() {
  console.log('设置成绩查看权限 提交 : ', form)
  request({
    url: '/yzy/kmksyjlc/edit',
    data: {
      ykl_id: _ykl_lc_.ykl_id,
      yk: {
        ykl_qxsz: form.ykl_qxsz,
        ykl_qxszry: JSON.stringify(form.ykl_qxszry),
      },
    },
  }).then((res) => {
    if (res.code === '1') {
      ElMessage({
        message: '操作成功',
        type: 'success',
        grouping: true,
      })
      dialogVisible = false
    }
    else {
      ElMessage({
        message: res.msg,
        type: 'error',
        grouping: true,
      })
    }
  }).catch((error) => {
    console.error(error)
    ElMessage({
      message: '操作失败',
      type: 'error',
      grouping: true,
    })
  })
}

let memberLoading = $ref(false)
function queryMember(keyword: string) {
  if (keyword) {
    memberLoading = true
    request({
      url: `${window.GLOBAL_CONFIG.uc}/user/main/index`,
      data: {
        keyword,
        sm_id: parseInt(user.value.user_role_id) >= 72 ? user.value.sm_info.sm_id : undefined,
      },
    }).then((res) => {
      if (res.code === '1') {
        MemberList = (res.data.page_data as MemberItem[]).map(({ user_id, user_realname, user_role_name }) => ({ user_id, user_realname, user_role_name }))
        memberLoading = false
      }
    })
  }
  else {
    MemberList = []
  }
}
</script>

<template>
  <el-link type="primary" :disabled="disabled" @click="handleClickLink">
    设置成绩查看权限
  </el-link>
  <el-dialog v-model="dialogVisible" title="权限设置" width="855px">
    <el-form :model="form" label-width="100">
      <el-form-item label="开放权限">
        <el-radio-group v-model="form.ykl_qxsz" @change="handleYklQxszChange">
          <el-radio label="1">
            仅自己可见
          </el-radio>
          <el-radio label="2">
            公开
          </el-radio>
          <el-radio label="3">
            指定身份可见
          </el-radio>
          <el-radio label="4">
            指定人可见
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item v-if="form.ykl_qxsz === '3'" label="身份选择">
        <el-checkbox-group v-model="form.ykl_qxszry">
          <el-checkbox v-for="role in RoleList" :key="role.user_role_id" :label="role">
            {{ role.user_role_name }}
          </el-checkbox>
        </el-checkbox-group>
      </el-form-item>

      <el-form-item v-if="form.ykl_qxsz === '4'" label="人员选择">
        <el-select
          v-model="form.ykl_qxszry" class="flex-full" multiple filterable remote reserve-keyword
          placeholder="请输入账号，手机号或用户名" :remote-method="queryMember" :loading="memberLoading" value-key="user_id"
        >
          <el-option
            v-for="item in MemberList" :key="item.user_id"
            :label="`${item.user_role_name} - ${item.user_realname}`" :value="item"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>
