<template>
  <div>
    <LHeader :text="text"></LHeader>
    <van-cell-group
        inset
        v-for="(item, index) in messageList"
        :key="index"
        @click="goDetail(item.taskId)"
      >
        <van-row gutter="">
          <van-col span="5">所属项目:</van-col>
          <van-col span="19">{{ item.proId }}</van-col>
        </van-row>
        <van-row gutter="">
          <van-col span="5">隐患级别:</van-col>
          <van-col span="19">{{ item.hdLev }}</van-col>
        </van-row>
        <van-row gutter="">
          <van-col span="5">适用范围:</van-col>
          <van-col span="19">{{ item.hdRange }}</van-col>
        </van-row>
        <van-row gutter="">
          <van-col span="5">隐患类型:</van-col>
          <van-col span="19">{{ item.hdType }}</van-col>
        </van-row>
        <!-- <van-row gutter="">
          <van-col span="5">发现时间:</van-col>
          <van-col span="19">{{ item.hdDiscoveryTime }}</van-col>
        </van-row> -->
        <van-row gutter="">
          <van-col span="5">超期标识:</van-col>
          <van-col span="19">{{ item | formatTime }}</van-col>
        </van-row>
        <van-row gutter="">
          <van-col span="5">状态:</van-col>
          <van-col span="19">{{ 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 name="radio" label="隐患复查结果">
        <template #input>
          <van-radio-group
            v-model="radio"
            direction="horizontal"
            @change="selectResult"
          >
            <van-radio name="1">合格</van-radio>
            <van-radio name="0">退回</van-radio>
          </van-radio-group>
        </template>
      </van-field>

      <!-- 同意时的选项 -->
      <div class="agree" v-if="radio == 1">
        <van-field
          v-model="detail"
          label="详情描述"
          name="reviewDetails"
          rows="3"
          type="textarea"
          placeholder="请输入"
          :rules="[{ required: true, message: '详情描述不能为空' }]"
        />
        <van-field
          name="uploader"
          label="隐患复查照片"
        >
          <template #input>
            <van-uploader multiple :max-count="5" upload-text="最多上传五个" v-model="uploaderImg" />
          </template>
        </van-field>
      </div>

      <!-- 退回是的选项 -->
      <div class="disagree" v-else>
        <van-field
          v-model="returnReason"
          label="退回原因"
          name="reviewDetails"
          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";
import { dangerReviewAdd } from "@/service/danger";
export default {
  components: {
    LHeader
  },
  data() {
    return {
      taskId: "",
      messageList: [],
      radio: "1",
      text: "隐患复查",
      detail: "",
      uploaderImg: [],
      returnReason: ""
    };
  },
   beforeRouteEnter(to, from, next) {
    console.log('执行了此钩子')
    next(vm => {
      if (from.name === "review-danger"||from.name=="normal-detail") {
        vm.messageList = [];
        // 修改bug回退获取不到参数有参数的用参数没参数的话用本地缓存
        let paramsData = to.params.data||JSON.parse(localStorage.getItem('reviewdanger_params'));
        vm.taskId = paramsData.taskId;
        vm.messageList.push(paramsData);
        vm.radio= "1";
        vm.detail = "";
        vm.uploaderImg = []; // 隐患整改人
        vm.returnReason = "";
      }
    });
  },
   created() {
     console.log('执行了此钩子1')
   },
  methods: {
    selectResult(val) {
      this.radio = val;
    },

    onSubmit(values) {
      this.$toast.loading({
        message: "提交中...",
        forbidClick: true,
        loadingType: "spinner",
        duration: 0
      });
      let formdata = new FormData()
      formdata.append('reviewResult', this.radio)
      formdata.append('reviewDetails', values.reviewDetails)
      // 放图片路径 因为formdat存数组会自动变成字符串所以次用这种追加字段的方式
      if (values.uploader) {
        values.uploader.forEach(item => {
          formdata.append("reviewPicture1[]", item.file);
        });
      }

      dangerReviewAdd(`/review/add1/${this.taskId}`,formdata)
        .then(res => {
          this.$toast.clear();
          this.$toast.success({
            message: "提交成功",
            duration: 2000
          });
          history.go(-1);
        })
        .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(row) {
      if (new Date(row.dueDate).getTime() <= row.rectificationTime) {
        return "超期";
      } else if (
        new Date(row.dueDate).getTime() >= row.rectificationTime &&
        new Date(row.dueDate).getTime() - 259200000 <= row.rectificationTime
      ) {
        //三天
        return "临期";
      } else {
        return "正常";
      }
    }
  }
};
</script>
<style lang="less" scoped>
/* @import url(); 引入css类 */
.van-cell-group--inset {
    margin: 0;
    margin-bottom: 10px;
    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>
