<template>
  <div>
    <LHeader :text="text"></LHeader>
    <van-cell-group
      v-for="(item, index) in messageList"
      :key="index"
      inset
      @click="goDetail(item.taskId)"
    >
      <van-row gutter="">
        <van-col span="6">所属项目：</van-col>
        <van-col span="18">{{ item.proId }}</van-col>
      </van-row>
      <van-row gutter="">
        <van-col span="6">隐患级别：</van-col>
        <van-col span="18">{{ item.hdLev | dangerText }}</van-col>
      </van-row>
      <van-row gutter="">
        <van-col span="6">适用范围：</van-col>
        <van-col span="18">{{ item.hdRange }}</van-col>
      </van-row>
      <van-row gutter="">
        <van-col span="6">隐患类型：</van-col>
        <van-col span="18">{{ item.hdType }}</van-col>
      </van-row>
      <!-- <van-row gutter="">
        <van-col span="6">发现时间：</van-col>
        <van-col span="18">{{ item.hdDiscoveryTime }}</van-col>
      </van-row> -->
      <van-row gutter="">
        <van-col span="6">超期标识：</van-col>
        <van-col span="18">{{ item.dueDate | formatTime }}</van-col>
      </van-row>
      <van-row gutter="">
        <van-col span="6">工单状态：</van-col>
        <van-col span="18">{{ item.taskName }}</van-col>
      </van-row>
      <!-- 详情 -->
      <div class="detail">详情</div>
    </van-cell-group>

    <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="请输入"
        required
        :rules="[{ required: true, message: '隐患整改详情描述不能为空' }]"
      />

      <van-field
        name="uploader"
        label="整改照片"
         required
        :rules="[{ required: true, message: '整改照片不能为空' }]"
      >
        <template #input>
          <van-uploader
            multiple
            :max-count="5"
            upload-text="最多上传五个"
            v-model="uploaderImg"
          >
            <template slot="default">
              <!-- 11111111111 -->
              <div
                style="
                  width: 2.13333rem;
                  height: 2.13333rem;
                  background: #f7f8fa;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  flex-direction: column;
                "
              >
                <img
                  src="@/assets/upload/pic.png"
                  alt=""
                  style="width: 0.64rem; height: 0.64rem"
                />
                <span class="van-uploader__upload-text">最多上传五个</span>
              </div>
            </template>
          </van-uploader>
        </template>
      </van-field>

      <van-field name="uploader2" label="整改视频">
        <template #input>
          <van-uploader
            multiple
            :max-count="5"
            upload-text="最多上传五个"
            v-model="uploaderVideo"
            accept="video/*"
          >
            <template slot="default">
              <!-- 11111111111 -->
              <div
                style="
                  width: 2.13333rem;
                  height: 2.13333rem;
                  background: #f7f8fa;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  flex-direction: column;
                "
              >
                <img
                  src="@/assets/upload/video.png"
                  alt=""
                  style="width: 0.64rem; height: 0.64rem"
                />
                <span class="van-uploader__upload-text">最多上传五个</span>
              </div>
            </template>
          </van-uploader>
        </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 { getFun, postFun } from "@/service/table.js";
import { dangerRectReturn, dangerRectAdd } from "@/service/danger";
export default {
  name: "change-info",
  components: {
    LHeader,
  },
  data() {
    return {
      text: "隐患整改",
      taskId: "",
      taskName: "",
      messageList: [],
      returnCause: "",
      isShowreturnCause: false,
      value: "",
      uploaderImg: [], //图像上传
      uploaderVideo: [], //视频上传
    };
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      if (from.name === "change-danger") {
        vm.messageList = [];
        let paramsData = to.params.data;
        vm.taskId = paramsData.taskId;
        vm.taskName = paramsData.taskName;
        vm.messageList.push(paramsData);
        if (vm.taskName == "隐患整改(已退回)") {
          vm.isShowreturnCause = true;
          // 请求退回原因
          vm.getRectReturn();
        }
        // 清空数据
        (vm.value = ""), (vm.uploaderImg = []); //图像上传
        vm.uploaderVideo = []; //视频上传
      }
    });
  },

  activated() {},
  methods: {
    onSubmit(values) {
      this.$toast.loading({
        message: "提交中...",
        forbidClick: true,
        loadingType: "spinner",
        duration: 0,
      });
      let formdata = new FormData();
      formdata.append("details", this.value);
      // 放图片路径 因为formdat存数组会自动变成字符串所以次用这种追加字段的方式
      values.uploader.forEach((item) => {
        formdata.append("rePicture1[]", item.file);
      });
      values.uploader2.forEach((item) => {
        formdata.append("reVideo1[]", item.file);
      });
      // 判断保存的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("加载失败,请稍后再试");
        });
    },
    // 详情
    goDetail(taskId) {
      this.$router.push({
        name: "normal-detail",
        params: {
          id: taskId,
        },
      });
    },

    cancel() {
      this.$router.go(-1);
    },
  },
  filters: {
    formatTime: function (val) {
      if (new Date(val).getTime() <= new Date().getTime()) {
        return "超期";
      } else if (
        new Date(val).getTime() >= new Date().getTime() &&
        new Date(val).getTime() <= new Date().getTime() + 259200000
      ) {
        return "临期";
      } else {
        return "正常";
      }
    },
  },
};
</script>
<style lang="less" scoped>
/* @import url(); 引入css类 */

.van-cell-group--inset {
  margin: 0.266667rem 0;
  padding: 10px;
  font-size: 13px;
  position: relative;
  .van-row {
    margin-bottom: 0.133333rem;
    line-height: 0.64rem;
  }
  .van-overlay {
    position: absolute;
    .wrapper {
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      height: 100%;
    }
  }
}
.detail {
  position: absolute;
  bottom: 0.32rem;
  right: 15px;
  color: #2a80f7;
  font-weight: none;
  z-index: 99;
}
</style>
