import OHeader from '@/components/o-header'
import OSticky from '@/components/o-sticky'
import { Field, CellGroup, Icon, Button, showToast, ActionSheet, Popup, Picker } from 'vant'
import { defineComponent, reactive, ref, onMounted, nextTick } 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 showFirstloading = ref(false)
    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(async () => {
      forms.value = { ...JSON.parse(sessionStorage.getItem('unit-create') || '{}') } as any
      getOrchestraList()
      if (forms.value?.orchestraId) {
        try {
          const res = await request.post('/api-teacher/classGroup/page', {
            data: { page: 1, rows: 9999, orchestraId: forms.value?.orchestraId }
          })
          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')
        }
      }
    })
    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
          }
        })

        nextTick(() => {
          showFirstloading.value = true
        })
      } catch (e: any) {
        showFirstloading.value = true
        const message = e.message
        showToast(message)
      }
    }
    const checkOrchestra = async (val: any) => {
      console.log(val.selectedOptions)
      forms.value.orchestraId = val.selectedOptions[0].value
      forms.value.orchestraName = val.selectedOptions[0].name
      forms.value.classGroupName = ''
      forms.value.classGroupId = ''

      if (val.selectedOptions[0].value) {
        try {
          const res = await request.post('/api-teacher/classGroup/page', {
            data: { page: 1, rows: 9999, orchestraId: val.selectedOptions[0].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.selectedOptions[0].name
      forms.value.classGroupId = val.selectedOptions[0].value
      state.showPopoverClass = false
    }
    return () => (
      <>
        {showFirstloading.value ? (
          <div class={styles.schoolEidtWrap}>
            <div class={styles.eidtWrap}>
              {/*      onClick={() => setAddress()} */}
              <CellGroup inset>
                <Field
                  // v-model={forms.value.orchestraName}
                  placeholder="请选择乐团"
                  readonly
                  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>,
                    input: () =>
                      forms.value.orchestraName ? (
                        <div class={[styles.orchestraName, 'van-ellipsis']}>
                          {forms.value.orchestraName}
                        </div>
                      ) : (
                        <div style={{ color: '#c8c9cc' }}>请选择乐团</div>
                      )
                  }}
                </Field>
                <Field
                  rows={3}
                  v-model={forms.value.classGroupName}
                  maxlength={50}
                  placeholder="请选择测验班级"
                  readonly
                  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="请选择测验内容"
                  readonly
                  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>
        ) : null}

        {/* <ActionSheet
          v-model:show={state.showPopoverOrchestra}
          title="选择乐团"
          actions={state.actions}
          onSelect={checkOrchestra}
        ></ActionSheet> */}
        <Popup v-model:show={state.showPopoverOrchestra} position="bottom" round>
          <Picker
            columns={state.actions}
            columnsFieldNames={{ text: 'name', value: 'value' }}
            onCancel={() => (state.showPopoverOrchestra = false)}
            onConfirm={checkOrchestra}
          />
        </Popup>

        <Popup v-model:show={state.showPopoverClass} position="bottom" round>
          <Picker
            columns={state.classList}
            columnsFieldNames={{ text: 'name', value: 'value' }}
            onCancel={() => (state.showPopoverOrchestra = false)}
            onConfirm={checkClass}
          />
        </Popup>
        {/*
        <ActionSheet
          v-model:show={state.showPopoverClass}
          title="选择班级"
          actions={state.classList}
          onSelect={checkClass}
        ></ActionSheet> */}
      </>
    )
  }
})