import OHeader from '@/components/o-header'
import OQrcode from '@/components/o-qrcode'
import OSearch from '@/components/o-search'
import OSticky from '@/components/o-sticky'
import { Cell, Grid, GridItem, Icon, Image, Popup } from 'vant'
import { defineComponent, onMounted, reactive } from 'vue'
import styles from './index.module.less'
import iconSaveImage from '@/school/orchestra/images/icon-save-image.png'
import iconWechat from '@/school/orchestra/images/icon-wechat.png'
import { useRouter } from 'vue-router'
import request from '@/helpers/request'
import { state } from '@/state'

export default defineComponent({
  name: 'companion-teacher',
  setup() {
    const router = useRouter()
    const form = reactive({
      oPopover: false,
      showQrcode: false,
      schoolName: null,
      schoolId: null,
      url: null as any
    })

    const getDetail = async (id: string | number) => {
      try {
        const res = await request.get('/api-school/schoolStaff/detail/' + id)
        console.log(res, 'res')
        form.schoolName = res.data.schoolName
        form.schoolId = res.data.schoolId
        form.url =
          location.origin + '/orchestra-school/manageTeacher.html?schoolId=' + res.data.schoolId
      } catch {
        //
      }
    }

    const onDetail = () => {
      router.push('/manage-teacher-detail')
    }

    onMounted(() => {
      console.log(state.user.data.id, '1212')
      getDetail(state.user.data.id)
    })
    return () => (
      <>
        <OSticky position="top">
          <OHeader border={false}>
            {{
              right: () => <Icon name="plus" size={19} onClick={() => (form.showQrcode = true)} />
            }}
          </OHeader>
          <OSearch
            placeholder="请输入管理老师姓名"
            inputBackground="white"
            background="#f6f8f9"
            v-slots={{
              left: () => (
                <div class={styles.searchBand} style={{ marginRight: '13px' }}>
                  状态 <Icon name={form.oPopover ? 'arrow-up' : 'arrow-down'} />
                </div>
              )
            }}
          />
        </OSticky>

        <Cell center isLink class={styles.manageCell} onClick={() => onDetail()}>
          {{
            icon: () => (
              <Image
                class={styles.img}
                src="https://daya.ks3-cn-beijing.ksyuncs.com/12/1670231208704.png"
              />
            ),
            title: () => (
              <div class={styles.content}>
                <p class={styles.name}>林老师</p>
                <p class={styles.phone}>10000000021</p>
              </div>
            ),
            value: () => <span class={[styles.status, styles.frozen]}>状态</span>
          }}
        </Cell>

        <Popup
          v-model:show={form.showQrcode}
          position="bottom"
          style={{ background: 'transparent' }}
          safeAreaInsetBottom={true}
        >
          <div class={styles.codeContainer}>
            <div class={styles.codeImg}>
              <div class={styles.codeContent}>
                <h2 class={styles.codeTitle}>{form.schoolName}</h2>
                <div class={styles.codeName}>邀请您成为乐团管理老师</div>

                <div class={styles.codeQr}>
                  <OQrcode text={form.url} size={'100%'} />
                </div>
                <div style={{ textAlign: 'center' }}>
                  <span class={styles.codeBtnText}>扫描上方二维码完成资料填写</span>
                </div>
                <div class={styles.codeTips}>二维码将在两小时后失效，请及时登记</div>
              </div>
            </div>
            <div class={styles.codeBottom}>
              <Icon
                name="cross"
                size={22}
                class={styles.close}
                color="#666"
                onClick={() => (form.showQrcode = false)}
              />

              <h3 class={styles.title}>
                <i></i>分享方式
              </h3>
              <Grid columnNum={2} border={false}>
                <GridItem>
                  {{
                    icon: () => <Image class={styles.shareImg} src={iconSaveImage} />,
                    text: () => <div class={styles.shareText}>保存图片</div>
                  }}
                </GridItem>
                <GridItem>
                  {{
                    icon: () => <Image class={styles.shareImg} src={iconWechat} />,
                    text: () => <div class={styles.shareText}>微信</div>
                  }}
                </GridItem>
              </Grid>
            </div>
          </div>
        </Popup>
      </>
    )
  }
})