ChargEco/Strides-APP/app/pages/vehicles/VehicleDetail.js

/**
 * 添加/编辑 Vehicle页面
 * @邠心vbe on 2024/01/30
 */
import React, { Component } from 'react';
import { View, Text, StyleSheet, TextInput, Image, Pressable, ScrollView } from 'react-native';
import Dialog from '../../components/Dialog';
import apiUser from '../../api/apiUser';
import TextView from '../../components/TextView';
import Dropdown from '../../components/Dropdown';
import { TypeImageList } from '../chargeV2/Charging';
import ImageCropPicker from 'react-native-image-crop-picker';
import { UploadThemes } from '../../components/ThemesConfig';
import apiUpload from '../../api/apiUpload';
import utils from '../../utils/utils';
import app from '../../../app.json';

const options = {
  width: 300,
  height: 300,
  cropping: true,
  multiple: false,
  mediaType: 'photo',
  writeTempFile: false,
  compressImageQuality: 0.8,
  compressImageMaxWidth: 720,
  compressImageMaxHeight: 1280,
  ...UploadThemes
}

export default class VehicleDetail extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isEdit: false,
      vehicleInfo: {
        brand: "",
        model: "",
        connectorType: ""
      },
      brandOptions: [],
      modelOptions: [],
      typeOptions: []
    };
  }

  componentDidMount() {
    this.getBrandOptions();
    const params = this.props.route.params;
    if (params.id) {
      this.setState({
        isEdit: true
      })
      Dialog.showProgressDialog();
      this.getVehicleData(params.id);
    }
  }

  getBrandOptions() {
    apiUser.getVehicleBrandList().then(res => {
      if (res.data) {
        this.setState({
          brandOptions: res.data
        })
      }
    }).catch((err) => {
      Dialog.dismissLoading();
      toastShort(err)
    });
    const types = []
    TypeImageList.forEach((item, index) => {
      types.push(item.name);
    })
    this.setState({
      typeOptions: types
    })
  }

  getModelOptions() {
    if (this.state.vehicleInfo.brand) {
      apiUser.getVehicleModelByBrand({
        brand: this.state.vehicleInfo.brand
      }).then(res => {
        if (res.data) {
          this.setState({
            modelOptions: res.data
          })
        }
      }).catch((err) => {
        toastShort(err)
        this.setState({
          modelOptions: []
        })
      });
    } else {
      this.setState({
        modelOptions: []
      })
    }
  }

  getVehicleData(id) {
    apiUser.getVehicleById({
      vehiclePk: id
    }).then(res => {
      Dialog.dismissLoading();
      if (res.data) {
        const info = res.data;
        this.setState({
          vehicleInfo: info
        }, () => {
          this.getModelOptions();
        });
      }
    }).catch((err) => {
      Dialog.dismissLoading();
      toastShort(err)
    });
  }

  changeForm(key, value) {
    const form = {
      ...this.state.vehicleInfo
    }
    form[key] = value;
    this.setState({
      vehicleInfo: form
    })
  }

  uploadImage() {
    ImageCropPicker.openPicker({
      ...options,
      cropperToolbarTitle: $t('common.cropperTitle')
    }).then(image => {
      if (image.path) {
        apiUpload.uploadImage(image.path, image.mime, 'PDVL').then(res => {
          if (res.success && res.data.picturePath) {
            this.changeForm("vehiclePhoto", res.data.picturePath)
            toastShort($t('common.uploadSuccess'));
          } else {
            toastShort($t('common.uploadFailed'));
          }
        }).catch(err => {
          toastShort(err);
        });
      }
    }).catch(err1 => {
      //console.log(err1);
    });
  }

  validate() {
    if (!this.state.vehicleInfo.brand) {
      toastShort($t('profile.msgSelectBrand'));
      return;
    }
    if (!this.state.vehicleInfo.vehicleModelId) {
      toastShort($t('profile.msgSelectModel'));
      return;
    }
    if (!this.state.vehicleInfo.licensePlate) {
      if (app.vehicle.showLicencePlate) {
        toastShort($t('profile.msgInputPlate'));
      } else {
        toastShort($t('profile.msgInputCarNo'));
      }
      return;
    }
    /*if (!this.state.vehicleInfo.batteryCapacity) {
      toastShort($t('profile.msgInputBatCap'));
      return;
    }
    if (!this.state.vehicleInfo.connectorType) {
      toastShort($t('profile.msgSelectType'));
      return;
    }
    if (!this.state.vehicleInfo.vehiclePhoto) {
      toastShort($t('profile.msgVehiclePhoto'));
      return;
    }*/
    //console.log("车辆信息", this.state.vehicleInfo);
    if (this.state.isEdit) {
      this.updateVehicle(this.state.vehicleInfo)
    } else {
      this.addVehicle(this.state.vehicleInfo)
    }
  }

  addVehicle(params) {
    Dialog.showProgressDialog();
    apiUser.addVehicle(params).then(res => {
      Dialog.dismissLoading();
      toastShort($t('common.addSuccess'));
      goBack();
    }).catch((err) => {
      Dialog.dismissLoading();
      toastShort(err);
    });
  }

  updateVehicle(params) {
    Dialog.showProgressDialog();
    apiUser.updateVehicle(params).then(res => {
      Dialog.dismissLoading();
      toastShort($t('common.updateSuccess'));
      goBack();
    }).catch((err) => {
      Dialog.dismissLoading();
      toastShort(err);
    });
  }

  getAsterisk() {
    if (app.vehicle.showRequiredAsterisk) {
      return " *";
    } else {
      return "";
    }
  }

  render() {
    return (
      <ScrollView
        style={styles.container}
        contentContainerStyle={$padding(16)}>
        <View style={ui.flexc}>
          <MaterialCommunityIcons
            name="form-dropdown"
            size={20}
            color={textPrimary}
            style={ui.bold}
          />
          <TextView style={styles.titleText}>{$t('profile.vehicleBrand')}</TextView>
        </View>
        <Dropdown
          style={styles.formDropdown}
          list={this.state.brandOptions}
          placeholder={$t('profile.selectBrand') + this.getAsterisk()}
          title={$t('profile.vehicleBrand')}
          value={this.state.vehicleInfo.brand}
          autoSelect={false}
          onChange={value => {
            this.changeForm("brand", value);
            this.getModelOptions();
          }}
        />
        <Dropdown
          style={styles.formDropdown}
          list={this.state.modelOptions}
          placeholder={$t('profile.selectModel') + this.getAsterisk()}
          title={$t('profile.vehicleModel')}
          value={this.state.vehicleInfo.vehicleModelId}
          valueKey={"vehicleModelId"}
          nameKey={"model"}
          autoSelect={true}
          onChange={value => this.changeForm("vehicleModelId", value)}
        />
        <TextInput
          style={styles.formInput}
          defaultValue={this.state.vehicleInfo.licensePlate}
          placeholder={$t(app.vehicle.showLicencePlate ? 'profile.enterLicensePlate' : 'profile.enterLicenseNumber') + this.getAsterisk()}
          placeholderTextColor={textPlacehoder}
          maxLength={20}
          onChangeText={text => this.changeForm("licensePlate", text)}
        />
        <View style={styles.formInputRow}>
          <TextInput
            style={styles.itemInput}
            defaultValue={this.state.vehicleInfo.batteryCapacity}
            placeholder={$t('profile.enterBatteryCapacity')}
            placeholderTextColor={textPlacehoder}
            maxLength={20}
            keyboardType='decimal-pad'
            onChangeText={text => this.changeForm("batteryCapacity", text)}
          />
          <TextView style={styles.titleText}>kWh</TextView>
        </View>
        { app.vehicle.requireConnectorType && <>
          <View style={ui.flexc}>
            <MaterialCommunityIcons
              name="form-dropdown"
              size={20}
              color={textPrimary}
              style={ui.bold}
            />
            <TextView style={styles.titleText}>{$t('profile.connecterType')}</TextView>
          </View>
          <Dropdown
            style={styles.formDropdown}
            list={this.state.typeOptions}
            placeholder={$t('profile.selectConnecterType')}
            title={$t('profile.connecterType')}
            value={this.state.vehicleInfo.connectorType}
            onChange={value => this.changeForm("connectorType", value)}
            autoSelect={false}
          />
        </> }
        { app.vehicle.requireImageUpload && <>
        <View style={ui.flexc}>
          <MaterialCommunityIcons
            name="tray-arrow-up"
            size={20}
            color={textPrimary}
            style={ui.bold}
          />
          <TextView style={styles.titleText}>{$t('profile.plsUploadImageCar')}</TextView>
        </View>
        <View style={styles.uploadGroup}>
          { this.state.vehicleInfo.vehiclePhoto
          ? <Pressable
              onPress={() => this.uploadImage()}>
              <Image
                style={styles.uploadImage}
                source={{uri: utils.getImageUrl(this.state.vehicleInfo.vehiclePhoto)}}
              />
            </Pressable>
          : <Pressable
              style={styles.uploadView}
              onPress={() => this.uploadImage()}>
              <MaterialCommunityIcons
                name="tray-arrow-up"
                size={32}
                color={textCancel}
                style={ui.bold}
              />
              <TextView style={styles.uploadTitle}>{$t('profile.selectUpload')}</TextView>
              <TextView style={styles.uploadDesc}>{$t('profile.max4mbPhoto')}</TextView>
            </Pressable>
          }
        </View>
        </> }
        <View style={styles.buttonView}>
          <Button
            text={$t('common.save')}
            elevation={1.5}
            onClick={() => {
              this.validate();
            }}/>
        </View>
      </ScrollView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  titleText: {
    padding: 8,
    fontSize: 14,
    color: textPrimary,
    fontWeight: 'bold'
  },
  formInput: {
    ...$margin(8, 0),
    padding: 12,
    borderWidth: 1,
    borderRadius: 4,
    borderStyle: 'solid',
    borderColor: "#EAEAEA",
  },
  formDropdown: {
    ...$margin(8, 0),
    padding: 12,
    borderWidth: 1,
    borderRadius: 4,
    borderStyle: 'solid',
    borderColor: "#EAEAEA",
    alignItems: 'center',
    flexDirection: 'row'
  },
  formInputRow: {
    ...$margin(8, 0),
    padding: 8,
    borderWidth: 1,
    borderRadius: 4,
    borderStyle: 'solid',
    borderColor: "#EAEAEA",
    alignItems: 'center',
    flexDirection: 'row'
  },
  itemInput: {
    flex: 1,
    padding: 4
  },
  uploadView: {
    width: 160,
    height: 160,
    ...$margin(8, 0),
    padding: 8,
    borderWidth: 1,
    borderRadius: 4,
    borderStyle: 'solid',
    borderColor: "#EAEAEA",
    alignItems: 'center',
    justifyContent: 'center'
  },
  uploadImage: {
    width: 160,
    height: 160,
    ...$margin(8, 0)
  },
  uploadTitle: {
    fontSize: 14,
    color: textPrimary,
    paddingTop: 8
  },
  uploadDesc: {
    fontSize: 12,
    color: textCancel,
    paddingTop: 2
  },
  buttonView: {
    marginTop: 32,
    marginBottom: 8
  }
})