import OHeader from '@/components/o-header'
import OSticky from '@/components/o-sticky'
import request from '@/helpers/request'
import { Button, Grid, GridItem, Image, showToast, Sticky } from 'vant'
import { defineComponent, onMounted, reactive } from 'vue'
import styles from './menu-function.module.less'

export default defineComponent({
  name: 'menu-function',
  props: {
    teacherId: {
      type: String,
      default: ''
    },
    menus: {
      type: Array || String,
      default: []
    }
  },
  emits: ['close', 'success'],
  setup(props, { slots, attrs, emit }) {
    const detail = reactive({
      list: [] as any,
      selectMenus: [] as any
    })

    const getMenus = async () => {
      try {
        const { data } = await request.post('/api-school/sysMenuButton/page', {
          data: {
            auditFlag: false,
            status: true,
            clientType: 'SCHOOL',
            page: 1,
            rows: 100
          }
        })
        detail.list = data.rows || []
      } catch {
        //
      }
    }

    const isChecked = (id: string) => {
      return detail.selectMenus.includes(id)
    }

    const onChangeMneu = (item: any) => {
      if (isChecked(item.id)) {
        const index = detail.selectMenus.findIndex((select: any) => select === item.id)
        detail.selectMenus.splice(index, 1)
      } else {
        detail.selectMenus.push(item.id)
      }
    }

    const updateMenus = async () => {
      try {
        const tempMnus: any = []
        detail.list &&
          detail.list.forEach((item: any) => {
            if (isChecked(item.id)) {
              tempMnus.push({
                buttonImage: item.buttonImage,
                sortOrder: item.order,
                id: item.id,
                title: item.title,
                homePage: item.homePage
              })
            }
          })
        await request.post('/api-school/schoolStaff/updateButton', {
          data: {
            teacherId: props.teacherId,
            menuButtons: [...tempMnus]
          }
        })
        setTimeout(() => {
          showToast('修改成功')
          setTimeout(() => {
            emit('close')
            emit('success')
          }, 1000)
        }, 100)
      } catch {
        //
      }
    }

    onMounted(() => {
      getMenus()

      const temp = props.menus ? props.menus : []
      const ids = temp.map((t: any) => {
        return t.id
      })
      detail.selectMenus = [...ids]
    })
    return () => (
      <div class={styles.menuFunction}>
        <OHeader desotry={false} />

        <div class={styles.menuContent}>
          <h2>全部功能</h2>
          <Grid border={false} class={styles.functionGrid}>
            {detail.list &&
              detail.list.map((item: any) => (
                <GridItem
                  onClick={() => onChangeMneu(item)}
                  class={isChecked(item.id) ? '' : styles.gray}
                >
                  {{
                    icon: () => <Image class={[styles.functionImg]} src={item.buttonImage} />,
                    text: () => (
                      <div class={[styles.functionText, 'van-ellipsis']}>{item.title}</div>
                    )
                  }}
                </GridItem>
              ))}
          </Grid>
        </div>

        <Sticky position="bottom">
          <div class={'btnGroup'}>
            <Button block round type="primary" onClick={updateMenus}>
              确认修改
            </Button>
          </div>
        </Sticky>
      </div>
    )
  }
})
