<template>
  <Page name="order-detail" flank>
    <template #content>
      <view class="card">
        <view class="card__header">
          <view class="title">
            <view class="order-no">
              <field-copy :value="item.code" v-if="item.code">{{ item.code }} </field-copy>
            </view>
            <render-dict class="status" :style="{ color: colorMap[item.status] }" dict="FREIGHT_ORDER_STATUS" :value="item.status"></render-dict>
          </view>
        </view>
        <view class="card__item">
          {{ item.loadTime }}装货
          <text v-if="item.waitHandleExceptionNumber" class="card__item--warning">{{ item.waitHandleExceptionNumber || '0' }}个异常待处理</text>
        </view>
        <view class="card__steps">
          <view class="step">
            <view class="step-item">
              <view class="icon-waypoint icon-start">装</view>
              <view style="flex: 1">
                <view class="city">{{ item.waypoints[0].cityName }}-{{ item.waypoints[0].areaName }}</view>
                <view class="address">{{ item.waypoints[0].address }}</view>
                <view v-if="item.waypoints[0].contactName || item.waypoints[0].contactMobile" class="address">
                  <text>{{ item.waypoints[0].contactName ? item.waypoints[0].contactName : '' }}</text>
                  <text>{{ item.waypoints[0].contactMobile ? item.waypoints[0].contactMobile : '' }}</text>
                </view>
                <view class="address_action">
                  <view> {{ item.confirmDepartureTime ? item.confirmDepartureTime + '发车' : '' }} </view>
                  <view v-if="['TRANSFER'].includes(item.status) && $permission('/freightOrder/depart')" @tap="toStartCar">
                    <u--text text="修改发车时间" suffixIcon="arrow-right"></u--text>
                  </view>
                </view>
              </view>
            </view>
            <view class="step-item">
              <view class="icon-waypoint icon-end">卸</view>
              <view style="flex: 1">
                <view class="city">{{ item.waypoints[1].cityName }}-{{ item.waypoints[1].areaName }}</view>
                <view class="address">{{ item.waypoints[1].address }}</view>
                <view v-if="item.waypoints[1].contactName || item.waypoints[1].contactMobile" class="address">
                  <text>{{ item.waypoints[1].contactName ? item.waypoints[1].contactName : '' }}</text>
                  <text>{{ item.waypoints[1].contactMobile ? item.waypoints[1].contactMobile : '' }}</text>
                </view>
                <view class="address_action">
                  <view> {{ item.confirmArrivalTime ? item.confirmArrivalTime + '到车' : '' }} </view>
                  <view
                    v-if="['COMPLETED'].includes(item.status) && !['ALREADY_SETTLEMENT'].includes(item.paymentSettlementStatus) && $permission('/freightOrder/arrive')"
                    @tap="toArrivalCar"
                  >
                    <u--text text="修改到车时间" suffixIcon="arrow-right"></u--text>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="card">
        <view class="card__item">
          <view class="card__item_field">所属项目</view>
          <view class="card__item_content">{{ item.projectName }}</view>
        </view>
        <view class="card__item">
          <view class="card__item_field">内部单号</view>
          <view class="card__item_content">
            <view class="text">
              <field-copy :value="item.customerOrderCode" v-if="item.customerOrderCode">{{ item.customerOrderCode }}</field-copy>
            </view>
            <view class="action" @tap="(customerOrderCode = ''), (popShow = true)"> <u--text text="修改" suffixIcon="arrow-right"></u--text> </view>
          </view>
        </view>
        <view class="card__item">
          <view class="card__item_field">货物信息</view>
          <view class="card__item_content">
            <view class="text">
              <text v-if="!!item.goodsName">{{ item.goodsName }}</text>
              <text v-if="!!item.goodsPiece">{{ item.goodsPiece }}件</text>
              <text v-if="!!item.goodsWeight">{{ item.goodsWeight }}吨</text>
              <text v-if="!!item.goodsVolume">{{ item.goodsVolume }}方</text>
            </view>
            <view v-if="$permission('/freightOrder/modifyGoods') && !['ALREADY_SETTLEMENT'].includes(item.paymentSettlementStatus)" class="action" @tap="toChangeGoods">
              <u--text text="修改" suffixIcon="arrow-right"></u--text>
            </view>
          </view>
        </view>
        <view class="card__item">
          <view class="card__item_field">订单备注</view>
          <view class="card__item_content">
            <view class="text"> {{ item.remark ? item.remark : '' }} </view>
            <view v-if="$permission('/freightOrder/modifyGoods')" class="action" @tap="modifyRemark">
              <u--text text="修改" suffixIcon="arrow-right"></u--text>
            </view>
          </view>
        </view>
        <view class="card__item">
          <view class="card__item_field">回单照片</view>
          <view class="card__item_content">
            <z-upload v-if="item.receiptAttachment" v-model="item.receiptAttachment" :limit="20" readonly disabled></z-upload>
          </view>
          <view v-if="['COMPLETED'].includes(item.status) && $permission('/freightOrder/modifyReceiptAttachment')" class="action" @tap="toUploadReceipt">
            <u--text text="修改" suffixIcon="arrow-right"></u--text>
          </view>
        </view>
      </view>
      <view class="card">
        <view class="card__header">
          <view class="label"> 司机车辆 </view>
          <view
            v-if="
              $permission('/freightOrder/assignVehicle') &&
              !['ALREADY_SETTLEMENT'].includes(item.paymentSettlementStatus) &&
              ['WAIT_CONFIRM', 'WAIT_ACCEPT', 'WAIT_DEPART', 'TRANSFER', 'COMPLETED'].includes(item.status)
            "
            class="action"
            @tap="toAgainAssign"
          >
            <u--text text="重新指派" suffixIcon="arrow-right"></u--text>
          </view>
        </view>
        <view class="card__item">
          <view class="card__item_field">司机</view>
          <view class="card__item_content">
            <view>
              <text v-if="!!item.driverName">{{ item.driverName }}</text>
              <text v-if="!!item.driverMobile">{{ item.driverMobile }}</text>
              <text v-if="item.driverMobile && item.driverCertifiedStatus === 'NOT_CERTIFIED'" class="card__item--warning">未认证</text>
              <text v-if="item.driverMobile && item.driverCertifiedStatus === 'CERTIFYING'" class="card__item--paying">认证中</text>
            </view>
          </view>
        </view>
        <view class="card__item">
          <view class="card__item_field">收款人</view>
          <view class="card__item_content">
            <view class="text">
              <text v-if="item.payee">{{ item.payee ? item.payee : '' }}</text>
              <text>
                {{ item.payeeMobile ? item.payeeMobile : '' }}
                <text v-if="item.payeeMobile && item.bindBankCardNoFlag === false" class="card__item--warning">未绑卡</text>
              </text>
            </view>
            <view
              v-if="
                $permission('/freightOrder/modifyPayee') &&
                !['ALREADY_SETTLEMENT'].includes(item.paymentSettlementStatus) &&
                ['WAIT_CONFIRM', 'WAIT_ACCEPT', 'WAIT_DEPART', 'TRANSFER', 'COMPLETED'].includes(item.status)
              "
              class="action"
              @tap="changePayee"
            >
              <u--text text="更换收款人" suffixIcon="arrow-right"></u--text>
            </view>
          </view>
        </view>
        <payee :value="payeeModel"></payee>
        <view class="card__item">
          <view class="card__item_field">车型</view>
          <view class="card__item_content">
            <view>
              <text>{{ item.specification ? item.specification : '' }}</text>
              <render-dict dict="VEHICLE_COMPARTMENT_TYPE" :value="item.vanType"></render-dict>
            </view>
          </view>
        </view>
        <view class="card__item">
          <view class="card__item_field">车牌号</view>
          <view class="card__item_content">
            <text>
              {{ item.vehicleLicenseNum ? item.vehicleLicenseNum : '' }}
              <text v-if="item.vehicleLicenseNum && item.vehicleCertifiedStatus === 'NOT_CERTIFIED'" class="card__item--warning">未认证</text>
              <text v-if="item.vehicleLicenseNum && item.vehicleCertifiedStatus === 'CERTIFYING'" class="card__item--paying">认证中</text>
            </text>
          </view>
        </view>
        <view class="card__item">
          <view class="card__item_field">车挂号</view>
          <view class="card__item_content">
            <text>
              {{ item.trailerLicenseNum ? item.trailerLicenseNum : '' }}
              <text v-if="item.extraTrailerFlag" class="card__item--warning">多车挂</text>
              <text v-if="item.missTrailerFlag" class="card__item--warning">缺车挂</text>
              <text v-if="item.trailerLicenseNum && !item.extraTrailerFlag && item.trailerVehicleCertifiedStatus === 'NOT_CERTIFIED'" class="card__item--warning">未认证</text>
              <text v-if="item.trailerLicenseNum && !item.extraTrailerFlag && item.trailerVehicleCertifiedStatus === 'CERTIFYING'" class="card__item--paying">认证中</text>
            </text>
          </view>
        </view>
      </view>
      <view v-if="item.waitHandleExceptionNumber" class="card">
        <view class="card__header" style="margin-bottom: 0; padding-bottom: 0; border-bottom: none">
          <view class="label"> 风控异常 </view>
          <view class="action" @tap="toRisk">
            <view class="color-red">
              <u--text :text="item.waitHandleExceptionNumber + '个待处理异常'" suffixIcon="arrow-right"></u--text>
            </view>
          </view>
        </view>
      </view>
      <view class="card">
        <view class="card__header">
          <view class="label"> 订单费用 </view>
          <view
            v-if="
              $permission('/freightOrder/adjustAmount') &&
              !['ALREADY_SETTLEMENT'].includes(item.paymentSettlementStatus) &&
              ['WAIT_CONFIRM', 'WAIT_ACCEPT', 'WAIT_DEPART', 'TRANSFER', 'COMPLETED'].includes(item.status)
            "
            class="action"
            @tap="toChangeFee"
          >
            <u--text text="更改运费" suffixIcon="arrow-right"></u--text>
          </view>
        </view>
        <view class="card__item" v-if="!!item.paidAmount">
          <view class="card__item_field">应付司机运费</view>
          <view class="card__item_content">￥{{ item.paidAmount }}</view>
        </view>
        <view class="card__item" v-if="!!item.securityServiceAmount">
          <view class="card__item_field">运营服务费</view>
          <view class="card__item_content">￥{{ item.securityServiceAmount }}</view>
        </view>
        <view class="card__item">
          <view class="card__item_field">综合服务费</view>
          <view class="card__item_content">￥{{ item.serviceAmount ? item.serviceAmount : '' }}</view>
        </view>
        <view class="count-line">
          <view class="field">订单总额</view>
          <view class="number">￥{{ item.totalAmount ? item.totalAmount : '' }}</view>
        </view>
      </view>
      <view class="card">
        <view class="card__header">
          <view class="label"> 司机运费 </view>
        </view>
        <view class="card__item" v-for="(it, i) in amountList" :key="i">
          <view class="card__item_field">
            <render-dict dict="ONLINE_FREIGHT_ORDER_FEE_TYPE" :value="it.type"></render-dict>
          </view>
          <view class="card__item_content">
            ￥{{ it.amount || 0 }}
            <span class="fee-service" v-if="item.driverSecurityServiceAmount">
              <span v-if="autoComputedArrival && it.type === 'OUT_INVITE_ARRIVAL'" class="color-red">已扣运营服务费{{ item.driverSecurityServiceAmount }}</span>
              <span v-if="!autoComputedArrival && it.type === 'OUT_INVITE_FINAL'" class="color-red">已扣运营服务费{{ item.driverSecurityServiceAmount }}</span>
            </span>
          </view>
          <view v-if="it.payStatus === 'PAY_FAILED'" class="card__item--warning">支付失败:{{ it.remark }}</view>
          <view v-if="it.payStatus === 'PAYING'" class="card__item--paying">支付中</view>
          <view v-if="it.payStatus === 'PAY_SUCCESS'" class="card__item--success">已支付</view>
        </view>
        <view class="count-line">
          <view class="field">实付司机运费</view>
          <view class="number">￥{{ item.freightAmount }}</view>
        </view>
      </view>
      <view class="card">
        <u-steps current="0" direction="column" dot>
          <u-steps-item v-for="(it, i) in item.operateRecords" :key="i" :title="it.type" :desc="it.operateTime"> </u-steps-item>
        </u-steps>
      </view>
    </template>
    <u-popup :show="popShow" type="center" @close="popShow = false" closeable>
      <view class="modify-customer">
        <view class="title">修改内部单号</view>
        <u-input v-model="customerOrderCode"></u-input>
        <view class="but">
          <u-button type="primary" @click="modifyCustomerFun">确定</u-button>
        </view>
      </view>
    </u-popup>
  </Page>
</template>
<script>
import FieldCopy from '../../components/field/field-copy.vue';
import Payee from '../../components/card/payee.vue';
import USteps from '../../uni_modules/uview-ui/components/u-steps/u-steps.vue';
import UStepsItem from '../../uni_modules/uview-ui/components/u-steps-item/u-steps-item.vue';
import ZUpload from '../../components/zee/z-upload.vue';
import UPopup from '../../uni_modules/uview-ui/components/u-popup/u-popup.vue';
import UInput from '../../uni_modules/uview-ui/components/u--input/u--input.vue';
import UButton from '../../uni_modules/uview-ui/components/u-button/u-button.vue';
import page from '../../mixins/page';

export default {
  name: 'order-detail',
  mixins: [page],
  components: { UButton, UInput, UPopup, ZUpload, UStepsItem, USteps, Payee, FieldCopy },
  data() {
    return {
      popShow: false,
      customerOrderCode: '',
      colorMap: {
        WAIT_CONFIRM: '#F52723',
        WAIT_ACCEPT: '#FF9339',
        WAIT_DEPART: '#666666',
        TRANSFER: '#2673FB',
        COMPLETED: '#00B87A',
        CANCEL: '#999999',
      },
      item: {
        code: '',
        status: 'TRANSFER',
        projectName: '',
        loadTime: '',
        customerOrderCode: '',
        remark: '',
        receiptAttachment: '',
        waypoints: [
          { cityName: '', areaName: '', address: '' },
          { cityName: '', areaName: '', address: '' },
        ],
      },
      currentFreight: {},
    };
  },
  computed: {
    amountList() {
      let list = this.item.orderFeePayPlanList;
      if (!list || list.length === 0) return [];
      const { prePayFlag, arrivalPayFlag, oilPayFlag } = this.item;
      let oilPay = list.filter(i => i.type === 'OIL_COST')[0];
      let prePay = list.filter(i => i.type === 'OUT_INVITE_PRE')[0];
      let arrivalPay = list.filter(i => i.type === 'OUT_INVITE_ARRIVAL')[0];
      let finalPay = list.filter(i => i.type === 'OUT_INVITE_FINAL')[0];
      let res = [];
      if (oilPayFlag || (oilPay.amount && oilPay.amount > 0)) {
        res.push(oilPay);
      }
      if (prePayFlag || (prePay.amount && prePay.amount > 0)) {
        res.push(prePay);
      }
      if (arrivalPayFlag || (arrivalPay.amount && arrivalPay.amount > 0) || (this.autoComputedArrival && this.item.driverSecurityServiceAmount)) {
        res.push(arrivalPay);
      }
      res.push(finalPay);
      return res;
    },
    payeeModel() {
      return this.item.payee
        ? {
            dueBank: this.item.payee,
            dueBankCardNo: this.item.dueBankCardNo,
            openingBank: this.item.openingBank,
          }
        : {};
    },
    autoComputedArrival() {
      // 自动计算货到
      return 'OUT_INVITE_ARRIVAL' === this.currentFreight?.autoComputeFeeType;
    },
  },
  onLoad(options) {
    if (options.code) {
      this.initData(options.code);
    }
  },
  methods: {
    initData(code) {
      uni.$u.api.freightOrder.currentFreight({}).then(en => {
        this.currentFreight = en.result || {};
      });
      uni.$u.api.freightOrder.getDetail({ code }).then(res => {
        this.item = res.result || {};
      });
    },
    toStartCar() {
      uni.navigateTo({
        url: '/pages/order/start-car?code=' + this.item.code,
        events: {
          refreshData: () => {
            this.initData(this.item.code);
          },
        },
      });
    },
    toArrivalCar() {
      uni.navigateTo({
        url: '/pages/order/arrival-car?code=' + this.item.code,
        events: {
          refreshData: () => {
            this.initData(this.item.code);
          },
        },
      });
    },
    toChangeFee() {
      uni.navigateTo({
        url: '/pages/order/change-fee?code=' + this.item.code,
        events: {
          refreshData: () => {
            this.initData(this.item.code);
          },
        },
      });
    },
    toAgainAssign() {
      uni.navigateTo({
        url: '/pages/order/again-assign?code=' + this.item.code,
        events: {
          refreshData: () => {
            this.initData(this.item.code);
          },
        },
      });
    },
    toUploadReceipt() {
      uni.navigateTo({
        url: '/pages/order/upload-receipt?code=' + this.item.code,
        events: {
          refreshData: () => {
            this.initData(this.item.code);
          },
        },
      });
    },
    toChangeGoods() {
      uni.navigateTo({
        url: '/pages/order/change-goods?code=' + this.item.code,
        events: {
          refreshData: () => {
            this.initData(this.item.code);
          },
        },
      });
    },
    changePayee() {
      uni.$once('select-payee', obj => {
        uni.$u.api.freightOrder.modifyPayee({ payeeId: obj.driverId, code: this.item.code }).then(res => {
          if (res.success) {
            this.initData(this.item.code);
          }
        });
      });
      uni.navigateTo({
        url: '/pages/global/search-payee',
      });
    },
    toRisk() {
      uni.navigateTo({
        url: '/pages/order/risk-abnormal?code=' + this.item.code,
      });
    },
    modifyCustomerFun() {
      uni.$u.api.freightOrder.modifyCustomerOrderCode({ customerOrderCode: this.customerOrderCode, code: this.item.code }).then(res => {
        if (res.success) {
          this.popShow = false;
          this.initData(this.item.code);
        }
      });
    },
    modifyRemark() {
      uni.$once('select-remark', remark => {
        this.modifyRemarkHttp(remark);
      });
      uni.navigateTo({
        url: `/pages/order/select-remark?remark=${this.item.remark}`,
      });
    },
    modifyRemarkHttp(remark) {
      uni.$u.api.freightOrder
        .maModifyRemark({
          code: this.item.code,
          remark: remark,
        })
        .then(r => {
          this.item.remark = remark || '';
        });
    },
  },
};
</script>
<style scoped lang="scss">
.page-order-detail {
  .modify-customer {
    padding: $padding-md;
    .title {
      font-weight: 400;
      font-size: 32rpx;
      color: #2b2a27;
      text-align: left;
      font-style: normal;
    }
    .but {
      margin-top: $padding-md;
    }
  }
  .card {
    background-color: $color-white;
    color: $color-text;
    padding: $padding-sm;
    margin-bottom: $padding-sm;
    border-radius: $radius-md;
    box-shadow: $shadow-normal;
    font-size: $font-md;
    &__header {
      display: flex;
      align-items: center;
      border-bottom: 1px solid $color-border;
      padding-bottom: $padding-sm;
      margin-bottom: $padding-sm;
      justify-content: space-between;
      .title {
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        .order-no {
          display: flex;
          align-items: center;
        }
        .status {
          font-weight: bold;
        }
      }
    }
    .count-line {
      padding-top: $padding-sm;
      margin-top: $padding-sm;
      border-top: 1px solid $color-border;
      display: flex;
      justify-content: space-between;
      .field {
        font-weight: 400;
        font-size: 28upx;
        color: #999999;
        text-align: left;
      }
      .number {
        font-weight: 600;
        font-size: 28upx;
        color: #2b2a27;
        text-align: center;
        font-style: normal;
      }
    }
    &__item {
      display: flex;
      font-size: 26upx;
      color: #999999;
      align-content: baseline;
      &--warning {
        height: 28rpx;
        color: #f52723;
        font-size: 20rpx;
        margin-left: 20upx;
        padding-left: 10upx;
        padding-right: 10upx;
        border-radius: 8upx;
        border: 2rpx solid #f52723;
      }
      &--paying {
        height: 28rpx;
        color: #ff9339;
        font-size: 20rpx;
        margin-left: 20upx;
        padding-left: 10upx;
        padding-right: 10upx;
        border-radius: 8upx;
        border: 2rpx solid #ff9339;
      }
      &--success {
        height: 28rpx;
        color: #00b87a;
        font-size: 20rpx;
        margin-left: 20upx;
        padding-left: 10upx;
        padding-right: 10upx;
        border-radius: 8upx;
        border: 2rpx solid #00b87a;
      }
      &_field {
        font-weight: 400;
        font-size: 28upx;
        color: #999999;
        width: 170upx;
        text-align: left;
      }
      &_content {
        flex: 1;
        font-weight: 400;
        font-size: 28upx;
        color: #2b2a27;
        text-align: left;
        font-style: normal;
        display: flex;
        justify-content: space-between;
        overflow-wrap: anywhere;
        &_text {
          font-weight: 400;
          font-size: 28upx;
          text-align: left;
          font-style: normal;
        }
        &_action {
          font-weight: 400;
          font-size: 28upx;
          color: #2673fb;
          text-align: right;
          font-style: normal;
        }
        text + text {
          margin-left: 10rpx;
        }
        .fee-service {
          font-size: 26rpx;
        }
      }
    }
    .card__item + .card__item {
      margin-top: $padding-sm;
    }
    &__steps {
      margin-top: $padding-md;
      .step {
        &-item {
          display: flex;
          align-content: space-around;
          font-size: $font-md;
          .icon-waypoint {
            font-size: $font-sm;
            margin-right: $padding-sm;
            height: $padding-md * 1.2;
            width: $padding-md * 1.2;
            min-width: $padding-md * 1.2;
          }
          .city {
            font-weight: 500;
            font-size: 32upx;
            color: #2b2a27;
            text-align: left;
            font-style: normal;
          }
          .address {
            margin-top: $padding-xs;
            font-weight: 400;
            font-size: 24upx;
            color: #999999;
            text-align: left;
            font-style: normal;
            text + text {
              margin-left: 10rpx;
            }
          }
          .address_action {
            margin-top: $padding-xs;
            font-weight: 400;
            font-size: 24upx;
            color: #2673fb;
            text-align: left;
            font-style: normal;
            display: flex;
            justify-content: space-between;
            .u-icon {
              display: inline-block !important;
            }
          }
          &:not(:first-child) {
            margin-top: $padding-md;
          }
        }
      }
    }
    &_label {
    }
    .label {
      font-weight: 500;
      font-size: 32rpx;
      color: #2b2a27;
    }
    .action {
      font-size: 26rpx;
      color: #007aff;
    }
  }
  .aux-color {
    color: #999999;
  }
  .main-color {
    color: #2b2a27;
  }
}
</style>
