<template>
  <view class="main" v-bind:style="{ height: client.win_height + 'px' }">
    <view class="one">
      <view class="left">
        <image class="img" :src="coverImg"></image>
      </view>
      <view class="right">
        <view>
          <text>{{ userInfo.name || "暂无" }}</text>
        </view>
        <view>
          <text>联系电话：</text>
          <text>{{ userInfo.phone || "暂无" }}</text>
        </view>
      </view>
    </view>
    <view class="two">
      <uni-row>
        <uni-col :span="12" class="two_1" v-for="(item, index) in btnList">
          <view
            class="two_1info"
            @tap="toPath"
            :data-url="item.url"
            v-if="item.show == userInfo.status || item.show == ''"
          >
            <text class="iconfont" :class="item.icon"></text>
            <text class="txt">{{ item.name }}</text>
          </view>
        </uni-col>
      </uni-row>
    </view>
  </view>
</template>

<script>
import jwt from "jsonwebtoken";
import helper from "../../common/base.js";
import { one, two } from "../../common/dict";
import { mapState, mapMutations, createNamespacedHelpers } from "vuex";
const { mapActions: securityGuardBase } = createNamespacedHelpers(
  "security_guard_base"
);
const { mapActions: collect } = createNamespacedHelpers(
  "security_guard_collect"
);
const { mapActions: system_account } =
  createNamespacedHelpers("system_account");
export default {
  name: "index",
  props: {},
  components: {},
  data: function () {
    return {
      client: {},
      // 用户信息
      userInfo: {},
      // 头像
      coverImg: require("@/static/logo.png"),
      // 按钮
      btnList: [],
    };
  },
  created() {
    this.search();
  },
  methods: {
    ...mapMutations(["setUser"]),
    ...collect({ collectFetch: "fetch" }),
    ...securityGuardBase(["fetch"]),
    ...system_account({
      systemFetch: "fetch",
    }),
    // 查询用户
    async search() {
      let user = this.user;
      const role = uni.getStorageSync("role");
      if (user && user.id) {
        this.$set(this, `userInfo`, user);
        this.$set(this, `btnList`, role == "0" ? one : two);
        // 个人用户，查询头像
        if (role == "0") this.searchCollect(user.id);
      } else {
        const token = wx.getStorageSync("token");
        if (token) {
          await this.getUser(role, token);
        } else {
          uni.redirectTo({ url: `/pages/login/index` });
        }
      }
    },
    // 查询头像
    async searchCollect(id) {
      if (!id) return;
      let res = await this.collectFetch({
        security_guard_id: id,
        type: "人像",
      });
      if (this.$checkRes(res)) {
        let data = res.data;
        let url = helper.webfilesUrl + data.data;
        if (url) this.$set(this, `coverImg`, url);
      }
    },
    async getUser(type, token) {
      var tokenObject;
      var res;
      if (type == "0") {
        tokenObject = jwt.decode(token);
        res = await this.fetch({ id: tokenObject.id });
      } else if (type == "1") {
        tokenObject = jwt.decode(token);
        res = await this.systemFetch({ id: tokenObject.id });
      }
      if (this.$checkRes(res)) {
        this.setUser(res.data);
        uni.$u.route({ url: "/pages/home/index" });
        this.search();
      }
    },
    // 跳转页面
    toPath: function (e) {
      let query = e.currentTarget.dataset.url;
      if (query == "out") {
        try {
          uni.removeStorageSync("token");
          uni.showToast({
            title: "退出登录成功",
            duration: 2000,
            icon: "success",
          });
          uni.redirectTo({ url: `/pages/login/index` });
        } catch (e) {
          uni.showToast({
            title: "退出登录失败",
            duration: 2000,
            icon: "error",
          });
        }
      } else {
        uni.navigateTo({ url: `/pages/${query}/index` });
      }
    },
  },
  computed: {
    ...mapState(["user"]),
  },
  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%;
    height: 90px;
    border-bottom: 1px solid #f1f1f1;

    .left {
      float: left;
      width: 20%;
      text-align: center;

      .img {
        width: 50px;
        height: 50px;
        margin: 20px 0;
        border-radius: 90px;
      }
    }

    .right {
      float: left;
      width: 80%;

      view {
        padding: 14px 10px 0 10px;

        text {
          color: #666666;
        }

        text:last-child {
          color: #000000;
        }
      }

      view:first-child {
        text {
          color: #000000;
          font-weight: bold;
        }
      }
    }
  }

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

    .two_1 {
      text-align: center;
      margin: 10px 0;
      text-align: center;

      .two_1info {
        background: #ffffff;
        margin: 0 15px;
        padding: 10px;
        border: 1px solid #cccccc;
        text-align: left;

        .iconfont {
          font-weight: bold;
        }

        .txt {
          margin: 0 0 0 8px;
          font-weight: bold;
          font-family: cursive;
        }
      }
    }
  }
}
</style>
