<template>
  <Page name="good-source-detail" flank>
    <template #content>
      <card :item="form" :onlyShow="true"></card>
      <view class="card">
        <view class="card__item">
          <view class="card__item_field">货物类型</view>
          <view class="card__item_content">{{ form.goodsName || '' }}</view>
        </view>
        <view class="card__item">
          <view class="card__item_field">发货单位</view>
          <view class="card__item_content">{{ form.dispatchUnit || '' }}</view>
        </view>
        <view class="card__item">
          <view class="card__item_field">合同号</view>
          <view class="card__item_content">{{ form.customerContractNo || '' }}</view>
        </view>
        <view class="card__item">
          <view class="card__item_field">运输班次号</view>
          <view class="card__item_content">{{ form.transportShiftNo || '' }}</view>
        </view>
        <template v-if="form.priceType === 'TON'">
          <view class="card__item">
            <view class="card__item_field">货物总量</view>
            <view class="card__item_content">{{ form.goodsWeight || '' }}吨</view>
          </view>
          <view class="card__item">
            <view class="card__item_field">货物剩余</view>
            <view class="card__item_content">
              <text>{{ form.remainGoodsWeight || '' }}吨</text>
            </view>
          </view>
        </template>
        <template v-if="form.priceType === 'VEHICLE'">
          <view class="card__item">
            <view class="card__item_field">需求车数</view>
            <view class="card__item_content">{{ form.vehicleNumber || '' }}车</view>
          </view>
          <view class="card__item">
            <view class="card__item_field">还需车数</view>
            <view class="card__item_content">
              <text>{{ form.remainVehicleNumber || '' }}车</text>
            </view>
          </view>
        </template>
        <view class="card__item">
          <view class="card__item_field">司机抢单</view>
          <view class="card__item_content">
            <text>
              已抢单<text class="color-blue">{{ form.biddingCount }}</text> /已指派<text class="color-red">{{ form.assignedCount }}</text> /待指派<text class="color-red">{{
                form.waitAssignCount
              }}</text>
            </text>
          </view>
        </view>
        <view class="card__item">
          <view class="card__item_field">订单备注</view>
          <view class="card__item_content">{{ form.remark || '' }}</view>
        </view>
        <view class="card__item">
          <view class="card__item_field">货源联系人</view>
          <view class="card__item_content">
            <text>{{ form.contactUser || '' }} {{ form.contactMobile || '' }}</text>
          </view>
        </view>
        <view class="card__item">
          <view class="card__item_field">货源发布时间</view>
          <view class="card__item_content">
            <text>{{ form.releaseTime || '' }}</text>
          </view>
        </view>
      </view>
      <view class="card">
        <view class="card__item">
          <view class="card__item_field">装货地址</view>
          <view class="card__item_content"> {{ form.startProvinceName || '' }}{{ form.startCityName || '' }}{{ form.startAreaName || '' }}{{ form.startAddress || '' }} </view>
        </view>
        <view class="card__item">
          <view class="card__item_field">卸货地址</view>
          <view class="card__item_content"> {{ form.endProvinceName || '' }}{{ form.endCityName || '' }}{{ form.endAreaName || '' }}{{ form.endAddress || '' }} </view>
        </view>
      </view>
      <view class="card">
        <view class="card__item">
          <view class="card__item_field">需求车型</view>
          <view class="card__item_content">{{ formatSpecification || '' }}</view>
        </view>
        <view class="card__item">
          <view class="card__item_field">需求箱型</view>
          <view class="card__item_content">{{ formatVanType || '' }}</view>
        </view>
      </view>
      <view class="card">
        <view class="card__item">
          <view class="card__item_field">计价方式</view>
          <view class="card__item_content">
            <render-dict dict="FREIGHT_GOODS_SOURCE_PRICE_TYPE" :value="form.priceType"></render-dict>
          </view>
        </view>
        <template v-if="form.priceType === 'VEHICLE'">
          <view class="card__item">
            <view class="card__item_field">需求车数</view>
            <view class="card__item_content">{{ form.vehicleNumber }}车</view>
          </view>
          <view class="card__item">
            <view class="card__item_field">总运费</view>
            <view class="card__item_content">{{ form.vehicleUnitPrice }}元/车</view>
          </view>
        </template>
        <template v-if="form.priceType === 'TON'">
          <view class="card__item">
            <view class="card__item_field">货物总量</view>
            <view class="card__item_content">{{ form.goodsWeight }}吨</view>
          </view>
          <view class="card__item">
            <view class="card__item_field">运输单价</view>
            <view class="card__item_content">{{ form.weightUnitPrice }}元/吨</view>
          </view>
        </template>
      </view>
    </template>
  </Page>
</template>
<script>
import card from './card.vue';
import { mapGetters } from 'vuex';
import FieldCopy from '@/components/field/field-copy.vue';
export default {
  name: 'good-source-detail',
  components: { FieldCopy, card },
  data() {
    return {
      form: {
        id: '',
        code: '',
        customerName: '',
        goodsName: '',
        goodsWeight: '',
        remainGoodsWeight: '',
        biddingCount: '',
        assignedCount: '',
        waitAssignCount: '',
        contactUser: '',
        contactMobile: '',
        releaseTime: '',
        priceType: '',
        vanType: '',
        specification: '',
        startProvinceShortName: '',
        startProvinceName: '',
        startCityShortName: '',
        startCityName: '',
        startAreaName: '',
        startAddress: '',
        startAddressLat: '',
        startAddressLng: '',
        endProvinceName: '',
        endProvinceShortName: '',
        endCityName: '',
        endCityShortName: '',
        endAreaName: '',
        endAddress: '',
        endAddressLat: '',
        endAddressLng: '',
        remark: '',
        status: '',
        distance: '',
        vehicleNumber: '',
        vehicleUnitPrice: '',
        weightUnitPrice: '',
        startTime: '',
        endTime: '',
      },
    };
  },
  computed: {
    ...mapGetters(['userInfo', 'dictList', 'dictValue']),
    formatVanType() {
      if (!this.form.code) return '';
      let res = [];
      for (let v of this.form.vanType.split(',')) {
        if (v === 'ALL') {
          res.push('不限');
        } else {
          res.push(this.dictValue('VEHICLE_COMPARTMENT_TYPE', v));
        }
      }
      return res.join('/');
    },
    formatSpecification() {
      if (!this.form.code) return '';
      let res = [];
      for (let v of this.form.specification.split(',')) {
        if (v === 'ALL') {
          res.push('不限');
        } else {
          res.push(this.dictValue('VEHICLE_SPECIFICATION', v));
        }
      }
      return res.join('/');
    },
  },
  onLoad(option) {
    this.initData(option.code);
  },
  methods: {
    initData(code = '') {
      uni.$u.api.freightGoodsSourceV2
        .getDetail({
          code,
        })
        .then(res => {
          this.form = res.result || {};
        });
    },
  },
};
</script>
<style lang="scss">
.page-good-source-detail {
  &__content {
    .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;
      }
    }
    .detail-card {
      margin-bottom: 24rpx;
      background: $color-white;
      padding: 24rpx 12rpx;
      .view-item {
        display: flex;
        .view-item__label {
          padding-left: 26rpx;
          color: #999999;
          width: 185rpx;
        }
        .view-item__value {
          flex: 1;
          color: #2b2a27;
          padding-left: 32rpx;
          padding-right: 5rpx;
          display: flex;
          flex-wrap: wrap;
        }
      }
      .view-item:not(:last-child) {
        margin-bottom: 30rpx;
      }
    }
  }
}
</style>
