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: '待审批', color: activeName.value == '待审批' ? 'var(--van-primary-color)' : '' },
        { name: '已完成', color: activeName.value == '已完成' ? 'var(--van-primary-color)' : '' }
      ]
    })
    const activeName = ref('待审批')
    const show = ref(false)
    return () => (
      <div class={styles.MyApproval}>
        <div class={styles.select} onClick={() => (show.value = true)}>
          <span>{activeName.value}</span>
          <img src={iconArrow} />
        </div>
        <ActionSheet
          teleport="body"
          cancelText="取消"
          v-model:show={show.value}
          actions={actions.value}
          onSelect={(action: ActionSheetAction, index: number) => {
            activeName.value = action.name || '待审批'
            show.value = false
          }}
        ></ActionSheet>

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