<template>
  <view class="main" v-bind:style="{ height: client.win_height + 'px' }">
    <view class="one">
      <view>保安服务监管系统</view>
      <view>版本:{{ version }}</view>
    </view>
    <view class="two">
      <form @submit="onSubmit">
        <view class="content">
          <input
            :value="form.phone"
            name="phone"
            type="number"
            maxlength="11"
            placeholder="请输入账号"
          />
        </view>
        <view class="content">
          <input
            :value="form.password"
            name="password"
            password
            placeholder="请输入密码"
          />
        </view>
        <view class="content">
          <picker
            @change="userChange"
            name="type"
            :value="form.type"
            :range="userList"
            class="user"
          >
            <view class="uni-input">{{
              userList[form.type] || "用户类别"
            }}</view>
          </picker>
        </view>
        <view class="btn">
          <button type="primary" size="mini" form-type="submit">登录</button>
          <!-- <button type="warn" size="mini" @click="toRegister()">注册</button> -->
        </view>
      </form>
    </view>
    <view class="thr">
      <view>为了更好的进行保安员服务监管</view>
      <view>系统需要实时获取您的位置信息</view>
      <view>请允许程序再后台获取您的位置</view>
      <view>产品所有：长春市公安局治安支队</view>
      <view>技术支持：长春市福威尔电子科技有限公司</view>
    </view>
  </view>
</template>

<script>
import jwt from "jsonwebtoken";
import { mapState, mapMutations, createNamespacedHelpers } from "vuex";
const { mapActions } = createNamespacedHelpers("login");
const { mapActions: securityGuardBase } = createNamespacedHelpers(
  "security_guard_base"
);
const { mapActions: system_account } =
  createNamespacedHelpers("system_account");
export default {
  name: "index",
  props: {},
  components: {},
  data: function () {
    return {
      client: {},
      form: {},
      version: getApp().globalData.version,
      userList: ["保安", "检查监督"],
    };
  },
  created() {},
  methods: {
    ...mapMutations(["setUser"]),
    ...mapActions(["login"]),
    ...securityGuardBase(["fetch"]),
    ...system_account({
      systemFetch: "fetch",
    }),
    onSubmit: async function (e) {
      var data = e.detail.value;
      if (data.type == "0") {
        var res;
        res = await this.login({ table: "security_guard_base", ...data });
        if (this.$checkRes(res)) {
          const token = res.data;
          uni.setStorageSync("token", token);
          uni.setStorageSync("role", data.type);
          await this.getUser(data.type);
          uni.showToast({ title: "登录成功", duration: 2000, icon: "success" });
          uni.$u.route({ url: "/pages/home/index" });
        } else {
          uni.showToast({
            title: `${res.errmsg}`,
            duration: 2000,
            icon: "error",
          });
        }
      } else if (data.type == "1") {
        res = await this.login({ table: "system_account", ...data });
        if (this.$checkRes(res)) {
          const token = res.data;
          uni.setStorageSync("token", token);
          uni.setStorageSync("role", data.type);
          await this.getUser(data.type);
          uni.showToast({ title: "登录成功", duration: 2000, icon: "success" });
          uni.$u.route({ url: "/pages/home/index" });
        } else {
          uni.showToast({
            title: `${res.errmsg}`,
            duration: 2000,
            icon: "error",
          });
        }
      }
    },
    async getUser(type) {
      var token;
      if (type == "0") {
        token = uni.getStorageSync("token");
        if (!token) {
          uni.showToast({ title: "暂无信息", duration: 2000, icon: "error" });
          return;
        }
        const tokenObject = jwt.decode(token);
        const res = await this.fetch({ id: tokenObject.id });
        if (this.$checkRes(res)) this.setUser(res.data);
      } else if (type == "1") {
        token = uni.getStorageSync("token");
        if (!token) {
          uni.showToast({ title: "暂无信息", duration: 2000, icon: "error" });
          return;
        }
        const tokenObject = jwt.decode(token);
        const res = await this.systemFetch({ id: tokenObject.id });
        if (this.$checkRes(res)) this.setUser(res.data);
      }
    },
    userChange: function (e) {
      this.$set(this.form, `type`, e.target.value);
    },
  },
  computed: {},
  onLoad() {
    // 获取设备信息
    uni.getSystemInfo({
      success: (res) => {
        this.client = {
          win_top: res.windowTop,
          win_width: res.windowWidth,
          win_height: res.windowHeight,
          scr_width: res.screenWidth,
          scr_height: res.screenHeight,
        };
      },
    });
  },
};
</script>

<style lang="scss">
.main {
  background-color: #409eff;
  overflow-y: auto;

  .one {
    float: left;
    width: 100%;
    margin: 30% 0px 0 0;

    view {
      text-align: center;
      font-size: 24px;
      margin: 10px 0;
    }

    view:last-child {
      font-size: 20px;
    }
  }

  .two {
    float: left;
    width: 100%;

    .content {
      padding: 0 150rpx;
      margin: 0 0 20rpx 0;

      input {
        padding: 15rpx;
        border: 1px solid #ccc;
        border-radius: 8rpx;
        font-size: 20rpx;
      }
    }

    .btn {
      text-align: center;
      margin: 15rpx 0 0 0;

      button {
        margin: 0 10px;
      }
    }

    .user {
      border: 1px solid #ccc;
      border-radius: 8rpx;
      font-weight: 20rpx;
      padding: 15rpx;
      color: #666;
      font-size: 21rpx;
    }
  }

  .thr {
    float: left;
    width: 100%;
    text-align: center;
    margin: 80rpx 0 0 0;

    view {
      margin: 0 0 15rpx 0;
    }

    view:nth-child(4) {
      margin: 30rpx 0;
    }
  }
}
</style>
