<template>
  <view class="wrap">
    <uni-nav-bar dark :fixed="true" shadow background-color="#007AFF" status-bar title="首页" />
    <uni-section class="section" title="基础分组" padding>
      <uni-grid :column="4" :showBorder="false">
        <uni-grid-item>
          <view class="grid-item-box">
            <uni-icons type="list" :size="30" color="#777" />
            <text class="text">网点列表</text>
          </view>
        </uni-grid-item>
        <uni-grid-item>
          <view class="grid-item-box">
            <uni-icons type="folder-add" :size="30" color="#777" />
            <text class="text">新增网点</text>
          </view>
        </uni-grid-item>
        <uni-grid-item>
          <view class="grid-item-box">
            <uni-icons type="person-filled" :size="30" color="#777" />
            <text class="text">经销商列表</text>
          </view>
        </uni-grid-item>
        <uni-grid-item>
          <view class="grid-item-box">
            <uni-icons type="shop-filled" :size="30" color="#777" />
            <text class="text">新增二批商</text>
          </view>
        </uni-grid-item>
      </uni-grid>
    </uni-section>
    <uni-section class="section" title="拜访分组" padding>
      <uni-grid :column="4" :showBorder="false">
        <uni-grid-item>
          <view class="grid-item-box">
            <uni-icons type="home" :size="30" color="#777" />
            <text class="text">网点拜访</text>
          </view>
        </uni-grid-item>
        <uni-grid-item>
          <view class="grid-item-box">
            <uni-icons type="settings" :size="30" color="#777" />
            <text class="text">经销商拜访</text>
          </view>
        </uni-grid-item>
      </uni-grid>
    </uni-section>
    <uni-section class="section" title="日常分组" padding>
      <uni-grid :column="4" :showBorder="false">
        <uni-grid-item>
          <view class="grid-item-box">
            <uni-icons type="upload-filled" :size="30" color="#777" />
            <text class="text">付费阵列上报</text>
          </view>
        </uni-grid-item>
        <uni-grid-item>
          <view class="grid-item-box" @click="addendanceClick">
            <uni-icons type="compose" :size="30" color="#777" />
            <text class="text">考勤打卡</text>
          </view>
        </uni-grid-item>
      </uni-grid>
    </uni-section>
  </view>
</template>

<script>

export default {
  onLoad: function () { },
  methods: {
    async addendanceClick() {
      if (!this.$store.getters.user.ruleId) {
        return this.$modal.msgError("您无需打卡");
      }
      const result = await this.$store.getters.location
      console.log('首页-获取地理位置', result)
      // 判断用户位置和获取位置-城市是否一致
      if (result.addressComponent.city.startsWith(this.$store.getters.user.workCityName)) {
        // 跳转到打卡页面
        this.$tab.navigateTo('/pages/attendance/index')
      } else {
        // 不一致，提示
        this.$modal.msgError("工作地点与定位地点不同");
      }
    }
  }
}
</script>

<style scoped lang="scss">
.wrap {
  height: 100vh;
  background-color: #f7f8fa;

  .section {
    background-color: white;

    .grid-item-box {
      height: 100%;
      background-color: white;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>