<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>
      <!-- 详情 -->
      <div class="detail">详情</div>
    </van-cell-group>

    <van-form
      @submit="onSubmit"
      :show-error="false"
      :scroll-to-error="true"
      validate-trigger="onSubmit"
    >
      <van-field name="confirmResult" 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
          readonly
          clickable
          name="endTime"
          :value="value"
          label="整改截止时间"
          placeholder="点击选择日期"
          @click="showCalendar = true;currentDate = new Date()"
          :rules="[{ required: true, message: '请选择日期' }]"
        />
        <van-popup v-model="showCalendar" position="bottom">
          <van-datetime-picker
            type="datetime"
            @confirm="onConfirm"
            @cancel="showCalendar = false"
            v-model="currentDate"
          />
        </van-popup>

        <van-field
          readonly
          clickable
          name="rectificationUser"
          :value="valueRect"
          label="隐患整改人"
          placeholder="请选择"
          @click="showPickerRect = true"
          :rules="[{ required: true, message: '请选择隐患整改人' }]"
        />
        <van-popup v-model="showPickerRect" position="bottom">
          <van-picker
            show-toolbar
            value-key="userName"
            :columns="columnsRect"
            @confirm="onConRect"
            @cancel="showPickerRect = false"
          />
        </van-popup>

        <van-field
          readonly
          clickable
          name="rectificationReview"
          :value="valueReview"
          label="隐患复查人"
          placeholder="请选择"
          @click="showPickerReview = true"
          :rules="[{ required: true, message: '请选择隐患复查人' }]"
        />
        <van-popup v-model="showPickerReview" position="bottom">
          <van-picker
            show-toolbar
            value-key="userName"
            :columns="columnsReview"
            @confirm="onConReview"
            @cancel="showPickerReview = false"
          />
        </van-popup>

        <van-field
          v-model="valueIdea"
          label="意见"
          name="confirmOpinion"
          rows="3"
          type="textarea"
          placeholder="请输入"
          :rules="[{ required: true, message: '意见不能为空' }]"
        />
      </div>

      <!-- 退回是的选项 -->
      <div class="disagree" v-else>
        <van-field
          v-model="returnReason"
          label="退回原因"
          name="confirmOpinion"
          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 { timestampToTime } from "@/utils/format";
import { getConfirmFormList, dangerConSub } from "@/service/danger";
export default {
  name: "affirm-danger",
  components: {
    LHeader
  },
  data() {
    return {
      taskId: "",
      messageList: [],
      radio: "1",
      text: "隐患确认",
      value: "",
      showCalendar: false,
      rectId: "", // 隐患整改人
      valueRect: "",
      columnsRect: [],
      showPickerRect: false,
      reviewId: "", // 隐患复查人
      valueReview: "",
      columnsReview: [],
      showPickerReview: false,
      valueIdea: "",
      returnReason: "",
      currentDate: new Date()
    };
  },

  beforeRouteEnter(to, from, next) {
    next(vm => {
      if (from.name === "confirme-danger") {
        vm.messageList = [];
        let paramsData = to.params.data;
        vm.taskId = paramsData.taskId;
        vm.messageList.push(paramsData);
        vm.radio= "1",
        vm.value = "";
        vm.rectId = ""; // 隐患整改人
        vm.valueRect = "";
        vm.reviewId = ""; // 隐患复查人
        vm.valueReview = "";
        vm.valueIdea = "";
        vm.returnReason = "";
        vm.getFormList();
        // 清空数据
        vm.currentDate = new Date()
      }
    });
  },

  created() {},
  methods: {
    getFormList() {
      if (!this.taskId) {
        return;
      }
      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        loadingType: "spinner",
        duration: 0
      });
      getConfirmFormList(`confirm/add/${this.taskId}`)
        .then(res => {
          this.$toast.clear();
          this.columnsRect = res.data.rectificationUser;
          this.columnsReview = res.data.rectificationReview;
        })
        .catch(() => {
          this.$toast.clear();
          this.$toast.fail("加载失败,请稍后再试");
        });
    },

    // 保存时的操作
    onSubmit(values) {
      if (!this.taskId) {
        return;
      }
      let formdata = new FormData();
      formdata.append("confirmResult", this.radio);
      formdata.append("endTime", values.endTime);
      formdata.append("rectificationUser", this.rectificationUser);
      formdata.append("rectificationReview", this.rectificationReview);
      formdata.append("confirmOpinion", values.confirmOpinion);
      this.$toast.loading({
        message: "提交中...",
        forbidClick: true,
        loadingType: "spinner",
        duration: 0
      });
      dangerConSub(`/confirm/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("提交失败,请稍后再试");
        });
    },

    selectResult(val) {
      this.radio = val;
      this.returnReason = "";
      this.valueIdea = "";
    },
    onConfirm(date) {
      this.value = timestampToTime(date, "DT1", true);
      this.showCalendar = false;
    },

    onConRect(value) {
      if(!value){
        this.showPickerRect = false;
        return
      }
      this.valueRect = value.userName;
      this.rectId = value.userId;
      this.showPickerRect = false;
    },
    onConReview(value) {
      if(!value){
        this.showPickerReview = false;
        return
      }
      this.valueReview = value.userName;
      this.reviewId = value.userId;
      this.showPickerReview = false;
    },
    // 详情
    goDetail(taskId) {
      this.$router.push({
        name: "normal-detail",
        params: {
          id: taskId
        }
      });
    },

    cancel() {
      this.$router.go(-1);
    }
  }
};
</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: bolder;
  z-index: 99;
}
</style>
