<template>
  <panel>
    <template #header>
      <up-icon size="45rpx" :name="tag"></up-icon>
      我的工单
      <up-text
          color="#007aff"
          size="24rpx"
          style="margin-left: auto;flex: inherit;width: auto;" text="查看更多"
          @click="()=>navigateTo({url:'/pages/workbenchsub/workorder/list'})">
      </up-text>
      <up-icon size="20rpx" name="arrow-right-double" color="#007aff"></up-icon>
    </template>
    <template #content>
      <view class="u-page" style="padding-bottom: 0;width: 100%">
        <up-list>
          <up-list-item
              v-for="(item, index) in indexList"
              :key="index"
          >
            <view class="item-content" @click="()=>handleWorkOrder(item)">
              <view class="item-dot">
                <view class="item-dot-bg"></view>
              </view>
              <view class="item-info">
                <view class="item-title">
                  <up-text
                      color="#555555"
                      size="25rpx"
                      :bold="true"
                      style="font-weight:700;flex: inherit;width: auto;"
                      :text="item.typeName"
                  >
                  </up-text>
                  <up-text
                      color="#f59a23"
                      size="30rpx"
                      :bold="true"
                      style="font-weight:700;flex: inherit;width: auto;"
                      :text="item.statusName">
                  </up-text>
                </view>
                <view class="item-desc">
                  <view class="info-item">
                    工单名称：{{ formatTxt(item.name) }}
                  </view>
                  <view class="info-item">
                    工单编号：{{ formatTxt(item.code) }}
                  </view>
                  <view class="info-item">
                    提报时间：{{ item.createTime }}
                  </view>
                  <view class="info-item">
                    工单等级：{{ valueToConst(WorkOrderLevel, item.level).label }}
                  </view>
                </view>
              </view>
            </view>
            <up-line margin="20rpx 0"></up-line>
          </up-list-item>
        </up-list>
      </view>
    </template>
  </panel>
</template>

<script setup lang="ts">

import Panel from "@/components/pannel/index.vue";
import tag from "@/static/aiot/icon/tag.svg";
import {ref, watch} from 'vue';
import {onLoad, onShow} from '@dcloudio/uni-app';
import {getMyOrderWorkTodo} from "@/api/workorder.js";
import {formatTxt, navigateTo} from "@/util/index.js";
import {valueToConst} from "@/common/consts/CommonConst.js";
import {WorkOrderLevel} from "@/common/consts/WorkOrderConst.js";

const props = defineProps({
  tag: {
    type: String,
    default: tag
  }
});
const indexList = ref([]);

const loadmore = () => {
  getMyOrderWorkTodo({}).then((res) => {
    const {records} = res;
    indexList.value = records;
  });
};

const handleWorkOrder = (item) => {
  navigateTo({
    url: "/pages/workbenchsub/workorder/detail",
    param: item
  })
};
onLoad(() => {
  loadmore();
});
onShow(() => {
  uni.$on('refreshData', (res) => {
    if (res.refresh) {
      loadmore();
    }
  })
});
watch(() => props.tag, () => {
  loadmore();
})
</script>

<script lang="ts">

export default {
  options: {
    styleIsolation: 'shared'
  }
}
</script>
<style scoped lang="scss">

.item-content {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;

  .item-dot {
    width: 50rpx;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 12rpx;

    .item-dot-bg {
      width: 20rpx;
      height: 20rpx;
      background-color: $uni-color-primary;
      border-radius: 30rpx;
    }
  }

  .item-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;

    > view {
      width: 100%;
    }

    .item-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .item-desc {
      color: #000000;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;

      .info-item {
        margin-top: 10rpx;
        color: #333333;
        font-size: 24rpx;
      }
    }
  }
}
</style>
