jsm-mall-h5-front/src/packageWorkorder/pages/orderDetail.vue

<template>
  <view class="all-container">
    <view class="bg"></view>
    <zj-page-layout :isScroll="true" :hasFooter="true" :refresherTriggered="refresherTriggered"
      @refresherrefresh="refresherrefresh">
      <!-- 状态 -->
      <view class="status-container">
        <view class="status" @tap="openFeedback">{{ detail ? detail.orderStatusText : '' }}<text class="iconfont icon-jinru"></text></view>
        <view class="time" v-if="detail && detail.appointmentTime">已预约 {{ detail.appointmentTime.slice(0, 10) }}</view>
      </view>

      <!-- tab栏 -->
      <view class="tab-container">
        <u-tabs :scrollable="true" :list="tabList" :current="curTab - 1" @click="changeTab"
          itemStyle="height: 36px;">
        </u-tabs>
      </view>

      <view class="content-container" v-if="detail">
        <!-- 基本信息 -->
        <block v-if="~[1].indexOf(curTab)">
          <view class="user-container card">
            <view class="top">
              <view class="type">
                <view class="left">{{ detail.orderSmallTypeText ? detail.orderSmallTypeText.slice(0, 2) : '' }}</view>
                <view v-if="detail && orderStatus_v !== 'DQD'" class="right" @tap="copyData()">复制</view>
              </view>
              <view class="user">{{ detail.userName }} {{ detail.userMobile }}</view>
              <view class="address">
                <view class="text">{{ detail.province }}{{ detail.city }}{{ detail.area }}{{ detail.street }}{{ detail.address || detail.gpsAddress }}
                </view>
                <view v-if="detail && orderStatus_v !== 'DQD'" class="ctrl" @tap.stop="
                  $openLocation({
                    lat: detail.lat,
                    lng: detail.lng,
                    address: detail.address || detail.gpsAddress,
                  })
                "><text class="iconfont icon-daohang"></text>导航</view>
              </view>
            </view>
            <view class="bottom" v-if="detail && orderStatus_v !== 'DQD'">
              <view class="it" @tap="$callPhone(detail.userMobile)"><text class="iconfont icon-call"></text>联系电话1</view>
              <view class="it" @tap="$callPhone(detail.userMobile)"><text class="iconfont icon-call"></text>联系电话2</view>
            </view>
          </view>

          <!-- 商品信息 -->
          <view class="goods-container card mt30">
            <view class="common-title">商品信息</view>
            <view class="item" v-for="(item, index) in detail.pgOrderProducts" :key="index">
              <view class="main">
                <image :src="item.imgUrl ? item.imgUrl : require('@/static/images/logo.png')" mode="aspectFill"></image>
                <view class="info">
                  <view class="name">
                    <view class="left" v-if="detail.isZl">{{ item.mainName || '' }}</view>
                    <view class="left" v-else>{{ item.smallName || '' }} {{ item.productName || '' }}</view>
                    <view class="right">x{{ item.num }}</view>
                  </view>
                  <view class="tags" v-if="!detail.isZl">
                    <view class="it">{{ item.brandName }}</view>
                    <!-- <view class="it">家用空调</view> -->
                  </view>
                </view>
              </view>
              <!-- <view class="images" v-if="isOpenGoods">
          			<view class="it" v-if="item.insideImg">
          				<image :src="imageUrl + item.insideImg" mode="aspectFill"
          					@tap="prevImg(item.insideImg)"></image>
          				<view class="text">内机</view>
          			</view>
          			<view class="it" v-if="item.outImg">
          				<image :src="imageUrl + item.outImg" mode="aspectFill" @tap="prevImg(item.outImg)">
          				</image>
          				<view class="text">外机</view>
          			</view>
          			<block v-if="item.partImgs">
          				<view class="it" v-for="(it, idx) in item.partImgs.split(',')" :key="idx">
          					<image :src="imageUrl + it" mode="aspectFill" @tap="() => prevImg(it)"></image>
          					<view class="text">配件</view>
          				</view>
          			</block>
          		</view> -->
            </view>
            <!-- <view class="ctrl" @tap="isOpenGoods = !isOpenGoods">
          		<text>{{ isOpenGoods ? '收起' : '查看更多' }}</text>
          		<text class="iconfont icon-left" :class="isOpenGoods ? 'is' : ''"></text>
          	</view> -->
          </view>

          <!-- 订单信息 -->
          <view class="info-container card mt30" v-if="detail.saleOrderId && !detail.pgIncreId">
            <view class="common-title">订单信息</view>
            <view>
              <view class="row">
                <view class="label">订单编号</view>
                <view class="value">{{ detail.saleOrderId }}</view>
                <view v-if="detail && orderStatus_v !== 'DQD'" class="ctrl" @tap="$copy(detail.saleOrderId)">复制</view>
              </view>
              <view class="row">
                <view class="label">下单时间</view>
                <view class="value">{{ detail.saleCreateTime || '' }}</view>
              </view>
              <view class="row">
                <view class="label">订单金额</view>
                <view class="value">¥{{ detail.saleTotalAmount | priceFilter }}</view>
              </view>
              <view class="row">
                <view class="label">订单备注</view>
                <view class="value">{{ detail.saleRemark || '' }}</view>
              </view>
            </view>
          </view>

		<view class="info-container card mt30" v-if="detail.pgIncreId && increDetail">
		  <view class="common-title">产品信息</view>
		  <view class="row">
		    <view class="label">服务类型</view>
		    <view class="value">延保</view>
		  </view>
		  <view class="row">
		    <view class="label">产品品牌</view>
		    <view class="value">{{increDetail.brandName}}</view>
		  </view>
		  <view class="row">
		    <view class="label">产品大类</view>
		    <view class="value">{{increDetail.mainName}}</view>
		  </view>
		  <view class="row">
		    <view class="label">服务内容</view>
		    <view class="value">{{increDetail.increContent}}</view>
		  </view>
		</view>

		<view class="info-container card mt30" v-if="detail.pgIncreId && increDetail">
		  <view class="common-title">产品凭证</view>
		  <view class="row">
		    <view class="label">内机条码</view>
		    <view class="value">{{increDetail.insideCode}}</view>
		  </view>
			<view class="imgs">
				<!-- 内机条码 -->
				<view class="it">
					<block>
						<image mode="aspectFill" :src="increDetail.insideCodeImg" @tap="prevImg(increDetail.insideCodeImg)">
						</image>
					</block>
					<view class="name">内机条码</view>
				</view>
				<!-- 机器铭牌 -->
				<view class="it">
					<block>
						<image mode="aspectFill" :src="increDetail.machineImg" @tap="prevImg(increDetail.machineImg)">
						</image>
					</block>
					<view class="name">机器铭牌<br/>(含出厂日期)</view>
				</view>
				<!-- 购机凭证 -->
				<view class="it">
					<block>
						<image mode="aspectFill" :src="increDetail.buyCertImg" @tap="prevImg(increDetail.buyCertImg)">
						</image>
					</block>
					<view class="name">购机凭证</view>
				</view>
			</view>
		</view>

		<!-- 延保订单信息 -->
		<view class="info-container card mt30" v-if="detail.pgIncreId && increDetail">
		  <view class="common-title">订单信息</view>
		  <view>
		    <view class="row">
		      <view class="label">订单编号</view>
		      <view class="value">{{ increDetail.id }}</view>
		      <view v-if="detail && orderStatus_v !== 'DQD'" class="ctrl" @tap="$copy(increDetail.id)">复制</view>
		    </view>
		    <view class="row">
		      <view class="label">下单时间</view>
		      <view class="value">{{ increDetail.createTime || '' }}</view>
		    </view>
		    <view class="row">
		      <view class="label">订单金额</view>
		      <view class="value">¥{{ increDetail.amount }}</view>
		    </view>
		    <view class="row">
		      <view class="label">订单备注</view>
		      <view class="value">{{ detail.remark || '' }}</view>
		    </view>
		  </view>
		</view>

          <!-- 服务信息 -->
          <view class="info-container card mt30">
            <view class="common-title">服务信息</view>
            <view>
              <view class="row">
                <view class="label">工单编号</view>
                <view class="value">{{ detail.id }}</view>
                <view v-if="detail && orderStatus_v !== 'DQD'" class="ctrl" @tap="$copy(detail.id)">复制</view>
              </view>
              <view class="row">
                <view class="label">下单时间</view>
                <view class="value">{{ detail.createTime }}</view>
              </view>
              <view class="row">
                <view class="label">接单时间</view>
                <view class="value">{{ detail.workerReceTime || '' }}</view>
              </view>
              <view class="row">
                <view class="label">主工程师</view>
                <view class="value">{{ detail.workerName }} {{ detail.workerMobile }}</view>
                <view v-if="detail && orderStatus_v !== 'DQD'" class="ctrl" @tap="$callPhone(detail.workerMobile)"><text class="iconfont icon-call"></text></view>
              </view>
              <view class="row" v-for="(item, index) in detail.pgOrderWorkers.filter(o => !o.isMaster)" :key="index">
                <view class="label">辅工程师</view>
                <view class="value">{{ item.workerName }} {{ item.workerMobile }}</view>
                <view v-if="detail && orderStatus_v !== 'DQD'" class="ctrl" @tap="$callPhone(item.workerMobile)"><text class="iconfont icon-call"></text></view>
              </view>
              <view class="row">
                <view class="label">下单渠道</view>
                <view class="value">{{ detail.orderChannelText || '' }}</view>
              </view>
              <view class="row">
                <view class="label">订单备注</view>
                <view class="value">{{ detail.remark || '' }}</view>
              </view>
            </view>
          </view>

          <!-- 建单信息 -->
          <view class="info-container card mt30">
            <view class="common-title">建单信息</view>
            <view>
              <view class="row">
                <view class="label">建单人名</view>
                <view class="value">{{ detail.createBy || '' }}</view>
              </view>
              <view class="row">
                <view class="label">下单网点</view>
                <view class="value">{{ detail.websitName || '' }}</view>
              </view>
            </view>
          </view>

        </block>

        <!-- 服务信息 -->
        <block v-if="~[2].indexOf(curTab)">
          <!-- 过程反馈 -->
          <view class="feedback-container card">
            <view class="common-title2">
              <view class="title">过程反馈</view>
              <view v-if="detail && orderStatus_v !== 'DQD'" class="right" @tap="toFeedbackList">查看全部<text class="iconfont icon-jinru"></text>
              </view>
            </view>
            <view class="list" v-if="detail.lastOperator">
              <view class="item">
                <u-avatar :text="detail.lastOperatorWebsit ? detail.lastOperatorWebsit.slice(0, 1) : 'A'" fontSize="18" randomBgColor></u-avatar>
                <view class="main">
                  <view class="name">{{ detail.lastOperatorWebsit || '' }}</view>
                  <view class="time">{{ detail.lastOperatorTime || '' }}</view>
                  <view class="content">{{ detail.lastOperator || '' }}</view>
                </view>
              </view>
            </view>
            <Loading :type="3" :loadStatus="2" :isLoadAnimation="false" v-else />
          </view>

          <!-- 预约信息 -->
          <view class="info-container card mt30" v-if="detail && detail.appointmentTime">
            <view class="common-title">预约信息</view>
            <view>
              <view class="row">
                <view class="label">预约时间</view>
                <view class="value">{{ detail.appointmentTime.slice(0, 10) }}</view>
              </view>
              <view class="row">
                <view class="label">预约备注</view>
                <view class="value">{{ detail.appointmentRemark || '' }}</view>
              </view>
            </view>
          </view>

          <!-- 完工信息 -->
          <view class="info-container card mt30" v-if="detail && (orderStatus_v == 'YWG' || orderStatus_v == 'YJS')">
            <view class="common-title2">
              <view class="title">完工信息</view>
              <view v-if="detail && orderStatus_v !== 'DQD'" class="right" @tap="toOverDetail">查看更多<text class="iconfont icon-jinru"></text></view>
            </view>
            <view>
              <view class="row">
                <view class="label">完工时间</view>
                <view class="value">{{ detail.overTime || detail.websitOverTime || '' }}</view>
              </view>
              <view class="row">
                <view class="label">完工地点</view>
                <view class="value">{{ detail.province }}{{ detail.city }}{{ detail.area }}{{ detail.street }}{{
                  detail.address }}
                </view>
              </view>
            </view>
          </view>
        </block>

        <!-- 电子支付 -->
        <block v-if="~[3].indexOf(curTab)">
          <block v-if="detail.rpProjectRepairId">
            <view class="product-container card" v-for="(item, index) in payList" :key="index">
              <view class="row">
                <view class="label">支付单号</view>
                <view class="value">{{ item.orderId }}</view>
                <view class="status">{{ item.examineStatus | examineStatusFilter }}</view>
              </view>
              <view class="common-title mt30">产品信息</view>
              <view class="product">
                <view class="it" v-for="(it, idx) in item.rpMaterialOrderItems.filter(o => (o.chargeType == 'ACC' || o.chargeType == 'MCC'))" :key="idx">
                  <view class="name">{{ it.goodsName }}<text>×{{ it.num }}</text></view>
                  <view class="price">¥{{ it.totalAmount }}</view>
                </view>
                <view class="total">
                  <view class="text">合计：</view>
                  <view class="price">¥{{ [0, 0, 0, ...item.rpMaterialOrderItems.filter(o => (o.chargeType == 'ACC' || o.chargeType == 'MCC')).map(val =>
                    val.totalAmount)].reduce((a, b) => (((a * 100) + (b * 100)) / 100), 0) }}</view>
                </view>
              </view>
              <view class="common-title mt30">服务费用</view>
              <view class="product">
                <view class="it" v-for="(it, idx) in item.rpMaterialOrderItems.filter(o => o.chargeType == 'SERV')" :key="idx">
                  <view class="name">服务费</view>
                  <view class="price">¥{{ it.normAmount }}</view>
                </view>
                <view class="total">
                  <view class="text">合计：</view>
                  <view class="price">¥{{ [0, 0, 0, ...item.rpMaterialOrderItems.filter(o => o.chargeType == 'SERV').map(val =>
                    val.normAmount)].reduce((a, b) => (((a * 100) + (b * 100)) / 100), 0) }}</view>
                </view>
              </view>
              <view class="bottom">
                <view class="left">订单总金额</view>
                <view class="right">
                  <view class="text">合计：</view>
                  <view class="price">¥{{ item.totalAmount }}</view>
                </view>
              </view>
              <view class="row mt30">
                <view class="label">操作人员</view>
                <view class="value">{{ item.createBy }}</view>
              </view>
              <view class="row mt20">
                <view class="label">订单备注</view>
                <view class="value">{{ item.remark }}</view>
              </view>
            </view>
          </block>
          <block v-else>
            <view class="product-container card" v-for="(item, index) in payList" :key="index">
              <view class="row">
                <view class="label">支付单号</view>
                <view class="value">{{ item.orderId }}</view>
                <view class="status">{{ item.payStatus | payStatusFilter }}</view>
              </view>
              <view class="common-title mt30">产品信息</view>
              <view class="product">
                <view class="it" v-for="(it, idx) in item.workerOrderItems.filter(o => (o.chargeType == 'ACC' || o.chargeType == 'MCC'))" :key="idx">
                  <view class="name">{{ it.goodsName }}<text>×{{ it.num }}</text></view>
                  <view class="price">¥{{ it.totalAmount }}</view>
                </view>
                <view class="total">
                  <view class="text">合计：</view>
                  <view class="price">¥{{ [0, 0, 0, ...item.workerOrderItems.filter(o => (o.chargeType == 'ACC' || o.chargeType == 'MCC')).map(val =>
                    val.totalAmount)].reduce((a, b) => (((a * 100) + (b * 100)) / 100), 0) }}</view>
                </view>
              </view>
              <view class="common-title mt30">服务费用</view>
              <view class="product">
                <view class="it" v-for="(it, idx) in item.workerOrderItems.filter(o => o.chargeType == 'SERV')" :key="idx">
                  <view class="name">服务费</view>
                  <view class="price">¥{{ it.normAmount }}</view>
                </view>
                <view class="total">
                  <view class="text">合计：</view>
                  <view class="price">¥{{ [0, 0, 0, ...item.workerOrderItems.filter(o => o.chargeType == 'SERV').map(val =>
                    val.normAmount)].reduce((a, b) => (((a * 100) + (b * 100)) / 100), 0) }}</view>
                </view>
              </view>
              <view class="bottom">
                <view class="left">订单总金额</view>
                <view class="right">
                  <view class="text">合计：</view>
                  <view class="price">¥{{ item.totalAmount }}</view>
                </view>
              </view>
              <view class="row mt30">
                <view class="label">操作人员</view>
                <view class="value">{{ item.createBy }}</view>
              </view>
              <view class="row mt20">
                <view class="label">订单备注</view>
                <view class="value">{{ item.remark }}</view>
              </view>
            </view>
          </block>

          <block v-if="payList.length < 1">
            <Loading :type="3" :loadStatus="2" showText="暂无电子支付信息" :isLoadAnimation="false" />
          </block>
        </block>

        <!-- 费用结算 -->
        <block v-if="~[4].indexOf(curTab)">
          <!-- 服务费用 -->
          <view class="info-container card mt30" v-for="(item, index) in settleList" :key="index">
            <block v-if="item.settleNormType !== 'OTHER'">
              <view class="common-title2">
                <view class="title">服务费用{{ index + 1 }}</view>
                <view class="right">{{orderStatus_v == 'YJS' ? '已结算' : '结算中'}}</view>
              </view>
              <view>
                <view class="row">
                  <view class="label">产品大类</view>
                  <view class="value">{{ item.mainName || '' }}</view>
                </view>
                <view class="row">
                  <view class="label">产品小类</view>
                  <view class="value">{{ item.smallName || '' }}</view>
                </view>
                <view class="row">
                  <view class="label">机型名称</view>
                  <view class="value">{{ item.goodsName || '' }}</view>
                </view>
                <!-- <view class="row">
                  <view class="label">收费标准</view>
                  <view class="value">¥{{ item.normAmount | priceFilter }}</view>
                </view> -->
                <view class="row">
                  <view class="label">数&emsp;&emsp;量</view>
                  <view class="value">{{ item.settleNum || '' }}</view>
                </view>
                <view class="row">
                  <view class="label">结算金额</view>
                  <view class="value" v-if="orderStatus_v == 'YJS'">¥{{ item.workerSettleAmount | priceFilter }}</view>
                  <view class="value" v-else>-</view>
                </view>
              </view>
            </block>
            <block v-else>
              <view class="common-title2">
                <view class="title">其他费用</view>
                <view class="right">{{orderStatus_v == 'YJS' ? '已结算' : '结算中'}}</view>
              </view>
              <view>
                <view class="row">
                  <view class="label">类&emsp;&emsp;型</view>
                  <view class="value">{{ item.typeName || '' }}</view>
                </view>
                <view class="row">
                  <view class="label">规&emsp;&emsp;格</view>
                  <view class="value">{{ item.label || '' }}</view>
                </view>
                <!-- <view class="row">
                  <view class="label">单&emsp;&emsp;价</view>
                  <view class="value">¥{{ item.normAmount | priceFilter }}</view>
                </view> -->
                <view class="row">
                  <view class="label">数&emsp;&emsp;量</view>
                  <view class="value">{{ item.settleNum || '' }}</view>
                </view>
                <view class="row">
                  <view class="label">结算金额</view>
                  <view class="value" v-if="orderStatus_v == 'YJS'">¥{{ item.workerSettleAmount | priceFilter }}</view>
                  <view class="value" v-else>-</view>
                </view>
              </view>
            </block>
          </view>
          <block v-if="settleList.length < 1">
            <Loading :type="3" :loadStatus="2" showText="暂无员工结算信息" :isLoadAnimation="false" />
          </block>
        </block>
      </view>

      <Loading :type="3" :loadStatus="loadStatus" :isLoadAnimation="false" />

      <template slot="footer">
        <view class="bottom-container">
          <view class="left" style="width:100%" v-if="detail">
            <!-- 待抢单 -->
            <block v-if="orderStatus_v == 'DQD'">
              <u-button type="primary" text="抢单" @tap="qdOrder(detail)"></u-button>
            </block>
          </view>
          <view class="right" v-if="detail">
            <!-- 待接单 -->
            <block v-if="orderStatus_v == 'DJD'">
              <u-button plain type="primary" text="配件申请"  v-if="detail.orderType != 'INSTALL'" @tap="toPartsApply()"></u-button>
              <u-button plain type="primary" text="取消加急" @tap="actionUrgent(false)"
                v-if="detail.pgOrderFlags && detail.pgOrderFlags.some((o) => o.tag == 'JIA_JI')"></u-button>
              <u-button plain type="primary" text="加急" @tap="actionUrgent(true)" v-else></u-button>
              <u-button type="primary" text="接单" @tap="actionReceive()"></u-button>
            </block>
            <!-- 服务中 -->
            <block v-if="orderStatus_v == 'FWZ' || orderStatus_v == 'YCD'">
              <u-button plain type="primary" text="配件申请"  v-if="detail.orderType != 'INSTALL'" @tap="toPartsApply()"></u-button>
              <u-button plain type="primary" text="辅材收费" @tap="toCharge('M')"
                v-if="detail.orderType == 'INSTALL'"></u-button>
              <u-button plain type="primary" text="配件收费" @tap="toCharge('P')" v-else></u-button>
              <u-button type="primary" text="过程反馈" @tap="toFeedback()"></u-button>
            </block>
          </view>
        </view>
      </template>
    </zj-page-layout>

    <u-popup :show="isShowFeedback" @close="isShowFeedback = false" closeable round="10">
      <view class="feedback-dialog">
        <view class="title">服务路由</view>
        <view class="content">
          <logistics :logisticsData="feedbackList"></logistics>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import zjDialogPicker from "@/components/zj-dialog/zj-dialog-picker.vue";
import Logistics from '@/components/logistics2/common-logistics.vue';

export default {
  components: {
    zjDialogPicker,
    Logistics
  },

  filters: {
    payStatusFilter(val) {
      const MAP = {
        CANCEL: '已取消',
        WAIT: '待支付',
        PAID: '已支付',
      };
      return MAP[val];
    },
    examineStatusFilter(val) {
      const MAP = {
        WAIT: '待审批',
        OK: '审批通过',
        FAIL: '审批驳回',
        NO: '已取消',
        PAID: '已现场支付',
        NO_PAID: '未支付',
      }
      return MAP[val];
    },
  },

  data() {
    return {
      id: null,
      imageUrl: this.$imageUrl,
      detail: null,
			increDetail:  null,
      loadStatus: 1,
      errorText: '',
      refresherTriggered: false,
      curTab: 1,
      tabList: [
        { name: '基本信息', value: 1 },
        { name: '服务信息', value: 2 },
        { name: '电子支付', value: 3 },
        { name: '员工结算', value: 4 },
      ],
      isOpenGoods: false,

      payList: [], // 支付信息列表
      settleList: [], // 结算列表

      isShowFeedback: false,
      feedbackList: [],
      behavior: ""
    };
  },

  computed:{
    orderStatus_v(){
      if (["DYY"].includes(this?.detail?.orderStatus)) {
        // 待预约
        return "DYY"
      } else if (["DQD"].includes(this?.detail?.orderStatus)) {
        // 待抢单
        return "DQD"
      } else if (["DSHPG", "CJ", "YPD", "DXSPD", "DZBPG", "DWDSPGP", "DXSSPGP", "DTJXSSPGP", "DZBSPGP", "DFZXPD", "DFZXSPGP", 'XSBH', "TJXSBH", "ZBBH", "FZXBH", "FL"].includes(this?.detail?.orderStatus)) {
        // 待商户派工
        return "DSHPG"
      } else if (["DWDPG", "DWDPD", "WDBH"].includes(this?.detail?.orderStatus)) {
        // 待网点派工
        return "DWDPG"
      } else if (["DJD", "DSM", "YZP"].includes(this?.detail?.orderStatus)) {
        // 待接单
        return "DJD"
      } else if (["FWZ", "GCSZT", "BFWG"].includes(this?.detail?.orderStatus)) {
        // 服务中
        return "FWZ"
      } else if (["YCD"].includes(this?.detail?.orderStatus)) {
        // 异常单
        return "YCD"
      } else if (["YWG", "GCSZX", "WDWG", "YWGO"].includes(this?.detail?.orderStatus)) {
        // 已完工待结算
        return "YWG"
      } else if (["YJS", "LRCD"].includes(this?.detail?.orderStatus)) {
        // 已结算
        return "YJS"
      } else if (["YQX", "FWZT", "YCGB", "FWQX"].includes(this?.detail?.orderStatus)) {
        // 已取消
        return "YQX"
      }
      return ""
    }
  },

  async onLoad({ id, behavior }) {
    this.id = id;
    this.behavior = behavior
    await this.refreshData();
    this.crossPage.$on('refreshWorkorderDetail', async () => {
      await this.refreshData();
    })
  },

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

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

    async changeTab(e) {
      this.curTab = e.value;
      this.loadStatus = 1;
      await this.refreshData();
    },

    async refreshData() {
      try {
        await this.getDetail();
        await this.getSettleList();
        if (this.curTab === 1) {
          // await this.getDetail();
        } else if (this.curTab === 2) {

        } else if (this.curTab === 3) {
          await this.getPayList();
        } else if (this.curTab === 4) {
          await this.getSettleList();
        }
        this.refresherTriggered = false;
        this.loadStatus = 0;
      } catch (e) {
        this.loadStatus = 2;
      }
    },

    // 获取详情
    getDetail() {
      return new Promise((resolve, reject) => {
        this.$api.post('/pg/order/base/detail', {
          orderBaseId: this.id,
        }).then((res) => {
          this.detail = res.data;
          if(this.behavior === "lqdd" && !["DQD"].includes(res.data.orderStatus) && res.data.workerId !== this.$store.state.user.userId){
            this.$modal({
              title: '提示',
              content: '来晚啦，工单已经被抢走了~',
              confirmText: "知道啦",
              showCancel: false,
            }).then(() => {
              uni.switchTab({
                url: '/pages/index/index'
              });
            }).catch(() => {
              uni.switchTab({
                url: '/pages/index/index'
              });
            })
          }
          if(res.data.pgIncreOrderId){
            this.getIncreDetail(res.data.pgIncreOrderId)
          }
          resolve(1);
        })
          .catch((res) => {
            reject(0);
          });
      });
    },

	getIncreDetail(id){
		this.$api.post('/increConfig/detailIncre', {
			id
		}).then((res) => {
			this.increDetail = res.data;
		})
	},

    copyData() {
      let name = this.detail.userName;
      let phone = this.detail.userMobile;
      let address = `${this.detail.gpsAddress ? this.detail.gpsAddress + this.detail.address : this.detail.address}`;
      this.$copy(`${name}，${phone}，${address}`);
    },

    async openFeedback() {
      await this.getFeedbackList();
      this.isShowFeedback = true;
    },

    getFeedbackList() {
      return new Promise((resolve, reject) => {
        this.$api.post('/pg/order/base/operator/list', {
          orderBaseId: this.id,
        }).then(res => {
          let data = res.data.map(item => {
            return {
              title: item.type,
              time: item.createTime,
              content: item.content
            }
          })
          this.feedbackList = data;
        }).finally(res => {
          resolve(1);
        })
    	})
    },

    // 获取支付信息
    getPayList() {
      return new Promise((resolve, reject) => {
        let url = '';
        if(this.detail.rpProjectRepairId) {
          url = '/engin/material/detailWorker'
        }else {
          url = '/changeOrder/getOrderList'
        }
        this.$api.post(url, {
          workerOrderId: this.id,
        }).then(async (res) => {
          this.payList = res.data;
          resolve(1);
        }).catch((res) => {
          reject(0);
        });
      });
    },

    // 获取安装结算
    getSettleList() {
      return new Promise((resolve, reject) => {
        this.$api.post('/order/settle/norm/detail', {
          orderId: this.id,
        }).then(res => {
          this.settleList = res.data;
          if(this.settleList.length > 0 && this.orderStatus_v == 'YJS') {
            this.tabList[3].name = `员工结算(${this.settleList.reduce((total, obj) => total + obj.workerSettleAmount, 0)})`
          }else {
            this.tabList[3].name = `员工结算`
          }
          resolve(1);
        })
        .catch((res) => {
          reject(0);
        });
      });
    },

    // 预览图片
    prevImg(url) {
      uni.previewImage({
        current: this.imageUrl + url,
        urls: [this.imageUrl + url],
      });
    },

    // 加急
    actionUrgent(flag) {
      this.$modal({
        title: '加急操作',
        content: '加急操作，会消息通知所有订单相关人员，请谨慎操作。'
      }).then(() => {
        this.$api.post('/pg/order/base/flag', {
          orderBaseId: this.id,
          orderFlagEnum: 'JIA_JI',
          flag: flag,
        }).then(res => {
          this.$successToast();
          this.getDetail();
          this.crossPage.$emit('refreshWorkorderList', '');
        })
      }).catch(() => { })
    },

    // 接单
    actionReceive() {
      this.$modal({
        title: '接单确认',
        content: '确认接单？'
      }).then(() => {
        this.$api.post('/pg/order/base/rece', {
          orderBaseId: this.id,
        }).then(res => {
          this.$successToast();
          this.getDetail();
          this.crossPage.$emit('refreshWorkorderList', '');
        })
      }).catch(() => { })
    },

    // 去收费
    toCharge(type) {
      this.$navToPage({
        url: `/packageMaterial/pages/sale/index?type=${type}&oid=${this.id}`
      })
    },

    // 去配件申请
    toPartsApply() {
      this.$navToPage({
        url: `/packageMaterial/pages/partsApply/form?id=${this.id}`
      })
    },

    // 去过程反馈
    toFeedback() {
      this.$navToPage({
        url: `/packageWorkorder/pages/processFeedback?id=${this.id}`
      })
    },

    // 去过程反馈列表
    toFeedbackList() {
      this.$navToPage({
        url: `/packageWorkorder/pages/feedbackList?id=${this.id}`,
      })
    },

    // 去完工明细
    toOverDetail() {
      this.$navToPage({
        url: `/packageWorkorder/pages/overDetail?id=${this.id}`,
      })
    },

    qdOrder(item){
      this.$modal({
        title: '抢单确认',
        content: '确认抢单？'
      }).then(() => {
        this.$api.post('/pg/order/base/qd', {
          orderBaseId: item.id,
        }).then(res => {
          this.$successToast();
          this.getDetail();
          this.crossPage.$emit('refreshWorkorderList', '');
        })
      }).catch(() => { })
    }

  },
};
</script>

<style lang="scss" scoped>
.all-container {
  position: relative;
}

.bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 300rpx;
  background: linear-gradient(179.48deg, rgba(200, 224, 251, 1) 0.45%, rgba(247, 247, 247, 1) 98.96%);
}


.status-container {
  padding: 30rpx;

  .status {
    font-size: 36rpx;
    font-weight: 500;

    text {
      margin-left: 12rpx;
    }
  }

  .time {
    font-size: 24rpx;
    color: $sec-font;
    margin-top: 12rpx;
  }
}

.tab-container {
  margin-bottom: 30rpx;
}

.card {
  @include zj-card;
}

.common-title {
  font-size: 36rpx;
  font-weight: 600;
  padding-bottom: 20rpx;
}

.common-title2 {
  padding-bottom: 20rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .title {
    font-size: 36rpx;
    font-weight: 600;
  }

  .right {
    font-size: 28rpx;
    color: $theme-color;
    display: flex;
    align-items: center;

    text {
      font-size: 28rpx;
      opacity: .5;
    }
  }
}

.content-container {
  padding: 0 30rpx 30rpx;
}

.user-container {
  .top {
    padding: 30rpx;

    .type {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .left {
        font-size: 36rpx;
        color: $theme-color;
        font-weight: 500;
      }

      .right {
        font-size: 28rpx;
        color: $theme-color;
      }
    }

    .user {
      font-weight: 500;
      margin-top: 20rpx;
    }

    .address {
      display: flex;
      justify-content: space-between;
      margin-top: 20rpx;

      .text {
        font-size: 28rpx;
        flex: 1;
        margin-right: 20rpx;
      }

      .ctrl {
        font-size: 28rpx;
        color: $theme-color;

        .iconfont {
          font-size: 28rpx;
          margin-right: 4rpx;
        }
      }
    }
  }

  .bottom {
    border-top: 1px solid #eaeaea;
    display: flex;
    height: 80rpx;

    .it {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28rpx;
      color: $theme-color;

      &:last-child {
        border-left: 1px solid #eaeaea;
      }

      .iconfont {
        font-size: 36rpx;
        margin-right: 8rpx;
      }
    }
  }
}

.goods-container {
  padding: 30rpx;

  .item {
    border-bottom: 1px solid #d6e0f2;
    padding: 20rpx 0;

    &:last-child {
      border: none;
    }

    .main {
      display: flex;

      image {
        width: 140rpx;
        height: 140rpx;
        flex-shrink: 0;
      }

      .info {
        flex: 1;
        margin-left: 20rpx;

        .name {
          display: flex;
          justify-content: space-between;

          .left {
            font-weight: 500;
          }

          .right {
            margin-left: 30rpx;
            color: $sec-font;
          }
        }

        .tags {
          display: flex;
          flex-wrap: wrap;

          .it {
            height: 42rpx;
            padding: 0 16rpx;
            background: #f4f5f9;
            border-radius: 8rpx;
            font-size: 24rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 12rpx;
            margin-right: 8rpx;

            &:last-child {
              margin-right: 0;
            }
          }
        }
      }
    }

    .images {
      display: flex;
      flex-wrap: wrap;
      margin-top: 24rpx;

      .it {
        margin-right: 30rpx;

        image {
          width: 116rpx;
          height: 116rpx;
        }

        .text {
          text-align: center;
          color: $sec-font;
          margin-top: 8rpx;
        }
      }
    }
  }

  .ctrl {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10rpx;

    text {
      color: $sec-font;
    }

    .iconfont {
      font-size: 24rpx;
      transform: rotate(-90deg);
      margin-left: 10rpx;

      &.is {
        transform: rotate(90deg);
      }
    }
  }
}

.info-container {
  padding: 30rpx;

  .row {
    display: flex;
    margin-top: 20rpx;

    &:first-child {
      margin-top: 0;
    }

    .label {
      font-size: 28rpx;
      color: $sec-font;
      margin-right: 20rpx;
      flex-shrink: 0;
    }

    .value {
      font-size: 28rpx;
    }

    .ctrl {
      font-size: 28rpx;
      color: $theme-color;
      margin-left: 20rpx;
    }
  }
}

.product-container {
  padding: 30rpx;
  margin-bottom: 30rpx;

  .row {
    display: flex;

    .label {
      font-size: 28rpx;
      color: $sec-font;
      margin-right: 20rpx;
      flex-shrink: 0;
    }

    .value {
      font-size: 28rpx;
      flex: 1;
    }
  }

  .product {
    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;
      }
    }
  }

  .bottom {
    margin-top: 20rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .left {
      font-size: 28rpx;
      font-weight: 500;
    }

    .right {
      display: flex;
      align-items: center;

      .text {
        font-size: 28rpx;
        color: $sec-font;
      }

      .price {
        font-size: 28rpx;
        color: $minor-color;
        font-weight: 500;
      }
    }
  }
}

.feedback-container {
  padding: 30rpx;

  .list {
    .item {
      display: flex;
      padding: 10rpx 0;

      .main {
        margin-left: 20rpx;

        .name {
          font-weight: 500;
          line-height: 32rpx;
        }

        .time {
          font-size: 28rpx;
          margin-top: 12rpx;
          color: $sec-font;
          line-height: 32rpx;
        }

        .content {
          font-size: 28rpx;
          margin-top: 12rpx;
          line-height: 32rpx;
        }
      }
    }
  }
}

.bottom-container {
  padding: 20rpx;
  display: flex;
  justify-content: space-between;

  .right {
    display: flex;

    ::v-deep .u-button {
      width: 160rpx;
      margin-left: 20rpx;
    }
  }
}

.feedback-dialog {
  padding: 30rpx 30rpx 0;
  .title {
    margin-bottom: 30rpx;
    text-align: center;
    font-weight: 600;
    font-size: 36rpx;
  }
  .content {
    padding-bottom: 30rpx;
    max-height: 800rpx;
    overflow-y: scroll;
  }
}
.imgs {
    display: flex;
    flex-wrap: wrap;

    .it {
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      margin-top: 30rpx;
      margin-right: 30rpx;

      &:nth-child(3n) {
        margin-right: 0;
      }

      image {
        width: 190rpx;
        height: 190rpx;
        background: #f4f4f7;
        border-radius: 20rpx;
        overflow: hidden;
      }

      .name {
        margin-top: 24rpx;
        color: $sec-font;

        text {
          color: $minor-color;
        }
      }
    }
  }
</style>