<template>
  <view>
    <view class="wrapper">
      <view class="title">{{ 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: 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>
export default {
  data() {
    return {
      query: {},
      list: [],
      title: '',
      content: '',
      showReport: false,

      isFirstRecordType: 0,
      isFirstRecordTypeId: 0,
    };
  },

  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;
    },

    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';
</style>
