<template>
  <view>
    <CuNavbar title="升职申请"></CuNavbar>
    <uv-sticky bgColor="white">
      <view class="px-base box-shadow text-28rpx">
        <view class="px-base">
          <BaseData :data="detail" :colums="titleColumns" />
        </view>
      </view>
    </uv-sticky>
    <view class="p-base">
      <view class="card-shadow px-base">
        <uv-form
          labelPosition="left"
          :model="form"
          :rules="rules"
          ref="formRef"
          errorType="toast"
          labelWidth="250rpx"
        >
          <template v-if="type == 0">
            <uv-form-item required 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 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 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
              @click="openDatePicker"
              label="首次参加工作时间"
              prop="first_work_time"
            >
              <uv-input
                placeholder="请选择日期"
                required
                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 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
              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
              label="员工自评"
              prop="comment_self"
              labelPosition="top"
            >
              <uv-textarea
                v-model="form.comment_self"
                :customStyle="{ padding: '0' }"
                count
                placeholder="请输入员工自评"
                :border="`none`"
                :maxlength="200"
              ></uv-textarea>
            </uv-form-item>
            <uv-line color="#f5f5f5"></uv-line>
            <uv-form-item
              required
              label="未来计划"
              prop="plans"
              labelPosition="top"
            >
              <uv-textarea
                :customStyle="{ padding: '0' }"
                v-model="form.plans"
                count
                placeholder="请输入未来计划"
                :border="`none`"
                :maxlength="200"
              ></uv-textarea>
            </uv-form-item>
          </template>
          <template v-if="type == 1">
            <BaseData :data="detail.employee_data" :colums="userColumns" />
            <uv-line color="#f5f5f5"></uv-line>
              <uv-form-item
                label="推荐理由"
                prop="reason"
                required
                labelPosition="top"
              >
                <uv-textarea
                  :customStyle="{ padding: '0' }"
                  v-model="form.reason"
                  count
                  placeholder="请输入推荐理由"
                  :border="`none`"
                  :maxlength="200"
                ></uv-textarea>
              </uv-form-item>
          </template>
        </uv-form>
      </view>
    </view>

    <view class="px-base">
      <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
      placeholder="请选择日期"
      ref="datetimePicker"
      mode="year-month"
      :minDate="(new Date(0)).getTime()"
      @confirm="confirmDatePicker"
    >
    </uv-datetime-picker>
    <uv-modal
      ref="modalRef"
      title="提示"
      content="确定提交吗?"
      @confirm="onSubmit"
      :showCancelButton="true"
    ></uv-modal>
  </view>
</template>
<script setup>
import CuNavbar from '@/components/cu-navbar/index'
import BaseData from '../audits/base-data.vue'
import { onLoad } from '@dcloudio/uni-app'
import { http } from '@/utils/request'
import { ref, reactive, computed, onBeforeMount } from 'vue'
import { timeFormat } from '@climblee/uv-ui/libs/function/index'

const detail = ref({})
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 type = ref(0)

const titleColumns = [
  { title: '晋升职位', dataIndex: 'job.name' },
  { title: '申请人', dataIndex: 'employee.name' },
  { title: '推荐人', dataIndex: 'invitor.name' },
]

const userColumns = [
  { title: '年龄', dataIndex: 'age' },
  { title: '性别', dataIndex: 'sex' },
  { title: '学历', dataIndex: 'education' },
  { title: '首次参加工作时间', dataIndex: 'first_work_time' },
  { title: '工作年限', dataIndex: 'work_years' },
  { title: '本公司工作年限', dataIndex: 'work_years_in_company' },
  { title: '员工自评', dataIndex: 'comment_self', labelPosition: 'top' },
  { title: '未来计划', dataIndex: 'plans', labelPosition: 'top' },
]

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) => {
  let date = new Date(e.value);
  let month = date.getMonth() + 1
  if (month < 10) {
    month = '0' + month
  }
  form.first_work_time = date.getFullYear() + '-' + month
}
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: '请输入推荐理由' }],
})

onLoad((options) => {
  type.value = options.type
  http.get(`/hr/promotion/${options.id}`).then(res => {
    detail.value = res
  })
})

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

const onSubmit = async () => {
  if (loading.value) return
  loading.value = true
  try {
    const params = {
      ...form,
    }

    const resData = await http.request({
      url: `/hr/promotion/${detail.value.id}`,
      method: 'POST',
      data: params,
    })
    uni.showToast({
      title: '提交成功',
      icon: 'none',
    })
    formRef.value.resetFields()
    uni.$emit('refresh')
    uni.navigateBack()
  } catch (error) {
    console.log(error)
  } finally {
    loading.value = false
  }
}

const open = () => {
  actionSheet.value.open()
}
</script>
