<template>
  <view>
    <view class="wrapper">
      <view class="title">交通违法举报</view>

      <u-grid style="padding: 0 30rpx">
        <u-grid-item v-for="(item, index) in list" :key="item.id" @click="onListClick(item, index)">
          <view style="padding: 20rpx 10rpx; display: flex; flex-direction: column; align-items: center; justify-content: flex-start">
            <image :src="item.img" style="display: block; width: 120rpx; height: 120rpx" />
            <view style="height: 16rpx" />
            <text align="center" bold class="grid-text" style="min-height: 128rpx">{{ item.name }}</text>
          </view>
        </u-grid-item>
      </u-grid>

      <view style="height: 60rpx" />
      <view class="footer">
        <u-button class="report-btn" @click="onReportClick">举报说明</u-button>
      </view>
      <view style="height: 60rpx" />

      <u-modal :show="showReport" title="举报说明" @confirm="onReportConfirm">
        <rich-text :nodes="content" />
      </u-modal>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      query: {},
      list: [],
      content: '',
      showReport: false,
    };
  },

  onLoad(query) {
    this.query = query;
    this.fetchPhotoTaskTypeData();
    this.fetchPhotoTaskTypeDetail();
  },

  methods: {
    async fetchPhotoTaskTypeData() {
      const { list } = await uni.$u.http.get('/api/app/phototasktype/list', { params: { parent_id: this.query.id } });
      this.list = list;
    },

    async fetchPhotoTaskTypeDetail() {
      const { detail } = await uni.$u.http.get('/api/app/phototasktype/detail', { params: { id: this.query.id } });
      this.content = detail.desc;
    },

    async onReportClick() {
      console.log('onReportClick');
      this.showReport = true;
    },

    async onReportConfirm() {
      this.showReport = false;
    },

    onListClick(item, index) {
      uni.$u.route({
        url: 'pages/record-content/index',
        params: {
          parent_id: this.query.id,
          detail_id: item.id,
        },
      });
    },
  },
};
</script>

<style scoped lang="scss">
@import 'index.scss';
</style>
