<template>
  <view class="content">
    <!--    <z-paging ref="paging" v-model="dataList" @query="queryList">-->
    <!--    <z-paging ref="paging" v-model="orderInfoArr" @query="queryList" :default-page-size="1" show-refresher-when-reload refresher-background="#f3f3f3">-->
    <view class="cu-bar fixed padding flex align-center" :style="[{height:CustomBar + 'rpx'}]" style="background-color: #EDEDED ;">
      <view class="action" >
        <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>
    <z-paging ref="paging" v-model="orderInfoArr" @query="queryList" :default-page-size="pageSize"
              show-refresher-when-reload :hide-empty-view="true" :completeByKey="currentTab">


<!--      <cu-custom bgColor="bg-white" :isBack="false">-->
<!--        <block slot="content">-->
<!--&lt;!&ndash;          家政服务&ndash;&gt;-->
<!--        </block>-->
<!--      </cu-custom>-->

      <view style="width:100%;height:200px;background:#FC6035;margin-top: 50px;">
        <view>
          <view style="width: 20%;float: left;margin: 41px 0px 0px 23px;" @tap="toMain()">
            <img style="width: 60px;border-radius: 30px;"
                 :src="(userInfo.avatar == null || userInfo.avatar == undefined || userInfo.avatar == '')?'../../static/main/touxiang.png':userInfo.avatar"/>
          </view>
          <view style="width: 50%;float: left;margin: 30px 0px 0px 5px;">
            <text style="float:left;padding-right: 5px;font-size:17px;color:#FFFFFF;" @tap="toMain()">
              {{ userInfo.nikeName != null ? userInfo.nikeName : userInfo.realName }}
            </text>
            <view style="margin-top: 3px;">
              <text
                  style="color:#E04419;background: linear-gradient(to left, #f9e5b3 ,#F9E5B3,#EDC474, #EDC474);padding: 3px 7px;border-radius: 4px;">
                {{ userInfo.serverLevelName }}
              </text>
            </view>
            <view style="margin-top: 10px;">
              <text style="color:#FFFFFF;background: #FF7751;padding: 3px 10px;border-radius: 10px;">
                {{ userInfo.serverAge }}年工龄
              </text>
            </view>
            <view style="margin-top: 10px; word-break:keep-all;white-space:nowrap;  ">
              <text style="color:#FCE3D9;padding-right: 5px;">综合评分 {{ userInfo.score  | numFilter }}
              </text>
              <text style="color:#FCE3D9;padding-right: 15px;">
                <img v-for="item in starNum " style="width: 10px;" src="../../static/main/pingfen.png"/>
                <img v-show="userInfo.score%0.5!=0" style="width: 10px;" src="../../static/main/banxing.png"/>
              </text>
              <text style="color:#F8E4B2;">好评率 {{ userInfo.rate }}%</text>
            </view>
          </view>
          <view style="top: 78px;position: absolute;right:20px;">
            <text style="padding-right: 5px;font-size:14px;color:#FFFFFF;">{{
                userInfo.stopOrder == 1 ? '休息中' : '服务中'
              }}
            </text>
          </view>
        </view>
      </view>
      <view style="width:90%;margin:auto;margin-top:-65px;height:115px;background:#FFFFFF;border-radius:10px;">
        <view style="overflow: hidden;">
          <view style="float: left;margin: 5px 0px 0px 10px;">
            <img style="margin-top:5px;width: 20px;padding-right: 10px;" src="../../static/main/benzhou.png"/>
          </view>
          <view style="float: left;margin: 10px 0px 0px 0px;color:#111111;font-weight:bold;">
            <text>本周</text>
          </view>
        </view>
        <view style="margin-bottom: 10px;">
          <hr style="width:0.5px;width: 85%;margin: auto;margin-top: 10px;border-color:#eeeeee30;"/>
        </view>
        <view style="width: 100%;overflow: hidden;">
          <view style="width: 33%;text-align: center;float:left">
            <view style="margin-bottom: 7px;">
              <text style="color:#111111;font-weight:bold;font-size: 16px">{{ nowWeekDate.orderNum }}</text>
            </view>
            <view>
              <text style="color:#999999;font-size: 13px">订单数</text>
            </view>
          </view>
          <view style="width: 33%;text-align: center;float: left;">
            <view style="margin-bottom: 7px;">
              <text style="color:#111111;font-weight:bold;font-size: 16px">{{ nowWeekDate.totalAmount }}</text>
            </view>
            <view>
              <text style="color:#999999;font-size: 13px">订单金额</text>
            </view>
          </view>
          <view style="width: 33%;text-align: center;float: left;">
            <view style="margin-bottom: 7px;">
              <text style="color:#111111;font-weight:bold;font-size: 16px">{{ nowWeekDate.orderTimeSum }}</text>
            </view>
            <view>
              <text style="color:#999999;font-size: 13px">服务工时</text>
            </view>
          </view>

        </view>
      </view>

      <view style="width:90%;margin:10px auto;padding-top:15px;height:95px;background:#FFFFFF;border-radius:10px;">
        <view style="width: 100%;overflow: hidden;">
          <view style="width: 25%;text-align: center;float:left" @tap="toEvaluate()">
            <view style="margin-bottom: 7px;">
              <img style="margin-top:5px;width: 28px;" src="../../static/main/wodepingjia.png"/>
            </view>
            <view>
              <text style="color:#111111;font-size: 13px;font-weight:bold;">我的评价</text>
            </view>
          </view>
          <view style="width: 25%;text-align: center;float: left;" @tap="toOrderHistory()">
            <view style="margin-bottom: 7px;">
              <img style="margin-top:5px;width: 28px;" src="../../static/main/dingdanjilu.png"/>
            </view>
            <view>
              <text style="color:#111111;font-size: 13px;font-weight:bold;">订单记录</text>
            </view>
          </view>
          <view style="width: 25%;text-align: center;float: left;" @tap="toServeTime()">
            <view style="margin-bottom: 7px;">
              <img style="margin-top:5px;width: 28px;" src="../../static/main/fuwushijian.png"/>
            </view>
            <view>
              <text style="color:#111111;font-size: 13px;font-weight:bold;">服务时间</text>
            </view>
          </view>
          <view style="width: 25%;text-align: center;float: left;" @click="contactCustomer">
            <view style="margin-bottom: 7px;">
              <img style="margin-top:5px;width: 28px;" src="../../static/main/lianxikefu.png"/>
            </view>
            <view>
              <text style="color:#111111;font-size: 13px;font-weight:bold;">联系客服</text>
            </view>
          </view>
        </view>
      </view>


      <view
          style='width:90%;margin:auto;background-image:url(../../static/main/dingdanbeijing.png);background-size: 100%;background-repeat: no-repeat;border-radius:10px;'>
        <view style="overflow: hidden">
          <view>
            <view style="float: left;margin: 10px 0px 0px 15px;color:#111111;font-size:17px;font-weight:bold;">
              <text>我的订单</text>
            </view>
          </view>
          <view class="tabs-list flex justify-between padding-lr-sm" style="width: 70%;float: right;margin-top: 10px;">
            <view class="tab-item" :class="[currentTab=='001'?'active-num-tab':'']" @tap="tabChange('001')"
                  style="margin-right: 5px;">待上门
            </view>
            <view class="tab-item" :class="[currentTab=='002'?'active-num-tab':'']" @tap="tabChange('002')"
                  style="margin-right: 5px;">服务中
            </view>
            <view class="tab-item" :class="[currentTab=='003,004,007'?'active-num-tab':'']"
                  @tap="tabChange('003,004,007')" style="margin-right: 5px;">已完成
            </view>
            <view class="tab-item" :class="[currentTab=='005,006'?'active-num-tab':'']" @tap="tabChange('005,006')"
                  style="margin-right: 5px;">退款
            </view>
          </view>
        </view>


        <view v-for="item in orderInfoArr"
              style="width:95%;margin: 10px auto 10px auto;padding:10px;background:#FFFFFF;border-radius:10px;">
          <view style="width: 100%;overflow: hidden;" >
            <view @click="goOrderDetail(item)">
              <text style="font-size: 14px;">
                {{ item.name }}
              </text>
            </view>
            <view>
              <text style="font-size: 14px;color:#999999;">
                服务时间:
              </text>
              <text style="font-size: 14px;    line-height: 30px;">
                {{ item.appointmentStartTime | dataFormat }}
                <text style="color:#3B94E7;margin-left: 10px;font-weight:bold;">
                  {{ item.appointmentStartTime | timeFormat }}
                </text>
                <text style="font-size: 14px;float:right;">
                  {{ item.goodsCounts }}{{ item.unit }}
                </text>
              </text>
              <br/>
              <text style="font-size: 14px;color:#999999;">
                服务类型:
              </text>
              <text style="font-size: 14px;">
                {{ item.categoryName }}
                <text style="font-size: 14px;float:right;color:#FF1414;font-weight:bold; ">
                  ¥ {{ item.totalAmount }}
                </text>
              </text>
            </view>
            <view style="width:100%;margin:auto;margin-top: 10px;height:80px;background:#F8F9FA;border-radius:10px;">
              <view style="float: left;margin: 5px 0px 0px 5px;">
                <img style="width: 50px;"
                     :src="(item.avatar == null || item.avatar == undefined || item.avatar == '')?'../../static/main/touxiang.png':item.avatar"/>

              </view>
              <view style="float: left;margin: 10px 0px 0px 5px;width: 75%;">
                <text @click="contact(item.phone)" style="font-weight:bold;font-size:15px;line-height:25px;">{{ item.custName | nameFormat}} {{ item.phone | phoneFormat }}
                </text> <img @click="contact(item.phone)" src="../../static/common/dianhua.png" style="width:17px;margin-left: 10px;"/>
                <br/>
                <text style="font-size:14px">{{ item.address }}{{ item.detailed }}</text>
              </view>
            </view>
            <view v-if="item.orderState == '001'" style="text-align: center;margin-top: 20px;"
                  @click="changeOrderStateCheck('002',item)">
              <text
                  style="font-weight:bold;background: white;color: #3B94E7;padding: 9px 60px;border-radius: 31px;line-height: 35px;vertical-align: middle;border: 1px solid #3B94E7">
                开始服务
              </text>
            </view>
            <view v-if="item.orderState == '002' " style="text-align: center;margin-top: 20px;"
                  @click="changeOrderStateCheck('003',item)">
              <text
                  style="font-weight:bold;background: white;color: #FC6035;padding: 9px 60px;border-radius: 31px;line-height: 35px;vertical-align: middle;border: 1px solid #FC6035">
                服务完成
              </text>
            </view>
            <view v-if="(item.orderState == '003' || item.orderState == '004' || item.orderState == '007'
                     || item.orderState == '005' || item.orderState == '006') && (item.addCounts != undefined && item.addCounts != null && item.addCounts != '' && item.addCounts>0)
              " style="margin-top: 20px;">
              <text style="font-size: 14px;color:#999999;">
                追加数量:
              </text>
              <text style="font-size: 14px;">
                {{ item.addCounts }}{{ item.unit }}
                <text style="font-size: 14px;float:right;color:#FF1414;font-weight:bold; ">¥ {{ item.addAmount }}</text>
              </text>
              <br/>
              <text  v-if="( item.orderState == '005' || item.orderState == '006') " style="font-size: 12px;float:right;color:#FC6035; ">
                已退款/已申请平台介入</text>
            </view>
          </view>
        </view>
      </view>
    </z-paging>
  </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 {
      title: 'Hello',
      currentTab: '001',
      pageSize: 20,
      starNum: 0,
      userInfo: {},
      nowWeekDate: {},
      serverId: null,
      orderInfoArr: [],
    }
  },
  onLoad() {
    this.getUserInfo();
  },
  methods: {
    contact(value){
      uni.makePhoneCall({
        // 手机号
        phoneNumber: value,
        // 成功回调
        success: (res) => {
          console.log('调用成功!')
        },
        // 失败回调
        fail: (res) => {
          console.log('调用失败!')
        }
      });
    },
    goOrderDetail(item){
      uni.navigateTo({
        url: `../order/orderDetail?id=${item.orderId}`
      });
    },
    contactCustomer(){
      uni.makePhoneCall({
        // 手机号
        phoneNumber: '110',
        // 成功回调
        success: (res) => {
          console.log('调用成功!')
        },
        // 失败回调
        fail: (res) => {
          console.log('调用失败!')
        }
      });
    },
    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.$refs.paging.reload()
        }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) {

          }
        }
      });
    },
    dataFormat(time) {
      return `${time.getFullYear()}-${time.getMonth() + 1 >= 10 ? (time.getMonth() + 1) : '0' + (time.getMonth() + 1)}-${time.getDate() >= 10 ? time.getDate() : '0' + time.getDate()}
                     ${time.getHours() >= 10 ? time.getHours() : '0' + time.getHours()} : ${time.getMinutes() >= 10 ? time.getMinutes() : '0' + time.getMinutes()} : ${time.getSeconds() >= 10 ? time.getSeconds() : '0' + time.getSeconds()}`;
    },
    queryList(pageNo, pageSize) {
      var that = this;
      let params = {
        pageNum: pageNo,
        pageSize: pageSize,
        orderState: this.currentTab,
        serverId: that.serverId,
      };
      this.$u.api.getOrderList(params).then(res => {
        if (res.code === 200) {
          this.total = res.total;
          this.$refs.paging.complete(res.rows);
        } else {
          this.$refs.paging.complete(false);
        }
      });
    },
    getUserInfo() {
      var that = this;
      that.serverId = uni.getStorageSync('userInfo').serverId;
      if (that.serverId == undefined || that.serverId == null || that.serverId == '') {
        uni.reLaunch({
          url: '../login/indexChoice'
        })
      } else {


        that.$u.api.getUserInfo({serverId: that.serverId}).then(res => {
          if (res.code === 200) {
            that.userInfo = res.data;
            that.starNum = Math.floor(that.userInfo.score)
          }
        }).then(function () {
          that.getNowWeekDate();
        });
      }
    },
    getNowWeekDate() {
      var that = this;
      that.$u.api.getNowWeekDate({serverId: that.serverId}).then(res => {
        if (res.code === 200) {
          that.nowWeekDate = res.data;
        }
      });
    },
    /** tab栏切换 **/
    tabChange(index) {
      // console.log(index)
      this.currentTab = index;
      this.$refs.paging.reload()
      // this.queryList(0,this.pageSize)
    },

    //我的评价
    toEvaluate() {
        uni.navigateTo({
            url: './myEvaluate'
        })
    },
    //服务时间
    toServeTime() {
        uni.navigateTo({
            url: './serveTime'
        })
    },
    //订单记录
    toOrderHistory() {
        uni.navigateTo({
            url: '../order/orderHistory'
        })
    },
    //个人中心
    toMain() {
        uni.navigateTo({
            url: '../main/main'
        })
    }
  }
}
</script>


<style lang="scss" scoped>
.tabs-list {
  margin-bottom: 14 rpx;
  font-size: 13 rpx;

  .tab-item {
    padding: 4px 2px;
    color: #666666;
    background: #FFFFFF;
    border-radius: 4px;
    width: auto;
    text-align: center;
    flex: 1;
  }

  .active-num-tab {
    font-size: 13 rpx;
    color: #FEFEFE;
    text-align: center;
    background: #FC6035;
  }

}

</style>