<template>
  <u-popup
    v-model="props.show"
    mode="center"
    border-radius="15"
    width="90%"
    @close="close"
  >
    <view class="u_card">
      <u-card :title="'学员' + label">
        <template #body>
          <view>学员姓名：{{ name }}</view>
          <u-form :model="formData" label-position="top">
            <!-- <u-form-item label="" prop="radio">
              <u-radio-group v-model="formData.radio">
                <u-radio
                  v-for="(item, index) in radioList"
                  :key="index"
                  :name="item.name"
                  shape="square"
                >
                  {{ item.name }}
                </u-radio>
              </u-radio-group>
            </u-form-item> -->
            <u-form-item :label="label + '原因：'" :border-bottom="false"
              ><u-input
                v-model="formData.reason"
                type="textarea"
                border
                maxlength="30"
                height="120"
                :placeholder="'请输入' + props.label + '原因'"
            /></u-form-item>
          </u-form>
        </template>
        <template #foot>
          <u-button size="medium" @tap="emits('update:modelValue', false)"
            >取消</u-button
          >
          <u-button size="medium" type="primary" @tap="submit"
            >确认{{ props.label }}</u-button
          >
        </template>
      </u-card>
    </view>
  </u-popup>
</template>

<script setup lang="ts">
import { toast } from "@/utils/util"

const props = defineProps({
  show: Boolean,
  name: String,
  label: String,
  radio: String,
})

const emits = defineEmits(["update:modelValue", "submit"])

const formData = reactive({
  radio: "",
  reason: "",
})

const submit = () => {
  if (!formData.reason) return toast("请输入" + props.label)
  emits("submit", formData.reason)
}
const close = () => {
  formData.reason = ""
}

const init = (radio: string) => {
  formData.radio = radio
}

defineExpose({
  init,
})
</script>

<style lang="scss" scoped>
.u_card {
  padding: 20rpx 0;
}

:deep(.u-card__foot) {
  display: flex;
  justify-content: space-between;
}
</style>
