<template>
  <div class="wrapper">
    <div class="header" :class="[isFixed ? 'header-active' : '']">
      <div class="status-bar" :style="{height: statusBarHeight + 'px'}"></div>
      <div class="nav-bar">
        <h2>服务</h2>
      </div>
    </div>
    <div class="header-bg"></div>
    <div class="liner"></div>
    <div class="body" v-if="list">
      <div class="card" v-for="(obj,key) in list" :key="key">
        <div class="title">{{ $dict.getLabel('homeConfigMenuType', key) }}</div>
        <u-grid :col="4" hover-class="text-hover" :border="false">
          <u-grid-item v-for="(item, index) in obj" :key="index" class="grid-item" :custom-style="{padding:'9px 0'}" @click="handleClick(item)">
            <img :src="item.pictureUrl" alt=""/>
            <div class="grid-text">{{ item.name }}</div>
          </u-grid-item>
        </u-grid>
      </div>
    </div>
  </div>
</template>

<script>
import {mapActions, mapState} from "vuex";

export default {
  name: "AppModules",
  appName: "服务",
  customNavigation: true,
  computed: {
    ...mapState(['user', 'token']),
  },
  data() {
    return {
      list: null,
      isFixed: false,
      statusBarHeight: 20,
    }
  },
  onLoad() {
    this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
    this.$dict.load("homeConfigMenuType").then(() => {
      this.getList()
    });
  },
  methods: {
    ...mapActions(['authCheck']),
    handleClick({type, appId, modulePath, url, checkType, corpId}) {
      //先判读是不是系统应用
      if (type != "0") {
        if (type == "1") {
          uni.navigateToMiniProgram({appId});
        } else if (type == "2") {
          uni.navigateTo({url: "/subPages/h5/webview?link=" + url});
        } else if (type == "3") {
          this.$linkTo(url);
        } else if (type == "4") {
          uni.openCustomerServiceChat({
            extInfo: {url: url},
            corpId: corpId,
            fail: () => {
              this.$u.toast('请使用普通微信打开小程序进行咨询');
            }
          });
        }
      } else if (type && type == "0") {
        uni.showLoading({title: '正在进入应用...'})
        this.authCheck({checkType, modulePath}).finally(() => uni.hideLoading())
      }
    },
    getList() {
      this.$instance.post("/app/appminihomeconfig/listAll", null, {withoutToken: true}).then(res => {
        if (res?.data) {
          this.list = res.data.all;
        }
      })
    },
    onPageScroll(params) {
      this.isFixed = params.scrollTop > 60;
    }
  },

  onShareAppMessage() {
    return {
      title: '欢迎使用数字乡村治理服务一体化平台~',
      path: `/pages/AppModules/AppModules`
    }
  },
}
</script>

<style lang="scss" scoped>
.header {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 0;
  width: 100%;
  opacity: 0;
  transition: all 0.2s ease;

  &.header-active {
    z-index: 1111;
    opacity: 1;
    background: #4181FF;
  }

  .nav-bar {
    position: relative;
    height: 88px;
    line-height: 88px;
    color: #fff;
    font-size: 32px;
    text-align: center;
  }
}

.header-bg {
  height: 320px;
  background: #4181FF;
}

.liner {
  height: 192px;
  background: linear-gradient(360deg, #F3F6F9 0%, #4181FF 100%);
}

.body {
  margin-top: -290px;

  .card {
    width: 686px;
    min-height: 304px;
    background: #FFFFFF;
    box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.02);
    border-radius: 16px;
    margin: 0 auto 24px;
    box-sizing: border-box;
    padding: 32px;

    .title {
      font-size: 34px;
      font-weight: 600;
      color: #333333;
      line-height: 48px;
      margin-bottom: 36px;
    }

    .grid-item {
      img {
        width: 108px;
        height: 108px;
        object-fit: fill;
      }

      .grid-text {
        font-size: 26px;
        font-weight: 400;
        color: #333333;
      }
    }
  }
}
</style>
