<template>
  <WorkbenchSkeleton v-if="data.is_show_skeleton"></WorkbenchSkeleton>
  <view class="ctr" v-else>
    <view class="fixed-top">
      <me-top title="工作台"></me-top>
      <view class="filter flex-sb line-after">
        <view v-for="(item, type) in filterType" :key="type" class="filter-item flex-c" @click="filter(type)">
          <view :class="['title', 'flex-c', data.type == type ? 'title-active' : '']">{{item.name}}({{ countOrderByType(type) }})</view>
          <view class="select-style" v-if="data.type == type"></view>
        </view>
      </view>
    </view>

    <me-empty-space :height="listMarginTop"></me-empty-space>

    <view class="list" v-if="data.list.length > 0">
      <view class="order-item" v-for="(item, index) in data.list" :key="index">
        <view class="top flex-sb" @click="toDetail(item.id)">
          <view class="type flex-l">{{item.order_info.item_title}}</view>
          <view class="price flex-r important-color" v-if="item.order_info.receive_type === 1">上门报价</view>
          <view class="price flex-r" v-else>平台已收款</view>
        </view>
        <view class="content flex-sb">
          <view class="left" @click="toDetail(item.id)">
            <view class="address-name flex-l">
              {{item.order_info.address}}
            </view>
            <view class="address">
              {{helpers.removeCommas(item.order_info.area.merge_name)}}
            </view>
            <view class="time-ctr flex-l" v-if="item.order_info.plan_time !== null">
              <me-icon type="icon-time" color="var(--themeColor)" size="40rpx"></me-icon>
              <text class="time">{{helpers.formatDate(item.order_info.plan_time)}}</text>
            </view>
          </view>
          <view class="right" @click="helpers.openLocation(item.order_info.lat, item.order_info.lng)">
            <view class="icon-ctr flex-c">
              <me-icon type="icon-navigation" color="var(--descriptionColor)" size="60rpx"></me-icon>
            </view>
            <view class="distance flex-c" v-if="item.order_info.lng == 0 || item.order_info.lat == 0">未知距离</view>
            <view class="distance flex-c" v-else>{{formatDistance(item.order_info.lat, item.order_info.lng)}}</view>
          </view>
        </view>
        <view class="user flex-sb">
          <view class="left" @click="toDetail(item.id)">
            <view class="user-name flex-l">
              <me-icon type="icon-user" color="var(--descriptionColor)" size="36rpx"></me-icon>
              <view class="name">{{ item.order_info.customer }}</view>
            </view>
            <view class="phone flex-l">{{ item.order_info.tel }}</view>
          </view>
          <view class="right flex-c">
            <view @click="helpers.makePhoneCall(item.order_info.tel)" class="icon-ctr flex-c" hover-class="auto-mask-layer-radius8" hover-stay-time="100">
              <me-icon type="icon-call" color="var(--themeColor)" size="80rpx"></me-icon>
            </view>
          </view>
        </view>
        <view class="operate-ctr flex-sb">
          <view class="status-ctr flex-l" @click="toDetail(item.id)">
            <me-icon type="icon-progress-2-line" color="#E18F00" size="40rpx"></me-icon>
            <text class="text">{{getOrderStatusText(item.status)}}</text>
          </view>
          <view class="operate flex-r">
            <view class="btn flex-c" @click="reportOrderException(item.order_info.id)" hover-class="auto-mask-layer-radius8" hover-start-time="0" hover-stay-time="50">
              <me-icon type="icon-arrow-up-line" color="#FFFFFF" size="40rpx"></me-icon>
              <text>上报异常</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <me-empty v-else text="暂无数据"></me-empty>

    <me-empty-space height="100"></me-empty-space>
  </view>
</template>

<script setup>
import {onShow, onReachBottom} from '@dcloudio/uni-app'
import {ref, reactive, computed, inject} from 'vue'
import MeIcon from "../../components/me-icon/me-icon";
import MeEmptySpace from "../../components/me-empty-space/me-empty-space";
import MeTop from "../../components/me-top/me-top.vue";
import api from "../../api/api";
import helpers from "../../utils/helpers";
import enums from "../../utils/enums";
import WorkbenchSkeleton from "./workbench-skeleton";

onReachBottom(() => {
  if (data.page < data.last_page) {
    data.page = data.page + 1
    getList()
  }
})

//订单详情
const toDetail = (id) => {
  helpers.jumpToPage('order-info', `id=${id}`)
}

//上报异常
const reportOrderException = (orderId) => {
  helpers.jumpToPage('report-order-exception', `order_id=${orderId}`)
}

//是否显示骨架屏
const isShowSkeleton = computed(() => {
  return data.list === null || countOrder === undefined
})

const getOrderStatusText = (status) => {
  return enums.WORKBENCH_STATUS_TEXT[status]
}

onShow(() => {
  init()
})

const userLocation = reactive({
  lng: null,
  lat: null,
})

const formatDistance = (lat, lng) => {
  const res = helpers.getDistances(userLocation.lat, userLocation.lng, lat, lng);
  return `${res.distance}${res.unit}`;
}

//初始化
const init = () => {
  //获取师傅当前位置
  uni.getLocation({
    type: 'gcj02',
    success(res) {
      userLocation.lng = res.longitude
      userLocation.lat = res.latitude
      data.page = 1
      getList()
      countWorkbenchOrder()
    },
    fail(err) {
      uni.showToast({
        title: '请授权位置权限',
        icon: "error"
      })
    }
  });
}

const countOrder = ref({})
const countWorkbenchOrder = () => {
  api.countWorkbenchOrder().then(res => {
    countOrder.value = res
  }).catch(() => {})
}

const countOrderByType = (type) => {
  let res = countOrder.value[type] > 99 ? '99+' : countOrder.value[type]
  if (type === 'all') {
    return countOrder.value[type] > 999 ? '999+' : countOrder.value[type]
  }

  return res
}

const data = reactive({
  type: 'ongoing',
  page: 1,
  page_size: 10,
  last_page: 0,
  is_show_skeleton: true,
  list: null
})
const getList = () => {
  if (data.page > 1) {
    uni.showLoading({
      title: '加载中'
    });
  }

  let params = {
    page: data.page,
    page_size: data.page_size,
    workbench_type: data.type,
  }
  api.workbenchOrderList(params).then(res => {
    data.last_page = res.last_page
    if (data.page === 1) {
      data.list = res.data;
    } else {
      data.list = data.list.concat(helpers.deepObj(res.data))
    }
    data.is_show_skeleton = false
    helpers.delayHideLoading()
  }).catch(() => {})
}

const listMarginTop = computed(() => {
  let globalData = inject('globalData')
  return (globalData.statusBarH + (globalData.customBarH - globalData.statusBarH) + 50) * 2
})

const filterType = reactive({
  'ongoing': {
    name: '进行中',
  },
  'today': {
    id: 2,
    name: '今日',
  },
  'tomorrow': {
    id: 3,
    name: '明日',
  },
  'all': {
    id: 4,
    name: '全部',
  },
})

const filter = (type) => {
  data.type = type
  data.page = 1
  uni.showLoading({
    title: '加载中'
  });
  getList()
}
</script>

<style lang="scss" scoped>
.ctr {
  padding: 0 32rpx;
  box-sizing: border-box;
  .fixed-top {
    position: fixed;
    top: 0;
    background-color: var(--pageBgColor);
    width: 686rpx;
    .filter {
      width: 686rpx;
      height: 100rpx;
      .filter-item {
        width: 170rpx;
        height: 100%;
        position: relative;
        .title {
          width: 100%;
          font-size: 28rpx;
          color: var(--summaryColor);
          line-height: 28rpx;
        }
        .title-active {
          color: var(--themeColor) !important;
        }
        .select-style {
          position: absolute;
          bottom: 0;
          width: 122rpx;
          height: 4rpx;
          background: var(--themeColor);
          border-radius: 2rpx;
        }
      }
    }
  }
}
</style>
