<template>
  <view>
    <view class="wrapper">
      <view class="title">{{ title }}</view>

      <template v-for="list of totalList">
        <view v-if="list.title" class="category">{{ list.title }}</view>
        <u-grid style="padding: 0 30rpx">
          <u-grid-item v-for="(item, index) in list.data" :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>
      </template>

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

      <!--
      <u-modal :show="showReport" title="举报说明" @confirm="onReportConfirm">
        <view :style="`max-height: ${modalHeight}rpx; overflow-y: scroll; white-space: pre-wrap`">
          <rich-text :nodes="content" />
        </view>
      </u-modal>
      -->
    </view>
  </view>
</template>

<script>
const categoryMap = {
  1: '违反交通信号灯指示',
  2: '违反标志标线',
  3: '违章乱停',
  4: '不文明驾驶',
  5: '其他违法行为',
}

export default {
  data() {
    return {
      query: {},
      list: [],
      title: '',
      content: '',
      showReport: false,

      isFirstRecordType: 0,
      isFirstRecordTypeId: 0,

      totalList: []
    };
  },

  computed: {
    modalHeight() {
      return Math.ceil(window.innerHeight * 2 * 0.6);
    },
  },

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

    this.isFirstRecordType = this.getIsFirstRecordType();
  },

  onShow(options) {},

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

      // 可分类
      if (list.some(v => v.category > 0)) {
        this.totalList = Object.keys(categoryMap).map((c, index) => {
          const category = +c
          const data = list.filter(v => v.category === category)
          const res = {
            title: categoryMap[category],
            data,
          }
          return res
        })
        return
      }
      this.totalList = [{ data: list }]
    },

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

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

    async onReportConfirm() {
      if (!this.isFirstRecordType) {
        this.showReport = false;
        this.isFirstRecordType = this.getIsFirstRecordType();
        uni.$u.route({
          url: 'pages/record-content/index',
          params: {
            parent_id: this.query.id,
            detail_id: this.isFirstRecordTypeId,
          },
        });
      }
      this.showReport = false;
    },

    onListClick(item, index) {
      if (!this.isFirstRecordType) {
        this.isFirstRecordTypeId = item.id;
        this.showReport = true;
        return;
      }
      uni.$u.route({
        url: 'pages/record-content/index',
        params: {
          parent_id: this.query.id,
          detail_id: item.id,
        },
      });
    },

    getIsFirstRecordType() {
      const isFirstRecordType = uni.getStorageSync('isFirstRecordType');
      if (!isFirstRecordType) uni.setStorageSync('isFirstRecordType', 1);
      return isFirstRecordType;
    },
  },
};
</script>

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

.category {
  margin-bottom: 30rpx;
  padding: 0 40rpx;
  font-weight: bold;
  font-size: 36rpx;
}
</style>
