<!-- 应急物资分类表 -->
<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="12">
              <el-form-item label="车牌号" prop="licensePlateNumber">
                <el-select
                  v-model="ruleForm.licensePlateNumber"
                  @change="handlerChange"
                  placeholder="请选择车牌号"
                  arable
                >
                  <el-option
                    v-for="item in options"
                    :key="item.licensePlateNumber"
                    :label="item.licensePlateNumber"
                    :value="item.licensePlateNumber"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="车架号" prop="vin">
                <el-input v-model="ruleForm.vin" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="车牌颜色" prop="licensePlateColor">
                <el-input v-model="ruleForm.licensePlateColor" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="车牌类型" prop="licensePlateType">
                <el-select v-model="ruleForm.licensePlateType" disabled 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="12">
              <el-form-item label="司机姓名" prop="driverName">
                <el-input v-model="ruleForm.driverName" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="联系电话" prop="contactPhone">
                <el-input v-model="ruleForm.contactPhone" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="运输物资" prop="transportMaterial">
                <el-input v-model="ruleForm.transportMaterial" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="起点" prop="startPoint">
                <el-input v-model="ruleForm.startPoint" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="终点" prop="endPoint">
                <el-input v-model="ruleForm.endPoint" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="开始送货时间" prop="startDeliveryTime">
                <el-date-picker
                  clearable
                  style="width: 100%"
                  v-model="ruleForm.startDeliveryTime"
                  type="datetime"
                  placeholder="请选择开始送货时间"
                  format="YYYY-MM-DD HH:mm"
                  value-format="YYYY-MM-DD HH:mm"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="预计送达时间" prop="estimatedArrivalTime">
                <el-date-picker
                  clearable
                  style="width: 100%"
                  v-model="ruleForm.estimatedArrivalTime"
                  type="datetime"
                  placeholder="请选择预计送达时间"
                  format="YYYY-MM-DD HH:mm"
                  value-format="YYYY-MM-DD HH:mm"
                >
                </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, onMounted } 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, getListCars } from "@/api/PowermanagementPositioning";
import { useGetters } from "@/hooks/storeHooks";
const { access_token } = useGetters(["access_token"]);
import { getQuery } from "@/hooks/detailQuery/index";
const props = getQuery("/Powermanagement/PositioningDetail");
const { usage_characteristics, vehicle_type } = useDict("usage_characteristics", "vehicle_type");
let options = ref([]);

const handlerGetOptions = () => {
  getListCars().then((res) => {
    options.value = res.data;
  });
};

const formSize = ref("default");
const ruleFormRef = ref<FormInstance>();
const ruleForm = ref({
  licensePlateNumber: "",
  licensePlateColor: "",
  vin: "",
  driverName: "",
  licensePlateType: "",
  contactPhone: "",
  transportMaterial: "",
  startPoint: "",
  endPoint: "",
  startDeliveryTime: "",
  estimatedArrivalTime: ""
});

const handlerChange = (item: any) => {
  if (options.value && options.value.length > 0) {
    options.value.forEach((element: any) => {
      if (element.licensePlateNumber == item) {
        ruleForm.value.licensePlateColor = element.licensePlateColor;
        ruleForm.value.licensePlateType = element.vehicleType;
        ruleForm.value.vin = element.vin;
      }
    });
  }
};

const driverPhotoAddressBlob = ref("");
const fileName = ref("");
const rules = reactive({
  licensePlateNumber: [{ required: true, message: "请填写，不能为空", trigger: "blur" }],
  vin: [{ required: true, message: "请选择，不能为空", trigger: "change" }],
  licensePlateColor: [{ required: true, message: "请选择，不能为空", trigger: "change" }],
  driverName: [{ required: true, message: "请选择，不能为空", trigger: "change" }],
  licensePlateType: [{ required: true, message: "请选择，不能为空", trigger: "change" }],
  transportMaterial: [{ required: true, message: "请选择，不能为空", trigger: "change" }],
  startPoint: [{ required: true, message: "请选择，不能为空", trigger: "change" }],
  endPoint: [{ required: true, message: "请选择，不能为空", trigger: "change" }],
  startDeliveryTime: [{ required: true, message: "请选择，不能为空", trigger: "change" }],
  estimatedArrivalTime: [{ required: true, message: "请选择，不能为空", trigger: "change" }]
});

/** 返回 */
const returnPage = () => {
  router.push({
    path: "/Powermanagement/Positioning"
  });
};
//提交方法
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      let postData = {
        ...ruleForm.value
      };
      console.log(postData);
      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;
    handlePreview(deptData.data.driverPhotoAddress);
  }
};
createdMth();
const handlePreview = (filePart) => {
  sysFile(filePart).then((res: any) => {
    const blob = new Blob([res], { type: "image/png" });
    const bFile = URL.createObjectURL(blob);
    fileName.value = filePart;
    driverPhotoAddressBlob.value = bFile;
    ruleForm.value.driverPhotoAddress = filePart;
  });
};
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
  createdMth();
};

onMounted(() => {
  handlerGetOptions();
});
</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>
