<template>
  <view class="payment-card" @mousedown="mousedown" @mouseup="mouseup" @touchstart="mousedown" @touchend="mouseup" @tap="choseFun">
    <view class="title">
      <view class="code">
        <field-copy :value="item.payCode" v-if="item.payCode">{{ item.payCode }} </field-copy>
      </view>
      <view style="display: flex">
        <render-dict v-if="item.payStatus" class="status" :style="{ color: colorMap[item.payStatus] }" dict="ONLINE_FREIGHT_ORDER_PAY_STATUS" :value="item.payStatus"></render-dict>
        <template v-if="choseMore">
          <u-radio-group :value="choseIds.includes(item.id) ? item.id : ''">
            <u-radio :name="item.id"></u-radio>
          </u-radio-group>
          <!--          <u-icon v-if="choseIds.includes(item.id)" name="checkmark-circle-fill" size="20" color="#1E7B6B"></u-icon>-->
        </template>
      </view>
    </view>
    <view class="title-sub">{{ item.projectName ? item.projectName : '' }}{{ item.loadTime ? '|' + item.loadTime + '装货' : '' }}</view>
    <view class="item">
      <view class="label">
        <render-dict v-if="item.feeType" dict="ONLINE_FREIGHT_ORDER_FEE_TYPE" :value="item.feeType"></render-dict>
      </view>
      <view class="content">
        <text class="amount">￥{{ item.feeAmount ? item.feeAmount : '' }}</text>
      </view>
    </view>
    <view class="item">
      <view class="label">承运司机</view>
      <view class="content">
        <text>{{ item.driverName ? item.driverName : '' }}</text>
        <text>{{ item.driverMobile ? item.driverMobile : '' }}</text>
      </view>
    </view>
    <view class="item">
      <view class="label">收款人</view>
      <view class="content">
        <text>{{ item.recAccountName ? item.recAccountName : '' }}</text>
        <text>{{ item.recMobile ? item.recMobile : '' }}</text>
      </view>
    </view>
    <view class="item">
      <view class="label">承运车辆</view>
      <view class="content">{{ item.vehicleLicenseNum ? item.vehicleLicenseNum : '' }}{{ item.trailerLicenseNum ? '·' + item.trailerLicenseNum : '' }}</view>
    </view>
    <view class="item">
      <view class="label">订单号</view>
      <view class="content">
        <text>{{ item.orderCode }}</text>
        <text v-if="!!item.waitHandleExceptionNumber" class="content--warning">{{ item.waitHandleExceptionNumber || '0' }}个异常待处理</text>
      </view>
    </view>
    <view class="item">
      <view class="label">线路名称</view>
      <view class="content">{{ item.lineName ? item.lineName : '' }}</view>
    </view>
    <view class="item" v-if="!choseMore && ['NOT_PAY', 'PAY_FAILED'].includes(item.payStatus)">
      <u-button v-if="$permission('/freightPayPlan/apply')" type="primary" @tap="paymentFun">{{ item.payStatus === 'PAY_FAILED' ? '重新支付' : '提交支付' }}</u-button>
    </view>
  </view>
</template>
<script>
import FieldCopy from '../../components/field/field-copy.vue';
import UButton from '../../uni_modules/uview-ui/components/u-button/u-button.vue';
import page from '../../mixins/page';
export default {
  name: 'payment-card',
  mixins: [page],
  components: { UButton, FieldCopy },
  props: {
    choseMore: Boolean,
    choseIds: {
      type: Array,
      default() {
        return [];
      },
    },
    item: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      visible: false,
      pressTimer: '',
      isLongClick: false,
      colorMap: {
        NOT_PAY: '#ff4f3b',
        PAYING: '#0000FF',
        PAY_FAILED: '#999999',
        PAY_SUCCESS: '#00B87A',
      },
    };
  },
  methods: {
    paymentFun() {
      if (!this.isLongClick) {
        this.$emit('payment', this.item.id);
      }
    },
    choseFun() {
      if (!this.isLongClick) {
        this.$emit('chose', this.item.id);
      }
    },
    mousedown() {
      if (this.choseMore) return;
      this.pressTimer = setTimeout(() => {
        this.isLongClick = true;
        this.$emit('longClick', this.item);
      }, 1000);
    },
    mouseup() {
      clearTimeout(this.pressTimer);
      setTimeout(() => {
        this.isLongClick = false;
      }, 100);
    },
  },
};
</script>

<style scoped lang="scss">
.payment-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;
  .title {
    padding-bottom: $padding-sm;
    display: flex;
    justify-content: space-between;
    .code {
      font-weight: 500;
      font-size: 30upx;
      color: #2b2a27;
      line-height: 34upx;
      text-align: left;
      font-style: normal;
    }
    border-bottom: 1px solid $color-border;
  }
  .title-sub {
    margin-top: $padding-sm;
    font-weight: 400;
    font-size: 26upx;
    color: #5d5d5d;
    line-height: 37upx;
    text-align: left;
    font-style: normal;
  }
  .item {
    margin-top: $padding-sm;
    display: flex;
    .label {
      width: 170upx;
      font-weight: 400;
      font-size: 28upx;
      color: #999999;
      line-height: 28upx;
      text-align: left;
      font-style: normal;
    }
    .content {
      font-weight: 400;
      font-size: 28upx;
      color: #2b2a27;
      line-height: 28upx;
      text-align: left;
      font-style: normal;
      text + text {
        margin-left: $padding-sm;
      }
      .amount {
        color: #ff4f3b;
      }
      &--warning {
        color: #f52723;
        font-size: 20rpx;
        margin-left: 20upx;
        padding-left: 10upx;
        padding-right: 10upx;
        border-radius: 8upx;
        border: 2rpx solid #f52723;
      }
    }
  }
}
</style>