<template>
  <div ref="scrollDistance" class="ui-appWorkOrder" @scroll="handleScroll">
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list v-model:loading="loading" :finished="finished" @load="getList">
        <div v-if="loadingState && list.length == 0">
          <img class="ui-no-data-icon" src="https://image.fulllinkai.com/202306/07/247d8ae6b90334457d1b39129cd5c490.png" alt="" />
          <div class="color6 font_30 text-center">暂无工单</div>
        </div>
        <div v-else>
          <div v-for="(item, index) in list" :key="index" class="ui-work-order-box">
            <div class="ui-work-order-item">
              <div class="f-fbc">
                <div class="color3 font_26">工单号：{{ item.work_order }}</div>
                <div v-if="item.status == 0" class="font_26 f-fcc colorTheme">已提交</div>
                <div v-else-if="item.status == 1" class="font_26 f-fcc color3">处理中</div>
                <div v-else-if="item.status == 2" class="font_26 f-fcc colorTheme">已处理</div>
                <div v-else class="font_26 f-fcc colorPrice">已取消</div>
              </div>
              <div class="ui-line-between"></div>
              <div class="ui-container">
                <div class="font_28 color3 bold">工单说明</div>
                <div class="ui-explain-text font_28 color3">{{ item.desc }}</div>
                <div v-if="item.images && item.images.length > 0" class="ui-explain-pic-box f-fcl">
                  <img v-for="(itemV2, indexV2) in item.images" :key="indexV2" class="ui-explain-pic" :src="itemV2" alt="" @click="ImagePreview(item.images, indexV2)" />
                </div>
                <div v-if="item.deal_remark">
                  <div class="font_28 color3 bold ui-pt-40">解决方案</div>
                  <div class="ui-explain-text font_28 color3">{{ item.deal_remark }}</div>
                  <div v-if="item.deal_images && item.deal_images.length > 0" class="ui-explain-pic-box f-fcl">
                    <img v-for="(itemV2, indexV2) in item.deal_images" :key="indexV2" class="ui-explain-pic" :src="itemV2" alt="" @click="ImagePreview(item.deal_images, indexV2)" />
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div v-if="noMore" class="ui-no-more font_24 color6 text-center">我也是有底线的</div>
        </div>
        <div class="ui-add-btn f-fcc colorF font_30 bold" @click="jumpPath('appAddWorkOrder')">添加工单</div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>
<script setup lang="ts">
  import { onMounted, ref, onActivated } from 'vue';
  import { useUserStore } from '@/store/modules/user';
  import weChat from '@/utils/weChat';
  import router from '@/router';

  defineOptions({ name: 'AppWorkOrder' });

  const userStore = useUserStore() as any; // pinia状态缓存数据
  const loadingState = ref<any>(false); // 页面数据加载完成判断
  const list = ref<any[]>([]); // 数据存储
  const noMore = ref(false); // 没有更多数据
  const refreshing = ref(false); // 上拉刷新false表示加载完成
  const finished = ref(false); // true表示数据全部加载完成
  const loading = ref(false); // false表示数据加载完成
  const page = ref(1); // 数据分页

  const scrollValue = ref(0); // 记录页面列表的滚动距离
  const scrollDistance = ref<any>(null);

  // 获取工单列表
  const getList = () => {
    weChat({ url: `/h5/get/work/order?page=${page.value}&chat_id=${userStore.chatId}`, method: 'get' })
      .then((res) => {
        const result = res.data;
        if (list.value.length === 0 || page.value === 1) {
          list.value = result.data;
        } else if (list.value.length >= 15) {
          result.data.forEach((item) => {
            list.value.push(item);
          });
        }
        refreshing.value = false;
        loading.value = false;
        if (list.value.length < 15 || result.data.length < 15) {
          finished.value = true;
          noMore.value = true;
        }
        loadingState.value = true;
        page.value++;
      })
      .catch((err) => {
        loadingState.value = true;
        console.log(err);
      });
  };

  // 上拉初始化数据
  const onRefresh = () => {
    page.value = 1;
    noMore.value = false;
    finished.value = false;
    loading.value = true;
    getList();
  };

  const jumpPath = (url) => {
    router.push({
      name: url,
    });
  };

  // 监听页面滚动距离
  const handleScroll = (event) => {
    scrollValue.value = event.target.scrollTop;
  };

  onActivated(() => {
    let route = router.currentRoute.value.query;
    // 提交工单后重新请求接口
    if (route.state) {
      onRefresh();
    } else {
      // 赋值离开时的滚动距离
      scrollDistance.value.scrollTop = scrollValue.value;
    }
  });

  onMounted(() => {});
</script>
<style lang="scss" scoped>
  .ui-appWorkOrder {
    background: #f8f8f8;
    overflow-y: auto;
    height: 100vh;
  }

  .ui-work-order-box {
    margin: px2rem(24) px2rem(30) px2rem(30) px2rem(30);
    padding: px2rem(30);
    background: #ffffff;
    border-radius: px2rem(24);

    .ui-work-order-item {
      background: #ffffff;
      border-radius: px2rem(24);

      .ui-line-between {
        width: 100%;
        height: px2rem(2);
        background: #f8f8f8;
        margin-top: px2rem(24);
      }

      .ui-container {
        padding-top: px2rem(30);

        .ui-explain-text {
          white-space: pre-wrap;
          word-wrap: break-word;
          word-break: normal;
          padding-top: px2rem(16);
        }

        .ui-explain-pic-box {
          flex-flow: wrap;

          .ui-explain-pic {
            width: px2rem(140);
            height: px2rem(140);
            display: block;
            object-fit: cover;
            object-position: center;
            margin-right: px2rem(16);
            margin-top: px2rem(16);
            border-radius: px2rem(12);
          }
        }
      }
    }
  }

  .ui-no-data-icon {
    width: px2rem(270);
    height: px2rem(200);
    display: block;
    margin: 24vh auto px2rem(20) auto;
  }

  .ui-no-more {
    padding: px2rem(20) px2rem(20) px2rem(220) px2rem(20);
  }

  .ui-add-btn {
    position: fixed;
    bottom: px2rem(80);
    left: 50%;
    transform: translateX(-50%);
    width: px2rem(560);
    height: px2rem(80);
    background: #5ac7a0;
    border-radius: px2rem(40);
  }
</style>
