<template>
  <view>
    <view class="examine_box">
      <view class="examine_list">
        <view class="examine_item" v-for="(item, index) in examineItem" @click="changeExamine(item, index)" :key="item.name">
          <view :class="[ExamineIdx === index ? 'examine_active' : 'examine_item_name']">{{ item.name }}</view>
          <view :class="[ExamineIdx === index ? 'task_line' : 'task_line_none']"></view>
        </view>
      </view>
    </view>
    <view class="container">
      <template v-if="ExamineIdx === 0">
        <view class="detail" v-for="(item, index) in list.data" :key="item.id" @click="onItemClick(item, index)">
          <view v-if="item.status === 1">
            <view class="detail_item">
              <view class="date">{{ item.put_date }}</view>
              <image mode="aspectFill" class="arrow_right" src="/static/icon/arrow_right@2x.png" />
            </view>
            <view class="detail_content">
              <view class="type">• {{ item.photo_task_type.name }}</view>
              <view class="title">{{ item.title }}</view>
              <view class="connet">
                <rich-text :nodes="item.content"></rich-text>
              </view>
              <view class="phtot_list">
                <image v-for="(item, index) in item.photoList" :key="item.id" mode="aspectFill" class="img" :src="item.img" />
              </view>
              <view class="adress">
                <image class="address_icon" mode="aspectFill" src="/static/icon/ic_shz_dizhi@2x.png" />
                <view class="address_name">{{ item.position }}</view>
              </view>
            </view>
            <view class="status_box">
              <view v-if="item.status === 1" class="status">审核中</view>
              <view v-else-if="item.status === 2" class="adopt">已通过</view>
              <view v-else class="failed">未通过</view>
            </view>
          </view>
        </view>
      </template>
      <template v-if="ExamineIdx === 1">
        <view class="detail" v-for="(item, index) in list.data" :key="item.id" @click="onItemClick(item, index)">
          <view v-if="item.status === 2">
            <view class="detail_item">
              <view class="date">{{ item.put_date }}</view>
              <image mode="aspectFill" class="arrow_right" src="/static/icon/arrow_right@2x.png" />
            </view>
            <view class="detail_content">
              <view class="type">• {{ item.photo_task_type.name }}</view>
              <view class="title">{{ item.title }}</view>
              <view class="connet">
                <rich-text :nodes="item.content"></rich-text>
              </view>
              <view class="phtot_list">
                <image v-for="(item, index) in item.photoList" :key="item.id" mode="aspectFill" class="img" :src="item.img" />
              </view>
              <view class="adress">
                <image class="address_icon" mode="aspectFill" src="/static/icon/ic_shz_dizhi@2x.png" />
                <view class="address_name">{{ item.position }}</view>
              </view>
            </view>
            <view class="status_box">
              <view v-if="item.status === 1" class="status">审核中</view>
              <view v-else-if="item.status === 2" class="adopt">已通过</view>
              <view v-else class="failed">未通过</view>
            </view>
          </view>
        </view>
      </template>
      <template v-if="ExamineIdx === 2">
        <view class="detail" v-for="(item, index) in list.data" :key="item.id" @click="onItemClick(item, index)">
          <view v-if="item.status === 3">
            <view class="detail_item">
              <view class="date">{{ item.put_date }}</view>
              <image mode="aspectFill" class="arrow_right" src="/static/icon/arrow_right@2x.png" />
            </view>
            <view class="detail_content">
              <view class="type">• {{ item.photo_task_type.name }}</view>
              <view class="title">{{ item.title }}</view>
              <view class="connet">
                <rich-text :nodes="item.content" />
                <!--              <u-parse :content="content" />-->
              </view>
              <view class="phtot_list">
                <image v-for="(item, index) in item.photoList" :key="item.id" mode="aspectFill" class="img" :src="item.img" />
              </view>
              <view class="adress">
                <image class="address_icon" mode="aspectFill" src="/static/icon/ic_shz_dizhi@2x.png" />
                <view class="address_name">{{ item.position }}</view>
              </view>
            </view>
            <view class="status_box">
              <view v-if="item.status === 1" class="status">审核中</view>
              <view v-else-if="item.status === 2" class="adopt">已通过</view>
              <view v-else class="failed">未通过</view>
            </view>
          </view>
        </view>
      </template>

      <view class="data_none" v-if="list.data.length === 0 && list.status !== 'loading'">
        <image mode="aspectFill" class="data_img" src="/static/pic_wushuju@2x.png" />
        <view class="data_title">暂无数据</view>
      </view>
    </view>
  </view>
</template>

<script>
import { examineItem, examineList } from '@/pages/mine-picture/mock';
import { getList, createList } from '@/utils/list';

export default {
  data() {
    return {
      examineItem,
      ExamineIdx: 0,
      status: 1,
      examineList,

      list: createList(),
    };
  },

  onLoad(query) {
    this.fetchExamineList();
  },

  methods: {
    async fetchExamineList() {
      const status = this.ExamineIdx + 1;

      await getList(this, 'list', ['api/app/phototask/list', { status }], {
        transform: (list) => list.map((value) => ({ ...value })),
        abandon: () => status !== this.ExamineIdx + 1,
      });
      console.log(this.list);
    },

    changeExamine(item, index) {
      if (this.ExamineIdx === index) return;
      this.ExamineIdx = index;
      this.list = createList();
      this.fetchExamineList();
    },

    onItemClick(item, index) {
      uni.$u.route({ url: 'pages/mine-picture-detail/index', params: { id: item.id } });
    },
  },
};
</script>

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