import OActionSheet from '@/components/o-action-sheet'
import { ActionSheet, ActionSheetAction } from 'vant'
import { computed, defineComponent, ref } from 'vue'
import EndApproval from './components/end-approval'
import WaitApproval from './components/wait-approval'
import iconArrow from './images/icon-arrow.png'
import styles from './index.module.less'

export default defineComponent({
  name: 'MyApproval',
  setup(props, ctx) {
    const actions = computed(() => {
      return [
        {
          name: '待审批',
          selected: activeName.value == '待审批' ? true : false
        },
        { name: '已完成', selected: activeName.value == '已完成' ? true : false }
      ]
    })
    const activeName = ref('待审批')
    const show = ref(false)
    return () => (
      <div class={styles.MyApproval}>
        <div class={'searchGroup-single'}>
          <span
            class={['searchItem', show.value && 'searchItem-active']}
            onClick={() => (show.value = true)}
          >
            {activeName.value}
          </span>
        </div>

        <OActionSheet
          v-model:show={show.value}
          teleport={'body'}
          actions={actions.value}
          onSelect={(val: any) => {
            actions.value.forEach((child: any) => {
              child.selected = false
            })
            activeName.value = val.name || '待审批'
            show.value = false
            val.selected = true
          }}
        />

        {activeName.value == '待审批' ? <WaitApproval /> : <EndApproval />}
      </div>
    )
  }
})
