import OHeader from '@/components/o-header'
import OSticky from '@/components/o-sticky'
import { Tabs, Tab, showToast, Icon, Field, Button } from 'vant'
import { defineComponent, onMounted, reactive, ref } from 'vue'
import styles from './student-leave.module.less'
import { useRouter, useRoute } from 'vue-router'
import request from '@/helpers/request'
import ApprovalItem from './approval-item'
import cardICon from '../images/card-icon.png'
import dateICon from '../images/date-icon.png'
import eiditICon from '../images/eidit-icon.png'
import questICon from '../images/quest-icon.png'
import StudentCourseItem from './student-course-item'
import dayjs from 'dayjs'
const activeName = ref('wait')
const item = ref({} as any)
const courseScheduleList = ref([] as any)
const leaveReason = ref('')
const isEnd = ref(false)
export default defineComponent({
  name: 'approval-manage',
  setup() {
    const router = useRouter()
    const route = useRoute()
    const state = reactive({})

    const getLeaveDetail = async () => {
      try {
        const { data } = await request.get(
          `/api-school/userApproveRecord/detail/${route.query.id}`,
          {}
        )
        item.value = data
        courseScheduleList.value = data.courseScheduleList || []
        leaveReason.value = item.value.approvalComments
      } catch (e: any) {
        // console.log(e, 'e')
        const message = e.message
        showToast(message)
      }
    }
    onMounted(() => {
      leaveReason.value = ''
      isEnd.value = route.query.type == 'end' ? true : false
      getLeaveDetail()
    })

    const approval = async (val: string) => {
      if (!leaveReason.value) {
        showToast('请输入审批原因')
        return
      }
      try {
        const { data } = await request.post(`/api-school/userApproveRecord/approval`, {
          data: {
            id: route.query.id,
            approvalComments: leaveReason.value,
            status: val
          }
        })
        showToast('提交成功')
        router.push('/approval-manage')
      } catch (e: any) {
        showToast(e.message || '提交失败')
      }
    }
    return () => (
      <>
        <div class={styles.leaveWrap}>
          <OSticky>
            <OHeader></OHeader>
          </OSticky>
          <ApprovalItem item={item.value} type={route.query.type}></ApprovalItem>
          {item.value.approveType == 'LEAVE' ? (
            <div>
              <div class={styles.leaveInfo}>
                <p class={styles.subTitle}>
                  <Icon class={styles.subTitleIcon} name={dateICon}></Icon>
                  <span>请假日期</span>
                </p>
                <p class={styles.leaveDate}>
                  {dayjs(item.value.startTime).format('YYYY年MM月DD日')} -{' '}
                  {dayjs(item.value.endTime).format('YYYY年MM月DD日')}
                </p>
                <p class={styles.subTitle}>
                  <Icon class={styles.subTitleIcon} name={questICon}></Icon>
                  <span>请假原因</span>
                </p>
                <p class={styles.leaveReason}>{item.value.approveReason}</p>
              </div>
              {courseScheduleList.value.length > 0 ? (
                <div class={styles.courseWrap}>
                  <div class={styles.courseWrapTitlte}>
                    {' '}
                    <p class={styles.subTitle}>
                      <Icon class={styles.subTitleIcon} name={cardICon}></Icon>
                      <span>涉及课程</span>
                    </p>
                  </div>

                  <div class={styles.courseList}>
                    {courseScheduleList.value.map((items) => (
                      <StudentCourseItem
                        item={items}
                        type={item.value.clientType}
                      ></StudentCourseItem>
                    ))}
                    {/* {item.value?.courseScheduleList} */}
                  </div>
                </div>
              ) : null}
            </div>
          ) : null}
          {item.value.approveType == 'ORCHESTRA' ? (
            <div>
              <div class={styles.leaveInfo}>
                <p class={styles.subTitle}>
                  <Icon class={styles.subTitleIcon} name={questICon}></Icon>
                  <span>退团原因</span>
                </p>
                <p class={styles.leaveReason}>{item.value.approveReason}</p>
              </div>
            </div>
          ) : null}
          <div class={styles.reasonWrap}>
            <Field
              label-align="top"
              maxlength={400}
              v-model={leaveReason.value}
              autosize
              type="textarea"
              rows={5}
              show-word-limit
              placeholder="请输入你的审批意见"
              disabled={isEnd.value}
            >
              {{
                label: () => (
                  <div>
                    <div class={styles.reasonLabelLeft}>
                      {' '}
                      <Icon class={styles.bottomIcon} name={eiditICon}></Icon> <span>意见审批</span>
                    </div>
                  </div>
                )
              }}
            </Field>
          </div>
          {isEnd.value ? null : (
            <div class={['btnGroup btnMore', styles.btnWrap]}>
              <Button color="#ccc" class={styles.unpassBtn} onClick={() => approval('UNPASS')}>
                拒绝
              </Button>
              <Button color="#FF8057" class={styles.unpassBtn} onClick={() => approval('PASS')}>
                通过
              </Button>
            </div>
          )}
        </div>
      </>
    )
  }
})
