<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
        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>
  </div>
</template>

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

  methods: {
    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);
        postFun("/risk/plan/sign", formData).then((res) => {
          if (res.code == 200) {
            this.$message({
              message: "签到成功",
              type: "success",
            });
          }
        });
      });
    },
  },
};
</script>

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