<template>
  <layout-card>
    <el-divider content-position="left">车辆选择</el-divider>
    <el-form
      ref="formRef"
      :model="data.form"
      :rules="rules"
      label-width="100px"
    >
      <el-row>
        <el-col :span="6">
          <el-form-item label="挂车车辆" prop="TRAILER_VEHICLE">
            <el-select
              v-model="data.form.TRAILER_VEHICLE"
              @change="fnGetTrailerInfo"
            >
              <el-option
                v-for="item in getTrailerList"
                :key="item.PLATE_NUMBER"
                :label="item.PLATE_NUMBER"
                :value="(data.TRAILERRECORD_NUMBER = item.FREIGHTTRAILER_ID)"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="登记编号" prop="RECORD_NUMBER">
            <el-input
              v-model="data.form.RECORD_NUMBER"
              placeholder="请输入登记编号"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-divider content-position="left">基本信息</el-divider>
      <el-row>
        <el-col :span="6">
          <el-form-item label="车牌号" prop="PLATE_NUMBER">
            <el-input v-model="data.Trailer.PLATE_NUMBER"
                      placeholder="--"
                      disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="车架号" prop="FRAMES_NUMBER">
            <el-input v-model="data.Trailer.VIN"
                      placeholder="--"
                      disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="车辆类型" prop="VEHICLE_TYPE">
            <el-input v-model="data.Trailer.TRAILER_TYPE"
                      placeholder="--"
                      disabled
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="车主业主" prop="CAR_OWNERS">
            <el-input v-model="data.Trailer.CAR_OWNERS"
                      placeholder="--"
                      disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="车主电话" prop="VEHICLEOWNER_NUMBER">
            <el-input
              v-model="data.Trailer.CAR_OWNERS_TEL"
              placeholder="--"
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="初登日期" prop="FIRSTSHOW_DATE">
            <el-input
              v-model="data.Trailer.INITIAL_REGISTRATION_DATE"
              placeholder="--"
              disabled
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="所属省份" prop="PROVINCE">
            <el-input v-model="data.Trailer.PROVINCE"
                      placeholder="--"
                      disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="所属地市" prop="CITY">
            <el-input v-model="data.form.CITY"
                      placeholder="--"
                      disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="所属区县" prop="COUNTY">
            <el-input v-model="data.form.COUNTY"
                      placeholder="--"
                      disabled
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="行驶证照片" prop="DRIVINGLICENSE_PHOTO">
            <layout-upload
              v-model:file-list="data.form.DRIVINGLICENSE_PHOTO"
              list-type="picture-card"
              accept=".jpg,.jpeg,.png"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-divider content-position="left">挂车税务信息</el-divider>
      <el-row>
        <el-col :span="6">
          <el-form-item label="车主业主" prop="VEHICLEOWNER">
            <el-input
              v-model="data.form.VEHICLEOWNER"
              placeholder="请填写车主业主"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="联系电话" prop="CONTACT_NUMBER">
            <el-input
              v-model="data.form.CONTACT_NUMBER"
              placeholder="请填写联系电话"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="登记人" prop="REGISTRANT">
            <el-input
              v-model="data.form.REGISTRANT"
              placeholder="请填写登记人"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="办理日期" prop="TRANSACTION_DATA">
            <el-date-picker
              v-model="data.form.TRANSACTION_DATA"
              value-format="YYYY-MM-DD"
              format="YYYY-MM-DD"
              type="date"
              placeholder="请选择办理日期"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="税务周期" prop="TAXESDUES_PERIOD">
            <el-select v-model="data.form.TAXESDUES_PERIOD">
              <el-option
                v-for="item in TaxesPeriodList"
                :key="item.BIANMA"
                :label="item.NAME"
                :value="item.NAME"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="到期日期" prop="EXPIRE_DATE">
            <el-date-picker
              v-model="data.form.EXPIRE_DATE"
              value-format="YYYY-MM-DD"
              format="YYYY-MM-DD"
              type="date"
              placeholder="请选择到期日期"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="提醒天数" prop="REMINDER_DAY">
            <el-input
              v-model="data.form.REMINDER_DAY"
              placeholder="请填写提醒天数"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="提醒日期" prop="REMINDER_DATA">
            <el-date-picker
              v-model="data.form.REMINDER_DATA"
              value-format="YYYY-MM-DD"
              format="YYYY-MM-DD"
              type="date"
              placeholder="请选择提醒日期"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="提醒状态">
            <el-switch
              v-model="data.form.REMINDER_STATUS"
              active-value="0"
              inactive-value="1"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="税费资料" prop="TAXESDUES_MATERIAL">
            <el-input
              v-model="data.form.TAXESDUES_MATERIAL"
              placeholder="请填写税费资料"
              type="textarea"
              :autosize="{ minRows: 3 }"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="备注" prop="REMARK">
            <el-input
              v-model="data.form.REMARK"
              placeholder="请填写备注"
              type="textarea"
              :autosize="{ minRows: 3 }"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="tc mt-10">
      <el-button type="primary" @click="fnSubmit">保存</el-button>
    </div>
  </layout-card>
</template>

<script setup>
import { reactive, ref } from "vue";
import {
  layoutFnGetTaxesPeriod,
  layoutFnGetTrailerList,
} from "@/assets/js/taxation_manage.js";
import LayoutUpload from "@/components/upload/index.vue";
import { debounce } from "throttle-debounce";
import useFormValidate from "@/assets/js/useFormValidate.js";
import { setTaxationManageAdd } from "@/request/taxation_manage.js";
import { getFreightTrailerView } from "@/request/enterprise_management.js";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
import { addingPrefixToFile } from "@/assets/js/utils.js";
const router = useRouter();
const TaxesPeriodList = await layoutFnGetTaxesPeriod();
const getTrailerList = await layoutFnGetTrailerList();

const rules = {
  TRAILER_VEHICLE: [
    { required: true, message: "挂车车辆不能为空", trigger: "blur" },
  ],
  VEHICLEOWNER: [
    { required: true, message: "车主/业主不能为空", trigger: "blur" },
  ],
  CONTACT_NUMBER: [
    { required: true, message: "联系电话不能为空", trigger: "blur" },
  ],
  REGISTRANT: [{ required: true, message: "登记人不能为空", trigger: "blur" }],
  TRANSACTION_DATA: [
    { required: true, message: "办理日期不能为空", trigger: "change" },
  ],
  TAXESDUES_PERIOD: [
    { required: true, message: "税费周期不能为空", trigger: "change" },
  ],
  EXPIRE_DATE: [
    { required: true, message: "到期日期不能为空", trigger: "change" },
  ],
  REMINDER_DAY: [
    { required: true, message: "提醒天数不能为空", trigger: "blur" },
  ],
  REMINDER_DATA: [
    { required: true, message: "提醒日期不能为空", trigger: "change" },
  ],
};
const formRef = ref(null);
const data = reactive({
  form: {
    TAXATION_ID: "",
    RECORD_NUMBER: "",
    PLATE_NUMBER: "",
    VEHICLEOWNER: "",
    CONTACT_NUMBER: "",
    TRANSACTION_DATA: "",
    TAXESDUES_PERIOD: "",
    EXPIRE_DATE: "",
    REGISTRANT: "",
    TRANSPORT_ENTERPRISES: "",
    REMINDER_STATUS: "",
    EXPIRE_STATUS: "",
    RECORD_STATUS: "",
    TRAILER_VEHICLE: "",
    FRAMES_NUMBER: "",
    VEHICLE_TYPE: "",
    VEHICLEOWNER_NUMBER: "",
    FIRSTSHOW_DATE: "",
    PROVINCE: "",
    CITY: "",
    COUNTY: "",
    REMINDER_DAY: "",
    REMINDER_DATA: "",
    TAXESDUES_MATERIAL: "",
    REMARK: "",
    REGISTER_NUMBER: "",
    VEHICLE_MODEL: "",
    VEHICLE_BRAND: "",
    DRIVINGLICENSE_PHOTO: [],
  },
  TrailerInfo: [],
  TRAILERRECORD_NUMBER: "",
  Trailer: {},
});
data.TrailerInfo = getTrailerList;
const info = ref({});
const fnGetTrailerInfo = async () => {
  const FREIGHTTRAILER_ID = data.form.TRAILER_VEHICLE;
  const resData = await getFreightTrailerView({ FREIGHTTRAILER_ID });
  info.value = resData.pd;
  info.value.TRAILER_IMG = addingPrefixToFile(resData.trailerImgs);
  info.value.DRIVING_LICENSE_IMG = addingPrefixToFile(
    resData.drivingLicenseImgs
  );
  info.value.OPER_CERTIFICATE_IMG = addingPrefixToFile(
    resData.operCertificateImgs
  );
  info.value.TRAILER_INFO = addingPrefixToFile(resData.trailerInfoImgs);
  data.Trailer = info.value
  data.form.PLATE_NUMBER = data.Trailer.PLATE_NUMBER
  data.form.FRAMES_NUMBER = data.Trailer.VIN
  data.form.VEHICLE_TYPE = data.Trailer.TRAILER_TYPE
  data.form.VEHICLEOWNER_NUMBER = data.Trailer.CAR_OWNERS_TEL
  data.form.FIRSTSHOW_DATE = data.Trailer.INITIAL_REGISTRATION_DATE
  data.form.DRIVINGLICENSE_PHOTO = data.Trailer.DRIVING_LICENSE_IMG
  data.form.VEHICLE_MODEL = data.Trailer.TRAILER_MODEL
  data.form.VEHICLE_BRAND = data.Trailer.TRAILER_BRAND
};
const fnSubmit = debounce(
  1000,
  async () => {
    await useFormValidate(formRef);
    const formData = new FormData();
    Object.keys(data.form).forEach((key) => {
      formData.append(key, data.form[key]);
    });
    formData.delete("DRIVINGLICENSE_PHOTO");
    if (data.form.DRIVINGLICENSE_PHOTO[0].raw)
      formData.append(
        "drivinglicenseFile",
        data.form.DRIVINGLICENSE_PHOTO[0].raw
      );
    formData.append(
      "drivinglicenseFileType",
      !!data.form.DRIVINGLICENSE_PHOTO[0].raw
    );
    await setTaxationManageAdd(formData);
    ElMessage.success("提交成功");
    router.back();
  },
  { atBegin: true }
);
</script>

<style scoped lang="scss"></style>