<template>
  <div>
    <LHeader :text="text"></LHeader>
    <van-form
      @submit="onSubmit"
      :show-error="false"
      :scroll-to-error="true"
      validate-trigger="onSubmit"
    >
      <van-field
        v-model="applyDate"
        name="applyDate"
        label="延期时间"
        placeholder="请输入"
        :rules="[{ required: true, message: '延期时间不能为空' }]"
      />

      <van-field
        v-model="applyReason"
        readonly
        label="延期理由"
        name="applyReason"
        rows="1"
        autosize
        type="textarea"
      />

      <van-field name="isAgree" label="延期是否通过">
        <template #input>
          <van-radio-group
            v-model="isAgree"
            direction="horizontal"
            @change="selectResult"
          >
            <van-radio name="1">通过</van-radio>
            <van-radio name="0">退回</van-radio>
          </van-radio-group>
        </template>
      </van-field>

      <van-field
        v-model="opinion"
        label="理由或者意见"
        name="examineReason"
        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 { delayReturn } from "@/service/danger";
import { delayEdit } from "@/service/danger";
export default {
  components: {
    LHeader,
  },
  data() {
    return {
      text: "延期审批",
      taskId: "",
      delayTime: "", // 延迟时间
      showDelayTime: false,
      delayApply: "", // 延迟理由
      isAgree: 1, // 延期是否通过
      opinion: "", //理由或者意见
      applyDate: "", //延期时间
      applyReason: "", //延期理由
    };
  },
  created() {
    this.taskId = this.$route.params.taskId;
    this.getReturnEcho();
  },
  
  methods: {
    onSubmit(values) {
    console.log("submit", values);
    this.$toast.loading({
      message: "提交中...",
      forbidClick: true,
      loadingType: "spinner",
      duration: 0,
    });
    let formdata = new FormData();
    formdata.append("examineResult", values.examineResult);
    formdata.append("examineReason", values.examineReason);
    formdata.append("taskId", this.taskId);
    delayEdit(`/delayApply/edit`, formdata)
      .then((res) => {
        this.$toast.clear();
        this.$toast.success({
          message: "提交成功",
          duration: 2000,
        });
        history.go(-1);
      })
      .catch(() => {
        this.$toast.clear();
        this.$toast.fail("提交失败,请稍后再试");
      });
  },
  // 请求已退回详情数据
  getReturnEcho() {
    this.$toast.loading({
      message: "加载中...",
      forbidClick: true,
      loadingType: "spinner",
      duration: 0,
    });
    delayReturn(`/delayApply/edit/${this.taskId}`)
      .then((res) => {
        this.$toast.clear();
        // 对数据进行赋值
        this.applyDate = res.data.delayApply.applyDate;
        this.applyReason = res.data.delayApply.applyReason;
      })
      .catch(() => {
        this.$toast.clear();
        this.$toast.fail("加载失败,请稍后再试");
      });
  },

    selectResult(val) {
      this.isAgree = val;
    },

    cancel() {
      this.$router.go(-1);
    },
  },
};
</script>
<style lang="less" scoped>
/* @import url(); 引入css类 */
</style>
