<template>
  <view class="container">
<!--    <cu-custom bgColor="bg-white" :isBack="false">-->
<!--      <block slot="content">-->
<!--        订单详情-->
<!--      </block>-->
<!--    </cu-custom>-->

    <view class="cu-bar fixed padding flex align-center" :style="[{height:CustomBar + 'rpx'}]" style="background-color: #EDEDED ;">
      <view class="action" @tap="backPage" >
        <text class="cuIcon-close" style="color: #666666;"></text>
      </view>
      <view class="content" style="font-weight: bold;">
        订单详情
      </view>
      <view  class="cuIcon-more" style="font-size: 40rpx;">
      </view>
    </view>
    <view style="overflow: hidden">
      <view  style="height: 50px;">

      </view>
      <view style="padding: 15px;margin-bottom: 50px;">
        <view @click="show = true">
          <text style="font-size: 14px;color:#999999;padding-right: 10px;">
            订单状态
          </text>
          <text v-if="orderInfo.orderState == '001'" style="font-size: 18px;font-weight:bold;padding-left: 5px;">
            待上门
          </text>
          <text v-if="orderInfo.orderState == '002'" style="font-size: 18px;font-weight:bold;padding-left: 5px;">
            服务中
          </text>
          <text v-if="orderInfo.orderState == '003' || orderInfo.orderState == '004' || orderInfo.orderState == '007'" style="font-size: 18px;font-weight:bold;padding-left: 5px;">
            已完成
          </text>
          <text v-if="orderInfo.orderState == '005' || orderInfo.orderState == '006' " style="font-size: 18px;font-weight:bold;padding-left: 5px;">
            退款
          </text>
          <text style="font-size: 14px;padding-left: 10px;">
            <img style="width: 11px;" src="../../static/common/jiantou.png"/>
          </text>
        </view>
        <text  @click="changeOrderStateCheck('002',orderInfo)" v-if="orderInfo.orderState == '001'" style="color: #FFFFFF; padding: 7px 20px;border-radius: 4px;font-size: 5px;vertical-align: middle;background: #3B94E7;margin-top: -25px;float: right;">
          开始服务
        </text>
        <text  @click="changeOrderStateCheck('003',orderInfo)" v-if="orderInfo.orderState == '002'" style="color: #f8f8f8; padding: 7px 20px;border-radius: 4px;font-size: 5px;vertical-align: middle;background: rgb(252, 96, 53);margin-top: -25px;float: right;">
          服务完成
        </text>
        <view v-if="orderInfo.orderState == '005' || orderInfo.orderState == '006'"  style="overflow: hidden;background: #FFFFFF;margin-top:10px;padding:10px;line-height: 25px;">
          <text v-if="orderInfo.orderState == '005'" style="font-size: 15px;color:#111111;padding-right: 15px;font-weight:bold;">
            已申请平台介入退款，等待处理！<br/>
          </text>
          <text  v-if="orderInfo.orderState == '006'" style="font-size: 14px;color:#111111;padding-right: 15px;font-weight:bold;">
            退款金额 &nbsp; &nbsp;{{orderInfo.refundMoney}} 元<br/>
          </text>
          <text style="font-size: 14px;color:#999999;padding-right: 15px;">
            退款原因 &nbsp; &nbsp;{{orderInfo.refundReason}}
          </text>
        </view>
        <view style="height: 40px;margin-top:15px;background: #FDF6E3;padding:10px;">
          <text style="font-size: 14px;color:#666666;padding-right: 15px;">
            上门时间
          </text>
          <text style="font-size: 14px;float:right;">
            {{ orderInfo.appointmentStartTime | dataFormat }}
            <text style="color:#3B94E7;margin-left: 10px;font-weight:bold;">{{ orderInfo.appointmentStartTime | timeFormat }}</text>
          </text>
        </view>
        <view style="height: 90px;background: #FFFFFF;padding:10px;">
          <view style="float: left;margin: 12px 5px 0px 3px;">
            <img style="width: 40px;" src="../../static/common/dingwei.png"/>
          </view>
          <view style="float: left;margin: 10px 0px 0px 5px;width: 75%;">
            <text style="font-weight:bold;font-size:15px;line-height:25px;" @click="contact(orderInfo.phone)">{{ orderInfo.custName | nameFormat}} {{ orderInfo.phone | phoneFormat }}</text>
            <br/>
            <text style="font-size:14px;color:#666666;">{{ orderInfo.address }}{{ orderInfo.detailed }}</text>
          </view>
        </view>

        <view style="overflow: hidden;background: #FFFFFF;margin-top:10px;padding:10px;">
          <text style="font-size: 14px;color:#666666;padding-right: 15px;">
            订单编号
          </text>
          <text style="font-size: 14px;float:right;">
            {{orderInfo.orderIndex}}
            <text @tap="copy(orderInfo.orderIndex)"
                style="padding: 3px 8px;color: rgb(102, 102, 102); margin-left: 10px;border: 1px solid rgb(204, 204, 204);border-radius: 4px;">
              复制
            </text>
          </text>
          <hr style="width:0.5px;width: 90%;margin: 10px auto;border-color:#eeeeee30;"/>
          <text style="font-size: 14px;color:#666666;padding:0 0 10px 0;">
            {{ orderInfo.name }}
          </text>
          <hr style="width:0.5px;width: 90%;margin: 10px auto;border-color:#eeeeee30;"/>
          <text style="font-size: 14px;color:#666666;padding-right: 15px;line-height: 25px;">
            服务类别
          </text>
          <text style="font-size: 14px;float:right;font-weight:bold;line-height: 25px;">
            {{ orderInfo.categoryName }}
          </text>

          <hr style="width:0.5px;width: 90%;margin: 10px auto;border-color:#eeeeee30;"/>
          <text style="font-size: 14px;color:#666666;padding-right: 15px;line-height: 25px;">
            数量
          </text>
          <text style="font-size: 14px;float:right;font-weight:bold;line-height: 25px;">
            {{ orderInfo.goodsCounts }}{{ orderInfo.unit }}
          </text>

          <hr style="width:0.5px;width: 90%;margin: 10px auto;border-color:#eeeeee30;"/>
          <text style="font-size: 14px;color:#666666;padding-right: 15px;line-height: 25px;">
            单价
          </text>
          <text style="font-size: 14px;float:right;font-weight:bold;line-height: 25px;">
            {{ orderInfo.price }}元/{{ orderInfo.unit }}
          </text>

          <hr style="width:0.5px;width: 90%;margin: 10px auto;border-color:#eeeeee30;"/>
          <text style="font-size: 14px;color:#666666;padding-right: 15px;line-height: 25px;">
            订单金额
          </text>
          <text style="font-size: 14px;float:right;color:#FF1414;font-weight:bold; line-height: 25px;">
            ¥ {{ orderInfo.totalAmount }}
          </text>
        </view>

        <view style="overflow: hidden;background: #FFFFFF;margin-top:10px;padding:10px;">
          <text style="font-size: 14px;color:#666666;padding-right: 15px;line-height: 25px;">
            优惠券
          </text>
          <text style="font-size: 14px;float:right;color:#FF1414;font-weight:bold; line-height: 25px;">
            - ¥{{ orderInfo.couponAmount }}
          </text>
          <hr style="width:0.5px;width: 90%;margin: 10px auto;border-color:#eeeeee30;"/>
          <text style="font-size: 14px;color:#666666;padding-right: 15px;line-height: 25px;">
            优金豆
          </text>
          <text style="font-size: 14px;float:right;color:#FF1414;font-weight:bold; line-height: 25px;">
            - ¥{{ orderInfo.beanAmount }}
          </text>
        </view>
        <view style="padding: 10px;"  v-if="(orderInfo.orderState == '003' || orderInfo.orderState == '004' || orderInfo.orderState == '007')">
          <text style="font-size: 14px;color:#666666;padding-right: 15px;line-height: 25px;">
            追加服务
          </text>
        </view>
        <view style="overflow: hidden;background: #FFFFFF;padding:10px;" v-if="(orderInfo.orderState == '003' || orderInfo.orderState == '004' || orderInfo.orderState == '007')">
          <text style="font-size: 14px;color:#666666;padding-right: 15px;line-height: 25px;">
            追加数量
          </text>
          <text style="font-size: 14px;float:right;font-weight:bold; line-height: 25px;">
            {{ orderInfo.addCounts }}{{ orderInfo.unit }}
          </text>
          <hr style="width:0.5px;width: 90%;margin: 10px auto;border-color:#eeeeee30;"/>
          <text style="font-size: 14px;color:#666666;padding-right: 15px;line-height: 25px;">
            金额
          </text>
          <text style="font-size: 14px;float:right;color:#FF1414;font-weight:bold; line-height: 25px;">
            ¥ {{ orderInfo.addAmount }}
          </text>
        </view>
      </view>
    </view>

    <view style="overflow: hidden;text-align: center; vertical-align: middle;line-height: 50px;    bottom: 0px;
    width: 100%;position: fixed">
      <view  style="width: 50%;float:left;font-size: 14px;background: white;height: 55px;">订单实付 <text style="font-size: 14px;padding-left:15px;color:#FF1414;font-weight:bold; line-height: 17px;"> ¥ {{ orderInfo.totalAmount }}</text></view>
      <view class="rightHr"></view>
      <view style="width: 50%;float:left;background: white;height: 55px;">服务数量 <text style="font-size: 14px;padding-left:15px;font-weight:bold; line-height: 17px;">{{ orderInfo.addCounts + orderInfo.goodsCounts }}小时</text></view>
    </view>

    <view>
      <u-popup v-model="show" mode="bottom">
        <view style="padding:15px;">
          <text style="font-size: 17px;font-weight:bold;padding-left: 5px;">
            订单跟踪
          </text>
          <hr style="width:0.5px;width: 100%;margin: 10px auto;border-color:#eeeeee30;"/>
          <view  style="overflow: hidden;background: #FFFFFF;margin-top:10px;padding:10px;">
            <text style="font-size: 15px;color:#666666;padding-right: 15px;">
              提交订单
            </text>
            <text style="font-size: 14px;margin-right:10px;float:right;">
              {{ orderInfo.createTime }}
            </text>
          </view>
          <view v-for="item in orderInfo.orderRecordList" style="overflow: hidden;background: #FFFFFF;margin-top:10px;padding:10px;">
            <text style="font-size: 15px;color:#666666;padding-right: 15px;">
              {{ item.operateInfo }}
            </text>
            <text style="font-size: 14px;margin-right:10px;float:right;">
              {{ item.createTime }}
            </text>
          </view>
        </view>
      </u-popup>
    </view>
  </view>
</template>

<script>
export default {
  filters: {
    nameFormat(item) {
      console.log(item)
      if (item == null || item == undefined || item == '') {
        return '';
      }
      let str = item;
      if (str.length == 2) {
        str = str.toString().replace(/^([^\x00-\xff])([^\x00-\xff]{0,})([^\x00-\xff])/g, '$1*')
      } else if (str.length == 3) {
        str = str.toString().replace(/^([^\x00-\xff])([^\x00-\xff]{0,})([^\x00-\xff])/g, '$1*$3')
      } else if (str.length == 4) {
        str = str.toString().replace(/^([^\x00-\xff])([^\x00-\xff]{0,2})([^\x00-\xff])/g, '$1**$3')
      } else if (str.length > 4) {
        str = str.toString().replace(/^([^\x00-\xff])([^\x00-\xff]{0,3})([^\x00-\xff])/g, '$1***$3')
      } else {
      }
      // str = str.toString().replace(/^([^\x00-\xff])([^\x00-\xff]{1,3})([^\x00-\xff])/g , '$1**$3')
      return str;
    },
    numFilter(value) {
      let realVal = Number(value).toFixed(1)
      return realVal
    },
    phoneFormat(value) {
      if (value == null || value == undefined || value == '') {
        return '';
      }
      return value.substr(0, 3) + '****' + value.substr(7)
    },
    dataFormat(time) {
      if (time == null || time == undefined || time == '') {
        return '';
      }
      return time.substring(0, 10).replaceAll('-', '月').replace('月', '年') + '日';
    },
    timeFormat(time) {
      if (time == null || time == undefined || time == '') {
        return '';
      }
      return time.substring(time.length, time.length - 5);
    },
  },
  data() {
    return {
      active:1,
      show:false,
      orderId:'',
      orderInfo:{},
    };
  },
  onLoad(option) {
    this.orderId = option.id;
  },
  created() {
    this.getDetail();
  },
  methods: {
    backPage(){
      uni.redirectTo({
        url: '../index/index'
      });
    },
    changeOrderState(value, item,location) {
      var that = this;
      let params = {
        orderState: value,
        orderId: item.orderId,
      };
      if(value == '002'){
        params.serviceLongitude=location.longitude;
        params.serviceLatitude=location.latitude;
      }
      this.$u.api.changeOrderState(params).then(res => {
        if (res.code === 200) {
          that.$u.toast("操作成功");
          that.getDetail();
        }else {
          that.$u.toast(res.msg);
        }
      });
    },
    changeOrderStateCheck(value, item) {
      var that = this;
      uni.showModal({
        title: value=='002'?'开始服务':'服务完成',
        content: value=='002'?'是否确认开始服务':'是否确认服务完成',
        confirmText: '确认',
        success: function(res) {
          if (res.confirm) {
            if(value == '002') {
              uni.getLocation({
                type: 'wgs84',
                geocode: true,//设置该参数为true可直接获取经纬度及城市信息
                success: function (res) {
                  console.log('当前位置的经度：' + res.longitude);
                  console.log('当前位置的纬度：' + res.latitude);
                  that.changeOrderState(value, item,res)
                },
                fail: function () {
                  uni.showToast({
                    title: '获取地址失败，将导致部分功能不可用',
                    icon: 'none'
                  });
                }
              });
            }else if(value == '003'){
              that.changeOrderState(value, item);
            }
          } else if (res.cancel) {

          }
        }
      });
    },
    contact(value){
      uni.makePhoneCall({
        // 手机号
        phoneNumber: value,
        // 成功回调
        success: (res) => {
          console.log('调用成功!')
        },
        // 失败回调
        fail: (res) => {
          console.log('调用失败!')
        }
      });
    },
    copy(value){
      uni.setClipboardData({
        data: value,
        success: () => { //复制成功的回调函数
          uni.showToast({ //提示
            title: '复制成功'
          })
        }
      });
      // uni.showModal({
      //   title: '复制链接',
      //   content: value,
      //   confirmText: '复制',
      //   success: function(res) {
      //     if (res.confirm) {
      //       uni.setClipboardData({
      //         data: value,
      //         success: () => { //复制成功的回调函数
      //           uni.showToast({ //提示
      //             title: '复制成功'
      //           })
      //         }
      //       });
      //       console.log('用户点击确定');
      //     } else if (res.cancel) {
      //       console.log('用户点击取消');
      //     }
      //   }
      // });
    },
    //详情
    getDetail() {
      uni.showLoading({
        title: '加载中...'
      });
      this.$u.api.getOrderInfo({orderId: this.orderId})
          .then(res => {
            if(res.code === 200) {
              this.orderInfo = res.data;
            }
            uni.hideLoading();
          });
    },
  },
};
</script>

<style lang="scss" scoped>
.type-list-item{
  font-size:26px;
  font-weight:400;
  width:100px;
  height:23px;
  color:rgba(0,0,0,1);
  text-align: center;
  position: relative;
}
.rightHr{
  height: 20px;
  content: '';
  position: absolute;
  right: 51%;
  width: 1px;
  background-color: #CCCCCC;
  bottom: 18px;
}
</style>
