<template>
  <!-- #ifdef H5 -->
  <view>
    <Loading
    	:type="3"
    	:loadStatus="loadStatus"
    	:showText="errorText"
    />
    <zj-page-layout
      v-if="detail"
      :hasFooter="true"
      :isScroll="true"
      :refresherTriggered="refresherTriggered"
      @refresherrefresh="refresherrefresh">

      <view class="all-container">
        <view class="info-container card">
          <view class="common-title">工单信息</view>
          <view>
            <view class="row">
              <view class="label">工单编号</view>
              <view class="value">{{detail.workerOrderId}}</view>
              <view class="ctrl" @tap="$copy(detail.workerOrderId)">复制</view>
            </view>
            <view class="row">
              <view class="label">项目名称</view>
              <view class="value">{{detail.rpProjectRepairName}}</view>
            </view>
            <view class="row">
              <view class="label">下单人员</view>
              <view class="value">{{detail.workerName}} {{detail.workerMobile}}</view>
              <view class="ctrl" @tap="$callPhone(detail.workerMobile)"><text class="iconfont icon-call"></text></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.createTime}}</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 class="ctrl" @tap="$callPhone(item.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 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.remark}}</view>
            </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" mode="aspectFill"></image>
              <view class="info">
                <view class="name">
                  <view class="left">{{item.smallName}}</view>
                  <view class="right">x{{item.num}}</view>
                </view>
                <view class="tags">
                  <view class="it">{{item.brandName}}</view>
                  <view class="it">{{item.mainName}}</view>
                </view>
              </view>
            </view>
          </view>
        </view>

        <view class="product-container card mt30">
          <view class="row">
            <view class="label">申请单号</view>
            <view class="value">{{detail.orderId}}</view>
          </view>
          <view class="common-title mt30">产品信息</view>
          <view class="product">
            <view class="it" v-for="(item, index) in detail.rpMaterialOrderItems.filter(o => (o.chargeType == 'ACC' || o.chargeType == 'MCC'))" :key="index">
              <view class="name">{{item.goodsName}}<text>×{{item.num}}</text></view>
              <view class="price">¥{{item.totalAmount | priceFilter}}</view>
            </view>
            <view class="total">
              <view class="text">合计：</view>
              <view class="price">¥{{ [0, 0, 0, ...detail.rpMaterialOrderItems.filter(o => (o.chargeType == 'ACC' || o.chargeType == 'MCC')).map(val => val.totalAmount)].reduce((a, b) => (((a * 100) + (b * 100)) / 100), 0) | priceFilter }}</view>
            </view>
          </view>
          <view class="common-title mt30">服务费用</view>
          <view class="product">
            <view class="it" v-for="(item, index) in detail.rpMaterialOrderItems.filter(o => o.chargeType == 'SERV')" :key="index">
              <view class="name">{{item.goodsName}}</view>
              <view class="price">¥{{item.totalAmount | priceFilter}}</view>
            </view>
            <view class="total">
              <view class="text">合计：</view>
              <view class="price">¥{{ [0, 0, 0, ...detail.rpMaterialOrderItems.filter(o => o.chargeType == 'SERV').map(val => val.totalAmount)].reduce((a, b) => (((a * 100) + (b * 100)) / 100), 0) | priceFilter }}</view>
            </view>
          </view>
          <view class="bottom">
            <view class="left">订单总金额</view>
            <view class="right">
              <view class="text">合计：</view>
              <view class="price">¥{{detail.totalAmount | priceFilter}}</view>
            </view>
          </view>
          <view class="row mt30">
            <view class="label">操作人员</view>
            <view class="value">{{detail.createBy}}</view>
          </view>
          <view class="row mt20">
            <view class="label">操作时间</view>
            <view class="value">{{detail.createTime}}</view>
          </view>
          <view class="row mt20">
            <view class="label">申请备注</view>
            <view class="value">{{detail.remark}}</view>
          </view>
        </view>

        <view class="info-container card mt30" v-if="isExamine">
          <view class="row">
            <view class="label">审批结果</view>
            <view class="value">{{detail.examineStatus | statusFilter}}</view>
          </view>
          <view class="row">
            <view class="label">审批人员</view>
            <view class="value">{{detail.examineName || ''}}</view>
          </view>
          <view class="row">
            <view class="label">审批时间</view>
            <view class="value">{{detail.examineTime || ''}}</view>
          </view>
          <view class="row" v-if="detail.examineStatus == 'OK' || detail.examineStatus == 'FAIL'">
            <view class="label">审批备注</view>
            <view class="value">{{detail.examineRemark || ''}}</view>
          </view>
          <view class="remark" v-if="detail.examineStatus == 'WAIT'">
            <view class="label"><text>*</text>备注</view>
            <u--textarea v-model="remarkVal" placeholder="请输入内容" ></u--textarea>
          </view>
        </view>
      </view>

      <template slot="footer">
        <view class="footer-btn-group-end">
          <u-button type="error" text="取消申请" @click="cancelOrder" v-if="detail.examineStatus == 'FAIL'"></u-button>
          <block v-if="isExamine && detail.examineStatus == 'WAIT'">
            <u-button type="error" text="审核驳回" @click="examine('FAIL')"></u-button>
            <u-button type="primary" text="审核通过" @click="examine('OK')"></u-button>
          </block>
        </view>
      </template>
    </zj-page-layout>
  </view>
  <!-- #endif -->

  <!-- #ifndef H5 -->
  <web-view :src="webViewHref(`/packageHome/pages/maintenance/applyDetail`, pam, crossPagePam)" @message="crossPage.$listener"></web-view>
  <!-- #endif -->
</template>

<script>
  // #ifdef H5
  export default {
    filters: {
      statusFilter(val) {
        const MAP = {
          WAIT: '待审批',
          OK: '审批通过',
          FAIL: '审批驳回',
          NO: '已取消',
          PAID: '已现场支付',
        }
        return MAP[val];
      }
    },

    data() {
      return {
        id: null,
        refresherTriggered: false,
        loadStatus: 0,
				errorText: '',
        detail: null,
        isExamine: false,
        remarkVal: '',
      }
    },

    onLoad({id}) {
      this.id = id;
      this.getDetail();
    },

    methods: {
      getDetail() {
        this.$api.post('/engin/material/detail', {
          id: this.id
        }).then(res => {
          this.detail = res.data;
          this.getIsExamine();
          this.loadStatus = 0;
        }).catch(res => {
      		this.errorText = res.message;
      		this.loadStatus = 2;
      	}).finally(res => {
      		this.refresherTriggered = false;
      	})
      },

      // 下拉刷新
      refresherrefresh() {
        this.refresherTriggered = true;
        this.getDetail();
      },

      getIsExamine() {
        this.$api.post('/engin/material/isBy', {
          orderBaserId: this.detail.workerOrderId
        }).then(res => {
          this.isExamine = res.data;
        })
      },

      // 取消订单
      cancelOrder() {
        this.$modal({
          content: '确认取消订单吗？'
        }).then(() => {
          this.$api.post('/engin/material/cancelOrder', {
            id: this.id
          }).then(res => {
            this.$successToast();
            this.getDetail();
            this.crossPage.$emit('refreshMaintenanceList');
          })
        }).catch(() => {})
      },

      examine(type) {
        if(!this.remarkVal) return this.$toast('请输入审核备注');

        this.$api.post('/engin/material/examine', {
          id: this.id,
          examineStatus: type,
          examineRemark: this.remarkVal,
        }).then(res => {
          this.$successToast();
          this.getDetail();
          this.crossPage.$emit('refreshMaintenanceList');
        })
      },
    },
  }

  // #endif
  // #ifndef H5
  export default {
    data() {
      return {
        pam: {},
      }
    },
    onLoad(pam) {
      this.pam = pam;
    }
  }
  // #endif
</script>

<style lang="scss" scoped>
.card {
  @include zj-card;
}

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

.all-container {
  padding: 20rpx;
}

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

.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;
    }
  }
  .remark {
    margin-top: 20rpx;
    .label {
      font-size: 28rpx;
      margin-bottom: 12rpx;
      text {
        color: red;
      }
    }
  }
}

.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;
      }
    }
  }
}
</style>
