<template>
  <Page name="order-add" flank>
    <template #content>
      <u-form :model="form" ref="uForm" labelWidth="100">
        <view class="card">
          <u-form-item label="所属项目" required @click="choseProjectCode">
            <u-input v-model="form.projectName" border="none" suffix-icon="arrow-right" placeholder="请选择项目" disabledColor="#ffffff" disabled />
          </u-form-item>
          <u-form-item label="装货时间" @click="showLoadTime = true" required>
            <u-datetime-picker :show="showLoadTime" :value="loadTimeDef" @cancel="showLoadTime = false" @close="showLoadTime = false" @confirm="loadTimeFormat"></u-datetime-picker>
            <u-input v-model="form.loadTime" border="none" suffix-icon="arrow-right" placeholder="请选择时间" disabledColor="#ffffff" disabled />
          </u-form-item>
          <u-form-item label="内部单号">
            <u-input v-model="form.customerOrderCode" border="none" placeholder="请输入，选填" />
          </u-form-item>
          <u-form-item label="订单备注" @click="selectRemark">
            <u-input v-model="form.remark" border="none" suffix-icon="arrow-right" placeholder="请输入，选填" disabledColor="#ffffff" disabled />
          </u-form-item>
        </view>
        <view class="card">
          <u-form-item label="装货地址" required @click="() => selectAddress(0)">
            <u-input :value="form.waypoints[0].address" border="none" suffix-icon="arrow-right" placeholder="请选择" disabledColor="#ffffff" disabled />
          </u-form-item>
          <u-form-item label="卸货地址" required @click="() => selectAddress(1)">
            <u-input v-model="form.waypoints[1].address" border="none" suffix-icon="arrow-right" placeholder="请选择" disabledColor="#ffffff" disabled />
          </u-form-item>
        </view>
        <view class="card">
          <u-form-item label="货物名称" required @click="choseGoodsName">
            <u-input v-model="form.goodsName" border="none" suffix-icon="arrow-right" placeholder="请选择" disabledColor="#ffffff" disabled />
          </u-form-item>
          <u-form-item v-if="showGoodsValue" label="货物价值" required>
            <u-input v-model="form.goodsValue" border="none" type="digit" placeholder="请输入" @change="computedService">
              <template slot="suffix">元</template>
            </u-input>
          </u-form-item>
          <u-form-item label="货物件数">
            <u-input v-model="form.goodsPiece" border="none" type="digit" placeholder="请输入，选填" />
          </u-form-item>
          <u-form-item label="货物吨数" required>
            <u-input v-model="form.goodsWeight" border="none" type="digit" placeholder="请输入" />
          </u-form-item>
          <u-form-item label="货物方数">
            <u-input v-model="form.goodsVolume" border="none" type="digit" placeholder="请输入，选填" />
          </u-form-item>
        </view>
        <view class="card">
          <view style="display: flex">
            <view style="flex: 1">
              <u-form-item label="司机手机" required>
                <u-input v-model="form.mobile" border="none" type="number" placeholder="请输入" @blur="mobileChange"></u-input>
              </u-form-item>
              <u-form-item label="司机姓名" :required="!driverIsAuditPass">
                <span v-if="driverIsAuditPass">{{ form.driverName }}</span>
                <u-input v-else v-model="form.driverName" border="none" placeholder="请输入" />
              </u-form-item>
            </view>
            <view @click="choseDriver" style="width: 180rpx; display: flex; align-items: center; justify-content: center; flex-direction: column; border-left: 1px solid #f6f8fb">
              <view><u-icon name="search" size="28" color="#000"></u-icon></view>
              <view><text class="action-text">搜索选择</text></view>
            </view>
          </view>
          <view class="payee">
            <payee ref="payee" v-model="payeeModel" :have-action="isCollect" />
          </view>
          <view style="display: flex">
            <view style="flex: 1">
              <u-form-item label="车牌号" required @click="choseCar('licenseNumber')">
                <u-input v-model="form.licenseNumber" border="none" placeholder="请输入" disabledColor="#ffffff" disabled />
              </u-form-item>
              <u-form-item label="车挂号" @click="choseCar('trailerNumber')">
                <u-input v-model="form.trailerNumber" border="none" placeholder="请输入" disabledColor="#ffffff" disabled />
              </u-form-item>
            </view>
            <view
              @click="(showModal = true), (content = '')"
              style="width: 180rpx; display: flex; align-items: center; justify-content: center; flex-direction: column; border-left: 1px solid #f6f8fb"
            >
              <view>
                <image style="height: 28px; width: 28px" src="/static/svgs/scan-font.svg"></image>
              </view>
              <view><text class="action-text">粘贴识别</text></view>
            </view>
          </view>
        </view>
        <view class="card">
          <u-form-item label="应付司机运费">
            <u-input v-model="form.paidAmount" border="none" type="digit" prefix-icon="rmb" placeholder="请输入" @change="computedService" />
          </u-form-item>
          <u-form-item label="油卡" v-if="currentFreight.oilPayFlag">
            <u-input v-model="form.oilAmount" border="none" type="digit" prefix-icon="rmb" placeholder="请输入" @change="computedService" />
          </u-form-item>
          <u-form-item label="预付款" v-if="currentFreight.prePayFlag">
            <u-input v-model="form.prepaidAmount" border="none" type="digit" prefix-icon="rmb" placeholder="请输入" @change="computedService" />
          </u-form-item>
          <u-form-item label="货到款" v-if="currentFreight.arrivalPayFlag">
            <u-input
              v-model="form.deliveryAmount"
              border="none"
              type="digit"
              prefix-icon="rmb"
              :disabled="autoComputedArrival"
              :placeholder="autoComputedArrival ? '自动计算' : '请输入'"
              @change="computedService"
            >
              <template #suffix>
                <span v-if="autoComputedArrival && form.driverSecurityServiceAmount" class="color-red">已扣安全服务费{{ form.driverSecurityServiceAmount }}</span>
              </template>
            </u-input>
          </u-form-item>
          <u-form-item label="尾款/回单付">
            <u-input
              v-model="form.balancePaymentAmount"
              border="none"
              type="digit"
              prefix-icon="rmb"
              @change="computedService"
              :disabled="!autoComputedArrival"
              :placeholder="!autoComputedArrival ? '自动计算' : '请输入'"
            >
              <template #suffix>
                <span v-if="!autoComputedArrival && form.driverSecurityServiceAmount" class="color-red">已扣安全服务费{{ form.driverSecurityServiceAmount }}</span>
              </template>
            </u-input>
          </u-form-item>
        </view>
        <view class="card" @tap="more = !more">
          <view class="more-action">
            {{ !more ? '展开更多信息' : '收起更多信息' }}
            <view class="sx-img">
              <image v-if="more" class="sx-image up" :src="formatImagePath('down')"></image>
              <image v-else class="sx-image" :src="formatImagePath('down')"></image>
            </view>
          </view>
        </view>
        <template v-if="more">
          <view class="card">
            <u-form-item label="装货联系人">
              <u-input v-model="form.waypoints[0].contactName" border="none" placeholder="请输入，选填" />
            </u-form-item>
            <u-form-item label="装货联系电话">
              <u-input v-model="form.waypoints[0].contactMobile" border="none" placeholder="请输入，选填" />
            </u-form-item>
          </view>
          <view class="card">
            <u-form-item label="卸货联系人">
              <u-input v-model="form.waypoints[1].contactName" border="none" placeholder="请输入，选填" />
            </u-form-item>
            <u-form-item label="卸货联系电话">
              <u-input v-model="form.waypoints[1].contactMobile" border="none" placeholder="请输入，选填" />
            </u-form-item>
          </view>
        </template>
      </u-form>
    </template>
    <template #footer>
      <u-button :loading="loading" type="primary" @tap="submitAddFun">下单并指派</u-button>
    </template>
    <u-toast ref="uToast"></u-toast>
    <u-modal :show="showModal" title="粘贴识别司机车辆信息" :showCancelButton="true" @cancel="showModal = false" @confirm="cliSubmit" confirmText="确定">
      <u--textarea v-model="content" placeholder="支持同时粘贴司机手机号、车牌号、车挂号"></u--textarea>
    </u-modal>
    <u-modal
      :show="showModal2"
      title="已自动识别复制的信息，是否使用？"
      :showCancelButton="true"
      @cancel="showModal2 = false"
      @confirm="cliSubmit2"
      confirmText="确定使用"
      cancelText="不使用"
    >
      <u-textarea disabled v-model="content2"></u-textarea>
    </u-modal>
    <popup-platenumber :visible="showCar" @update:visible="e => (showCar = e)" @confirm="carConfirm" v-model="carNumber"></popup-platenumber>
  </Page>
</template>
<script>
import { urlParam } from '@/utils/param';
import dayjs from 'dayjs';
import payee from '../../components/card/payee.vue';
import PopupPlatenumber from '../../components/popup/popup-platenumber.vue';
import UTextarea from '../../uni_modules/uview-ui/components/u--textarea/u--textarea.vue';
export default {
  name: 'order-add',
  components: { UTextarea, PopupPlatenumber, payee },
  data() {
    return {
      loading: false,
      showModal: '',
      showModal2: '',
      content: '',
      content2: '',
      carNumber: '',
      showLoadTime: false,
      loadTimeDef: new Date(),
      showCar: false,
      typeCar: '',
      more: false,
      radioList: [],
      form: {
        projectCode: '',
        loadTime: '',
        projectName: '',
        customerOrderCode: '',
        goodsName: '',
        goodsValue: '',
        goodsPiece: '',
        goodsWeight: '',
        goodsVolume: '',
        mobile: '',
        driverId: '',
        driverName: '',
        licenseNumber: '',
        trailerNumber: '',
        paidAmount: '',
        oilAmount: '',
        prepaidAmount: '',
        deliveryAmount: '',
        balancePaymentAmount: '',
        distance: '',
        allowDriverSeeFreightAmountNode: '',
        waypoints: [{}, {}],
        remark: '',
      },
      payeeModel: {},
      driverObj: {}, //司机信息
      currentFreight: {},
    };
  },
  computed: {
    isCollect() {
      return this.currentFreight.collectByOtherFlag || false;
    },
    // 司机是否已认证
    driverIsAuditPass() {
      const { idCardImageAuditStatus = '' } = this.driverObj;
      return idCardImageAuditStatus === 'PASS';
    },
    autoComputedArrival() {
      // 自动计算货到
      return 'OUT_INVITE_ARRIVAL' === this.currentFreight?.autoComputeFeeType;
    },
    // 获取价值
    showGoodsValue() {
      return this.currentFreight ? this.currentFreight.driverSecurityServiceFlag || this.currentFreight.securityServiceFlag : false;
    },
  },
  onLoad(option) {
    if (option.code) {
      this.initData(option.code);
    }
    this.initConfig();
  },
  methods: {
    clipboard(data) {
      if (!data) return;
      let { cliMobile = '', cliVehicle = '', cliTrailer = '' } = this.getClipboardInfo(data);
      if (cliMobile || cliVehicle || cliTrailer) {
        this.form = {
          ...this.form,
          mobile: cliMobile || this.form.mobile,
          licenseNumber: cliVehicle || this.form.licenseNumber,
        };
        if (cliMobile) {
          this.mobileChange();
        }
        if (cliVehicle) {
          this.typeCar = 'licenseNumber';
          this.vehicleChange(cliVehicle);
        }
        if (cliTrailer) {
          setTimeout(() => {
            this.typeCar = 'trailerNumber';
            this.form.trailerNumber = cliTrailer ? cliTrailer.replace('超', '挂') : this.form.trailerNumber;
            this.vehicleChange(cliTrailer);
          }, 500);
        }
      }
    },
    getClipboardInfo(data) {
      if (!data) return;
      let mobileReg = /1[3456789]\d{9}/;
      let vehicleReg = /[京津冀晋蒙辽吉黑沪苏浙皖闽赣鲁豫鄂湘粤桂琼川贵云渝藏陕甘青宁新]{1}[ABCDEFGHJKLMNOPQRSTUVWXY]{1}[0-9A-Z]{5,6}/;
      let trailerReg = /[京津冀晋蒙辽吉黑沪苏浙皖闽赣鲁豫鄂湘粤桂琼川贵云渝藏陕甘青宁新]{1}[ABCDEFGHJKLMNPQRSTUVWXY]{1}[0-9A-Z]{4}[挂超]{1}/;
      let mobile = mobileReg.exec(data.toUpperCase());
      let vehicle = vehicleReg.exec(data.toUpperCase());
      let trailer = trailerReg.exec(data.toUpperCase());
      let cliMobile = '',
        cliVehicle = '',
        cliTrailer = '';
      if (mobile && mobile.input) {
        cliMobile = mobile[0];
      }
      if (vehicle && vehicle.input) {
        cliVehicle = vehicle[0];
      }
      if (trailer && trailer.input) {
        cliTrailer = trailer[0];
      }
      return {
        cliMobile,
        cliVehicle,
        cliTrailer,
        text: `${cliVehicle ? '车牌号：' : ''}${cliVehicle}\n${cliTrailer ? '车挂号：' : ''}${cliTrailer}\n${cliMobile ? '司机手机号：' : ''}${cliMobile}`,
      };
    },
    cliSubmit() {
      this.showModal = false;
      let resInfo = this.getClipboardInfo(this.content);
      if (resInfo.text) {
        this.showModal2 = true;
        this.content2 = resInfo.text;
      } else {
        uni.showToast({ title: '未识别到信息' });
      }
    },
    cliSubmit2() {
      this.showModal2 = false;
      this.clipboard(this.content2);
    },
    initConfig() {
      uni.$u.api.freightOrder.currentFreight({}).then(en => {
        this.currentFreight = en?.result || {};
        this.form.allowDriverSeeFreightAmountNode = this.currentFreight.allowDriverSeeFreightAmountNode;
      });
      uni.$u.api.filter.projectCode({}).then(res => {
        if (res.success && res.result && res.result.length === 1) {
          this.form.projectCode = res.result[0].code;
          this.form.projectName = res.result[0].name;
        }
      });
    },
    initData(code) {
      uni.$u.api.freightOrder.getDetail({ code }).then(res => {
        let detail = res.result || {};
        ['goodsName', 'waypoints', 'allowDriverSeeFreightAmountNode', 'projectCode', 'projectName', 'remark', 'goodsPiece', 'goodsWeight', 'goodsVolume'].forEach(key => {
          this.form[key] = detail[key];
        });
        if (detail.vehicleLicenseNum) {
          this.typeCar = 'licenseNumber';
          this.form.licenseNumber = detail.vehicleLicenseNum;
          this.vehicleChange(detail.vehicleLicenseNum);
        }
        if (detail.trailerLicenseNum) {
          setTimeout(() => {
            this.typeCar = 'trailerNumber';
            this.form.trailerNumber = detail.trailerLicenseNum;
            this.vehicleChange(detail.trailerLicenseNum);
          }, 500);
        }
        this.form.mobile = detail.driverMobile;
        this.form.driverId = detail.driverId;
        this.form.driverName = detail.driverName;
        this.form.driverMobile = detail.driverMobile;
        this.payeeModel = {
          driverId: detail.payeeId,
          dueBank: detail.dueBank,
          openingBank: detail.openingBank,
          dueBankCardNo: detail.dueBankCardNo,
        };
        this.$refs.payee.setItem(this.payeeModel);
        this.computedDistance();
      });
    },
    selectRemark() {
      uni.$once('select-remark', remark => {
        this.form.remark = remark || '';
      });
      uni.navigateTo({
        url: `/pages/order/select-remark`,
      });
    },
    choseDriver() {
      uni.$once('select-driver', driver => {
        this.form.driverName = driver.name;
        this.form.driverMobile = driver.mobile;
        this.form.mobile = driver.mobile;

        if (driver.mobile) {
          this.mobileChange();
        }
        if (driver.useVehicle && driver.latestVehicleNo) {
          this.form.licenseNumber = driver.latestVehicleNo;
          this.typeCar = 'licenseNumber';
          this.vehicleChange(driver.latestVehicleNo);
        }
      });
      uni.navigateTo({
        url: `/pages/global/search-driver`,
      });
    },
    choseProjectCode() {
      uni.$once('select-common', option => {
        this.form.projectCode = option.code;
        this.form.projectName = option.name;
      });
      uni.navigateTo({
        url: `/pages/global/search-common${urlParam({
          mode: 'select',
          url: 'projectCode',
          title: '项目',
          label: 'name',
          value: '',
          params: '{"status":"ENABLE"}',
        })}`,
      });
    },
    choseGoodsName() {
      uni.$once('select-common', option => {
        this.form.goodsName = option.name;
      });
      uni.navigateTo({
        url: `/pages/global/search-common${urlParam({
          mode: 'select',
          url: 'goodsName',
          title: '货物名称',
          label: 'name',
          value: '',
        })}`,
      });
    },
    selectAddress(index) {
      uni.$once('select-detail', location => {
        let station = {
          lng: location.lng,
          lat: location.lat,
          provinceCode: location.provinceCode,
          provinceName: location.provinceName,
          cityCode: location.cityCode,
          cityName: location.cityName,
          areaCode: location.areaCode,
          areaName: location.areaName,
          address: location.address || '',
        };
        let waypoints = index === 0 ? [station, this.form.waypoints[1]] : [this.form.waypoints[0], station];
        this.form = {
          ...this.form,
          waypoints,
        };
        this.computedDistance();
      });
      let type = index === 0 ? 'getStartLatestAddress' : 'getEndLatestAddress';
      let lat = this.form.waypoints[index].lat ? Number(this.form.waypoints[index].lat) : '';
      let lng = this.form.waypoints[index].lng ? Number(this.form.waypoints[index].lng) : '';
      uni.navigateTo({ url: `/pages/global/search-address?type=${type}&lng=${lng}&lat=${lat}` });
    },
    // 地图选点
    selectLocation(index) {
      uni.$once('webview-select', location => {
        let station = {
          lng: location.lng,
          lat: location.lat,
          provinceCode: location.provinceCode,
          provinceName: location.provinceName,
          cityCode: location.cityCode,
          cityName: location.cityName,
          areaCode: location.areaCode,
          areaName: location.areaName,
          address: (location.provinceName || '') + (location.cityName || '') + (location.areaName || '') + (location.address || ''),
        };
        let waypoints = index === 0 ? [station, this.form.waypoints[1]] : [this.form.waypoints[0], station];
        this.form = {
          ...this.form,
          waypoints,
        };
        this.computedDistance();
      });
      const url = 'https://zeyi-tms-product.oss-cn-hangzhou.aliyuncs.com/webview/location-wx-freight.html';
      const params = {
        lat: this.form.waypoints[index].lat ? Number(this.form.waypoints[index].lat) : '',
        lng: this.form.waypoints[index].lng ? Number(this.form.waypoints[index].lng) : '',
      };
      uni.navigateTo({ url: `/pages/common/webview?url=${url}&query=${JSON.stringify(params)}` });
    },
    computedDistance() {
      if (this.form.waypoints[0].lng && this.form.waypoints[1].lng) {
        uni.$u.api.freightOrder
          .getDistance({
            startLat: this.form.waypoints[0].lat,
            startLng: this.form.waypoints[0].lng,
            endLat: this.form.waypoints[1].lat,
            endLng: this.form.waypoints[1].lng,
          })
          .then(res => {
            this.form.distance = res.result;
          });
      }
    },
    loadTimeFormat({ value }) {
      this.form.loadTime = dayjs(value).format('YYYY-MM-DD HH:mm:ss');
      this.showLoadTime = false;
    },
    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];
            this.$refs.payee.setItem(this.payeeModel);
            this.driverObj = res.result[0];
          } else {
            this.form.driverId = '';
            this.form.driverName = '';
            this.form.driverMobile = this.form.mobile;
            this.payeeModel = {};
            this.$refs.payee.setItem(this.payeeModel);
            this.driverObj = {};
          }
        });
      }
    },
    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);
    },
    computedService() {
      uni.$u.debounce(this.getServiceAmountInfo, 500);
    },
    getServiceAmountInfo() {
      const { paidAmount = '', oilAmount = '', deliveryAmount = '', prepaidAmount = '', balancePaymentAmount = '', goodsName = '', goodsValue = '' } = this.form;
      let params = {
        paidAmount,
        deliveryAmount,
        prepaidAmount,
        oilAmount,
        balancePaymentAmount,
        goodsName,
        goodsValue,
      };
      uni.$u.api.freightOrder.getServiceAmount(params).then(res => {
        if (res.success) {
          // this.form.paidAmount = res.result.paidAmount || paidAmount;
          // this.form.prepaidAmount = res.result.prepaidAmount || prepaidAmount;
          // this.form.oilAmount = res.result.oilAmount || oilAmount;
          if (this.autoComputedArrival) {
            this.form.deliveryAmount = res.result.deliveryAmount || '0';
          } else {
            this.form.balancePaymentAmount = res.result.balancePaymentAmount || '0';
          }
          this.form.oilPayRebateRate = res.result.oilPayRebateRate || '';
          this.form.driverSecurityServiceAmount = res.result.driverSecurityServiceAmount || '';
          this.form.securityServiceAmount = res.result.securityServiceAmount || '';
          this.form.serviceAmount = res.result.serviceAmount || '';
          this.form.serviceRate = res.result.serviceRate || '';
        }
      });
    },
    submitAddFun() {
      if (this.loading) return;
      this.loading = true;
      let totalAmount = Number(this.form.paidAmount || 0) + Number(this.form.serviceAmount || 0) + Number(this.form.securityServiceAmount || 0);
      uni.$u.api.freightOrder
        .add({ ...this.form, totalAmount, payeeId: this.payeeModel.driverId })
        .then(res => {
          if (res.success) {
            this.form = {};
            uni.showToast({ title: '下单成功', icon: 'none' });
            this.getOpenerEventChannel().emit('refreshData');
            setTimeout(() => uni.navigateBack(), 500);
          }
          this.loading = false;
        })
        .catch(e => {
          this.loading = false;
          this.$refs.uToast.show({
            type: 'default',
            message: e,
          });
        });
    },
  },
};
</script>
<style lang="scss">
.page-order-add {
  &__footer {
    background: $color-white;
  }
  .payee {
    margin-right: $padding-xs;
    margin-left: $padding-xs;
  }
  .card {
    color: #999999;
    margin-bottom: $padding-md;
    background-color: $color-white;
    border-radius: $radius-md;
    box-shadow: $shadow-normal;
    .u-form-item {
      padding-left: $padding-md !important;
      padding-right: $padding-sm !important;
    }
    .u-form-item + .u-form-item {
      border-top: 1px solid #f6f6f6;
    }
    .more-action {
      display: flex;
      padding: $padding-sm;
      justify-content: center;
      align-content: center;
      align-items: center;
      .sx-img {
        height: 12upx;
        width: 14upx;
        position: relative;
        margin-left: 12upx;

        .sx-image {
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
        }
        .up {
          transform: rotate(180deg);
        }
      }
    }
    .action-text {
      background: #f6f8fb;
      color: #2673fb;
      font-size: 24upx;
      padding: 2upx 4upx;
    }
  }
}
</style>