import OHeader from '@/components/o-header'
import OPopup from '@/components/o-popup'
import request from '@/helpers/request'
import { Button, Cell, CellGroup, Dialog, Grid, GridItem, Image, showToast } from 'vant'
import { defineComponent, onMounted, reactive, ref } from 'vue'
import { useRoute } from 'vue-router'
import styles from './manage-detail.module.less'
import MenuFunction from './menu-function'
import iconTeacher from '@common/images/icon_teacher.png'
import OSticky from '@/components/o-sticky'

export default defineComponent({
  name: 'manage-detail',
  setup() {
    const route = useRoute()
    const detail = ref<any>({})
    const state = reactive({
      menuStatus: false,
      status: false
    })
    const getDetail = async () => {
      try {
        const query = route.query
        const { data } = await request.get('/api-school/schoolStaff/detail/' + query.id)
        detail.value = { ...data }
      } catch {
        //
      }
    }

    // 冻结
    const onFreeze = async () => {
      try {
        // {
        //   detail.value.status === 'ACTIVATION' && '冻结账号'
        // }
        // {
        //   detail.value.status === 'LOCKED' && '解冻账号'
        // }

        const query = route.query
        await request.post('/api-school/schoolStaff/freeze/' + query.id)
        setTimeout(() => {
          if (detail.value.status === 'ACTIVATION') {
            detail.value.status = 'LOCKED'
            showToast('冻结成功')
          } else {
            detail.value.status = 'ACTIVATION'
            showToast('解冻成功')
          }
        }, 100)
      } catch {
        //
      }
    }

    onMounted(() => {
      getDetail()
    })
    return () => (
      <>
        <OHeader />

        <CellGroup inset class={styles.detailCellGroup}>
          <Cell center class={styles.detailCell}>
            {{
              icon: () => (
                <Image
                  class={styles.img}
                  src={detail.value.avatar ? detail.value.avatar : iconTeacher}
                />
              ),
              title: () => (
                <div class={styles.content}>
                  <p class={[styles.name, 'van-ellipsis']}>{detail.value.nickname}</p>
                  <p class={styles.phone}>{detail.value.phone}</p>
                </div>
              )
            }}
          </Cell>
        </CellGroup>

        <div class={styles.sectionTitle}>
          <i></i>
          基本信息
        </div>

        <CellGroup inset class={[styles.detailCellGroup, styles.sectionCellGroup]}>
          <Cell title={'手机号码'} value={detail.value.nickname}></Cell>
          <Cell
            title={'性别'}
            value={detail.value.gender == 1 ? '男' : detail.value.gender == 0 ? '女' : ''}
          ></Cell>
        </CellGroup>

        {/* 判断是否有权限 */}
        {detail.value.menuButtons && detail.value.menuButtons.length > 0 && (
          <>
            <div class={styles.sectionTitle}>
              <i></i>
              功能权限
            </div>
            <Grid border={false} class={styles.functionGrid}>
              {detail.value.menuButtons.map((item: any) => (
                <GridItem>
                  {{
                    icon: () => <Image class={styles.functionImg} src={item.buttonImage} />,
                    text: () => (
                      <div class={[styles.functionText, 'van-ellipsis']}>{item.title}</div>
                    )
                  }}
                </GridItem>
              ))}
            </Grid>
          </>
        )}

        <OSticky position="bottom">
          <div
            class={['btnGroup', 'btnMore']}
            style={{ paddingLeft: '13px', paddingRight: '13px' }}
          >
            <Button type="primary" round onClick={() => (state.menuStatus = true)}>
              修改权限
            </Button>
            <Button
              type="primary"
              round
              color="#64A9FF"
              onClick={() => (state.status = true)}
              // disabled={ ? false : true}
            >
              {detail.value.status === 'ACTIVATION' && '冻结账号'}
              {detail.value.status === 'LOCKED' && '解冻账号'}
            </Button>
          </div>
        </OSticky>

        <OPopup v-model:modelValue={state.menuStatus} destroy>
          <MenuFunction
            onClose={() => (state.menuStatus = false)}
            onSuccess={() => getDetail()}
            teacherId={detail.value.id}
            menus={detail.value.menuButtons}
          />
        </OPopup>

        <Dialog
          v-model:show={state.status}
          message={`${
            detail.value.status === 'ACTIVATION'
              ? '冻结后该管理老师将无法登录\n确认需要冻结吗？'
              : '确认需要解冻吗？'
          }`}
          messageAlign="left"
          showCancelButton
          onConfirm={onFreeze}
        >
          {{
            title: () => (
              <div class={styles.dialogTitle}>
                <i></i>
                {detail.value.status === 'ACTIVATION' ? '冻结' : '解冻'}管理老师
              </div>
            )
          }}
        </Dialog>
      </>
    )
  }
})