import OHeader from '@/components/o-header'
import OSticky from '@/components/o-sticky'
import { Form, Field, CellGroup, showToast, Icon, Popup, Picker, Button } 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 request from '@/helpers/request'
import { areas } from '@/helpers/area'

export default defineComponent({
  name: 'school-detail',
  setup() {
    const router = useRouter()
    const state = reactive({
      list: [],
      info: {} as any,
      showArea: false,
      columns: [] as any,
      showProvince: ''
    })
    const forms = reactive({
      provinceCode: '',
      cityCode: '',
      address: ''
    })
    const getSchoolDetail = async () => {
      const schoolId = (globalState.user.data.schoolInfos || [])
        .map((item) => {
          return item.id
        })
        .join(',')
      try {
        const { data } = await request.get(`/api-school/school/detail/${schoolId}`, {})
        state.info = data
        state.showProvince = data.provinceName + data.cityName
        forms.provinceCode = data.provinceCode
        forms.cityCode = data.cityCode
        forms.address = data.address
      } catch (e: any) {
        showToast(e.message)
      }
    }

    const submitInfo = async () => {
      const schoolId = (globalState.user.data.schoolInfos || [])
        .map((item) => {
          return item.id
        })
        .join(',')
      if (!forms.cityCode || !forms.provinceCode) {
        showToast('请选择省市')
        return
      }
      if (!forms.address) {
        showToast('请输入详细地址')
        return
      }
      try {
        const { data } = await request.post('/api-school/school/update', {
          data: {
            ...forms,
            schoolId
          }
        })
        showToast('修改成功')
        setTimeout(() => {
          router.push('/school-detail')
        }, 500)
      } catch (e: any) {
        showToast(e.message)
      }
      console.log('submitInfo')
    }
    onMounted(() => {
      getSchoolDetail()
    })

    const onConfirmArea = (val) => {
      console.log(val)
      state.showProvince = val.selectedOptions[0].name + val.selectedOptions[1].name
      forms.provinceCode = val.selectedOptions[0].code
      forms.cityCode = val.selectedOptions[1].code
      state.showArea = false
    }

    onMounted(() => {
      // console.log(areas)
      const tempareas: any = []
      areas.forEach((item) => {
        const temp = {
          name: item.name,
          code: item.code,
          areas: [] as any
        }
        if (item.areas && item.areas.length > 0) {
          item.areas.forEach((child) => {
            temp.areas.push({
              name: child.name,
              code: child.code
            })
          })
        }
        tempareas.push(temp)
      })
      state.columns = tempareas || []
    })
    return () => (
      <>
        <div class={styles.schoolEidtWrap}>
          <OHeader></OHeader>
          <div class={styles.eidtWrap}>
            <CellGroup inset>
              <Field
                is-link
                readonly
                v-model={state.showProvince}
                name="area"
                label="地区选择"
                placeholder="点击选择省市"
                onClick={() => (state.showArea = true)}
              ></Field>
              <Field
                type="textarea"
                rows={3}
                v-model={forms.address}
                label="详细地址"
                maxlength={50}
                placeholder="小区楼栋/乡村名称"
              ></Field>
            </CellGroup>
          </div>
          <div class={styles.wall}></div>
          <div class={styles.bottomWrap}>
            <Button type="primary" size="large" onClick={submitInfo}>
              确 认
            </Button>
          </div>
          <Popup v-model:show={state.showArea} position="bottom">
            <Picker
              showToolbar
              columnsFieldNames={{ text: 'name', value: 'code', children: 'areas' }}
              onConfirm={onConfirmArea}
              columns={state.columns}
              onCancel={() => (state.showArea = false)}
            ></Picker>
          </Popup>
        </div>
      </>
    )
  }
})
