<template>
  <view class="container">
    <!-- 搜索区域：固定在顶部 -->
    <view class="search-area">
      <view class="search-item">
        <text>考官姓名：</text>
        <input v-model="queryParams.name" class="search-input" placeholder="请输入考官姓名"/>
      </view>
      <view class="search-item">
        <text>考官编号：</text>
        <input v-model="queryParams.certCode" class="search-input" placeholder="请输入考官编号"/>
      </view>
      <view class="search-buttons">
        <button class="search-btn" @click="handleQuery">查询</button>
        <button class="reset-btn" @click="resetQuery">重置</button>
      </view>
    </view>
    
    <view v-for="(item, index) in infoList" :key="item.perId" class="list-item">
      <view class="info">
        <view class="name">{{ item.name }} {{ item.perCode }}</view>
        <view class="idc">证件号码：{{ item.idcCode }}</view>
        <view class="reg">注册地：{{ item.memName }}</view>
      </view>
      <button
        :class="{ disabled: checkChosen(item) }"
        :disabled="checkChosen(item)"
        class="choose-btn"
        @click="handleChoose(item)"
      >
        {{ checkChosen(item) ? '已选择' : '选择' }}
      </button>
    </view>
    
    <uni-popup ref="expirePopup" background-color="rgba(0,0,0,0.5)" type="center">
      <view class="custom-modal">
        <view class="modal-title">提示</view>
        <view class="modal-content">该考官资质已过期，是否继续添加？</view>
        <view class="modal-btns">
          <button class="btn-cancel" @click="closeExpirePopup()">取消</button>
          <button class="btn-confirm" @click="confirmAddExpireExaminer()">确定</button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script setup>
import {ref, reactive, toRefs} from 'vue'
import {onLoad} from '@dcloudio/uni-app';
import * as api from '@/common/api.js'
import _ from 'lodash'

const props = defineProps({
  isValidity: {
    type: String,
    default: '0'
  }
})

const isValidity = ref('0')
const memId = ref('')
const chosen = ref([])
const expirePopup = ref(null)
const currentExpireItem = ref(null)
const infoList = ref([])
const loading = ref(false)
const total = ref(0)
const selfSelect = ref('0')
const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    name: null,
    certCode: null,
    type: 1,
    shenMemId: ''
  }
})
const {queryParams} = toRefs(data)

onLoad((option) => {
  console.log(option)
  isValidity.value = option.isValidity
  memId.value = option.memId
  chosen.value = JSON.parse(option.chosen)
  selfSelect.value = option.selfSelect ?? '1'
})


// 获取考官列表
async function getList() {
  if (!queryParams.value.name)
    return uni.showToast({title: '请输入考官姓名', icon: 'none'})
  if (queryParams.value.type == 1 && !queryParams.value.certCode)
    return uni.showToast({title: '请输入考官编号', icon: 'none'})

  loading.value = true
  try {
    const res = await api.getCoachList(queryParams.value)
    infoList.value = res.rows || []
    total.value = res.total || 0
  } catch (err) {
    console.error('获取考官列表失败:', err)
    infoList.value = []
    total.value = 0
  } finally {
    loading.value = false
  }

  // 空数组提示
  if (infoList.value.length === 0) {
    uni.showToast({title: '请核实考官编号、有效期及归属地', icon: 'none', duration: 2000})
  }
}

// 检查是否已选择
function checkChosen(row) {
  return _.some(chosen.value, (c) => {
    return c.perId == row.perId
  })
}

// 查询
function handleQuery() {
  queryParams.value.pageNum = 1
  getList()
}

// 重置
function resetQuery() {
  queryParams.value.name = null
  queryParams.value.certCode = null
  infoList.value = []
  total.value = 0
}

function handleChoose(row) {
  if (checkChosen(row)) {
    return uni.showToast({title: '已选择该考官', icon: 'none'})
  }
  // 暂存当前考官数据
  currentExpireItem.value = row
  // 资质过期逻辑
  if (row.canChoose != 1) {
    // 打开自定义过期确认弹窗
    expirePopup.value.open()
    return
  }
  confirmAddExpireExaminer()
  
}

// 关闭过期确认弹窗
function closeExpirePopup() {
  expirePopup.value.close()
}

// 确认添加过期考官
async function confirmAddExpireExaminer() {
  if (!currentExpireItem.value) return
  try {
    if (selfSelect.value == 1) {
      // 自己添
      await api.selfAdd(currentExpireItem.value.perId)
    } else {
      // 省级添加
      await api.otherAdd(memId.value, currentExpireItem.value.perId)
    }
    uni.showToast({title: '添加成功', icon: 'success'})
    uni.navigateBack({delta: 1})
  } catch (err) {
    console.log(err)
    const errMsg = err?.data?.msg || err?.msg || '添加失败'
    uni.showToast({title: errMsg, icon: 'none', duration: 3000})
  } finally {
    expirePopup.value.close()
    currentExpireItem.value = null
    await getList()
  }
}
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  background: #f7f7f7;
  min-height: 100vh;
  padding: 0;
}

.search-area {
  background: #ffffff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin: 30rpx;
  flex-shrink: 0;
}

.search-item {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.search-input {
  flex: 1;
  border: 1rpx solid #ddd;
  border-radius: 8rpx;
  padding: 20rpx;
  font-size: 28rpx;
}

.search-buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 30rpx;
  margin-left: 80px;
}

.search-btn, .reset-btn {
  width: 220rpx;
  height: 70rpx;
  line-height: 70rpx;
  border-radius: 8rpx;
  text-align: center;
  font-size: 28rpx;
}

.search-btn {
  background: #C4121B;
  color: #fff;
}

.reset-btn {
  background: #f7f7f7;
  color: #333;
}

/* 列表区域：滚动 */
.list-area {
  flex: 1;
  background: #ffffff;
  border-radius: 16rpx;
  margin: 0 30rpx 30rpx;
  padding: 0 30rpx;
}

.list-item {
  padding: 30rpx;
  margin: 0 30rpx;
  border-bottom: 1rpx solid #eee;
  background-color: #fff;
}

.info {
  flex: 1;
}

.name {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
}

.idc, .reg {
  font-size: 26rpx;
  color: #666;
  margin: 20rpx 0;
}

.choose-btn {
  color: #C4121B;
  font-size: 26rpx;
  border: 1rpx solid #C4121B;
  border-radius: 8rpx;
  padding: 10rpx 20rpx;
  background-color: #fff;
  margin: 10rpx auto;
}

.choose-btn.disabled {
  color: #ccc;
  border-color: #ccc;
}

/* 自定义弹窗样式（和之前保持统一） */
.custom-modal {
  width: 600rpx;
  background: #fff;
  border-radius: 20rpx;
  padding: 40rpx 30rpx;
  box-sizing: border-box;
  text-align: center;
}

.modal-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 30rpx;
}

.modal-content {
  font-size: 30rpx;
  color: #666;
  line-height: 1.6;
  margin-bottom: 30rpx;
}

.modal-btns {
  display: flex;
  justify-content: space-between;
  gap: 20rpx;
}

.btn-cancel {
  flex: 1;
  height: 80rpx;
  line-height: 80rpx;
  background: #f5f5f5;
  color: #999;
  border-radius: 40rpx;
  font-size: 32rpx;
  border: none;
}

.btn-confirm {
  flex: 1;
  height: 80rpx;
  line-height: 80rpx;
  background: #C4121B;
  color: #fff;
  border-radius: 40rpx;
  font-size: 32rpx;
  border: none;
}

/* 去除button默认边框 */
.btn-cancel::after, .btn-confirm::after {
  border: none;
}
</style>