<template>
  <view class="info-view">
    <u-navbar
      back-icon-color="#333333"
      background="#FFFFFF"
      title="我的资料"
      titleColor="#333333"
      :border-bottom="false"
      title-bold
    ></u-navbar>
    <view class="list-view">
      <view v-for="(group, ind) in items" :key="ind" class="group-view">
        <u-cell-group :border="false">
          <view v-for="(item, index) in group" :key="index">
            <u-cell-item
              :value="item.value"
              @click="handleClick(item.pathName)"
            >
              <image
                slot="icon"
                :src="item.icon"
                :style="item.imageStyle"
              ></image>
              <view slot="title" class="item-title">{{ item.title }}</view>
              <view slot="value" class="item-value">{{ value }}</view>
            </u-cell-item>
          </view>
        </u-cell-group>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {}
  },
  computed: {
    items() {
      return [
        [
          {
            pathName: 'deposit/index',
            title: '配件押金',
            value: '',
            icon: process.uniEnv.qn_base_url + 'yajin.png',
            imageStyle: 'width:32rpx;height:32rpx',
          },
          {
            pathName: 'contract/index',
            title: '我的合同',
            value: '',
            icon: process.uniEnv.qn_base_url + 'hetong.png',
            imageStyle: 'width:34rpx;height:32rpx',
          },
          {
            pathName: 'cert/index',
            title: '我的证件',
            value: '',
            icon: process.uniEnv.qn_base_url + 'zhengjian.png',
            imageStyle: 'width:36rpx;height:28rpx',
          },
        ],
      ]
    },
  },
  onLoad() {
    getApp().trackPage('我的资料')
  },
  methods: {
    handleClick(path) {
      this.$u.route({
        url: 'pages/mine/' + path,
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.info-view {
  position: relative;
  height: 100vh;
  display: flex;
  background-color: #f4f5f7;
  flex-direction: column;

  .list-view {
    height: 100%;
    overflow: auto;
    .group-view {
      margin-top: 20rpx;
      background-color: #ffffff;
      border-radius: 12rpx;
      overflow: hidden;
      .item-title {
        font-size: 32rpx;
        color: #333333;
        margin-left: 16rpx;
        line-height: 32rpx;
      }

      .item-value {
        font-size: 26rpx;
        color: #999999;
      }

      .line-view {
        height: 2rpx;
        background-color: #f4f5f7;
        margin: 30rpx;
      }
    }
  }
}
</style>
