import OHeader from '@/components/o-header'
import OSticky from '@/components/o-sticky'
import { Field, CellGroup, Icon, Button, showToast, ActionSheet } from 'vant'
import { defineComponent, reactive, ref, onMounted } from 'vue'
import styles from './index.module.less'
import { useRouter } from 'vue-router'
import { state as globalState } from '@/state'
// import locIcon from './images/loc-icon.png'
import request from '@/helpers/request'

export default defineComponent({
  name: 'unit-create',
  setup() {
    const router = useRouter()
    const state = reactive({
      actions: [] as any,
      classList: [] as any,
      showPopoverOrchestra: false,
      showPopoverClass: false
    })
    const forms = ref({
      orchestraId: '',
      orchestraName: '',
      classGroupName: '',
      classGroupId: '',
      emergencyContact: '',
      addressLongitudeLatitude: '',
      unitName: '',
      unitId: ''
    } as any)
    const schoolImageRef = ref()
    const submitInfo = async () => {
      sessionStorage.setItem('unit-create', JSON.stringify(forms.value))
    }
    const chioseLesson = () => {
      if (!forms.value.classGroupId) {
        showToast('请选择测验班级')
        return
      }
      sessionStorage.setItem('unit-create', JSON.stringify(forms.value))
      router.push({ path: '/unit-Lesson', query: { classGroupId: forms.value.classGroupId } })
    }
    onMounted(() => {
      forms.value = { ...JSON.parse(sessionStorage.getItem('unit-create') || '{}') } as any
      getOrchestraList()
    })
    const getOrchestraList = async () => {
      try {
        const res = await request.post('/api-school/orchestra/page', {
          data: { page: 1, rows: 9999, status: 'DONE' }
        })
        state.actions = res.data.rows.map((item) => {
          return {
            name: item.name,
            value: item.id as string
          }
        })
      } catch (e: any) {
        const message = e.message
        showToast(message)
      }
    }
    const checkOrchestra = async (val: any) => {
      forms.value.orchestraId = val.value
      forms.value.orchestraName = val.name
      forms.value.classGroupName = ''
      forms.value.classGroupId = ''

      if (val.value) {
        try {
          const res = await request.post('/api-teacher/classGroup/page', {
            data: { page: 1, rows: 9999, orchestraId: val.value }
          })
          state.classList = res.data.rows.map((item) => {
            return {
              name: item.name,
              value: item.id as string
            }
          })

          if (state.classList.length < 1) {
            showToast('当前乐团暂无班级')
          }
        } catch (e) {
          console.log(e, 'cuowu')
        }
      } else {
        state.classList = []
      }

      state.showPopoverOrchestra = false
    }
    const checkClass = async (val: any) => {
      forms.value.classGroupName = val.name
      forms.value.classGroupId = val.value
      state.showPopoverClass = false
    }
    return () => (
      <>
        <div class={styles.schoolEidtWrap}>
          <div class={styles.eidtWrap}>
            {/*      onClick={() => setAddress()} */}
            <CellGroup inset>
              <Field
                v-model={forms.value.orchestraName}
                placeholder="选择乐团"
                disabled
                input-align="right"
                onClick={() => {
                  state.showPopoverOrchestra = true
                }}
              >
                {{
                  extra: () => (
                    <div class={styles.loctionIconWrap}>
                      <Icon name="arrow" color="#d8d8d8"></Icon>
                      {/* <Image width={19} height={18} src={locIcon}></Image> */}
                    </div>
                  ),
                  label: () => <p class={styles.addP}>选择乐团</p>
                }}
              </Field>
              <Field
                rows={3}
                v-model={forms.value.classGroupName}
                maxlength={50}
                placeholder="测验班级"
                disabled
                input-align="right"
                onClick={() => {
                  if (!forms.value.orchestraId) {
                    showToast('请先选择乐团')
                  } else {
                    state.showPopoverClass = true
                  }
                }}
              >
                {{
                  extra: () => (
                    <div class={styles.loctionIconWrap}>
                      <Icon name="arrow" color="#d8d8d8"></Icon>
                      {/* <Image width={19} height={18} src={locIcon}></Image> */}
                    </div>
                  ),
                  label: () => <p class={styles.addP}>测验班级</p>
                }}
              </Field>
              <Field
                rows={3}
                v-model={forms.value.unitName}
                maxlength={50}
                placeholder="测验内容"
                disabled
                input-align="right"
                onClick={chioseLesson}
              >
                {{
                  extra: () => (
                    <div class={styles.loctionIconWrap}>
                      <Icon name="arrow" color="#d8d8d8"></Icon>
                      {/* <Image width={19} height={18} src={locIcon}></Image> */}
                    </div>
                  ),
                  label: () => <p class={styles.addP}>测验内容</p>
                }}
              </Field>
            </CellGroup>
          </div>

          <OSticky position="bottom">
            <div class={'btnGroup'}>
              <Button block round type="primary">
                下一步
              </Button>
            </div>
          </OSticky>
        </div>
        <ActionSheet
          v-model:show={state.showPopoverOrchestra}
          title="选择乐团"
          actions={state.actions}
          onSelect={checkOrchestra}
        ></ActionSheet>
        <ActionSheet
          v-model:show={state.showPopoverClass}
          title="选择班级"
          actions={state.classList}
          onSelect={checkClass}
        ></ActionSheet>
      </>
    )
  }
})