import { defineComponent, onMounted, ref } from 'vue';
import styles from './index.module.less';
import { Radio, RadioGroup, Image, Button } from 'vant';
import checkBoxActive from './images/icon-n-1.png';
import checkBoxDefault from './images/icon-n-2.png';
import request from '@/helpers/request';
import { storage } from '@/helpers/storage';
import { ACCESS_TOKEN } from '@/store/mutation-types';
import { setLogin } from '@/state';

export default defineComponent({
  name: 'login-change-model',
  props: {
    credential: {
      type: Object,
      default: () => ({})
    }
  },
  emits: ['close', 'confirm'],
  setup(props, { emit }) {
    const radioChecked = ref();
    const btnLoading = ref(false);
    const list = ref([] as any);

    onMounted(async () => {
      try {
        const { data } = await request.post('/edu-app/open/user/getMultiUser', {
          data: {
            ...props.credential
          }
        });
        const result = data || [];
        result.forEach((item: any) => {
          list.value.push({
            userId: item.studentId,
            avatar: item.avatar,
            nickname: item.nickname,
            schoolName: item.schoolName,
            token: item.token,
            tokenExpireTime: item.tokenExpireTime
          });
        });
      } catch {
        //
      }
    });
    return () => (
      <div class={styles.loginChangeModel}>
        <i
          class={styles.iconClose}
          onClick={() => {
            emit('close');
          }}></i>
        <div class={styles.popupTitle}>
          <span>选择学生</span>
        </div>
        <RadioGroup class={styles.selectStudent} v-model={radioChecked.value}>
          {list.value.map((item: any) => (
            <div
              class={[
                styles.cell,
                radioChecked.value === item.userId && styles.cellSelected
              ]}
              onClick={() => {
                radioChecked.value = item.userId;
                // emit('confirm', item);
                // emit('close');
              }}>
              <Radio name={item.userId}>
                {{
                  icon: (props: any) => (
                    <Image
                      class={styles.iconImage}
                      src={props.checked ? checkBoxActive : checkBoxDefault}
                    />
                  )
                }}
              </Radio>

              <div class={styles.userInfo}>
                <Image src={item.avatar} class={styles.userImg} fit="cover" />

                <div class={styles.usernames}>
                  <div class={styles.name}>
                    <span class={styles.names}>{item.nickname}</span>
                  </div>
                  {item.schoolName && (
                    <div class={styles.schoolname}>{item.schoolName}</div>
                  )}
                </div>
              </div>
            </div>
          ))}
        </RadioGroup>

        <div class={styles.addStudentBtn}>
          <Button
            block
            round
            loading={btnLoading.value}
            disabled={!radioChecked.value || btnLoading.value}
            color="linear-gradient( 135deg, #31C7FF 0%, #007AFE 100%)"
            onClick={async () => {
              btnLoading.value = true;
              try {
                const item = list.value.find(
                  (item: any) => item.userId === radioChecked.value
                );
                if (!item.userId) return;
                const forms: any = {
                  username: props.credential.phone,
                  client_id: 'cooleshow-student',
                  client_secret: 'cooleshow-student',
                  password: item.token,
                  grant_type: 'password',
                  loginType: 'TOKEN'
                };
                const result = await request.post('/edu-app/userlogin', {
                  requestType: 'form',
                  data: {
                    ...forms
                  }
                });

                storage.set(
                  ACCESS_TOKEN,
                  result.data.token_type + ' ' + result.data.access_token
                );

                const userCash = await request.get(
                  '/edu-app/user/getUserInfo',
                  {
                    initRequest: true // 初始化接口
                  }
                );
                setLogin(userCash.data);

                emit('confirm', {
                  loginTag: true
                });
                emit('close');
              } finally {
                //
                btnLoading.value = false;
              }
            }}>
            <span>确认</span>
          </Button>
        </div>
      </div>
    );
  }
});