<template>
  <view>
    <Loading :type="3" :loadStatus="loadStatus" />

    <zj-page-layout
      v-if="detail"
      :hasFooter="false"
      :isScroll="true"
      :refresherTriggered="refresherTriggered"
      @refresherrefresh="refresherrefresh"
    >
      <view class="detail-container">
        <view class="top-container">
          <view class="title">服务流程</view>
          <u-steps
            :current="detail.serviceFlag"
            activeColor="#3D8FFD"
            v-if="orderStatus_v(detail.orderStatus, detail) !== 'YQX'"
          >
            <u-steps-item title="提单"></u-steps-item>
            <u-steps-item title="派工"></u-steps-item>
            <u-steps-item title="服务"></u-steps-item>
            <u-steps-item title="完工"></u-steps-item>
            <u-steps-item title="评价"></u-steps-item>
          </u-steps>
          <u-steps :current="3" activeColor="#3D8FFD" v-else>
            <u-steps-item title="提单"></u-steps-item>
            <u-steps-item title="派工"></u-steps-item>
            <u-steps-item title="服务"></u-steps-item>
            <u-steps-item title="取消"></u-steps-item>
          </u-steps>
        </view>

        <view class="list-container">
          <logistics :logisticsData="logisticsData"></logistics>
        </view>

        <view class="main-container">
          <block v-if="orderDetail">
            <view class="title">订单信息</view>
            <view class="orderid mt20">
              <view class="row">
                <view class="ellipsis"
                  >订单号<text>{{ orderDetail.orderId }}</text></view
                >
                <view class="copy" @tap.stop="$copy(orderDetail.orderId)">复制</view>
              </view>
            </view>
            <view class="goods2">
              <view class="item" v-for="(item, index) in orderDetail.orderDetails" :key="index">
                <image :src="item.imgUrl" mode="aspectFill"></image>
                <view class="main">
                  <view class="name">{{ item.goodsName }}</view>
                  <view class="text">{{ item.goodsSpecValue }}</view>
                  <view class="bottom">
                    <view class="price">¥{{ item.price | priceFilter }}</view>
                    <view class="num">x{{ item.num }}</view>
                  </view>
                </view>
              </view>
            </view>

            <u-divider></u-divider>
          </block>

          <view class="title">服务信息</view>
          <view class="orderid mt20">
            <view class="row">
              <view class="ellipsis"
                >工单号<text>{{ detail.id }}</text></view
              >
              <view class="copy" @tap.stop="$copy(detail.id)">复制</view>
            </view>
          </view>
          <view class="goods" :class="'goods' + idx" v-for="(it, idx) in detail.pgOrderProducts" :key="idx">
            <image :src="it.imgUrl" mode="aspectFill"></image>
            <view class="main">
              <view class="name ellipsis-2">{{ it.smallName }}</view>
              <view class="tags">
                <view class="tag1">{{ it.brandName }}</view>
                <view class="tag2">{{ it.mainName }}</view>
              </view>
            </view>
          </view>
          <view class="info">
            <view class="row" v-if="detail.appointmentTime">
              <view class="label">预约时间</view>
              <view class="value">{{ detail.appointmentTime.slice(0, 10) }}</view>
            </view>
            <view class="row" v-if="detail.workerName">
              <view class="label">工&nbsp;程&nbsp;师</view>
              <view class="value">{{ detail.workerName }}</view>
              <text class="iconfont icon-call" @tap="$callPhone(detail.workerMobile)"></text
              ><text class="call" @tap="$callPhone(detail.workerMobile)">联系Ta</text>
              <block v-if="locationData">
                <text class="iconfont icon-dingwei1" @tap="toLocation"></text
                ><text class="call" @tap="toLocation">查看位置</text>
              </block>
            </view>
            <view class="row">
              <view class="label">服务地址</view>
              <view class="value"
                >{{ detail.province }}{{ detail.city }}{{ detail.area }}{{ detail.street }}{{ detail.address }}</view
              >
            </view>
            <view class="row">
              <view class="label">备&emsp;&emsp;注</view>
              <view class="value">{{ detail.remark }}</view>
            </view>
          </view>

          <block v-if="payList.length > 0">
            <u-divider></u-divider>

            <view class="title">电子支付信息</view>
            <block v-for="(item, index) in payList" :key="index">
              <view class="orderid mt20">
                <view class="row">
                  <view class="ellipsis"
                    >支付单号<text>{{ item.orderId }}</text></view
                  >
                  <view class="copy" @tap.stop="$copy(item.orderId)">复制</view>
                </view>
              </view>
              <view class="product">
                <view class="it" v-for="(it, idx) in item.workerOrderItems" :key="idx">
                  <view class="name" v-if="it.chargeType == 'ACC'"
                    >{{ it.goodsName }}<text>×{{ it.num }}</text></view
                  >
                  <view class="name" v-else>服务费</view>
                  <view class="price">¥{{ it.totalAmount | priceFilter }}</view>
                </view>
                <view class="total">
                  <view class="text">合计：</view>
                  <view class="price"
                    >¥{{
                      item.workerOrderItems.map(it => it.totalAmount || 0).reduce((a, b) => a + b, 0) | priceFilter
                    }}</view
                  >
                </view>
              </view>
            </block>
          </block>
        </view>
      </view>
    </zj-page-layout>
  </view>
</template>

<script>
import Logistics from '@/components/logistics2/common-logistics.vue'
import orderStatus_v from './mixins/orderStatus_fh.js'
export default {
  components: {
    Logistics
  },

  data() {
    return {
      imageUrl: this.$imageUrl,
      id: null, // 工单号
      detail: null, // 详情数据
      orderDetail: null, // 订单详情
      payList: [],
      loadStatus: 1,
      refresherTriggered: false,
      orderState: 0,
      logisticsData: [],
      locationData: null
    }
  },

  onLoad({ id }) {
    this.id = id
    this.refreshData()

    this.crossPage.$on('refreshUserWorkorderDetail', data => {
      this.refreshData()
    })
  },

  onUnload() {
    this.crossPage.$off('refreshUserWorkorderDetail')
  },

  methods: {
    orderStatus_v,
    // 获取详情
    async getDetail() {
      return new Promise((resolve, reject) => {
        this.$api
          .post('/pg/order/base/detail', {
            orderBaseId: this.id
          })
          .then(res => {
            const data = res.data
            this.detail = data

            let list = [
              {
                title: '已下单',
                time: data.createTime,
                content: '您的服务订单已提交成功'
              }
            ]
            if (data.workerId) {
              list.unshift({
                title: '已接单',
                time: data.workerReceTime,
                content: `您的服务订单已成功接收，由【${data.websitName}】的工程师为您服务`
              })
              list.unshift({
                title: '已派单',
                time: data.dispatchTime,
                content: `您的服务工程师为【${data.workerName}】员工号：${data.workerId}，联系电话：${data.workerMobile}`
              })
            }
            if (data.appointmentTime) {
              list.unshift({
                title: '已预约',
                time: data.lastOperatorAppointmentTime,
                content: `预约时间：${data.appointmentTime.slice(0, 10)}`
              })
            }
            if (
              this.orderStatus_v(data.orderStatus, data) == 'YWG' ||
              this.orderStatus_v(data.orderStatus, data) == 'YJS'
            ) {
              list.unshift({
                title: '服务完成',
                time: data.overTime,
                content: '您本次服务已完成，感谢您的信任和监督'
              })
            }
            if (data.appraiseStatus != 'N') {
              const MAP = {
                A: '好评',
                B: '中评',
                C: '差评'
              }
              list.unshift({
                title: '已评价',
                time: data.appraiseTime,
                content: `评价结果：${MAP[data.appraiseStatus]}`
              })
            }
            if (this.orderStatus_v(data.orderStatus, data) == 'YQX') {
              list.unshift({
                title: '取消工单',
                time: data.lastOperatorTime,
                content: '您本次服务已取消'
              })
            }
            this.logisticsData = list

            resolve(1)
          })
          .catch(res => {
            reject(0)
          })
      })
    },

    async getOrderDetail() {
      return new Promise((resolve, reject) => {
        this.$api
          .get('/order/detail', {
            orderId: this.detail.saleOrderId
          })
          .then(res => {
            this.orderDetail = res.data
          })
          .finally(res => {
            resolve(1)
          })
      })
    },

    // 获取支付信息
    async getPayList() {
      return new Promise((resolve, reject) => {
        this.$api
          .post('/changeOrder/getOrderList', {
            workerOrderId: this.id
          })
          .then(async res => {
            this.payList = res.data
            resolve(1)
          })
          .catch(res => {
            reject(0)
          })
      })
    },

    async refreshData() {
      try {
        await this.getDetail()
        await this.getPayList()
        if (this.detail.saleOrderId) {
          await this.getOrderDetail()
        }
        this.refresherTriggered = false
        this.loadStatus = 0
      } catch (e) {
        this.loadStatus = 2
      }
    },

    // 触发下拉刷新
    async refresherrefresh(e) {
      this.refresherTriggered = true
      await this.refreshData()
    },

    toLocation() {
      this.$navToPage({
        url: `/pages/mine/workOrder/map?location=${JSON.stringify(this.locationData)}`
      })
    },

    // 预览图片
    prevImg(urls, current) {
      uni.previewImage({
        current,
        urls
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.detail-container {
  padding: 20rpx;
}
.top-container {
  @include zj-card;
  margin-bottom: 20rpx;
  padding: 30rpx 20rpx 20rpx;
  .title {
    font-size: 32rpx;
    color: #333333;
    line-height: 32rpx;
    padding-bottom: 20rpx;
    font-weight: 600;
  }
  ::v-deep .u-steps {
    .u-steps-item__content {
      margin-left: 0 !important;
    }
  }
}

.list-container {
  @include zj-card;
  margin-top: 30rpx;
  padding: 30rpx;
}

.main-container {
  @include zj-card;
  margin-top: 30rpx;
  padding: 30rpx;
  .title {
    font-weight: 600;
  }
  .orderid {
    .row {
      display: flex;
      align-items: center;
      view {
        font-size: 28rpx;
        color: $sec-font;
        text {
          margin-left: 20rpx;
          color: $main-font;
          font-weight: 500;
        }
      }
      .copy {
        flex-shrink: 0;
        margin-left: 10rpx;
        font-size: 28rpx;
        color: $theme-color;
      }
    }
  }
  .goods {
    display: flex;
    justify-content: space-between;
    margin-top: 20rpx;
    image {
      width: 140rpx;
      height: 140rpx;
      display: block;
      flex-shrink: 0;
      margin-right: 20rpx;
    }
    .main {
      flex: 1;
      display: flex;
      flex-direction: column;
      .name {
        font-size: 28rpx;
        color: #333333;
        line-height: 36rpx;
      }
      .des {
        font-size: 28rpx;
        color: #999999;
        margin-top: 16rpx;
      }
      .tags {
        margin-top: 16rpx;
        display: flex;
        .tag1 {
          font-size: 24rpx;
          height: 42rpx;
          line-height: 42rpx;
          padding: 0 16rpx;
          margin-right: 10rpx;
          border: 1px solid $theme-color;
          color: $theme-color;
          box-sizing: border-box;
          display: flex;
          align-items: center;
          flex-direction: row;
          border-radius: 10rpx;
        }
        .tag2 {
          height: 42rpx;
          padding: 0 16rpx;
          line-height: 42rpx;
          border-radius: 10rpx;
          background: #e8e8e8;
          font-size: 24rpx;
          color: #666666;
        }
      }
    }
  }

  .goods2 {
    margin-top: 20rpx;
    .item {
      display: flex;
      image {
        width: 140rpx;
        height: 140rpx;
        display: block;
        flex-shrink: 0;
        margin-right: 20rpx;
      }
      .main {
        flex: 1;
        .name {
          font-size: 28rpx;
          line-height: 36rpx;
          font-weight: 500;
        }
        .text {
          font-size: 28rpx;
          color: $sec-font;
          margin-top: 16rpx;
        }
        .bottom {
          margin-top: 16rpx;
          display: flex;
          .price {
            font-size: 28rpx;
            font-weight: 500;
            margin-right: 20rpx;
          }
          .num {
            font-size: 28rpx;
            color: $sec-font;
          }
        }
      }
    }
  }

  .product {
    margin-top: 20rpx;
    background: #f5f5f5;
    border-radius: 12rpx;
    padding: 20rpx;
    .it {
      display: flex;
      align-items: flex-end;
      margin-bottom: 20rpx;
      .name {
        flex: 1;
        font-size: 28rpx;
        font-weight: 500;
        text {
          color: $sec-font;
          margin-left: 12rpx;
          font-weight: normal;
        }
      }
      .price {
        margin-left: 30rpx;
        font-size: 28rpx;
        font-weight: 500;
      }
    }
    .total {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      margin-top: 30rpx;
      .text {
        font-size: 28rpx;
        color: $sec-font;
      }
      .price {
        font-size: 28rpx;
        color: $minor-color;
        font-weight: 500;
      }
    }
  }

  .info {
    margin-top: 20rpx;
    .row {
      font-size: 28rpx;
      color: #666666;
      margin-bottom: 20rpx;
      display: flex;
      .label {
        color: $sec-font;
        flex-shrink: 0;
        width: 128rpx;
      }
      .value {
      }
      .iconfont {
        margin-left: 16rpx;
      }
      text {
        color: $theme-color;
      }
    }
    .images {
      margin-top: 20rpx;
      display: flex;
      flex-wrap: wrap;
      .img {
        margin-right: 20rpx;
        margin-bottom: 20rpx;
        image {
          width: 140rpx;
          height: 140rpx;
        }
      }
    }
  }
  .ctrl {
    display: flex;
    align-items: center;
    justify-content: center;
    color: $sec-font;
    margin-top: 30rpx;
    .iconfont {
      margin-right: 10rpx;
      transform: rotate(90deg);
      &.open {
        transform: rotate(270deg);
      }
    }
  }
}
</style>
