<template>
  <div>
    <LHeader :text="text"></LHeader>
    <van-form
      @submit="onSubmit"
      :show-error="false"
      :scroll-to-error="true"
      validate-trigger="onSubmit"
    >
      <van-field
        v-if="isShowreturnCause"
        v-model="returnCause"
        readonly
        rows="1"
        autosize
        label="退回原因"
        type="textarea"
      />

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

      <van-field
        name="uploader"
        label="整改照片"
      >
        <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>

      <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 { dangerRectReturn, dangerRectAdd } from "@/service/danger";
export default {
  components: {
    LHeader
  },
  data() {
    return {
      text: "整改确认",
      taskId: "",
      taskName: "",
      returnCause: "",
      isShowreturnCause: false,
      value: "",
      uploaderImg: [], //图像上传
      uploaderVideo: [] //视频上传
    };
  },
  created() {
    this.taskId = this.$route.params.taskId;
    this.taskName = this.$route.params.taskName;
    if (this.taskName == "隐患整改(已退回)") {
      this.isShowreturnCause = true;
      // 请求退回原因
      this.getRectReturn();
    }
  },
  methods: {
    onSubmit(values) {
      console.log("submit", values);
      this.$toast.loading({
        message: "提交中...",
        forbidClick: true,
        loadingType: "spinner",
        duration: 0
      });
      let formdata = new FormData();
      formdata.append("details", this.value);
      // formdata.append("rePicture[]", values.uploader);
      // formdata.append("reVideo[]", values.uploader2);
      // 判断保存的url
      let url = `/rectification/add1/${this.taskId}`;
      if (this.taskName == "隐患整改(已退回)") {
        url = `/rectification/add2/${this.taskId}`;
      }
      dangerRectAdd(url,formdata)
        .then(res => {
          this.$toast.clear();
          this.$toast.success({
            message: "提交成功",
            duration: 2000
          });
          history.go(-1);
        })
        .catch(() => {
          this.$toast.clear();
          this.$toast.fail("提交失败,请稍后再试");
        });
    },
    // 请求退回原因方法
    getRectReturn() {
      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        loadingType: "spinner",
        duration: 0
      });
      dangerRectReturn(`/rectification/addReturn/${this.taskId}`)
        .then(res => {
          this.$toast.clear();
          this.returnCause = res.data.reason;
        })
        .catch(() => {
          this.$toast.clear();
          this.$toast.fail("加载失败,请稍后再试");
        });
    },

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