<template>
  <div>
    <LHeader :text="text"></LHeader>
    <van-form
      @submit="onSubmit"
      :show-error-message="false"
      :scroll-to-error="true"
    >
      <van-field
        v-model="gongcheng"
        name="所属工程名称"
        label="所属工程名称"
        placeholder="请选择"
        :rules="[{ required: true, message: '所属工程名称不能为空' }]"
      />
      <van-field
        v-model="fanwei"
        name="适用范围"
        label="适用范围"
        placeholder="请选择"
        :rules="[{ required: true, message: '使用范围不能为空' }]"
      />
      <van-field
        v-model="yinhuanleixing"
        name="隐患类型"
        label="隐患类型"
        placeholder="请选择"
        :rules="[{ required: true, message: '隐患类型不能为空' }]"
      />

      <van-field
        v-model="yinhuanxiangmu"
        name="隐患项目名称"
        label="隐患项目名称"
        placeholder="请选择"
        :rules="[{ required: true, message: '隐患项目名称不能为空' }]"
      />
      <van-field
        v-model="yinhuanbianhao"
        name="隐患项目编号"
        label="隐患项目编号"
        placeholder="请选择"
        :rules="[{ required: true, message: '隐患项目编号不能为空' }]"
      />
      <van-field
        v-model="yinhuanjibie"
        name="隐患级别"
        label="隐患级别"
        placeholder="请选择"
        :rules="[{ required: true, message: '隐患级别不能为空' }]"
      />

      <van-field
        readonly
        clickable
        name="隐患发现时间"
        :value="timeval"
        label="隐患发现时间"
        placeholder="点击选择日期"
        @click="showCalendar = true"
        :rules="[{ required: true, message: '隐患发现时间不能为空' }]"
      />
      <van-popup v-model="showCalendar" position="bottom">
        <van-datetime-picker
          type="datetime"
          @confirm="onConfirmrili"
          @cancel="showCalendar = false"
        />
      </van-popup>

      <van-field
        readonly
        clickable
        name="风险源"
        :value="fengxiangval"
        label="风险源"
        placeholder="请选择"
        @click="showPicker = true"
        :rules="[{ required: true, message: '风险源不能为空' }]"
      />
      <van-popup v-model="showPicker" position="bottom">
        <van-picker
          show-toolbar
          :columns="columns"
          @confirm="onConfirmfengxian"
          @cancel="showPicker = false"
        />
      </van-popup>

      <van-field
        v-model="fenxianmiaosu"
        rows="1"
        autosize
        label=" "
        type="textarea"
        placeholder="请输入"
      />

      <van-field
        v-model="jianchabuwei"
        name="检查部位"
        label="检查部位"
        placeholder="请输入"
        :rules="[{ required: true, message: '检查部位不能为空' }]"
      />

      <van-field
        v-model="yinhuanmiaosu"
        rows="3"
        label="隐患描述"
        name="隐患描述"
        type="textarea"
        placeholder="请输入"
        :rules="[{ required: true, message: '隐患描述不能为空' }]"
      />

      <van-field
        name="uploader"
        label="隐患照片"
        :rules="[{ required: true, message: '请上传图像' }]"
      >
        <template #input>
          <van-uploader v-model="uploaderImg" />
        </template>
      </van-field>

      <van-field name="uploader2" label="隐患视频">
        <template #input>
          <van-uploader v-model="uploaderVideo" />
        </template>
      </van-field>
      <van-field
        readonly
        clickable
        name="隐患到期时间"
        :value="daoqitimeval"
        label="隐患到期时间"
        placeholder="点击选择日期"
        @click="daoqishowCalendar = true"
      />
      <van-popup v-model="daoqishowCalendar" position="bottom">
        <van-datetime-picker
          type="datetime"
          @confirm="onConfirmdaoqi"
          @cancel="daoqishowCalendar = false"
        />
      </van-popup>

      <van-field
        readonly
        clickable
        name="隐患整改人"
        :value="zhenggairen"
        label="隐患整改人"
        placeholder="请选择"
        @click="showPickerzhenggai = true"
      />
      <van-popup v-model="showPickerzhenggai" position="bottom">
        <van-picker
          show-toolbar
          :columns="columnszhenggai"
          @confirm="onConfirmzhegngai"
          @cancel="showPickerzhenggai = false"
        />
      </van-popup>

      <div style="margin: 16px 16px 0">
        <van-button round block type="info" native-type="submit"
          >保存</van-button
        >
      </div>
    </van-form>
    <div style="margin:10px 16px 0px;padding-bottom:16px">
      <van-button round block type="warning" @click.native="cancel"
        >取消</van-button
      >
    </div>
  </div>
</template>

<script>
import LHeader from "@/components/header.vue";
export default {
  components: {
    LHeader
  },
  data() {
    return {
      text: "新增隐患",
      gongcheng: "",
      fanwei: "",
      yinhuanleixing: "",
      yinhuanxiangmu: "",
      yinhuanbianhao: "",
      yinhuanjibie: "",
      yinhuanfaxiantime: "",
      timeval: "",
      showCalendar: false,
      fengxiangval: "",
      columns: ["人的因素", "物的因素", "环境因素", "管理因素"],
      showPicker: false,
      fenxianmiaosu: "",
      jianchabuwei: "",
      yinhuanmiaosu: "",
      uploaderImg: [], //图像上传
      uploaderVideo: [], //视频上传
      daoqitimeval: "",
      daoqishowCalendar: false,
      zhenggairen: "",
      showPickerzhenggai: false,
      columnszhenggai: ["张三", "李四", "王五"]
    };
  },
  mounted() {},
  methods: {
    onSubmit(values) {
      console.log("submit", values);
    },
    onConfirmrili(date) {
      this.timeval = this.format(date)
      this.showCalendar = false;
    },
    onConfirmdaoqi(date) {
      this.daoqitimeval = this.format(date)
      // this.daoqitimeval = `${date.getMonth() + 1}/${date.getDate()}`;
      this.daoqishowCalendar = false;
    },
    onConfirmfengxian(value) {
      this.fengxiangval = value;
      this.showPicker = false;
    },
    onConfirmzhegngai(value) {
      this.zhenggairen = value;
      this.showPickerzhenggai = false;
    },

    cancel() {
      this.$router.go(-1);
    },

    format(value){
      let myDate 
       if (value.getMinutes() <= 9) {
        myDate = value.getFullYear() + '-' + (value.getMonth() + 1) + '-' + value.getDate() + ' ' + value.getHours() + ':' + '0' + value.getMinutes(); 
      } else {
        myDate = value.getFullYear() + '-' + (value.getMonth() + 1) + '-' + value.getDate() + ' ' + value.getHours() + ':' + value.getMinutes(); 
      }; 
      return myDate
    }
  }
};
</script>
<style scoped>
/* @import url(); 引入css类 */
</style>
