<script setup>
import dayjs from 'dayjs'
import { getElevatorInfoApi, postWorkDataDistributionApi } from '@/api/elevator'
import { tryFormValidate } from '@/helper/async'

const elevatorList = ref([])
const elevatorInfo = ref({})
const getElevatorInfo = async () => {
  const { error, data } = await getElevatorInfoApi(options.value)
  if (error) {
    return
  }
  elevatorInfo.value = data
  elevatorList.value = [
    {
      id: data.id,
      name: data.elevatorName
    }
  ]
}

const showAction = ref(false)
const actionSelect = (e) => {
  console.log('actionSelect', e)
  const { name, value } = e
  model.value.planTypeName = name
  model.value.planType = value
  form.value.validateField('planType')
}
const actions = [
  { name: '半月', value: '1' },
  { name: '季度', value: '2' },
  { name: '半年', value: '3' },
  { name: '年度', value: '4' }
]
const hideKeyboard = () => {
  uni.hideKeyboard()
}

const showCalendar = ref(false)
const calendarConfirm = ([time]) => {
  console.log('calendarConfirm', time)
  showCalendar.value = false
  model.value.expectTime = time
}
const calendarClose = () => {
  showCalendar.value = false
  form.value.validateField('expectTime')
}

const form = ref(null)
const model = ref({
  // 1.救援 2.维修 3.维保
  workType: 3,
  publisher: '',
  planType: '',
  planTypeName: '',
  expectTime: dayjs().format('YYYY-MM-DD'),
  description: ''
})
const rules = ref({
  planType: {
    type: 'string',
    required: true,
    message: '请选择维保项',
    trigger: ['change']
  },
  expectTime: {
    type: 'string',
    required: true,
    message: '请选择期望时间',
    trigger: ['change']
  }
})

const submit = async () => {
  const [isOk] = await tryFormValidate(form)
  if (isOk) {
    console.log(model.value)
    const { error } = await postWorkDataDistributionApi({
      ...model.value,
      elevatorList: elevatorList.value
    })
    if (!error) {
      uni.$u.toast('提交成功')
      uni.navigateBack({
        delta: 2
      })
    } else {
      uni.$u.toast('提交失败，请稍后重试')
    }
  } else {
    uni.$u.toast('校验失败')
  }
}

const options = ref({})
onLoad(async (e) => {
  options.value = e
  getElevatorInfo()

  const { nickName } = uni.getStorageSync('userInfo')
  model.value.publisher = nickName
})
</script>

<template>
  <!-- 基本信息 -->
  <view my-20 px-30>
    <view text-40 text-bold mt-20>{{ elevatorInfo.elevatorName }}</view>
    <view f-s-c mt-8>
      <up-icon name="map-fill" :size="24" :color="`${'#579BF7'}`" />
      <text text-28 font-400 ml-4>{{ elevatorInfo.elevatorAddress }}</text>
    </view>
  </view>

  <view px-28 mt-20>
    <up-form
      ref="form"
      label-width="80"
      label-position="left"
      :model="model"
      :rules="rules"
    >
      <up-form-item label="工作选项" prop="workType" border-bottom>
        <text>维保</text>
      </up-form-item>
      <up-form-item
        label="维保选项"
        prop="planType"
        border-bottom
        @click="
          () => {
            showAction = true
            hideKeyboard()
          }
        "
      >
        <up-input
          v-model="model.planTypeName"
          disabled
          disabled-color="#ffffff"
          placeholder="请选择维保选项"
          border="none"
        />
        <template #right>
          <up-icon name="arrow-right" />
        </template>
      </up-form-item>
      <up-form-item
        label="期望时间"
        prop="expectTime"
        label-width="80"
        border-bottom
        @click="
          () => {
            showCalendar = true
            hideKeyboard()
          }
        "
      >
        <up-input
          v-model="model.expectTime"
          disabled
          disabled-color="#ffffff"
          placeholder="请选择期望时间"
          border="none"
        />
        <template #right>
          <up-icon name="arrow-right" />
        </template>
      </up-form-item>
      <up-form-item
        label="工作描述："
        prop="description"
        label-position="top"
        :border="`${'none'}`"
      >
        <up-textarea
          v-model="model.description"
          placeholder="请输入工作描述"
          maxlength="300"
          count
          height="150"
        />
      </up-form-item>
    </up-form>

    <up-button
      type="primary"
      text="确认创建"
      custom-style="margin-top: 30px"
      @click="submit"
    />
  </view>

  <up-action-sheet
    :show="showAction"
    :actions="actions"
    title="维保选项"
    @close="showAction = false"
    @select="actionSelect"
  />

  <up-calendar
    :show="showCalendar"
    confirm-disabled-text="请选择日期"
    @confirm="calendarConfirm"
    @close="calendarClose"
  />
</template>
