<template>
  <div class="main">
    <div class="info">
      <van-image v-if="avatarUrl" round width="132" height="132" fit="cover" :src="avatarUrl" />
      <van-icon v-else size="132" name="https://b.yzcdn.cn/vant/icon-demo-1126.png" />
      <h5>{{ entity.real_name }}<template v-if="entity.meta?.nickName"> ({{ entity.meta?.nickName }})</template></h5>
      <div class="parent-info">
        <div v-if="entity.meta?.father_job">
          <label>父亲职业：</label> {{entity.meta?.father_job}}
        </div>
        <div v-if="entity.meta?.mother_job">
          <label>母亲职业：</label> {{entity.meta?.mother_job}}
        </div>
      </div>
    </div>
    <div v-if="is_teacher && is_waiting" class="btns">
      <template v-if="entity.enabled">
        <van-button size="large" type="primary" @click="approve(entity.hty_id)">通过</van-button>
        <van-button size="large" type="danger" @click="state.rejecting = true">拒绝</van-button>
      </template>
      <div class="disabled-tip" v-else>用户尚未启用！</div>
    </div>
  </div>
  <van-dialog v-if="is_teacher && is_waiting" v-model:show="state.rejecting" title="请输入驳回原因" show-cancel-button @confirm="confirm" @cancel="cancel">
    <div class="text-area">
      <van-field v-model="state.reason" rows="2" type="textarea" maxlength="200" show-word-limit/>
    </div>
  </van-dialog>
</template>

<script lang="ts">
import {defineComponent, ref, computed, reactive} from "vue";
import useUser from "~/store/user";
import {showFailToast, Icon, Image, Button, Dialog, Field} from "vant";
import {useRouter} from "vue-router";
import {User, HtyBaseRoles, TeacherStudentStates} from "~/types";
import {computedAsync} from "@vueuse/core";
import {UpyunAccess} from "~/utils/upyun";

export default defineComponent({
  name: "student-detail",
  props: ['params'],
  components: {
    [Icon.name]: Icon,
    [Image.name]: Image,
    [Button.name]: Button,
    [Dialog.name]: Dialog,
    [Field.name]: Field
  },
  setup({params}) {

    const router = useRouter();
    let {store, restoreStudent, rejectStudent, approveStudent, getStudents} = useUser();
    let {currentRole} = store;
    const entity = ref<User>({} as User)
    const state = reactive({
      rejecting: false,
      reason: '',
    })

    const init = async () => {
      await getStudents(params.status);
      let {students, unclaimed} = store;
      if (params.id) {
        let user = [...Object.values(students).reduce((a, c) => [...a, ...c], []), ...unclaimed].find(x => x.hty_id === params.id);
        if (user) {
          entity.value = user as User;
        } else {
          showFailToast({message: '未找到指定用户！', onClose: () => router.back()})
        }
      } else {
        showFailToast({
          message: '请指定用户ID!',
          onClose: () => router.back()
        });
      }
    }

    init();


    const approve = async (id: string) => {
      await approveStudent(id);
      router.back()
    }

    const confirm = async () => {
      let { reason } = state;
      if (!reason) {
        showFailToast('请输入驳回原因！')
        return false;
      }
      await rejectStudent(params.id, reason);
      router.back()
    }

    const cancel = () => {
      state.rejecting = false;
    }

    const avatarUrl = computedAsync(async () => {
      let url = entity.value.avatar_url || entity.value.meta?.avatarUrl;
      if (url && url.includes("upyun")) {
        return (await UpyunAccess.getSign(url));
      }
      return url;
    })

    const is_teacher = computed(() => currentRole === HtyBaseRoles.TEACHER);

    const is_waiting = computed(() => params.status === TeacherStudentStates.Waiting);

    return {entity, is_teacher, is_waiting, state, restoreStudent, approve, confirm, cancel, avatarUrl}
  }
});
</script>

<style scoped lang="less">
.main {

  .info {
    text-align: center;
    padding: 0.32rem 0 2rem;
    background: #FFFFFF;

    h5 {
      margin: 0.2rem 0;
    }

    .roles {
      display: flex;
      align-items: center;
      justify-content: center;


      :deep(.van-tag) {
        margin: 0 0.06rem;
      }

      :deep(.van-icon) {
        margin-left: 0.1rem;
      }
    }

    .parent-info {
      font-size: small;
      text-align: left;
      padding: 0 0.32rem;

      label {
        color: #999999;
      }
    }
  }
  .btns {
    padding: 0.32rem;
    margin-top: 0.24rem;
    display: flex;
    align-items: center;
    justify-content: space-between;

    button {
      &:first-child{
        margin-right: 0.1rem;
      }
      &:last-child{
        margin-left: 0.1rem;
      }
    }

    .disabled-tip {
      width: 100%;
      text-align: center;
      color: darkorange;
    }
  }
}
.text-area {
  font-size: 12px;
  width: 90%;
  margin: 0.2rem auto;
  background-clip: padding-box;
  border: 1px solid #dddddd;
}
</style>
