<template>
  <div class="application">
    <div class="card" v-for="(item, index) in tabs" :key="index">
      <div class="card-title">{{ item.title }}</div>
      <div class="app-list">
        <div class="app-item" v-for="(e, i) in item.list" :key="i" @click="linkTo(e.linkUrl)">
          <div>
            <img :src="e.iconUrl" alt="" class="app-img">
          </div>
          <div class="app-name">{{ e.label }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'application',

  data() {
    return {
      tabs: [
        {
          title: '网格管理',
          list: [
            {
              label: '网格管理',
              iconUrl: require('./components/img/icon1wg@2x.png'),
              linkUrl: '/apps/AppGridManagement/AppGridManagement'
            },
            {
              label: '特殊人群',
              iconUrl: require('./components/img/icon2ts@2x.png'),
              linkUrl: '/apps/AppSpecialPeople/AppSpecialPeople'
            },
            {
              label: '以房找人',
              iconUrl: require('./components/img/icon3yf@2x.png'),
              linkUrl: '/apps/AppBuilding/AppBuilding'
            },
            {
              label: '居民管理',
              iconUrl: require('./components/img/icon4jm@2x.png'),
              linkUrl: '/apps/AppResidentDocument/AppResidentDocument'
            }
          ]
        },
        {
          title: '事务处理',
          list: [
            {
              label: '矛盾调解',
              iconUrl: require('./components/img/icon5md@2x.png'),
              linkUrl: '/apps/AppConflictMediation/AppConflictMediation'
            },
            {
              label: '走访慰问',
              iconUrl: require('./components/img/icon6zf@2x.png'),
              linkUrl: '/apps/AppWalkask/AppWalkask'
            },
            {
              label: '事务记录',
              iconUrl: require('./components/img/icon7sw@2x.png'),
              linkUrl: '/apps/AppInterview/AppInterview'
            },
            {
              label: '问卷表单',
              iconUrl: require('./components/img/icon8wj@2x.png'),
              linkUrl: '/apps/AppAskForm/AppAskForm'
            },
            {
              label: '会议通知',
              iconUrl: require('./components/img/icon9hy@2x.png'),
              linkUrl: '/apps/AppMeetingNotice/AppMeetingNotice'
            },
            {
              label: '电话簿',
              iconUrl: require('./components/img/icon10txl@2x.png'),
              linkUrl: '/apps/AppMailList/AppMailList'
            },
            {
              label: '通知公告',
              iconUrl: require('./components/img/icon11tzgg@2x.png'),
              linkUrl: '/apps/AppNotification/AppNotification'
            },
            {
              label: '协同宣发',
              iconUrl: require('./components/img/iconxtxf.png'),
              linkUrl: '/apps/AppCooperationPropaganda/AppCooperationPropaganda'
            },
            {
              label: '宣发统计',
              iconUrl: require('./components/img/iconxftj.png'),
              linkUrl: '/apps/AppPropagandaStatistics/AppPropagandaStatistics'
            },
          ]
        },
        {
          title: '疫情防控',
          list: [
            {
              label: '健康上报',
              iconUrl: require('./components/img/icon12jksb@2x.png'),
              linkUrl: '/apps/AppHealthUp/AppHealthUp'
            },
            {
              label: '返乡登记',
              iconUrl: require('./components/img/icon13fxdj@2x.png'),
              linkUrl: '/apps/AppBackUserList/AppBackUserList'
            }
          ]
        },
      ]
    }
  },
  created() {
    document.title = '应用'
  },
  methods: {
    linkTo(url) {
      uni.navigateTo({url})
    }
  }
}
</script>

<style lang="scss" scoped>
.application {
  padding: 40px 28px 100px 28px;
  box-sizing: border-box;

  .card {
    padding: 20px 30px;
    margin-bottom: 32px;
    box-sizing: border-box;
    width: 100%;
    background-color: #FFFFFF;
    border-radius: 12px;
    box-shadow: 0 2px 4px 2px rgba(173, 173, 173, 0.05);

    .card-title {
      height: 40px;
      line-height: 40px;
      font-weight: 800;
    }

    .app-list {
      display: flex;
      flex-wrap: wrap;

      .app-item {
        width: 25%;
        height: 150px;
        text-align: center;
        padding-top: 20px;
        box-sizing: border-box;

        .app-img {
          width: 72px;
          height: 72px;
        }

        .app-name {
          font-size: 26px;
        }
      }
    }
  }

}
</style>
