<template>
  <u-navbar title="更改状态" :autoBack="true" bgColor="#fff" placeholder safeAreaInsetTop :titleStyle="{ color: '#000' }" leftIconColor="#000"></u-navbar>
  <view class="state graybg">
    <view class="flexJ" style="margin-bottom: 62rpx">
      <view v-for="(_, index) in statelist" :key="index" class="stateBtn flexC" :class="{ activeBtn: params.state === _.value }" @click="params.state = _.value">{{ _.title }}</view>
    </view>
    <template v-if="params.state === 1">
      <view class="state-title">问诊情况</view>
      <view class="state-item topbr">
        <view class="flexJ">
          <view class="itemtitle">图文问诊</view>
          <u-switch v-model="params.textState" size="28" :activeValue="1" :inactiveValue="0" activeColor="#06b8d2"></u-switch>
        </view>
        <u-line margin="32rpx 0 0 0"></u-line>
      </view>
      <view class="state-item">
        <view class="flexJ">
          <view class="itemtitle">视频问诊</view>
          <u-switch v-model="params.videoState" size="28" :activeValue="1" :inactiveValue="0" activeColor="#06b8d2"></u-switch>
        </view>

        <u-line margin="32rpx 0 0 0"></u-line>
      </view>
      <view class="state-item botbr" style="padding-bottom: 32rpx">
        <view class="flexJ">
          <view class="itemtitle">电话问诊</view>
          <u-switch v-model="params.phoneState" size="28" :activeValue="1" :inactiveValue="0" activeColor="#06b8d2"></u-switch>
        </view>
      </view>
      <view class="state-title" style="margin-top: 32rpx">坐诊时间</view>

      <view class="state-item topbr">
        <view class="flexJ">
          <view class="itemtitle">开始时间</view>
          <view class="flexA">
            <view style="font-size: 30rpx; color: #a6a6a6" @click=";(showTimePickerState = true), (flag = 'startTime')">
              {{ params.startTime.length ? params.startTime : '请选择' }}
            </view>
            <u-icon name="arrow-right" color="#A6A6A6" size="18"></u-icon>
          </view>
        </view>
        <u-line margin="32rpx 0 0 0"></u-line>
      </view>
      <view class="state-item botbr" style="padding-bottom: 32rpx">
        <view class="flexJ">
          <view class="itemtitle">截止时间</view>
          <view class="flexA">
            <view style="font-size: 30rpx; color: #a6a6a6" @click=";(showTimePickerState = true), (flag = 'endTime')">
              {{ params.endTime.length ? params.endTime : '请选择' }}
            </view>
            <u-icon name="arrow-right" color="#A6A6A6" size="18"></u-icon>
          </view>
        </view>
      </view>
      <up-button color="#05B8D2" shape="circle" text="提交" throttleTime="1500" @click="submitMineStateHandler(params.state)"></up-button>
    </template>
    <view style="margin-top: 160rpx" v-if="params.state === 0">
      <up-button color="#05B8D2" shape="circle" text="提交" throttleTime="1500" @click="submitMineStateHandler(params.state)"></up-button>
    </view>
  </view>
  <u-datetime-picker :show="showTimePickerState" mode="time" @cancel="showTimePickerState = false" @confirm="confirmSelectTimeHandler"></u-datetime-picker>
</template>

<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app'
import { ref, getCurrentInstance, ComponentPublicInstance } from 'vue'
import { updateChange_state, getState } from '../../api'
import { ChangeStateType } from '../../types'
import dayjs from 'dayjs'
import customParseFormat from 'dayjs/plugin/customParseFormat'
dayjs.extend(customParseFormat)

const { proxy } = getCurrentInstance() as { proxy: ComponentPublicInstance }
interface EventType {
  state: string
}

const flag = ref<string>('')

const showTimePickerState = ref(false)

const params = ref({
  state: 0,
  textState: 0,
  videoState: 0,
  phoneState: 0,
  startTime: '',
  endTime: ''
})

const statelist = ref([
  { title: '在线坐诊', value: 1 },
  { title: '暂不接诊', value: 0 }
])

const confirmSelectTimeHandler = (e: { value: string; mode: string }) => {
  const startTime = flag.value === 'startTime' ? e.value : params.value.startTime
  const endTime = flag.value === 'endTime' ? e.value : params.value.endTime

  const startTimeParts = startTime.split(':') // 将时间字符串拆分为小时和分钟
  const endTimeParts = endTime.split(':')

  const startHour = parseInt(startTimeParts[0], 10) // 将小时部分转换为整数
  const startMinute = parseInt(startTimeParts[1], 10) // 将分钟部分转换为整数

  const endHour = parseInt(endTimeParts[0], 10)
  const endMinute = parseInt(endTimeParts[1], 10)

  const startDate = new Date(0, 0, 0, startHour, startMinute) // 创建Date对象表示startTime
  const endDate = new Date(0, 0, 0, endHour, endMinute) // 创建Date对象表示endTime
  if (startDate > endDate) {
    // console.log('startTime 晚于 endTime')
    uni.$u.toast(`${flag.value === 'startTime' ? '开始时间' : '截止时间'}不能${flag.value === 'startTime' ? '晚于' : '早于'}${flag.value === 'startTime' ? '截止时间' : '开始时间'}`)
    return
  }
  // else if (startDate < endDate) {
  //   console.log('startTime 早于 endTime')
  // } else {
  //   console.log('startTime 和 endTime 相同')
  // }

  showTimePickerState.value = false
  params.value[flag.value] = e.value
}

const submitMineStateHandler = async (state: number) => {
  if (!params.value.startTime.length && state === 1) return uni.$u.toast('请选择开始时间')

  if (!params.value.endTime.length && state === 1) return uni.$u.toast('请选择结束时间')

  if (state === 0) {
    await updateChange_state({ state: 0 })
  } else {
    await updateChange_state(params.value)
  }
  proxy.$h.timeCallBack('修改成功')
}

const getStateHandler = async () => {
  const { result } = await getState()

  const { videoState, textState, phoneState, startTime, endTime } = result

  if ([videoState, textState, phoneState, startTime, endTime].includes(null)) return

  params.value = result.state === 0 ? { ...result, state: 0 } : result
}
// (params.value = (await getState()).result)

onLoad((e: EventType) => {
  params.value.state = Number(e.state)

  getStateHandler()
})
</script>

<style lang="scss" scoped>
page {
  /* background: #f7f8fa; */
}
.state {
  box-sizing: border-box;
  padding: 32rpx 24rpx;
  &-title {
    color: #999999;
    margin-bottom: 26rpx;
    font-size: 26rpx;
  }
  &-item {
    box-sizing: border-box;
    padding: 32rpx 32rpx 0 32rpx;
    background: #fff;
  }
  .itemtitle {
    color: #323233;
    font-size: 30rpx;
    font-weight: 700;
  }
  .topbr {
    border-radius: 24rpx 24rpx 0 0;
  }
  .botbr {
    border-radius: 0 0 24rpx 24rpx;
  }
  .stateBtn {
    width: 48%;
    border-radius: 24rpx;
    background: #fff;
    color: #323233;
    font-size: 36rpx;
    font-weight: 700;
    height: 158rpx;
  }
  .activeBtn {
    background: #05b8d2;
    color: #fff;
  }
}
</style>