<template>
  <view class="user-view p-page">
    <u-navbar :placeholder="true" :bg-color="uNavbarBgColor" left-icon="">
      <view slot="left">
        <text
          class="fw-bold"
          :style="{ color: uNavbarTitleColor, fontSize: '22px' }"
          >我的</text
        >
      </view>
      <view slot="right" class="u-flex">
        <u-icon
          name="setting"
          :size="30"
          :color="uNavbarIconColor"
          class="mx-sm"
        ></u-icon>
        <u-icon
          name="question-circle"
          :size="30"
          :color="uNavbarIconColor"
          class="mx-sm"
        ></u-icon>
      </view>
    </u-navbar>

    <view class="mt-base u-flex-y-center">
      <u-avatar :size="65" @tap="handleToLogin"></u-avatar>
      <view class="ms-base">
        <view @tap="handleToLogin">
          <text class="text-white fw-bold" :style="{ fontSize: '24px' }">{{
            auth.name || "未登录"
          }}</text>
        </view>
        <view class="mt-base">
          <text class="text-white">便捷出行就在12306</text>
        </view>
      </view>
    </view>

    <view class="mt-llg page-box">
      <view class="pt-base px-base">
        <u-text text="当前出行" :size="18" :bold="true"> TODO </u-text>
      </view>
      <NextTicketVue ref="NextTicketVue" v-if="auth.id"></NextTicketVue>
      <view v-else class="py-llg u-flex-xy-center">
        <view>
          <u-button type="primary" size="small" @tap="handleToLogin"
            >去登录</u-button
          >
        </view>
      </view>
    </view>

    <view v-if="auth.id" class="mt-base page-box">
      <u-cell-group>
        <u-cell title="身份证号" :label="auth.idCardNo | hideIdCardNo"></u-cell>
        <u-cell title="手机号" :label="auth.mobileNo | hideMobileNo"></u-cell>
        <u-cell
          title="银行卡号"
          :label="auth.bankCardNo | hideBankCardNo"
        ></u-cell>
      </u-cell-group>
    </view>

    <!--
    <view class="mt-base page-box u-flex-y-center">
      <view class="u-flex-grow grid-item">
        <u-image
          src="@/static/img_chengcheren.png"
          height="36px"
          width="36px"
        ></u-image>
        <view class="grid-item-text">乘车人</view>
      </view>
      <u-line direction="col" length="26px"></u-line>
      <view class="u-flex-grow grid-item">
        <u-image
          src="@/static/img_dingdan.png"
          height="36px"
          width="36px"
        ></u-image>
        <view class="grid-item-text">我的订单</view>
      </view>
      <u-line direction="col" length="26px"></u-line>
      <view class="u-flex-grow grid-item">
        <u-image
          src="@/static/img_youhuiquan.png"
          height="36px"
          width="36px"
        ></u-image>
        <view class="grid-item-text">优惠券</view>
      </view>
    </view>
    -->

    <!--
    <view class="page-box">
      <view class="px-base py-lg">
        <u-text text="出行向导" :size="18" :bold="true"></u-text>
      </view>
      <u-line></u-line>
      <u-grid :border="false" :col="4">
        <u-grid-item v-for="item in PAGE_MENU_1" :key="item.label">
          <view class="grid-item">
            <u-image :src="item.image" height="30px" width="30px"></u-image>
            <view class="grid-item-text">{{ item.label }}</view>
          </view>
        </u-grid-item>
      </u-grid>
    </view>
    -->

    <!--
    <view class="page-box">
      <view class="px-base py-lg">
        <u-text text="温馨服务" :size="18" :bold="true"></u-text>
      </view>
      <u-line></u-line>
      <u-grid :border="false" :col="4">
        <u-grid-item v-for="item in PAGE_MENU_2" :key="item.label">
          <view class="grid-item">
            <u-image :src="item.image" height="30px" width="30px"></u-image>
            <view class="grid-item-text">{{ item.label }}</view>
          </view>
        </u-grid-item>
      </u-grid>
    </view>
    -->

    <!--
    <view class="page-box">
      <view class="px-base py-lg">
        <u-text text="信息服务" :size="18" :bold="true"></u-text>
      </view>
      <u-cell-group>
        <u-cell title="公告" size="large" :is-link="true"></u-cell>
        <u-cell title="常见问题" size="large" :is-link="true"></u-cell>
        <u-cell title="使用须知" size="large" :is-link="true"></u-cell>
        <u-cell title="服务规章" size="large" :is-link="true"></u-cell>
        <u-cell title="铁路保险" size="large" :is-link="true"></u-cell>
        <u-cell
          title="关于"
          size="large"
          :is-link="true"
          :border="false"
        ></u-cell>
      </u-cell-group>
    </view>
    -->

    <view :style="{ height: '25vh' }"></view>

    <view v-if="auth.id" class="mt-base">
      <u-button type="error" @tap="handleLogout">退出登录</u-button>
    </view>
  </view>
</template>

<script>
import { mapActions, mapState } from "vuex";
import uNavbarOpacity from "@/utils/mixins/u-navbar-opacity";
import NextTicketVue from "./NextTicket.vue";

const PAGE_MENU_1 = [
  { label: "车站大屏", image: require("@/static/icon_chezhandaping.png") },
  { label: "时刻表", image: require("@/static/icon_shikebiao.png") },
  { label: "起售时间", image: require("@/static/icon_qishoushijian.png") },
  {
    label: "正晚点查询",
    image: require("@/static/icon_zhengwandianchaxun.png"),
  },
  { label: "票价查询", image: require("@/static/icon_piaojiachaxun.png") },
  { label: "换乘时间", image: require("@/static/icon_huanchengshijian.png") },
  {
    label: "代售点查询",
    image: require("@/static/icon_daishoudianchaxun.png"),
  },
  { label: "更多", image: require("@/static/icon_gengduo.png") },
];

const PAGE_MENU_2 = [
  {
    label: "临时身份证明",
    image: require("@/static/icon_linshishenfenzhengming.png"),
  },
  { label: "遗失物品", image: require("@/static/icon_yishiwupin.png") },
  { label: "建议", image: require("@/static/icon_jianyi.png") },
  { label: "投诉", image: require("@/static/icon_tousu.png") },
  { label: "重点旅客", image: require("@/static/icon_zhongdianlvke.png") },
  { label: "客服电话", image: require("@/static/icon_kefudianhua.png") },
  { label: "希望工程", image: require("@/static/icon_xiwanggongcheng.png") },
  {
    label: "外国商务人员",
    image: require("@/static/icon_waiguoshangwurenyuan.png"),
  },
];

export default {
  mixins: [uNavbarOpacity],
  components: { NextTicketVue },
  data() {
    return {
      PAGE_MENU_1,
      PAGE_MENU_2,
    };
  },
  computed: {
    ...mapState({ auth: "auth" }),
  },
  onShow() {
    // 组件没有 onShow 周期，需要通过页面的 onShow 周期确保每次访问本页面都刷新 nextTicket
    if (this.$refs.NextTicketVue) this.$refs.NextTicketVue.loadMyTickets();
  },
  methods: {
    ...mapActions({ revertAuth: "revertAuth" }),
    handleToLogin() {
      if (this.auth.id) return;
      uni.navigateTo({ url: "/pages/LoginView/LoginView" });
    },
    handleLogout() {
      this.revertAuth();
    },
  },
};
</script>

<style scoped>
.user-view {
  background: linear-gradient(
    var(--color-app-blue) 0 100px,
    250px,
    var(--color-background) 400px
  );
}

.grid-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-llg) var(--space-ssm);
}

.grid-item-text {
  margin-top: var(--space-sm);
  font-size: 13px;
  white-space: nowrap;
}
</style>
