<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 examineList" :key="item.id">
          <navigator hover-class="none" url="/package-two/my-phtot-detail/my-phtot-detail?id=item.id"></navigator>
          <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 examineList" :key="item.id">
          <navigator hover-class="none" url="/package-two/my-phtot-detail/my-phtot-detail?id=item.id"></navigator>
          <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 examineList" :key="item.id">
          <navigator hover-class="none" url="/package-two/my-phtot-detail/my-phtot-detail?id=item.id"></navigator>
          <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="examineList.length === 0">
        <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';

export default {
  data() {
    return {
      examineItem,
      ExamineIdx: 0,
      status: 1,
      examineList,
    };
  },
  methods: {
    async fetchExamineList() {
      const type = this.data.ExamineIdx + 1;
      const res = await request.get(`/api/app/phototask/list?status=${type}`, {});
      this.setData({
        examineList: res.data.list,
      });
      this.data.examineList.forEach((item) => {
        item.put_date = item.put_date.substring(0, 16);
      });
      this.setData({
        examineList: this.data.examineList,
      });
      console.log(this.data.examineList);
    },
    async changeExamine(item, index) {
      if (this.ExamineIdx === index) return;
      this.ExamineIdx = index;
      // this.examineList()
    },
  },
};
</script>

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