<template>
  <div>
    <LHeader :text="text"></LHeader>
    <van-form
      @submit="onSubmit"
      :show-error="false"
      :scroll-to-error="true"
      validate-trigger="onSubmit"
    >
    <van-field
        readonly
        clickable
        name="delayTime"
        :value="delayTime"
        label="延期时间"
        placeholder="点击选择日期"
        @click="showDelayTime = true"
        :rules="[{ required: true, message: '延期时间不能为空' }]"
      />
      <van-popup v-model="showDelayTime" position="bottom">
        <van-datetime-picker
          type="datetime"
          @confirm="onConDelayTime"
          @cancel="showDelayTime = false"
        />
      </van-popup>

      <van-field
        v-model="delayApply"
        label="延期理由"
        name="delayApply"
        rows="3"
        type="textarea"
        placeholder="请输入"
        :rules="[{ required: true, message: '延期理由不能为空' }]"
      />

      <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";
import { timestampToTime } from "@/utils/format";
export default {
  components: {
    LHeader
  },
  data() {
    return {
      text: "延期申请",
      taskId: "",
      delayTime: "", // 延迟时间
      showDelayTime: false,
      delayApply: "", // 延迟理由

    };
  },
  created() {
    this.taskId = this.$route.params.taskId;
  },
  methods: {
    onSubmit(values) {
      console.log("submit", values);
    },

    // 延期时间
    onConDelayTime(date) {
      this.delayTime = timestampToTime(date, "DT1", true);
      this.showDelayTime = false;
    },
   
    cancel() {
      this.$router.go(-1);
    }
  }
};
</script>
<style lang="less" scoped>
/* @import url(); 引入css类 */
</style>
