<template>
  <view class="device-list info-wrap">
    <up-search v-model="searchValue"></up-search>
    <view class="stat-ctl">
      <view class="u-page__tag-item" v-for="(item, index) in WorkOrderStat" :key="index">
        <up-tag
            :text="item.label"
            :plain="selectTag === item.label"
            :plainFill="true"
            bgColor="#007aff"
            :name="item.value"
            @click="()=>radioClick(item.label)"
        >
        </up-tag>
      </view>
    </view>
    <view class="u-page-list" style="padding-bottom: 100rpx">
      <up-list @scrolltolower="scrolltolower">
        <up-list-item
            v-for="(item, index) in indexList"
            :key="item.id"
        >
          <view class="item-content">
            <u--image
                :showLoading="true"
                :src="getDevImg(item.problemImg)"
                width="160rpx"
                height="150rpx"
            />
            <view class="content-info">
              <view>
                <up-text :lines="1" :text="item.name" size="24rpx"/>
                <up-tag
                    :text="valueToConst(WorkOrderLevel,item.level).label"
                    plain size="mini"
                    :bgColor="valueToConst(WorkOrderLevel,item.level).color"
                    class="tag-stat"></up-tag>
                <up-text text="详情>" color="#007aff" style="flex:none;width: auto"
                         @click="()=>onDetailClick(item)"></up-text>
              </view>
              <view>
                <up-text :lines="1" :text="`工单号：${item.code}`" size="24rpx"/>
              </view>
              <view>
                <up-text :lines="1" :text="`提交时间：${item.createTime}`" size="24rpx"/>
              </view>
            </view>
          </view>
        </up-list-item>
        <up-loading-icon v-if="loading" text="加载中" textSize="12"></up-loading-icon>
        <up-text
            v-if="!loadmoreFlag" text="已经到底了" style="justify-content: center;"
            size="24rpx"
            color="gray"
        >
        </up-text>
      </up-list>
    </view>
  </view>
</template>

<script setup lang="ts">
import {ref} from "vue"
import {WorkOrderLevel, WorkOrderStat} from '@/common/consts/WorkOrderConst.js'
import {onLoad, onShow} from '@dcloudio/uni-app';
import {getDevImg, navigateTo} from "@/util/index.js";
import {getMyOrderWork} from "@/api/workorder.js";
import {valueToConst} from "@/common/consts/CommonConst.js";

const page = ref(1)
let loadmoreFlag = ref(true)
let loading = ref(false)

onLoad(() => {
  page.value = 1
  loading.value = true;
  loadmore();
});
onShow(() => {
  uni.$on('refreshData', (res) => {
    if (res.refresh) {
      page.value = 1
      loading.value = true;
      indexList.value = []
      loadmore();
    }
  })
});
let searchValue = ref("")
let indexList = ref([])
let selectTag = ref(WorkOrderStat.ALL.label)

function radioClick(label) {
  selectTag.value = label
}

const loadmore = async () => {
  getMyOrderWork({
    page: page.value,
  }).then(res => {
    const {records} = res
    if (records && records.length > 0) {
      indexList.value = indexList.value.concat(records)
      page.value += 1
      if (records.length < 10) {
        loadmoreFlag.value = false;
      }
    } else {
      loadmoreFlag.value = false;
    }
    loading.value = false;
  })
};

const scrolltolower = () => {
  if (!loadmoreFlag.value) return;
  loading.value = true;
  loadmore();
};
const onDetailClick = (item) => {
  navigateTo({
    url: "/pages/workbenchsub/workorder/detail",
    param: item
  })
}
</script>

<style lang="scss">
.device-list {

  .u-search__content {
    background: $uni-bg-color !important;

    .u-search__content__input {
      background-color: $uni-bg-color !important;
    }
  }

  .u-page-list {
    margin-top: 14rpx;
  }

  .item-content {
    width: 100%;
    border-radius: $comm-border-radius;
    display: flex;
    box-sizing: border-box;
    align-items: center;
    justify-content: flex-start;
    background: $uni-bg-color;
    margin-bottom: 14rpx;

    padding: 14rpx;

    .content-info {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-start;
      margin-left: 14rpx;

      > view {
        font-size: inherit;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-start;

        .tag-stat {
          margin-left: auto;
          margin-right: 14rpx;

          .u-tag--mini {
            height: 35rpx;
          }

          .u-tag--primary--plain {
            border-color: transparent !important;

            .u-tag__text--primary--plain {
              color: $uni-bg-color !important;
              font-size: 18rpx !important;
            }
          }
        }


        .u-link {
          flex: none;
        }

        &:not(:first-child) {
          margin-top: 14rpx;
        }
      }
    }
  }
}
</style>
