<template>
  <div>
    <LHeader :text="$route.meta.title">
      <span slot="right" @click="() => this.$router.push('sign-recode')"
        >签到记录</span
      >
    </LHeader>
    <van-form
      ref="signForm"
      label-width="4.5em"
      validate-trigger="onSubmit"
      :colon="true"
    >
      <van-field
        readonly
        name="userName"
        :value="userName"
        label="用户名"
        placeholder="请输入"
        :rules="[{ required: true, message: '用户名不能为空' }]"
      />
      <van-field
        readonly
        name="userName"
        label="签定时间"
        placeholder="请输入"
        key="nowTime"
        :value="form.signTime"
      >
        <!-- <template #input>
          <div>{{ form.signTime }}</div>
        </template> -->
      </van-field>
      <van-field
        required
        readonly
        name="projectName"
        :value="form.projectName"
        label="关联项目"
        placeholder="请选择"
        @click="showProject = true"
        :rules="[{ required: true, message: '关联项目不能为空' }]"
      >
      </van-field>
      <van-field
        required
        name="remark"
        v-model="form.remark"
        label="备注"
        placeholder="请输入"
        type="textarea"
        :rules="[{ required: true, message: '备注不能为空' }]"
      >
      </van-field>
      <van-field
        readonly
        required
        name="file"
        label="照片"
        :rules="[{ required: true, message: '照片不能为空' }]"
      >
        <template #input>
          <van-uploader v-model="form.file" :after-read="afterRead">
          </van-uploader>
        </template>
      </van-field>
      <div class="submit-btns">
        <van-button round block type="info" @click="toSign(true)"
          >签到</van-button
        >
        <van-button round block type="warning" @click="toSign(false)"
          >签退</van-button
        >
      </div>
    </van-form>
    <van-popup
      v-model="showProject"
      position="bottom"
      :style="{ height: '100%' }"
    >
      <selectPeople @onClose="onClose" @onSave="onSave"></selectPeople>
    </van-popup>
  </div>
</template>

<script>
import LHeader from "@/components/header.vue";
import { getUserInfo } from "@/utils/userInfo";
import { getFun, postFun } from "@/service/table.js";
import selectPeople from "@/views/riskProject/add/projectList.vue";
export default {
  components: {
    LHeader,
    selectPeople,
  },
  data() {
    return {
      showProject: false,
      timer: "",
      userName: "用户名",
      form: {
        signTime: this.getTime(),
        file: [],
        remark: "",
        userId: "",
        projectName: "",
        projectId: "",
      },
    };
  },
  mounted() {
    this.getRealTime();
    this.toGetUserInfo();
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },

  methods: {
    onClose() {
      this.showProject = false;
    },
    onSave(val) {
      this.onClose();
      this.form.projectId = val.id;
      this.form.projectName = val.name;
    },
    toGetUserInfo() {
      this.userName = getUserInfo().userName;
      this.form.userId = getUserInfo().userId;
    },
    // 获取当前时间
    getTime() {
      let date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      let hours = date.getHours();
      let minutes = date.getMinutes();
      let seconds = date.getSeconds();
      let time =
        year +
        "-" +
        this.formatTime(month) +
        "-" +
        this.formatTime(day) +
        " " +
        this.formatTime(hours) +
        ":" +
        this.formatTime(minutes) +
        ":" +
        this.formatTime(seconds);
      return time;
    },
    // 时间小于10添加0
    formatTime(time) {
      if (time < 10) {
        return "0" + time;
      }
      return time;
    },
    // 获取实时时间并更新
    getRealTime() {
      this.timer = setInterval(() => {
        this.form.signTime = this.getTime();
      }, 1000);
    },
    toSign(type) {
      this.$refs.signForm.validate().then(() => {
        const formData = new FormData();
        this.form.file.forEach((item) => {
          formData.append("file[]", item.file);
        });
        formData.append("userId", this.form.userId);
        formData.append("type", type);
        formData.append("remark", this.form.remark);
        formData.append("projectId", this.form.projectId);
        postFun("/risk/plan/sign", formData).then((res) => {
          if (res.code == 200 && res.data) {
            this.$toast.success(type ? "签到成功" : "签退成功");
            this.form.file = [];
            this.form.remark = "";
            this.form.projectId = "";
            this.form.projectName = "";
          } else {
            this.$toast.fail(type ? "签到失败" : "签退失败");
          }
        });
      });
    },
  },
};
</script>

<style lang="less" scoped>
.submit-btns {
  display: flex;
  padding: 20px 0 20px 20px;
  > .van-button {
    margin-right: 20px;
  }
}
</style>
