<template>
	<view class="ctr" v-if="data !== null">
    <view class="price-ctr">
      <view class="price flex-c" v-if="data.order_info.receive_type === 1">上门报价</view>
      <view class="price flex-c" v-else>平台已收款</view>
      <view class="desc flex-c">{{ getPriceDescText() }}</view>
    </view>
    <view class="info">
      <view class="item-row flex-sb line-after">
        <view class="title flex-l">当前状态</view>
        <view class="value flex-r order-status">
          <text>{{getOrderStatusText(data.status)}}</text>
        </view>
      </view>
      <view class="item-row flex-sb line-after">
        <view class="title flex-l">服务类型</view>
        <view class="value flex-r">
          <text>{{data.order_info.item_title}}</text>
        </view>
      </view>
      <template v-if="data.status !== enums.ORDER_DISPATCH_STATUS.STATUS_TOGET">
        <view class="item-row flex-sb line-after">
          <view class="title flex-l">客户姓名</view>
          <view class="value flex-r">
            <text>{{ data.order_info.customer }}</text>
          </view>
        </view>
        <view class="item-row flex-sb line-after">
          <view class="title flex-l">客户电话</view>
          <view class="value flex-r value-theme">
            <me-icon class="icon" type="icon-call" color="var(--themeColor)" size="40rpx"></me-icon>
            <text>{{ data.order_info.tel }}</text>
          </view>
        </view>
      </template>
      <view class="item-row flex-sb line-after">
        <view class="title flex-l">预约上门时间</view>
        <view class="value flex-r">
          <text>{{data.plan_time}}</text>
        </view>
      </view>
      <view class="item-multi-line line-after">
        <view class="title flex-l">客户地址</view>
        <view class="value flex-l">{{helpers.removeCommas(data.order_info.area.merge_name) + data.order_info.address}}</view>
      </view>
      <view class="item-multi-line">
        <view class="title flex-l">客户备注</view>
        <view class="value flex-l">{{data.remark ? data.remark : '无备注信息'}}</view>
      </view>
    </view>

    <!--    已拒接-->
    <view class="info" v-if="data.status === enums.ORDER_DISPATCH_STATUS.STATUS_REFUSED">
      <view class="item-multi-line">
        <view class="title flex-l">拒接原因</view>
        <view class="value flex-l">{{data.reject_reason ? data.reject_reason : '未填写原因'}}</view>
      </view>
    </view>

    <!--    已上门、已完成 显示上门时间-->
    <view class="info" v-if="[enums.ORDER_DISPATCH_STATUS.STATUS_CLOCK, enums.ORDER_DISPATCH_STATUS.STATUS_FINISH].includes(data.status)">
      <view class="item-row flex-sb line-after">
        <view class="title flex-l">上门时间</view>
        <view class="value flex-r">
          <text>{{data.arrive_time}}</text>
        </view>
      </view>
      <view class="images">
        <view class="title flex-l">上门图片</view>
        <view class="imgs-ctr">
          <view @click="previewImage(imgUrl)" v-for="(imgUrl, index) in data.arrive_images" :key="index" class="img-ctr" :style="{marginRight: (index+1) % 5 === 0 ? '0' : '36rpx'}">
            <image class="img" mode="aspectFill" :src="imgUrl"></image>
          </view>
        </view>
      </view>
    </view>

    <!--    已完成 -->
    <view class="info" v-if="data.status === enums.ORDER_DISPATCH_STATUS.STATUS_FINISH">
      <view class="images line-after">
        <view class="title flex-l">完成图片</view>
        <view class="imgs-ctr">
          <view @click="previewImage(imgUrl)" v-for="(imgUrl, index) in data.images" :key="index" class="img-ctr" :style="{marginRight: (index+1) % 5 === 0 ? '0' : '36rpx'}">
            <image class="img" mode="aspectFill" :src="imgUrl"></image>
          </view>
        </view>
      </view>
      <view class="item-row flex-sb line-after" v-if="data.order_info.receive_type === 1">
        <view class="title flex-l">优惠信息</view>
        <view class="value flex-r">
          <text>{{data.order_info.online_amount}}元抵扣{{data.order_info.discount_amount}}元</text>
        </view>
      </view>
      <view class="item-row flex-sb line-after">
        <view class="title flex-l">尾款收款方</view>
        <view class="value flex-r">
          <text>{{ data.offline_total_type === 1 ? '师傅收' : '公司收' }}</text>
        </view>
      </view>
      <view class="item-row flex-sb line-after">
        <view class="title flex-l">收款金额</view>
        <view class="value flex-r">
          <text>¥{{ data.total > 0 ? data.total : data.online_total }}</text>
        </view>
      </view>
      <view class="images">
        <view class="title flex-l">收款凭证</view>
        <view class="imgs-ctr">
          <view @click="previewImage(data.image)" :key="index" class="img-ctr">
            <image class="img" mode="aspectFill" :src="data.image"></image>
          </view>
        </view>
      </view>
    </view>

    <me-empty-space height="376"></me-empty-space>

    <!--    待接单-->
    <view class="bottom" v-if="data.status === enums.ORDER_DISPATCH_STATUS.STATUS_TOGET">
      <me-button @click="rejectOrder()" active-color="var(--contentBgColor)" text="拒 绝" width="686rpx" text-color="var(--titleColor)"></me-button>
      <me-button @click="acceptOrder()" text="确认接单" width="686rpx" icon-type="icon-flashlight" margin-top="32rpx"></me-button>
    </view>

    <!--    待和客户确认上门时间-->
    <view class="bottom" v-if="data.status === enums.ORDER_DISPATCH_STATUS.STATUS_GOTIT">
      <me-button @click="selectTime()" text="已和客户沟通" width="686rpx" icon-type="icon-arrow-right-circle" margin-top="32rpx"></me-button>
    </view>

    <!--    待上门-->
    <view class="bottom" v-if="data.status === enums.ORDER_DISPATCH_STATUS.STATUS_PLANIT">
      <me-button @click="openLocation()" active-color="var(--contentBgColor)" icon-type="icon-navigation" text="导航至客户地址" width="686rpx" text-color="var(--titleColor)" custom-icon-color="var(--titleColor)"></me-button>
      <me-button @click="arrivedOnSite()" text="完成上门" width="686rpx" icon-type="icon-arrow-right-circle" margin-top="32rpx"></me-button>
    </view>

    <!--    完成服务-->
    <view class="bottom" v-if="data.status === enums.ORDER_DISPATCH_STATUS.STATUS_CLOCK">
      <me-button @click="completeService()" text="完成服务" width="686rpx" icon-type="icon-arrow-right-circle" margin-top="32rpx"></me-button>
    </view>
	</view>
</template>

<script setup>

import MeIcon from "../../components/me-icon/me-icon.vue";
import MeEmptySpace from "../../components/me-empty-space/me-empty-space.vue";
import MeButton from "../../components/me-button/me-button.vue";
import helpers from "../../utils/helpers";
import {onLoad, onShow} from '@dcloudio/uni-app'
import {ref, reactive, computed, watch, inject} from 'vue'
import api from "../../api/api";
import enums from "../../utils/enums";

//打开客户位置
const openLocation = () => {
  uni.openLocation({
    latitude: Number(data.value.order_info.lat),
    longitude: Number(data.value.order_info.lng),
    success: function () {
      console.log('success');
    },
    fail: function () {
      helpers.showToast('客户经纬度不正确，请联系平台')
    }
  });
}

//完成上门
const arrivedOnSite = () => {
  helpers.jumpToPage('arrived-on-site', 'id=' + id.value)
}

//完成服务
const completeService = () => {
  helpers.jumpToPage('complete-service', 'id=' + id.value)
}

//选择上门时间
const selectTime = () => {
  helpers.jumpToPage('select-time', 'id=' + id.value)
}

const acceptOrder = () => {
  uni.showModal({
    title: '接单提示',
    confirmText: '确认',
    content: '接单后请及时和客户联系，确认接单？',
    success: function (res) {
      if (res.confirm) {
        api.orderConfirm({type: 'accept', order_dispatch_id: id.value}).then(() => {
          helpers.showToast('已接单')
          init()
        }).catch(() => {})
      }
    }
  });
}

const rejectOrder = () => {
  uni.showModal({
    title: '拒接提示',
    confirmText: '确认',
    editable: true,
    placeholderText: '请输入拒接原因',
    success: function (res) {
      if (res.confirm) {
        if (!res.content) {
          return helpers.showToast('请输入拒接原因')
        }

        api.orderConfirm({type: 'reject', order_dispatch_id: id.value, reject_reason: res.content}).then(() => {
          helpers.showToast('已拒接')
          init()
        }).catch(() => {})
      }
    }
  });
}

const id = ref(null)
onLoad((params) => {
  id.value = params.id
})

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

const data = ref(null)
const init = () => {
  uni.showLoading({
    title: '获取中'
  });
  api.orderInfo({order_dispatch_id: id.value}).then(res => {
    data.value = res
    uni.hideLoading();
  }).catch(() => {})
}

//获取价格描述文案
const getPriceDescText = () => {
  let orderInfo = data.value
  if (orderInfo.order_info.receive_type === 2) {
    return '服务价格'
  }

  if (orderInfo.status === 60) {
    let tailText = orderInfo.total > 0 ? '线下收款¥' + orderInfo.total : '线上收款¥' + orderInfo.online_total
    return `服务价格(订金¥${orderInfo.order_info.online_amount}+${tailText})`
  }

  return `服务价格(已收订金¥${orderInfo.order_info.online_amount})`
}

//获取订单状态文本
const getOrderStatusText = (status) => {
  return enums.WORKBENCH_STATUS_TEXT[status]
}

//预览图片
const previewImage = (url) => {
  uni.previewImage({
    urls: [url],
    longPressActions: {
      itemList: ['发送给朋友', '保存图片', '收藏'],
      success: function(data) {
      },
      fail: function(err) {
        console.log(err.errMsg);
      }
    }
  });
}
</script>

<style lang="scss" scoped>
.ctr {
  padding: 0 32rpx;
  box-sizing: border-box;
  height: 100vh;
  .price-ctr {
    min-height: 200rpx;
    width: 100%;
    padding: 32rpx 20rpx;
    box-sizing: border-box;
    .price {
      width: 100%;
      height: 80rpx;
      font-weight: 500;
      font-size: 36rpx;
      color: var(--titleColor);
    }
    .desc {
      width: 100%;
      min-height: 56rpx;
      font-size: 28rpx;
      color: var(--summaryColor);
    }
  }
  .info {
    width: 100%;
    background: var(--containerBgColor);
    border-radius: 16rpx;
    padding: 20rpx;
    box-sizing: border-box;
    margin-bottom: 32rpx;
    .item-row {
      width: 100%;
      height: 80rpx;
      position: relative;
      .title {
        width: 200rpx;
        height: 100%;
        font-size: 30rpx;
        color: var(--summaryColor);
      }
      .value {
        width: 446rpx;
        height: 100%;
        font-size: 30rpx;
        color: var(--titleColor);
        .icon {
          margin-right: 8rpx;
        }
      }
      .order-status {
        color: #E18F00 !important;
      }
      .value-theme {
        color: var(--themeColor) !important;
      }
    }
    .item-multi-line {
      width: 100%;
      position: relative;
      padding-bottom: 8rpx;
      box-sizing: border-box;
      .title {
        width: 100%;
        height: 80rpx;
        font-size: 30rpx;
        color: var(--summaryColor);
      }
      .value {
        width: 100%;
        font-size: 30rpx;
        color: var(--titleColor);
        line-height: 48rpx;
      }
    }
    .images {
      width: 100%;
      position: relative;
      .title {
        width: 100%;
        height: 80rpx;
        font-size: 30rpx;
        color: var(--summaryColor);
      }
      .imgs-ctr {
        width: 100%;
        min-height: 100rpx;
        display: flex;
        flex-wrap: wrap;
        .img-ctr {
          width: 100rpx;
          height: 100rpx;
          margin-right: 36rpx;
          margin-top: 16rpx;
          margin-bottom: 16rpx;
          .img {
            width: 100%;
            height: 100%;
            border-radius: 8rpx;
          }
        }
        .up-ctr {
          width: 100rpx;
          height: 100rpx;
          background: var(--contentBgColor);
          border-radius: 8rpx;
          margin-top: 16rpx;
          margin-bottom: 16rpx;
          .up {
            width: 100%;
            height: 36rpx;
            font-size: 20rpx;
            color: var(--summaryColor);
          }
        }
      }
    }
  }
  .bottom {
    width: 100%;
    padding-top: 20rpx;
    padding-bottom: 68rpx;
    background: var(--pageBgColor);
    box-sizing: border-box;
    position: fixed;
    bottom: 0;
  }
}
</style>
