<!-- 应急物资分类表 -->
<template>
  <basic-container>
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-width="auto"
      class="demo-ruleForm"
      :size="formSize"
      status-icon
      label-suffix=":"
      :disabled="props.type == 'look'"
    >
      <el-row :gutter="24">
        <el-col :span="24">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="车牌号" prop="licensePlateNumber">
                <el-input v-model="ruleForm.licensePlateNumber" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="车架号" prop="vin">
                <el-input v-model="ruleForm.vin" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="车辆类型" prop="vehicleType">
                <el-select v-model="ruleForm.vehicleType" clearable>
                  <el-option v-for="item in vehicle_type" :key="item.id" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="车牌颜色" prop="licensePlateColor">
                <el-input v-model="ruleForm.licensePlateColor" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="驾驶证号" prop="drivingLicenseNumber">
                <el-input v-model="ruleForm.drivingLicenseNumber" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="车辆所有人" prop="vehicleOwner">
                <el-input v-model="ruleForm.vehicleOwner" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="住址" prop="address">
                <el-input v-model="ruleForm.address" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="使用性质" prop="usageNature">
                <el-select v-model="ruleForm.usageNature" clearable>
                  <el-option
                    v-for="item in usage_characteristics"
                    :key="item.id"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="品牌型号" prop="brandModel">
                <el-input v-model="ruleForm.brandModel" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="车辆识别代号" prop="vehicleIdentificationNumber">
                <el-input v-model="ruleForm.vehicleIdentificationNumber" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="发动机号码" prop="engineNumber">
                <el-input v-model="ruleForm.engineNumber" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="注册日期" prop="registrationDate">
                <el-date-picker
                  clearable
                  style="width: 100%"
                  v-model="ruleForm.registrationDate"
                  type="date"
                  placeholder="请选择注册日期"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="发证日期" prop="certificateIssueDate">
                <el-date-picker
                  clearable
                  style="width: 100%"
                  v-model="ruleForm.certificateIssueDate"
                  type="date"
                  placeholder="请选择发证日期"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="发证机关" prop="certificateIssuingAuthority">
                <el-input v-model="ruleForm.certificateIssuingAuthority" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="核定载人数" prop="approvedPassengerCapacity">
                <el-input v-model="ruleForm.approvedPassengerCapacity" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="总质量" prop="grossMass">
                <el-input v-model="ruleForm.grossMass" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="整备质量" prop="unladenMass">
                <el-input v-model="ruleForm.unladenMass" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="外廓尺寸" prop="outerDimensions">
                <el-input v-model="ruleForm.outerDimensions" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="检验有效期" prop="inspectionValidityPeriod">
                <el-date-picker
                  clearable
                  style="width: 100%"
                  v-model="ruleForm.inspectionValidityPeriod"
                  type="date"
                  placeholder="请选择检验有效期"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-form>
    <div class="operationbox">
      <el-button v-if="props.type != 'look'" type="primary" @click="submitForm(ruleFormRef)">保存</el-button>
      <el-button @click="returnPage">返回</el-button>
    </div>
  </basic-container>
</template>

<script setup lang="ts">
import { reactive, ref, computed } from "vue";
import type { FormInstance } from "element-plus";
import { Plus } from "@element-plus/icons-vue";
import router from "@/router";
import type { UploadProps } from "element-plus";
import { useDict } from "@/hooks/dict";
import { ElMessage } from "element-plus";
import { sysFile } from "@/api/inAndOut/formationFilling/in";
import { addDriverInfo, getDriverDetail, updataDriverInfo } from "@/api/Powermanagement";
import { useGetters } from "@/hooks/storeHooks";
const { access_token } = useGetters(["access_token"]);
import { getQuery } from "@/hooks/detailQuery/index";
const props = getQuery("/Powermanagement/vehiclesDetail");
const { usage_characteristics, vehicle_type } = useDict("usage_characteristics", "vehicle_type");

const formSize = ref("default");
const ruleFormRef = ref<FormInstance>();
const ruleForm = ref({
  vehicleType: "",
  licensePlateNumber: "",
  vin: "",
  licensePlateColor: "",
  drivingLicenseNumber: "",
  vehicleOwner: "",
  address: "",
  usageNature: "",
  brandModel: "",
  vehicleIdentificationNumber: "",
  engineNumber: "",
  registrationDate: "",
  certificateIssueDate: "",
  certificateIssuingAuthority: "",
  approvedPassengerCapacity: "",
  grossMass: "",
  unladenMass: "",
  outerDimensions: "",
  inspectionValidityPeriod: ""
});
const driverPhotoAddressBlob = ref("");
const fileName = ref("");
const rules = reactive({
  licensePlateNumber: [{ required: true, message: "请填写，不能为空", trigger: "blur" }],
  vehicleType: [{ required: true, message: "请选择，不能为空", trigger: "change" }],
  vin: [{ required: true, message: "请选择，不能为空", trigger: "change" }],
  licensePlateColor: [{ required: true, message: "请选择，不能为空", trigger: "change" }]
});
//提交方法
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      let postData = {
        ...ruleForm.value
      };
      if (props.type == "edit") {
        updataDriverInfo(postData).then((res: any) => {
          if (res.code === 0) {
            ElMessage({
              message: "修改成功！",
              type: "success"
            });
            returnPage();
          }
        });
      } else {
        addDriverInfo(postData).then((res: any) => {
          if (res.code === 0) {
            ElMessage({
              message: "新增成功！",
              type: "success"
            });
            returnPage();
          }
        });
      }
      console.log("submit!");
    } else {
      console.log("error submit!", fields);
    }
  });
};
const createdMth = async () => {
  if (props.id) {
    let deptData = await getDriverDetail(props.id);
    ruleForm.value = deptData.data;
  }
};
createdMth();
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
  createdMth();
};

/*----------------------头像-----------------*/
//附件部分
const myHeader = { Authorization: "Bearer " + access_token.value };
const fileUrl = "/admin/sysFile/uploadVoucher";
let paramsData = reactive({
  bucket: "bound"
});

const handleAvatarSuccess: UploadProps["onSuccess"] = (response, uploadFile) => {
  handlePreview(response.data.fileName);
};
const beforeAvatarUpload: UploadProps["beforeUpload"] = (rawFile) => {
  // if (rawFile.type !== "image/jpeg") {
  //   ElMessage.error("Avatar picture must be JPG format!");
  //   return false;
  // } else if (rawFile.size / 1024 / 1024 > 2) {
  //   ElMessage.error("Avatar picture size can not exceed 2MB!");
  //   return false;
  // }
  return true;
};

/** 返回 */
const returnPage = () => {
  router.push({
    path: "/Powermanagement/vehicles"
  });
};
</script>

<style lang="scss" scoped>
.operationbox {
  text-align: center;
  margin-top: 30px;
}
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
