<template>
  <div>
    <LHeader :text="text"></LHeader>
    <van-form
      @submit="onSubmit"
      :show-error-message="false"
      :scroll-to-error="true"
    >
      <van-field name="radio" label="隐患确认信息">
        <template #input>
          <van-radio-group
            v-model="radio"
            direction="horizontal"
            @change="selectResult"
          >
            <van-radio name="1">同意</van-radio>
            <van-radio name="2">退回</van-radio>
          </van-radio-group>
        </template>
      </van-field>

      <!-- 同意时的选项 -->
      <div class="agree" v-if="radio == 1">
        <van-field
          readonly
          clickable
          name="整改截止时间"
          :value="value"
          label="整改截止时间"
          placeholder="点击选择日期"
          @click="showCalendar = true"
          :rules="[{ required: true, message: '请选择日期' }]"
        />
        <van-popup v-model="showCalendar" position="bottom">
        <van-datetime-picker
          type="datetime"
          @confirm="onConfirm"
          @cancel="showCalendar = false"
        />
      </van-popup>

        <van-field
          readonly
          clickable
          name="隐患整改人"
          :value="valueZhenggai"
          label="隐患整改人"
          placeholder="请选择"
          @click="showPickerZhenggai = true"
          :rules="[{ required: true, message: '请选择隐患整改人' }]"
        />
        <van-popup v-model="showPickerZhenggai" position="bottom">
          <van-picker
            show-toolbar
            :columns="columnsZhenggai"
            @confirm="onConfirmZhenggai"
            @cancel="showPickerZhenggai = false"
          />
        </van-popup>

        <van-field
          readonly
          clickable
          name="隐患复查人"
          :value="valueFucha"
          label="隐患复查人"
          placeholder="请选择"
          @click="showPickerFucha = true"
          :rules="[{ required: true, message: '请选择隐患复查人' }]"
        />
        <van-popup v-model="showPickerFucha" position="bottom">
          <van-picker
            show-toolbar
            :columns="columnsFucha"
            @confirm="onConfirmFucha"
            @cancel="showPickerFucha = false"
          />
        </van-popup>

        <van-field
          readonly
          clickable
          name="意见"
          :value="valueIdea"
          label="意见"
          placeholder="请选择"
          @click="showPickerIdea = true"
          :rules="[{ required: true, message: '请选择意见' }]"
        />
        <van-popup v-model="showPickerIdea" position="bottom">
          <van-picker
            show-toolbar
            :columns="columnsIdea"
            @confirm="onConfirmIdea"
            @cancel="showPickerIdea = false"
          />
        </van-popup>
      </div>

      <!-- 退回是的选项 -->
      <div class="disagree" v-else>
        <van-field
          v-model="returnReason"
          label="退回原因"
          name ="退回原因"
          rows="3"
          type="textarea"
          placeholder="请输入"
          :rules="[{ required: true, message: '退回原因不能为空' }]"
        />
      </div>

      <div style="margin: 16px;">
        <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 {
      radio: "1",
      text: "隐患确认",
      value: "",
      showCalendar: false,
      valueZhenggai: "",
      columnsZhenggai: ["张三", "李四", "王五"],
      showPickerZhenggai: false,
      valueFucha: "",
      columnsFucha: ["张三1", "李四2", "王五3"],
      showPickerFucha: false,
      valueIdea: "",
      columnsIdea: ["同意，立即整改", "退回，重新上报"],
      showPickerIdea: false,
      returnReason: ""
    };
  },
  mounted() {},
  methods: {
    selectResult(val) {
      this.radio = val;
    },
    onConfirm(date) {
      this.value = this.format(date);
      this.showCalendar = false;
    },

    onConfirmZhenggai(value) {
      this.valueZhenggai = value;
      this.showPickerZhenggai = false;
    },
    onConfirmFucha(value) {
      this.valueFucha = value;
      this.showPickerFucha = false;
    },
    onConfirmIdea(value) {
      this.valueIdea = value;
      this.showPickerIdea = false;
    },

    onSubmit(values) {
      console.log("submit", values);
    },
    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 lang="less" scoped>
/* @import url(); 引入css类 */
</style>
