<template>
  <view>
    <CuNavbar title="升职申请">
      <template v-if="!isEdit" #right>
        <uv-icon color="white" @click="open" name="more-dot-fill"></uv-icon>
      </template>
    </CuNavbar>
    <uv-sticky bgColor="white">
      <view class="p-base box-shadow text-28rpx">
        <view class="flex justify-between px-10rpx">
          <view>晋升职位</view>
          <view>{{ detail?.job?.name }}</view>
        </view>
        <view class="flex justify-between mt-15rpx px-10rpx">
          <view>申请人</view>
          <view>{{ detail?.employee?.name }}</view>
        </view>
        <view class="flex justify-between mt-15rpx px-10rpx">
          <view>推荐人</view>
          <view>{{ detail?.invitor?.name }}</view>
        </view>
      </view>
    </uv-sticky>
    <view class="p-base" :class="isEdit ? '' : 'pointer-events-none'">
      <view class="card-shadow px-base">
        <uv-form
          labelPosition="left"
          :model="form"
          :rules="rules"
          ref="formRef"
          errorType="toast"
          labelWidth="250rpx"
        >
          <uv-form-item :required="isEdit" label="年龄" prop="age">
            <uv-input
              placeholder="请输入年龄"
              inputAlign="right"
              :border="`none`"
              v-model="form.age"
            >
            </uv-input>
          </uv-form-item>
          <uv-line color="#f5f5f5"></uv-line>
          <uv-form-item :required="isEdit" label="性别" prop="sex">
            <uv-input
              placeholder="请选择性别"
              @click="openPicker"
              readonly
              inputAlign="right"
              :border="`none`"
              v-model="form.sex"
            >
            </uv-input>
          </uv-form-item>
          <uv-line color="#f5f5f5"></uv-line>
          <uv-form-item :required="isEdit" label="学历" prop="education">
            <uv-input
              placeholder="请输入学历"
              inputAlign="right"
              :border="`none`"
              v-model="form.education"
            >
            </uv-input>
          </uv-form-item>
          <uv-line color="#f5f5f5"></uv-line>
          <uv-form-item
            :required="isEdit"
            label="首次参加工作时间"
            prop="first_work_time"
          >
            <uv-input
              placeholder="请选择日期"
              :required="isEdit"
              @click="openDatePicker"
              inputAlign="right"
              :border="`none`"
              v-model="form.first_work_time"
            >
            </uv-input>
          </uv-form-item>
          <uv-line color="#f5f5f5"></uv-line>
          <uv-form-item :required="isEdit" label="工作年限" prop="work_years">
            <uv-input
              placeholder="请输入工作年限"
              inputAlign="right"
              :border="`none`"
              v-model="form.work_years"
            >
            </uv-input>
          </uv-form-item>
          <uv-line color="#f5f5f5"></uv-line>
          <uv-form-item
            :required="isEdit"
            label="本公司工作年限"
            prop="work_years_in_company"
          >
            <uv-input
              placeholder="请输入本公司工作年限"
              inputAlign="right"
              :border="`none`"
              v-model="form.work_years_in_company"
            >
            </uv-input>
          </uv-form-item>
          <uv-line color="#f5f5f5"></uv-line>
          <uv-form-item
            :required="isEdit"
            label="员工自评"
            prop="comment_self"
            labelPosition="top"
          >
            <uv-textarea
              v-model="form.comment_self"
              count
              placeholder="请输入员工自评"
              :border="`none`"
              :maxlength="200"
            ></uv-textarea>
          </uv-form-item>
          <uv-line color="#f5f5f5"></uv-line>
          <uv-form-item
            :required="isEdit"
            label="未来计划"
            prop="plans"
            labelPosition="top"
          >
            <uv-textarea
              v-model="form.plans"
              count
              placeholder="请输入未来计划"
              :border="`none`"
              :maxlength="200"
            ></uv-textarea>
          </uv-form-item>
          <template v-if="detail.promotion_status > 1">
            <uv-line color="#f5f5f5"></uv-line>
            <uv-form-item
              label="推荐理由"
              prop="reason"
              :required="isEdit"
              labelPosition="top"
            >
              <uv-textarea
                v-model="form.reason"
                count
                placeholder="请输入推荐理由"
                :border="`none`"
                :maxlength="200"
              ></uv-textarea>
            </uv-form-item>
          </template>
        </uv-form>
      </view>
    </view>

    <view class="px-base" v-if="isEdit">
      <view class="py-30rpx">
        <uv-button type="primary" @click="submit">提交</uv-button>
      </view>
    </view>

    <uv-picker
      ref="pickerRef"
      :columns="columns"
      @confirm="confirmPicker"
    ></uv-picker>
    <uv-datetime-picker
      :minDate="50"
      placeholder="请选择日期"
      ref="datetimePicker"
      mode="year-month"
      @confirm="confirmDatePicker"
    >
    </uv-datetime-picker>
    <uv-modal
      ref="modalRef"
      title="提示"
      content="确定提交吗?"
      @confirm="onSubmit"
      :showCancelButton="true"
    ></uv-modal>

    <uv-action-sheet
      ref="actionSheet"
      :actions="actionlist"
      @select="select"
      cancelText="取消"
    >
    </uv-action-sheet>
  </view>
</template>
<script setup>
import CuNavbar from '@/components/cu-navbar/index'
import { ref, reactive, computed, onBeforeMount } from 'vue'
import { http } from '@/utils/request'
import { timeFormat } from '@climblee/uv-ui/libs/function/index'
const props = defineProps({
  id: {
    type: [Number, String],
  },
  isEdit: {
    type: Boolean,
  },
})
const actionlist = ref([
  {
    name: '去提交',
    value: 'submit',
  },
])
const actionSheet = ref(null)
const columns = [['男', '女']]
const formRef = ref(null)
const datetimePicker = ref(null)
const pickerRef = ref(null)
const modalRef = ref(null)
const loading = ref(false)
const detail = ref({})

const form = reactive({
  age: '',
  sex: '',
  education: '',
  first_work_time: '',
  work_years: '',
  work_years_in_company: '',
  comment_self: '',
  plans: '',
  reason: '',
})
const openPicker = () => {
  pickerRef.value.open()
}
const openDatePicker = () => {
  datetimePicker.value.open()
}
const confirmDatePicker = (e) => {
  form.first_work_time = timeFormat(e.value, 'yyyy-mm')
}
const confirmPicker = (e) => {
  form.sex = e.value[0]
}
const rules = reactive({
  age: [{ required: true, message: '请输入年龄' }],
  sex: [{ required: true, message: '请选择性别' }],
  education: [{ required: true, message: '请输入学历' }],
  first_work_time: [{ required: true, message: '请输入首次参加工作时间' }],
  work_years: [{ required: true, message: '请输入清洁范围' }],
  work_years_in_company: [{ required: true, message: '请输入本公司工作年限' }],
  comment_self: [{ required: true, message: '请输入员工自评' }],
  plans: [{ required: true, message: '请输入未来计划' }],
  reason: [{ required: true, message: '请输入推荐理由' }],
})

onBeforeMount(() => {
  getDetail()
})

const submit = () => {
  formRef.value.validate().then((res) => {
    modalRef.value.open()
  })
}

const onSubmit = async () => {
  if (loading.value) return
  loading.value = true
  try {
    const params = {
      ...form,
    }
    const resData = await http.request({
      url: `/hr/promotion/${props.id}/apply`,
      method: 'POST',
      header: {
        Accept: 'application/json',
      },
      data: params,
    })
    uni.showToast({
      title: '提交成功',
      icon: 'none',
    })
    formRef.value.resetFields()
    uni.$emit('work:submit', resData)
    uni.navigateBack()
  } catch (error) {
    console.log(error)
  } finally {
    loading.value = false
  }
}

const getDetail = async () => {
  http.get(`/hr/promotion/${props.id}`).then((res) => {
    detail.value = res
    Object.assign(form, res?.employee_data || {})
  })
}

const open = () => {
  actionSheet.value.open()
}

const select = (e) => {
  const { value } = e
  if(value === 'submit') {
    uni.navigateTo({
      url: `/pages/work/create?id=${props.id}`,
    })
  }
}
</script>
