<template>
  <Page name="again-assign" flank>
    <template #content>
      <view class="card">
        <view class="label">原指派信息</view>
        <view class="line-solid"></view>
        <view class="item">
          <view class="item_field">承运司机</view>
          <view class="item_content">
            <text>{{ item.driverName ? item.driverName : '' }}</text>
            <text>{{ item.driverMobile ? item.driverMobile : '' }}</text>
          </view>
        </view>
        <view class="item">
          <view class="item_field">收款人</view>
          <view class="item_content">
            <text>{{ item.payee ? item.payee : '' }}</text>
            <text>{{ item.payeeMobile ? item.payeeMobile : '' }}</text>
          </view>
        </view>
        <payee :value="oldPayeeModel"></payee>
        <view class="item">
          <view class="item_field">车牌号</view>
          <view class="item_content">{{ item.vehicleLicenseNum ? item.vehicleLicenseNum : '' }}</view>
        </view>
        <view class="item">
          <view class="item_field">车挂号</view>
          <view class="item_content">{{ item.trailerLicenseNum ? item.trailerLicenseNum : '' }}</view>
        </view>
      </view>
      <view class="card border-action">
        <view class="label text-action">新指派信息</view>
        <view class="line-solid"></view>
        <u-form :model="form" ref="uForm" labelWidth="100">
          <view class="line">
            <u-form-item label="司机手机">
              <u-input v-model="form.mobile" border="none" type="number" placeholder="请输入司机手机号" @blur="mobileChange" />
            </u-form-item>
          </view>
          <view class="line">
            <u-form-item label="司机姓名">
              <u-input v-model="form.driverName" border="none" placeholder="请输入司机姓名" />
            </u-form-item>
            <view class="payee">
              <payee :value="payeeModel" :have-action="isCollect"></payee>
            </view>
          </view>
          <view class="line">
            <u-form-item label="车牌号" @click="choseCar('licenseNumber')">
              <u-input v-model="form.licenseNumber" border="none" placeholder="请输入车牌号" disabledColor="#ffffff" disabled />
            </u-form-item>
          </view>
          <view class="line">
            <u-form-item label="车挂号" @click="choseCar('trailerNumber')">
              <u-input v-model="form.trailerNumber" border="none" placeholder="请输入车挂号" disabledColor="#ffffff" disabled />
            </u-form-item>
          </view>
        </u-form>
      </view>
    </template>
    <template #footer>
      <u-button type="primary" @tap="submit">确认更改</u-button>
    </template>
    <popup-platenumber :visible="showCar" @update:visible="e => (showCar = e)" @confirm="carConfirm" v-model="carNumber"></popup-platenumber>
  </Page>
</template>

<script>
import Payee from '../../components/card/payee.vue';
import PopupPlatenumber from '../../components/popup/popup-platenumber.vue';

export default {
  name: 'again-assign',
  components: { PopupPlatenumber, Payee },
  data() {
    return {
      typeCar: '',
      carNumber: '',
      showCar: false,
      payeeModel: {},
      form: {
        mobile: '',
        driverName: '',
        driverMobile: '',
        driverId: '',
        vehicleCode: '', // 车辆ID
        licenseNumber: '', // 车牌号
        trailerCode: '', // 车挂ID
        trailerNumber: '', // 车挂号
        updatePayeeFlag: true,
      },
      item: {},
      currentFreight: {},
    };
  },
  computed: {
    isCollect() {
      return this.currentFreight.collectByOtherFlag || false;
    },
    oldPayeeModel() {
      return this.item.payee
        ? {
            dueBank: this.item.payee,
            dueBankCardNo: this.item.dueBankCardNo,
            openingBank: this.item.openingBank,
          }
        : {};
    },
  },
  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 || {};
      });
    },
    mobileChange() {
      if (this.form.mobile && this.form.mobile.length === 11) {
        uni.$u.api.filter.driver({ query: this.form.mobile }).then(res => {
          if (res.success && res.result && res.result.length === 1) {
            this.form.driverId = res.result[0].id;
            this.form.driverName = res.result[0].name;
            this.form.driverMobile = res.result[0].mobile;
            this.payeeModel = res.result[0];
          } else {
            this.form.driverId = '';
            this.form.driverName = '';
            this.payeeModel = {};
          }
        });
      }
    },
    vehicleChange(v) {
      if (this.typeCar === 'licenseNumber') {
        // 车头
        uni.$u.api.filter.vehicle({ query: v, operationModeList: 'OUT_INVITE' }).then(res => {
          if (res.success && res.result && res.result.length === 1) {
            let item = res.result[0];
            this.form.vehicleCode = item.code;
            this.form.specification = item.specification;
            if (item && item.type === 'TRACTOR' && item.vehicleList && item.vehicleList.length > 0) {
              this.form.trailerNumber = item.vehicleList[0].licenseNumber;
              this.form.trailerCode = item.vehicleList[0].code;
              this.form.specification = item.vehicleList[0].specification;
            }
          } else {
            this.form.vehicleCode = '';
            this.form.specification = '';
            this.form.trailerCode = '';
            this.form.trailerNumber = '';
          }
        });
      } else {
        uni.$u.api.filter.vehicle({ query: v, operationModeList: 'OUT_INVITE' }).then(res => {
          if (res.success && res.result && res.result.length === 1) {
            let item = res.result[0];
            this.form.trailerCode = item.code;
            this.form.specification = item.specification;
          } else {
            this.form.trailerCode = '';
            this.form.specification = '';
          }
        });
      }
    },
    choseCar(type) {
      this.typeCar = type;
      this.carNumber = '';
      this.showCar = true;
    },
    carConfirm(v) {
      this.form[this.typeCar] = v;
      this.showCar = false;
      this.vehicleChange(v);
    },
    submit() {
      uni.$u.api.freightOrder.assignVehicle({ ...this.form, code: this.item.code, payeeId: this.payeeModel.driverId }).then(res => {
        if (res.success) {
          uni.showToast({ title: '操作成功', icon: 'none' });
          this.getOpenerEventChannel().emit('refreshData');
          setTimeout(() => uni.navigateBack(), 500);
        }
      });
    },
  },
};
</script>

<style lang="scss">
.page-again-assign {
  &__footer {
    background: $color-white;
  }

  .card {
    color: #999999;
    margin-bottom: $padding-md;
    padding: $padding-md;
    background-color: $color-white;
    border-radius: $radius-md;
    box-shadow: $shadow-normal;

    .label {
      padding-bottom: $padding-sm;
      font-weight: 500;
      font-size: 30upx;
      color: #2b2a27;
      line-height: 34upx;
      text-align: left;
      font-style: normal;
    }

    .line-solid {
      border-bottom: 1px solid #dddddd;
    }

    .text-action {
      padding-left: $padding-md;
      color: $color-primary;
    }
    .item {
      margin-top: $padding-md;
      display: flex;
      &_field {
        font-weight: 400;
        font-size: 28upx;
        line-height: 28upx;
        color: #999999;
        width: 170upx;
        text-align: left;
      }

      &_content {
        flex: 1;
        font-weight: 400;
        font-size: 28upx;
        line-height: 28upx;
        color: #2b2a27;
        text-align: left;
        font-style: normal;
      }
    }
    .line {
      border-bottom: 1px solid #dddddd;
      .u-form-item {
        padding-left: $padding-md !important;
        padding-right: $padding-sm !important;
      }
      .payee {
        padding-left: $padding-md;
        padding-right: $padding-md;
      }
    }
  }
  .border-action {
    padding-left: 0 !important;
    padding-right: 0 !important;
    border: 1px solid $color-primary;
  }
}
</style>
