<!-- 延时监火的添加页面 -->
<template>
  <view class="content">
    <view class="card">
      <u-form labelPosition="left" :model="form" :rules="rules" ref="formRef" labelWidth="140px">
        <u-form-item label="监火人" prop="USER_NAME" borderBottom required>
          <u-input v-model="form.USER_NAME" border="none" readonly />
        </u-form-item>
        <u-form-item label="时间" prop="TIME" borderBottom required
          @click="fnDateTimePickerClick('TIME')">
          <u-input v-model="form.TIME" border="none" readonly />
          <u-icon name="arrow-right"></u-icon>
        </u-form-item>
        <u-form-item label="照片" prop="imgList" borderBottom required labelPosition="top" labelWidth="auto">
          <u-upload class="mt-10" :fileList="form.imgList" @afterRead="fnAfterRead($event, 'imgList')"
            @delete="fnDeletePic($event, 'imgList')" multiple :maxCount="1"></u-upload>
        </u-form-item>
      </u-form>
      <view class="mt-10">
        <u-button type="primary" text="提交" @click="$u.debounce(fnSubmit, 1000, true)" />
      </view>
    </view>

    <u-datetime-picker :show="dateTimePicker.show" v-model="dateTimePicker.value" :mode="dateTimePicker.mode"
      :maxDate="dateTimePicker.max" :key="dateTimePicker.type" @confirm="fnDateTimePickerConfirm"
      @cancel="fnDateTimePickerCancel" />
  </view>
</template>

<script>
import { formatDate } from '@/utils/tools';
import {setHotWorkRecord, setTaskFile} from "../../../../api";

export default {
  onLoad(event) {
    this.EW_RU_TASK_ID = event.taskId
    this.EW_RU_JOB_ID = event.EW_RU_JOB_ID
    this.TYPE = event.TYPE
  },
  data() {
    return {
      EW_RU_JOB_ID: '',
      EW_RU_TASK_ID: '',
      form:{
        EW_SP_DHW_MONITOR_ID: '',
        EW_RU_JOB_ID: '',
        EW_RU_TASK_ID: '',
        /** 监火人 */
        USER_NAME: this.$store.getters.getUserInfo.NAME,
        USER_ID: this.$store.getters.getUserInfo.USER_ID,
        /** 时间 */
        TIME: formatDate(new Date(), 'yyyy-MM-dd hh:mm'),
        /** 照片 */
        imgList: [],
        FILE_PATH: ''
      },
      rules: {
        USER_NAME: [{ type: 'string', required: true, message: '请输入监火人', trigger: ['blur', 'change'] }],
        TIME: [{ type: 'string', required: true, message: '请选择时间', trigger: ['blur', 'change'] }],
        imgList: [{ type: 'array', required: true, message: '请上传照片', trigger: ['blur', 'change'] }],
      },
      dateTimePicker: {
        show: false,
        value: Number(new Date()),
        min: new Date().getTime(),
        mode: 'datetime',
        type: 'datetime-picker'
      },
    }
  },
  methods: {
    async fnSubmit() {
      try {
        await this.$refs.formRef.validate()
        try {
          const {CODE} = await setTaskFile({formData: {type: 0}, name: 'files', filePath: this.form.imgList[0].url})
          this.form.FILE_PATH = CODE
          await setHotWorkRecord({
            EW_SP_DHW_MONITOR_ID: this.form.EW_SP_DHW_MONITOR_ID,
            EW_RU_JOB_ID: this.EW_RU_JOB_ID,
            EW_RU_TASK_ID: this.EW_RU_TASK_ID,
            USER_NAME: this.form.USER_NAME,
            USER_ID: this.form.USER_ID,
            TIME: this.form.TIME,
            FILE_PATH: this.form.FILE_PATH
          })
          uni.navigateBack(); // 返回到上一级
        } catch {
        }
      } catch {
        uni.$u.toast('请补全必填项')
      }
    },
    fnDateTimePickerClick(event) {
      this.dateTimePicker.type = event
      this.dateTimePicker.value = Number(new Date(this.form[event])) || Number(new Date())
      this.dateTimePicker.show = true
    },
    fnDateTimePickerConfirm(event) {
      this.form[this.dateTimePicker.type] = uni.$u.timeFormat(event.value, 'yyyy-mm-dd hh:MM')
      this.fnDateTimePickerCancel()
    },
    fnDateTimePickerCancel() {
      this.dateTimePicker.show = false
    },
    fnAfterRead(event, key) {
      this.form[key].push(...event.file)
    },
    fnDeletePic(event, key) {
      uni.showModal({
        title: '提示',
        content: '确定删除该图片吗？',
        success: (res) => {
          if (res.confirm) {
            this.form[key].splice(event.index, 1)
          }
        }
      })
    },
  }
}
</script>
