<template>
  <view class="card-order">
    <view class="card-order__header">
      <view class="title">
        <view class="order-no">
          <field-copy :value="item.code" v-if="item.code">{{ item.code }} </field-copy>
          <view class="image" @click.stop="qrShow">
            <image style="height: 30upx; width: 30upx" src="/static/qr.png"></image>
          </view>
        </view>
        <render-dict v-if="item.status" class="status" :style="{ color: colorMap[item.status] }" dict="FREIGHT_ORDER_STATUS" :value="item.status"></render-dict>
      </view>
    </view>
    <view class="card-order__item"> {{ item.projectName }} | {{ item.loadTime }}装货 </view>
    <view class="card-order__steps">
      <view class="step">
        <view class="step-item">
          <view class="icon-waypoint icon-start">装</view>
          <view>
            <view class="city">{{ item.startCityName }}-{{ item.startAreaName }}</view>
            <view class="address">{{ item.startAddress }}</view>
          </view>
        </view>
        <view class="step-item">
          <view class="icon-waypoint icon-end">卸</view>
          <view>
            <view class="city">{{ item.endCityName }}-{{ item.endAreaName }}</view>
            <view class="address">{{ item.endAddress }}</view>
          </view>
        </view>
      </view>
    </view>
    <view class="card-order__item">
      <image src="/static/driver.png" />
      {{ item.driverName ? item.driverName.substring(0, 4) : '' }} {{ item.driverMobile ? item.driverMobile : '' }} | {{ item.vehicleLicenseNum ? item.vehicleLicenseNum : '' }}
      {{ item.trailerLicenseNum ? item.trailerLicenseNum : '' }}
    </view>
    <view class="card-order__tags">
      <view class="tag--warning" v-if="item.driverCertifiedStatus === 'NOT_CERTIFIED'">司机未认证</view>
      <view class="tag--paying" v-if="item.driverCertifiedStatus === 'CERTIFYING'">司机认证中</view>
      <view class="tag--warning" v-if="item.payeeMobile && item.bindBankCardNoFlag === false">收款人未绑卡</view>
      <view class="tag--warning" v-if="item.vehicleLicenseNum && item.vehicleCertifiedStatus === 'NOT_CERTIFIED' && !item.trailerLicenseNum">车辆未认证</view>
      <view class="tag--paying" v-if="item.vehicleLicenseNum && item.vehicleCertifiedStatus === 'CERTIFYING' && !item.trailerLicenseNum">车辆认证中</view>
      <view class="tag--warning" v-if="item.vehicleLicenseNum && item.vehicleCertifiedStatus === 'NOT_CERTIFIED' && item.trailerLicenseNum">车头未认证</view>
      <view class="tag--paying" v-if="item.vehicleLicenseNum && item.vehicleCertifiedStatus === 'CERTIFYING' && item.trailerLicenseNum">车头认证中</view>
      <view class="tag--warning" v-if="item.trailerLicenseNum && !item.extraTrailerFlag && item.trailerVehicleCertifiedStatus === 'NOT_CERTIFIED'">车挂未认证</view>
      <view class="tag--paying" v-if="item.trailerLicenseNum && !item.extraTrailerFlag && item.trailerVehicleCertifiedStatus === 'CERTIFYING'">车挂认证中</view>
      <text class="tag--warning" v-if="item.extraTrailerFlag">多车挂</text>
      <text class="tag--warning" v-if="item.missTrailerFlag">缺车挂</text>
    </view>
    <view class="card-order__footer">
      <view class="amount">
        运费<text class="red">￥{{ item.freightAmount }}</text>
      </view>
      <view class="action">
        <zb-tooltip placement="bottom" :visible="visible" @update:visible="e => (visible = e)">
          <template #content>
            <view class="more-action">
              <view v-if="$permission('/freightOrder/add')" @tap="againOne"> 再来一单 </view>
              <view v-if="$permission('/freightOrder/delete') && ['CANCEL'].includes(item.status)" @tap="deleteOrder"> 删除订单 </view>
              <view v-if="$permission('/freightOrder/cancel') && ['WAIT_CONFIRM', 'WAIT_ACCEPT', 'WAIT_DEPART'].includes(item.status)" @tap="cancelOrder"> 取消订单 </view>
            </view>
          </template>
          <view class="button">
            更多操作
            <view class="sx-img">
              <image class="sx-image" :src="formatImagePath('down')"></image>
            </view>
          </view>
        </zb-tooltip>
        <view v-if="['WAIT_ACCEPT', 'WAIT_DEPART'].includes(item.status) && $permission('/freightOrder/depart')" class="button primary" @click.stop="start">确认发车</view>
        <view v-if="['TRANSFER'].includes(item.status) && $permission('/freightOrder/arrive')" class="button primary" @click.stop="arrival">确认到达</view>
        <view v-if="item.status === 'COMPLETED' && !item.receiptAttachment && $permission('/freightOrder/modifyReceiptAttachment')" class="button primary" @click.stop="uploadReceipt"
          >上传回单</view
        >
      </view>
    </view>
  </view>
</template>
<script>
import ZbTooltip from '../../uni_modules/zb-tooltip/components/zb-tooltip/zb-tooltip.vue';
import FieldCopy from '../../components/field/field-copy.vue';
import page from '../../mixins/page';

export default {
  name: 'order-card',
  mixins: [page],
  components: { ZbTooltip, FieldCopy },
  props: {
    item: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      visible: false,
      colorMap: {
        WAIT_CONFIRM: '#F52723',
        WAIT_ACCEPT: '#FF9339',
        WAIT_DEPART: '#666666',
        TRANSFER: '#2673FB',
        COMPLETED: '#00B87A',
        CANCEL: '#999999',
      },
    };
  },
  methods: {
    againOne() {
      this.visible = false;
      this.$emit('more', this.item.code);
    },
    cancelOrder() {
      this.visible = false;
      this.$emit('cancel', this.item.code);
    },
    deleteOrder() {
      this.visible = false;
      this.$emit('delete', this.item.code);
    },
    start() {
      this.$emit('start', this.item.code);
    },
    arrival() {
      this.$emit('arrival', this.item.code);
    },
    uploadReceipt() {
      this.$emit('uploadReceipt', this.item.code);
    },
    qrShow() {
      this.$emit('qrShow', this.item.code, this.item);
    },
  },
};
</script>

<style scoped lang="scss">
.card-order {
  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;
    .title {
      width: 100%;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      .order-no {
        display: flex;
        align-items: center;
        .image {
          width: 30upx;
          height: 30upx;
          margin-left: 20upx;
        }
      }
      .status {
        color: $color-primary;
        font-weight: bold;
      }
    }
    .title-notice {
      display: flex;
      align-items: center;
      color: $color-red;
      .u-icon {
        margin-right: $padding-xs;
        font-size: $font-lg;
      }
    }
    .tip {
      font-size: $font-md;
      color: $color-red;
    }
  }
  &__item {
    margin-top: $padding-xs;
    display: flex;
    font-size: 26upx;
    color: #999999;
    align-items: baseline;
    image {
      margin-right: $padding-xs;
      width: 24upx;
      height: 24upx;
    }
  }
  &__tags {
    margin-top: $padding-xs;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    .tag {
      margin-right: $padding-xs;
      margin-bottom: $padding-xs;
      border-radius: 4upx;
      padding: 4upx 8upx;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: $color-primary;
      font-size: $font-sm;
      background-color: rgba($color-primary, 0.1);
      &--warning {
        margin-right: $padding-xs;
        color: #f52723;
        font-size: 20rpx;
        padding-left: 10rpx;
        padding-right: 10rpx;
        border-radius: 8rpx;
        border: 2rpx solid #f52723;
      }
      &--paying {
        margin-right: $padding-xs;
        color: #ff9339;
        font-size: 20rpx;
        padding-left: 10upx;
        padding-right: 10upx;
        border-radius: 8upx;
        border: 2rpx solid #ff9339;
      }
    }
  }
  &__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;
          line-height: 32upx;
          text-align: left;
          font-style: normal;
        }
        .address {
          margin-top: $padding-xs;
          font-weight: 400;
          font-size: 24upx;
          color: #999999;
          line-height: 33upx;
          text-align: left;
          font-style: normal;
        }
        &:not(:first-child) {
          margin-top: $padding-md;
        }
      }
    }
  }
  &__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .amount {
      font-size: 26upx;
      .red {
        color: #ff4f3b;
      }
    }
    .action {
      flex: 1;
      display: flex;
      justify-content: flex-end;
      .more-action {
        text-align: center;
        color: #666666;
        box-shadow: 0px 2px 8px 2px rgba(0, 0, 0, 0.22);
        view {
          padding: $padding-sm;
        }
        view + view {
          border-top: 1px solid #eaeaea;
        }
      }
      .button {
        width: 164rpx;
        height: 56rpx;
        background: #ffffff;
        border-radius: 12rpx;
        border: 2rpx solid #e2e2e3;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: $padding-sm;
        .sx-img {
          height: 12upx;
          width: 14upx;
          position: relative;
          margin-left: 12upx;
          .sx-image {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
          }
        }
      }
      .primary {
        border: 2rpx solid $color-primary !important;
        background: $color-primary;
        color: #ffffff;
      }
    }
    margin-top: $padding-base;
  }
}
</style>