<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" class="flex align-center">
          <text>
            <img style="width: 24px;height:24px;" src="../../static/order/list.png"/>
          </text>
          <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 == '099'" style="font-size: 18px;font-weight:bold;padding-left: 5px;">
            未支付已取消
          </text>
          <text v-if="orderInfo.orderState == '000'" 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'" style="font-size: 18px;font-weight:bold;padding-left: 5px;">
            已完成
          </text>
          <text v-if="orderInfo.orderState == '005'" style="font-size: 18px;font-weight:bold;padding-left: 5px;">
            已申请退款
          </text>
          <text v-if="orderInfo.orderState == '006' " style="font-size: 18px;font-weight:bold;padding-left: 5px;">
            已退款
          </text>
          <text v-if="orderInfo.orderState == '007' " 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; font-size:14px;padding: 2px 8px;border-radius: 4px;vertical-align: middle;background: #3B94E7;margin-top: -24px;float: right;">
          开始服务
        </text>
        <text  @click="changeOrderStateCheck('003',orderInfo)" v-if="orderInfo.orderState == '002'&& orderInfo.orderType == '001'" style="color: #f8f8f8; font-size:14px;padding: 2px 8px;border-radius: 4px;vertical-align: middle;background: #FF9E30;margin-top: -24px;float: right;">
          服务完成
        </text>
        <text  @click="changeOrderStateCheck('003',orderInfo)" v-if="orderInfo.orderState == '002' && orderInfo.orderType == '002' && orderInfo.maintenanceAmount >0 && orderInfo.addPayStatus =='1' " style="color: #f8f8f8;font-size:14px;padding: 2px 8px;border-radius: 4px;vertical-align: middle;background: rgb(252, 96, 53);margin-top: -24px;float: right;">
          服务完成
        </text>
        <text v-if="orderInfo.orderState == '002' && orderInfo.orderType == '002'&& orderInfo.addPayStatus ==null "  >
            <text @click="changeOrderMaintenanceCheck(orderInfo)"
                style="margin-left:10rpx;margin-right: 20rpx ;background: white;color: #3B94E7;padding: 7rpx 20rpx;border-radius: 4px;vertical-align: middle;border: 1px solid #3B94E7;float: right;margin-top: -24px;">
          配件费
            </text>
          <text @click="changeOrderStateCheck('003',orderInfo)"
              style="color: #f8f8f8; padding: 7rpx 20rpx;border-radius: 4px;vertical-align: middle;background: #FF9E30;margin-top: -24px;float: right;">
            服务完成
          </text>
        </text>
        <text  v-if="orderInfo.orderState == '002' && orderInfo.orderType == '002' && orderInfo.maintenanceAmount >0 && orderInfo.addPayStatus =='0' " style="font-size: 36rpx;float:right;color: #FC6035;margin-top: -24px;float: right;">
          待支付
        </text>

        <view v-if="orderInfo.orderState == '005' || orderInfo.orderState == '006'|| orderInfo.orderState == '007'"  style="overflow: hidden;background: #FFFFFF;margin-top:10px;padding:10px;line-height: 25px;border-radius: 20rpx;">
          <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'|| orderInfo.orderState == '007'" 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>
          <br/>
          <text style="font-size: 14px;color:#999999;padding-right: 15px;" v-if="orderInfo.orderState == '007'">
            拒绝原因 &nbsp; &nbsp;{{orderInfo.refundResult}}
          </text>
        </view>
        <view style="height: 40px;margin-top:15px;background: #FDF6E3;padding:10px;border-radius: 8px 8px 0px 0px;"
        :style="{background:orderInfo.orderState == '001'?'#E6F7FF':orderInfo.orderState == '003'?'#F2F3FC':orderInfo.orderState == '002'?'#FFF5E4':'#FDF6E3'}">
          <text style="font-size: 14px;color:#666666;padding-right: 15px;">
            上门时间
          </text>
          <text style="font-size: 14px;float:right;">
			    <!-- {{ $u.timeFormat(orderInfo.appointmentStartTime, 'yyyy年mm月dd日')  }} -->
              {{$timefilter('年月日',orderInfo.appointmentStartTime)}}
            <text style="color:#3B94E7;margin-left: 10px;font-weight:bold;">{{ orderInfo.appointmentStartTime | timeFormat }}</text>
          </text>
        </view>
        <view style="background: #FFFFFF;padding:10px;border-radius: 0px 0px 8px 8px;" class="flex flex-direction align-center">
          <view style="display: flex;width:100%;">
            <view style="margin: 12px 5px 0px 3px;">
              <img style="width: 32px;" src="../../static/common/dingwei.png"/>
            </view>
            <view style="margin: 10px 0px 0px 5px;width: 75%;color:#333;">
              <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:12px;color:#999;word-break: break-all;">{{ orderInfo.address }}{{ orderInfo.detailed }}</text>
            </view>
            
          </view>
          <view class="card margin-tb-lg flex align-center justify-center" v-if="orderInfo.orderState == '001'&&showCodeBtn" @tap="createQR()">
            <img style="width: 16px;height:16px;margin-right:8px;" src="../../static/order/card.png"/>
            <view style="color:#fff;font-size:16px;line-height:16px;">门岗通行证</view>
          </view>
        </view>
        

        <view style="overflow: hidden;background: #FFFFFF;margin-top:10px;padding:10px;border-radius: 8px 8px 8px 8px;">
          <text style="font-size: 14px;color:#666666;padding-right: 15px;">
            订单编号
          </text>
          <text style="font-size: 14px;float:right;">
            <span >{{orderInfo.orderIndex}}</span>
            <text @tap="handleCopy(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: 100%;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: 100%;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: 100%;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: 100%;margin: 10px auto;border-color:#eeeeee30;" v-if="userInfo.orderTotalAmountShow=='1'"/>
          <text style="font-size: 14px;color:#666666;padding-right: 15px;line-height: 25px;"  v-if="userInfo.orderTotalAmountShow=='1'">
            单价
          </text>
          <text style="font-size: 14px;float:right;font-weight:bold;line-height: 25px;" v-if="userInfo.orderTotalAmountShow=='1'">
            {{ orderInfo.price }}元/{{ orderInfo.unit }}
          </text>

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

        <view style="overflow: hidden;background: #FFFFFF;margin-top:10px;padding:10px;" v-if="(orderInfo.couponAmount>0 || orderInfo.beanAmount>0) && userInfo.orderTotalAmountShow=='1' 
          ">
          <view v-if="orderInfo.beanAmount != undefined && orderInfo.beanAmount != null && orderInfo.beanAmount != '' && orderInfo.beanAmount>0">
			  <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/100 }}
			  </text>
          </view>
		  <view v-if="orderInfo.couponAmount != undefined && orderInfo.couponAmount != null && orderInfo.couponAmount != '' && orderInfo.couponAmount>0">
			  <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>
		  </view>
		 
        </view>

        <view style="padding: 10px;" class="flex align-center"  v-if="orderInfo.addPayStatus==1 && orderInfo.orderType=='001' && orderInfo.addCounts>0">
          <img style="width: 24px;height:24px;margin-right:2px;" src="../../static/order/server.png"/>
          <text style="font-size: 14px;color:#999;padding-right: 15px;line-height: 14px;">
            追加服务
          </text>
        </view>
		<view style="padding: 10px;display: flex;justify-content: space-between;"  v-if="orderInfo.maintenanceAmount>0 && orderInfo.orderType=='002'">
		  <text style="font-size: 14px;color:#666666;padding-right: 15px;line-height: 25px;">
		    维修/配件费
		  </text>
		  	<text @click="checkCancel"
			 v-if="orderInfo.addPayStatus !==1"
			 style="border:1rpx solid rgb(252, 96, 53);padding: 2rpx 14rpx;color:rgb(252, 96, 53);border-radius: 30rpx;font-size: 14px" >取消收费</text>
		</view>
        <view style="overflow: hidden;background: #FFFFFF;padding:10px;border-radius: 8px 8px 8px 8px;" v-if="orderInfo.addPayStatus==1 && orderInfo.orderType=='001' && orderInfo.addCounts>0">
          <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: 100%;margin: 10px auto;border-color:#eeeeee30;" v-if="userInfo.orderTotalAmountShow=='1'"/>
          <text style="font-size: 14px;color:#666666;padding-right: 15px;line-height: 25px;" v-if="userInfo.orderTotalAmountShow=='1'">
            金额
          </text>
          <text style="font-size: 14px;float:right;color:#FF1414;font-weight:bold; line-height: 25px;" v-if="userInfo.orderTotalAmountShow=='1'">
            ¥ {{ orderInfo.addAmount }}
          </text>
        </view>
		<view style="overflow: hidden;background: #FFFFFF;padding:10px;" v-if="orderInfo.maintenanceAmount>0 && orderInfo.orderType=='002'">
		  <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;word-break:break-all">
		    {{ orderInfo.maintenanceRemark }}
		  </text>
		  <hr style="width:0.5px;width: 100%;margin: 10px auto;border-color:#eeeeee30;" v-if="userInfo.orderTotalAmountShow=='1'"/>
		  <text style="font-size: 14px;color:#666666;padding-right: 15px;line-height: 25px;" v-if="userInfo.orderTotalAmountShow=='1'">
		    维修配件费金额
		  </text>
		  <text style="font-size: 14px;float:right;color:#FF1414;font-weight:bold; line-height: 25px;" v-if="userInfo.orderTotalAmountShow=='1'">
		    ¥ {{ orderInfo.maintenanceAmount }}
		  </text>
		</view>
      </view>
    </view>

    <view style="overflow: hidden;text-align: center; vertical-align: middle;line-height: 50px; bottom: 0px;display: flex;justify-content: space-between;
    width: 100%;position: fixed">
      <view  style=";font-size: 14px;background: white;height: 55px;width: 100%;" v-if="userInfo.orderTotalAmountShow=='1'">订单实付 <text style="font-size: 14px;padding-left:15px;color:#FF1414;font-weight:bold; line-height: 17px;"> ¥ {{ orderInfo.totalAmount }}</text></view>
      <view class="rightHr" v-if="userInfo.orderTotalAmountShow=='1'"></view>
      <view style="background: white;height: 55px;width: 100%;" >服务数量 
	  <text style="font-size: 14px;padding-left:15px;font-weight:bold; line-height: 17px;"> {{serverAllCount(orderInfo.addCounts,orderInfo.goodsCounts)}} {{ orderInfo.unit }}</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" :key="item.id" 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: 15px;color:#666666;padding-right: 15px;" v-if="item.nowState == '000'">提交订单</text>
            <text style="font-size: 15px;color:#666666;padding-right: 15px;" v-if="item.nowState == '099'">未支付取消订单</text>
            <!-- <text style="font-size: 15px;color:#666666;padding-right: 15px;" v-if="item.nowState == '001'">支付成功</text> -->
			<text style="font-size: 15px;color:#666666;padding-right: 15px;" v-if="item.preState == '000' && item.nowState == '001'">支付成功</text>
			<text style="font-size: 15px;color:#666666;padding-right: 15px;" v-if="item.preState == '005' && item.nowState == '001'">顾客取消退款</text>
            <text style="font-size: 15px;color:#666666;padding-right: 15px;" v-if="item.preState == '001' && item.nowState == '002'">开始服务</text>
            <text style="font-size: 15px;color:#666666;padding-right: 15px;" v-if="item.preState == '002' && item.nowState == '002' && orderInfo.orderType == '001' ">追加服务</text>
			<text style="font-size: 15px;color:#666666;padding-right: 15px;" v-if="item.preState == '002' && item.nowState == '002' && orderInfo.orderType == '002' ">{{item.operateInfo}}</text>
			<text style="font-size: 15px;color:#666666;padding-right: 15px;" v-if="item.nowState == '003' && item.preState != '005'">完成服务</text>
			<text style="font-size: 15px;color:#666666;padding-right: 15px;" v-if="item.nowState == '003' && item.preState == '005'">顾客取消退款</text>
            <text style="font-size: 15px;color:#666666;padding-right: 15px;" v-if="item.nowState == '004' && item.preState != '005'">确认完成</text>
            <text style="font-size: 15px;color:#666666;padding-right: 15px;" v-if="item.nowState == '004' && item.preState == '005'">顾客取消退款</text>
            <text style="font-size: 15px;color:#666666;padding-right: 15px;" v-if="item.nowState == '005'">顾客申请退款</text>
			<!-- <text style="font-size: 15px;color:#666666;padding-right: 15px;" v-if="item.preState != '005' && item.nowState == '006'">商家已退款</text> -->
            <!-- <text style="font-size: 15px;color:#666666;padding-right: 15px;" v-if="item.preState == '005' && item.nowState == '006'">平台已退款</text> -->
			<text style="font-size: 15px;color:#666666;padding-right: 15px;" v-if="item.nowState = '006'">{{item.operateInfo}}</text>
            <text style="font-size: 15px;color:#666666;padding-right: 15px;" v-if="item.nowState == '007'">平台拒绝退款</text>
            <text style="font-size: 14px;margin-right:10px;float:right;">
              {{ item.createTime  | dataNewFormat}}
            </text>
          </view>
        </view>
      </u-popup>
    </view>
	<view>
		<u-popup border-radius="20" v-model="maintenanceShow" mode="bottom" :safe-area-inset-bottom="true">
			<view class="flex align-center justify-end" style="padding: 38rpx 54rpx; color: #111111;">
				<span class="font-34 text-bold">收取维修/配件费</span>
				<view style="width:30rpx;height:30rpx; margin-left: 228rpx;"  @tap="maintenanceShow=false">
					<image src="../../static/common/close.png" style="width:30rpx;height:30rpx; "></image>
				</view>

			</view>


			<view class="flex justify-between align-center" style=" padding: 14rpx 0; margin: 0 25rpx; ">

				<view style="font-size: 30rpx;font-weight: bold;color: #111111;">
					<image src="../../static/publish/required-icon.png"  style="width: 20rpx;height: 20rpx;" mode=""></image>收取金额</view>
				<view class="flex justify-end align-center">
					<view style="width: 350rpx; text-align: right;">
						<input v-model="orderParam.maintenanceAmount" style="text-align: right;" placeholder="请输入收取的维修/配件费金额" type="digit"
								placeholder-style="text-align: right; font-size: 26rpx;font-weight: 500;color: #C0C0C0;"/>
					</view>
					<view style="font-size: 30rpx;font-weight: 500;color: #111111; text-align: right; width: 50rpx;">元</view>
				</view>
			</view>
			<view style="width: 700rpx; margin: 10rpx 25rpx; ">
				<view style="font-size: 30rpx;font-weight: bold;color: #111111;display: flex;">
					<view class="" style="width: 22rpx;height: 22rpx;">

					</view>
					费用说明</view>
				<u-input v-model="orderParam.maintenanceRemark" :type="inputArea.type" :border="inputArea.border" :height="inputArea.height" :auto-height="inputArea.autoHeight" :borderColor="inputArea.borderColor" :placeholder="inputArea.placeholder"
						 style="padding: 20rpx 30rpx;margin-top: 10rpx; background-color: #FAFAFA; font-size: 30rpx;"/>
			</view>

			<view style="padding: 30rpx 70rpx;" @click="saveReply">
				<view class="select_time_sure">提交</view>
			</view>

		</u-popup>
	</view>
	<u-toast ref="uToast" />

  
  <view class="show-mask flex align-center justify-center flex-direction" @touchmove.stop.prevent="moveHandle" v-show="showCode">
    <img :src="tempFilePath" alt="" style="width: 656rpx;height: 1030rpx;border-radius: 16rpx 16rpx 16rpx 16rpx;">
    <image src="../../static/close-c.png" class="close-img" @tap="()=>{showCode=false}"></image>
  </view>


  <canvas class="code-canvas" canvas-id="myCanvas"></canvas>

  <!-- <tki-qrcode ref="qrcode" cid="cid" unit="px" :val="val" :size="225" :icon="icon" :iconSize="50" :onval="true" @result="qrR" class="qrcode-canvas" /> -->



  </view>
</template>

<script>
// import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue"


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 new Date(time).getTime()
      // return time.substring(0, 10).replaceAll('-', '月').replace('月', '年') + '日';
    },
    dataNewFormat(time) {
      if (time == null || time == undefined || time == '') {
        return '';
      }
      return time.substring(0, 16);
    },
    timeFormat(time) {
      if (time == null || time == undefined || time == '') {
        return '';
      }
      return time.substring(11, 16);
    },
  },
  data() {
    return {
		userInfo:{},
      active:1,
      show:false,
      orderId:'',
      orderInfo:{},
	  orderParam:{
		maintenanceAmount:'',
		maintenanceRemark:"",
	 },
	 maintenanceShow:false,
	 editOrderId:'',
	 inputArea: {
	 	value: '',
	 	type: 'textarea',
	 	border: true,
	 	height: 100,
	 	autoHeight: true,
	 	borderColor: '#E3E3E3',
	 	placeholder: '请输入说明'
	 },
    showCode: false,
    tempFilePath: "",
    showCodeBtn: false,
    qrCodeUrl: "",
    };
  },
    // components: {
		// 	tkiQrcode
		// },
  onLoad(option) {
    this.orderId = option.id;
	this.getUserInfo();
	// this.userInfo=uni.getStorageSync('userInfo')
	//console.log(this.userInfo);

  },
  created() {
    this.getDetail();
    this.getCode();
  },
  methods: {
	  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;
	  		// console.log(res,'111')

	          that.starNum = Math.floor(that.userInfo.score)
	        }
	      }).then(function () {
	        // that.getNowWeekDate();
	      });
	    }
	  },
	  serverAllCount(addCounts, goodsCounts) {
	  	return parseInt(addCounts) + parseInt(goodsCounts)
	  },
	// 取消收费
	checkCancel() {
		const param={
			orderId:this.orderId
		}
		uni.showModal({
			title: '提示',
			content: '您确定要取消吗？',
			success: async (res) => {
				if (res.confirm) {
					this.$u.api.cancelMaintenanceServer(param).then(res => {
						if (res.code === 200) {
							console.log(res)
							this.$api.msg('取消成功')
							setTimeout(()=>{
								this.getDetail();
							},500)

						}
					});
				}
			}
		})

	},
    backPage(){
      uni.reLaunch({
        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;
        params.appointmentStartTime=item.appointmentStartTime;
      }
      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(data){
      let url = data;
      let oInput = document.createElement('input');
      oInput.value = url;
      document.body.appendChild(oInput);
      oInput.select(); // 选择对象;
      console.log(oInput.value)
      document.execCommand("Copy"); // 执行浏览器复制命令
      uni.showToast({ //提示
        title: '复制成功'
      })
      oInput.remove()
    },
    handleCopy(obj){
      this.copyData = obj
      this.copy(this.copyData)
      // alert("已复制好，可贴粘。");
      // uni.setClipboardData({
      //   data: value,
      //   success: () => { //复制成功的回调函数
      //     uni.showToast({ //提示
      //       title: '复制成功'
      //     })
      //     uni.hideToast();
      //   }
      // });
      // 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();
          });
    },
	//配件费
	changeOrderMaintenanceCheck(item){
		this.editOrderId = item.orderId
		this.orderParam ={}
		this.maintenanceShow = true;
	},
	//提交收取配件费

	saveReply(){
		this.orderParam.orderId = this.editOrderId;
		console.log("提交维修配件费")
		console.log(this.orderParam)

		if (this.orderParam.maintenanceAmount == null || this.orderParam.maintenanceAmount== '') {
			this.$refs.uToast.show({
				title:'请输入收取金额',
			})
			return
		}
		if (this.orderParam.maintenanceAmount <0.01) {
			this.$refs.uToast.show({
				title:'单价金额太小，请重新输入',
			})
			return
		}
		var that = this;
		that.$u.api.maintenanceServer(that.orderParam).then(res => {
			if (res.code === 200) {
				that.$api.msg("发布收取维修配件费成功")
				//刷新页面
				 that.getDetail();
				that.maintenanceShow = false;
				that.editOrderId ='';
			}else{
				that.$api.msg(res.msg)
				that.maintenanceShow = false;
				that.editOrderId ='';
			}
		}).catch(err =>{
		  console.log(err)
		})

	},

    //获取二维码值
    getCode() {
      this.$u.api.VerificationCode({orderId: this.orderId}).then(res => {
        
        if (res.code === 200&&!this.$isNull(res.data)) {
          // console.log(res.data.qrCodeUrl)
          this.showCodeBtn = true
          this.qrCodeUrl = "data:image/png;base64,"+res.data.qrCodeUrl;
        } else {
          this.showCodeBtn = false
        }
      })
    },
    //显示二维码
    createQR() {

      const ctx = uni.createCanvasContext('myCanvas',this);
      let that = this
      ctx.drawImage('../../static/order/card-bg.png', 0, 0, 330, 515);//绘制背景图
      ctx.setFillStyle('#ffffff')//文字颜色
      ctx.setFontSize(28)//设置字体大小，默认10
      ctx.fillText('门岗通行证' , 96, 60);
      ctx.setFontSize(16)//设置字体大小，默认10
      ctx.fillText('优鲜信家政/维修服务平台证' , 65, 84);
        // ctx.fillText(文字内容 , 宽度, 高度);
        
      ctx.drawImage(that.qrCodeUrl, 70, 134, 191, 191);//绘制二维码
      ctx.drawImage('../../static/logo-shop.png', 150,214, 30, 30);//绘制logo

      ctx.setFontSize(12)//设置字体大小，默认10
      ctx.setFillStyle('#333333')//文字颜色
      ctx.fillText('进小区时请服务人员主动向门岗出示此二维' , 50, 354);
      ctx.fillText('码，请门岗保安微信扫码确认服务人员身份' , 50, 370);

      ctx.setFontSize(15)//设置字体大小，默认10
      ctx.setFillStyle('#FF511B')//文字颜色
      ctx.fillText('此码只可使用一次， 请勿给他人使用' , 40, 400);

      ctx.draw()
      setTimeout(function() {
        uni.canvasToTempFilePath({
            canvasId: 'myCanvas',
            success: function(res) {
                // console.log("save ok canvasToTempFilePath",res)
                that.tempFilePath = res.tempFilePath;
                that.showCode = true
            },
            fail: function(res) {
                console.log(res);
            }
        });
      }, 500);

    },
    moveHandle() {},

  },
};
</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;
}
.select_time_sure {
		background: #fc6035;
		box-shadow: 0rpx 5rpx 14rpx 0rpx #eb4553;
		border-radius: 50rpx;
		color: #ffffff;
		font-size: 32rpx;
		font-weight: 400;
		text-align: center;
		padding-top: 29rpx;
		padding-bottom: 29rpx;
	}
  .card {
    width: 188px;
    height: 44px;
    background: linear-gradient(160deg, #FF6E47 0%, #FF4E1F 100%);
    box-shadow: 0px 8px 16px 1px rgba(255, 78, 31, 0.27);
    border-radius: 22px 22px 22px 22px;
    opacity: 1;
  }

  	.show-mask {
		width: 100%;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.5);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 998;
		color: #ffffff;
    // padding-bottom: 60rpx;
    
		.close-img {
			width: 60rpx;
			height: 60rpx;
      margin-top: 20rpx;
		}
	}

  // .qrcode-canvas {
  //   width: 0 !important;
  //   height: 0 !important;
  //   overflow: hidden !important;
  // }
  .code-canvas {
    width: 330px !important;
    height: 515px !important;
    position: fixed;
    left: 1000px;
    top: 0;
  }

</style>
