<template>
<!--  <WorkbenchSkeleton v-if="data.is_show_skeleton"></WorkbenchSkeleton>-->
  <view class="ctr" v-if="data.list !== null">
    <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 class="date flex-l" v-if="data.type === 'need_visit'">
        <view @click="filterNeedVisit(type)" :class="['item', 'flex-c', data.need_visit_type === type ? 'item-selected' : '']" v-for="(item, type) in needVisitType" :key="type">{{item.name}}{{ countOrderByType(type) }}</view>
      </view>
    </view>

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

    <view class="list" :style="{ transform: data.type === 'need_visit' ? 'translateY(100rpx)' : 'translateY(0)' }" v-if="data.list.length > 0">
      <view class="item" v-for="(item, index) in data.list" :key="index" @click="toDetail(item.id)">
        <view class="top flex-sb">
          <view class="time flex-l">
            <me-icon type="icon-time" color="var(--themeColor)" size="44rpx"></me-icon>
            <text class="time-text" v-if="item.order_info.plan_time !== null">{{helpers.formatDate(item.plan_time)}}</text>
            <text class="time-text" v-else>未预约时间</text>
          </view>
          <view class="status flex-r">{{getOrderStatusText(item.status)}}</view>
        </view>
        <view class="title flex-l">{{item.order_info.item_title}}</view>
        <view class="address-ctr flex-sb">
          <view class="left">
            <view class="detail flex-l" v-if="item.order_info.address !== ''">{{item.order_info.address}}</view>
          </view>
          <view class="right" v-if="item.status !== enums.ORDER_DISPATCH_STATUS.STATUS_FINISH" @click.stop="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-ctr flex-sb">
          <view class="user-name flex-l">
            <me-icon type="icon-user" color="var(--descriptionColor)" size="36rpx"></me-icon>
            <view class="name flex-l">{{ item.order_info.customer }}</view>
          </view>
          <view class="phone flex-r">{{ item.order_info.tel }}</view>
        </view>
        <view class="operate-ctr flex-sb">
          <view class="left flex-l">
            <me-icon type="icon-money-cny-circle-line" color="var(--summaryColor)" size="44rpx"></me-icon>
            <view class="name flex-l" v-if="item.order_info.receive_type === 1">上门报价</view>
            <view class="name flex-l" v-else>平台已收款</view>
          </view>
          <view v-if="item.status !== enums.ORDER_DISPATCH_STATUS.STATUS_FINISH" class="right flex-r" @click.stop="helpers.makePhoneCall(item.order_info.tel)">
            <me-icon type="icon-call" color="var(--themeColor)" size="44rpx"></me-icon>
            <view class="name flex-l">联系客户</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) => {
  if (Object.keys(countOrder.value).length === 0 || countOrder.value[type] === 0) {
    return ''
  }

  return '(' + (countOrder.value[type] > 99 ? '99+' : countOrder.value[type]) + ')'
}

const data = reactive({
  type: 'pending',
  need_visit_type: 'today',
  page: 1,
  page_size: 10,
  last_page: 0,
  is_show_skeleton: false,//因页面改版，暂时关闭骨架屏
  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,
    need_visit_type: data.need_visit_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')
  let res = (globalData.statusBarH + (globalData.customBarH - globalData.statusBarH) + 50) * 2
  if (data.type !== 'need_visit') {
    res += 20
  }

  return res
})

const filterType = reactive({
  'pending': {
    name: '待沟通',
  },
  'need_visit': {
    name: '待上门',
  },
  'ongoing': {
    name: '服务中',
  },
  'finished': {
    name: '已完成',
  },
})

const needVisitType = reactive({
  'today': {
    name: '今日',
  },
  'tomorrow': {
    name: '明日',
  },
  'all': {
    name: '全部',
  }
})

const filter = (type) => {
  data.type = type

  if (type === 'need_visit') {
    data.need_visit_type = 'today'
  }

  data.page = 1
  uni.showLoading({
    title: '加载中'
  });
  getList()
}

const filterNeedVisit = (type) => {
  data.need_visit_type = type
  data.page = 1
  uni.showLoading({
    title: '加载中'
  });
  getList()
}

</script>

<style lang="scss" scoped>
.ctr {
  padding: 0 32rpx;
  box-sizing: border-box;
  .list {
    transition: transform 0.3s ease;
    .item:first-child {
      margin-top: 0!important;
    }
    .item {
      width: 686rpx;
      background: var(--containerBgColor);
      border-radius: 16rpx;
      padding: 20rpx;
      box-sizing: border-box;
      margin-top: 20rpx;
      .top {
        width: 100%;
        height: 80rpx;
        .time {
          width: 456rpx;
          height: 80rpx;
          .time-text {
            font-weight: 500;
            font-size: 34rpx;
            color: var(--themeColor);
            margin-left: 8rpx;
          }
        }
        .status {
          width: 190rpx;
          height: 80rpx;
          font-weight: 500;
          font-size: 34rpx;
          color: #E18F00;
        }
      }
      .title {
        width: 100%;
        min-height: 60rpx;
        line-height: 48rpx;
        font-weight: 500;
        font-size: 30rpx;
        color: var(--titleColor);
      }
      .address-ctr {
        width: 100%;
        .left {
          width: 466rpx;
          .detail, .area {
            width: 100%;
            min-height: 60rpx;
            line-height: 44rpx;
            font-size: 28rpx;
          }
          .detail {
            color: var(--titleColor);
          }
          .area {
            color: var(--summaryColor);
          }
        }
        .right {
          width: 180rpx;
          .icon-ctr {
            height: 60rpx;
            width: 100%
          }
          .distance {
            width: 100%;
            min-height: 44rpx;
            line-height: 44rpx;
            font-size: 28rpx;
            color: var(--titleColor);
            margin-top: 16rpx;
          }
        }
      }
      .user-ctr {
        width: 646rpx;
        height: 90rpx;
        background: var(--auxiliaryBgColor);
        border-radius: 16rpx;
        padding: 20rpx;
        box-sizing: border-box;
        margin-top: 10rpx;
        .user-name {
          width: 50%;
          .name, {
            font-size: 28rpx;
            color: var(--titleColor);
            margin-left: 8rpx;
          }
        }
        .phone {
          width: 50%;
          font-size: 28rpx;
          color: var(--titleColor);
        }
      }
      .operate-ctr {
        width: 100%;
        height: 80rpx;
        margin-top: 20rpx;
        .left, .right {
          width: 50%;
          font-weight: 500;
          font-size: 30rpx;
          .name {
            margin-left: 8rpx;
          }
        }
        .left {
          color: var(--summaryColor);
        }
        .right {
          color: var(--themeColor);
        }
      }
    }
  }
  .fixed-top {
    position: fixed;
    top: 0;
    background-color: var(--pageBgColor);
    width: 686rpx;
    z-index: 100;
    .filter {
      width: 686rpx;
      height: 100rpx;
      position: relative;
      .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;
        }
      }
    }
    .date {
      width: 686rpx;
      height: 100rpx;
      animation: animation-fade-out .3s ease-out 0s 1;
      .item {
        height: 60rpx;
        border-radius: 8rpx;
        background-color: var(--auxiliaryBgColor);
        color: var(--summaryColor);
        font-size: 28rpx;
        padding: 0 24rpx;
        margin-left: 20rpx;
      }
      .item-selected {
        background-color: var(--themeColor10);
        color: var(--themeColor);
      }
    }
  }
}
</style>
