<template>
  <view class="content">
    <view class="card">
      <u-form labelPosition="left" :model="form" :rules="rules" ref="formRef" labelWidth="140px">
        <u-form-item label="动火分析时间" prop="GAS_TIME" borderBottom required @click="fnDateTimePickerClick('GAS_TIME')">
          <u-input v-model="form.GAS_TIME" border="none" readonly />
          <u-icon name="arrow-right"></u-icon>
        </u-form-item>
        <u-form-item label="分析点名称" prop="GAS_NAME" borderBottom required>
          <u-input v-model="form.GAS_NAME" border="none" />
        </u-form-item>
        <u-form-item label="分析数据(%LEL)" prop="GAS_NUMBER" borderBottom required>
          <u-input v-model="form.GAS_NUMBER" border="none" type="number" placeholder="0" />
          <view class="title">(%LEL)</view>
        </u-form-item>
        <u-form-item label="分析人" prop="gasUserName" borderBottom required>
          <u-input v-model="form.gasUserName" border="none" />
        </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 { getHotWorkGasInfoSave } from "@/api";

export default {
  data() {
    return {
      form: {
        /** 动火分析时间 */
        GAS_TIME: '',
        /** 分析点名称 */
        GAS_NAME: '',
        /** 分析数据(%LEL) */
        GAS_NUMBER: '',
        /** 分析人 */
        gasUserName: this.$store.getters.getUserInfo.NAME
      },
      rules: {
        GAS_TIME: [{ type: 'string', required: true, message: '请选择动火分析时间', trigger: ['blur', 'change'] }],
        GAS_NAME: [{ type: 'string', required: true, message: '请输入分析点名称', trigger: ['blur', 'change'] }],
        GAS_NUMBER: [{ type: 'string', required: true, message: '请输入分析数据', trigger: ['blur', 'change'] }],
        gasUserName: [{ type: 'string', required: true, message: '请输入分析人', trigger: ['blur', 'change'] }],
      },
      dateTimePicker: {
        show: false,
        value: Number(new Date()),
        max: new Date().getTime(),
        mode: 'datetime',
        type: 'datetime-picker'
      },
    }
  },
  methods: {
    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
    },
    async fnSubmit() {
      try {
        await this.$refs.formRef.validate()
        try {
          // for (let i = 0; i < 4; i++) {
          //   if (this[`GAS_NAME${i + 1}`] && !this.form[`DATA${i + 1}`]) this.form[`DATA${i + 1}`] = 0
          // }
          await getHotWorkGasInfoSave({
            data: { ...this.form },
            // EW_RU_TASK_ID: this.EW_RU_TASK_ID,
            // EW_RU_JOB_ID: this.EW_RU_JOB_ID,
            postMethod: 'application/json',
          })
          uni.$u.toast('保存成功')
          setTimeout(() => {
            uni.switchTab({
              url: '/pages/index/index'
            })
          }, 2000)
        } catch {
        }
      } catch (e) {
        uni.$u.toast('请补全必填项')
      }
    }
  }
}
</script>

<style scoped lang="scss"></style>