<template>
  <uni-row class="main" v-bind:style="{ height: client.win_height + 'px' }">
    <uni-col :span="24" class="one">
      <view class="one_1">
        <form>
          <view class="content">
            <view class="title">保安员姓名：</view>
            <input :value="userInfo.name" disabled />
          </view>
          <view class="content">
            <view class="title">公司名称：</view>
            <input :value="userInfo.company_name" disabled />
          </view>
        </form>
      </view>
      <view class="btn">
        <button
          type="primary"
          @tap="toWork"
          data-status="0"
          v-if="!userInfo.is_class"
        >
          上班
        </button>
        <button type="warn" @tap="toWork" data-status="1" v-else>下班</button>
      </view>
    </uni-col>
  </uni-row>
</template>

<script>
import { mapState, mapGetters, createNamespacedHelpers } from "vuex";
const moment = require("moment");
const { mapActions: companyBaoanWork } =
  createNamespacedHelpers("company_baoan_work");
const { mapActions: companyBase } = createNamespacedHelpers("company_base");
const { mapActions: securityGuardBase } = createNamespacedHelpers(
  "security_guard_base"
);
const { mapActions: companyBaoanPunch } = createNamespacedHelpers(
  "company_baoan_punch"
);
export default {
  data() {
    return {
      userInfo: {},
      positionInfo: {},
    };
  },
  async created() {
    this.userInit();
  },
  methods: {
    ...companyBaoanWork(["fetch"]),
    ...companyBase({ getCompanyBase: "fetch" }),
    ...securityGuardBase({
      getSecurityGuardBase: "fetch",
      updateSecurityGuardBase: "update",
    }),
    ...companyBaoanPunch(["create"]),
    /**
     * 初始化信息
     */
    async userInit() {
      const { id, name } = this.user;
      // 没用户信息,下面就别进行了,重开登陆吧
      if (!id) return;
      // 找入职信息
      const cbw = await this.toGetCBW(id);
      // 没有找到入职信息,返回
      if (!cbw) return;
      const { company_name, company_id } = cbw;
      // 找保安员上班状态(基本信息里)
      const sgb = await this.toGetSGB(id);
      if (!sgb) return;
      let { is_class } = sgb;
      if (is_class === "在岗") is_class = true;
      else is_class = false;
      this.$set(this, `userInfo`, { name, company_name, is_class, company_id });
      // 定位信息
      this.$set(this, "positionInfo", { company_id, status: "1" });
    },
    /**
     * 上岗/下班
     * @property data 要变成的工作状态
     */
    async toWork(data) {
      const workStatus = data.currentTarget.dataset.status;
      // 打卡记录
      const obj = {
        ...this.positionInfo,
        status: workStatus,
        name: this.user.name,
        phone: this.user.phone,
        security_guard_id: this.user.id,
        punch_date: moment().format("YYYY-MM-DD HH:mm:ss"),
      };
      // 定个位,放进去
      const [err, posRes] = await uni.getLocation({ type: "gcj02" });
      if (err) {
        uni.showToast({
          title: "定位失败,无法打卡!",
          duration: 2000,
          icon: "error",
        });
        return;
      }
      obj.latitude = posRes.latitude;
      obj.longitude = posRes.longitude;
      const res = await this.create(obj);
      if (!this.$checkRes(res)) {
        uni.showToast({ title: "打卡失败!", duration: 2000, icon: "error" });
        return;
      }
      // 打卡记录完事了,去修改保安员为上岗/下班状态
      await this.sgbToWork(workStatus);
    },
    /**
     * 保安员状态修改(上下班)
     * @param status 上下班状态码
     */
    async sgbToWork(status) {
      const obj = {
        id: this.user.id,
        is_class: status === "0" ? "在岗" : "下班",
      };
      const res = await this.updateSecurityGuardBase(obj);
      if (this.$checkRes(res)) {
        this.userInfo.is_class = status === "0";
        uni.showToast({ title: "打卡成功!", duration: 2000, icon: "success" });
      }
    },
    /**
     * 获取保安员服务对象(在哪上班的入职信息)
     * @param security_guard_id 保安员id
     */
    async toGetCBW(security_guard_id) {
      const obj = { security_guard_id, is_quit: "0" };
      const res = await this.fetch(obj);
      if (this.$checkRes(res)) {
        return res.data;
      }
    },
    /**
     * 获取该保安员的基本信息
     * @param id 保安员id
     */
    async toGetSGB(id) {
      const res = await this.getSecurityGuardBase({ id });
      if (this.$checkRes(res)) {
        return res.data;
      }
    },
  },
  computed: {
    ...mapState(["user"]),
    ...mapGetters(["client"]),
  },
};
</script>

<style lang="scss" scoped>
.main {
  background-color: #409eff;
  overflow-y: auto;
  .one {
    .one_1 {
      .content {
        padding: 0 10px;
        margin: 10px 0;
        .title {
          font-size: 16px;
          margin: 0 0 8px 0;
          color: #000000;
        }
        input {
          border: 1px solid #ccc;
          border-radius: 5px;
          padding: 5px;
        }
      }
    }
    .btn {
      text-align: center;
      padding: 0 35%;
      button {
        width: 100px;
        height: 100px;
        line-height: 100px;
        border-radius: 90px;
        margin: 0 0 10px 0;
        color: #ffffff;
      }
    }
  }
}
</style>
