<template>
  <div>
    <MOSTY.FromPage :title="props.editObj.title" @closeDialog="black">
      <template #content>
        <MOSTY.Assort :title="'基本信息'" />
        <div class="box">
          <div style="display: flex; justify-content: center; margin-top: 10px;width: 100%;">
            <el-form ref="ruleFormRef" :model="data.formData" :rules="rules" label-width="120px" class="demo-ruleForm"
              status-icon :inline="true" style="display: inline-block;" label-suffix="："
              :disabled="!props.editObj.saveBtnShow">
              <el-row v-if="props.editObj.type == '10'">
                <el-col :span="24">
                  <el-form-item label="车辆选择" prop="carnumber">
                    <el-input v-model="data.formData.carnumber" placeholder="请选择车辆" disabled style="width: 650px">
                      <template #append>
                        <el-button @click="selectCar">选择</el-button>
                      </template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="起始时间" prop="startTime">
                    <el-date-picker v-model="data.formData.startTime" format="YYYY-MM-DD HH:mm:ss"
                      value-format="YYYY-MM-DD HH:mm:ss" type="datetime" placeholder="请先择起始时间" style="width: 250px" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="起始位置" prop="startAddr">
                    <el-input v-model="data.formData.startAddr" placeholder="请输入起始位置" style="width: 250px"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="终止位置" prop="endAddr">
                    <el-input v-model="data.formData.endAddr" placeholder="请输入起始位置" style="width: 250px"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="时长" prop="duration">
                    <el-input v-model.number="data.formData.duration" type='number' placeholder="请输入时长"
                      style="width: 250px"><template #append>秒</template> </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="速度" prop="speed">
                    <el-input v-model.number="data.formData.speed" type='number' placeholder="请输入速度"
                      style="width: 250px">
                      <template #append>km/h</template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="限速" prop="maxSpeed">
                    <el-input v-model.number="data.formData.maxSpeed" type='number' placeholder="请输入限速"
                      style="width: 250px"><template #append>km/h</template></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row v-if="props.editObj.type == '20'">
                <el-col :span="24">
                  <el-form-item label="车辆选择" prop="carnumber">
                    <el-input v-model="data.formData.carnumber" placeholder="请选择车辆" disabled style="width: 646px">
                      <template #append>
                        <el-button @click="selectCar">选择</el-button>
                      </template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="发生时间" prop="happenTime">
                    <el-date-picker v-model="data.formData.happenTime" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
                      type="date" placeholder="请输入发生日期" style="width: 646px" />
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="违规描述" prop="describes">
                    <el-input v-model="data.formData.describes" maxlength="500" type="textarea" show-word-limit
                      :rows="6" placeholder="请输入违规描述" style="width: 646px" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row v-if="props.editObj.type == '30' || props.editObj.type == '40'">
                <el-col :span="24">
                  <el-form-item label="车辆选择" prop="carnumber">
                    <el-input v-model="data.formData.carnumber" placeholder="请选择车辆" disabled style="width: 646px">
                      <template #append>
                        <el-button @click="selectCar">选择</el-button>
                      </template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="发生时间" prop="happenTime">
                    <el-date-picker v-model="data.formData.happenTime" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
                      type="date" placeholder="请输入发生日期" style="width: 250px" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="违章类型" prop="trafficType">
                    <el-select v-model="data.formData.trafficType" clearable placeholder="请选择违章类型" style="width: 250px">
                      <el-option v-for="item in D_BZ_GJJWZLX" :key="item" :label="item.label" :value="item.value" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="违章扣分" prop="score">
                    <el-input v-model.number="data.formData.score" type='number' placeholder="请输入违章扣分"
                      style="width: 250px"><template #append>分</template></el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="24">
                  <el-form-item label="违规描述" prop="describes">
                    <el-input v-model="data.formData.describes" maxlength="500" type="textarea" show-word-limit
                      :rows="6" placeholder="请输入违规描述" style="width: 646px" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row v-if="props.editObj.type == '50'">
                <el-col :span="24">
                  <el-form-item label="车辆选择" prop="carnumber">
                    <el-input v-model="data.formData.carnumber" placeholder="请选择车辆" disabled style="width: 646px">
                      <template #append>
                        <el-button @click="selectCar">选择</el-button>
                      </template></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="发生时间" prop="happenTime">
                    <el-date-picker v-model="data.formData.happenTime" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
                      type="date" placeholder="请输入发生日期" style="width: 250px" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="事故判定" prop="decide">
                    <el-select v-model="data.formData.decide" clearable placeholder="请选择事故判定" style="width: 250px">
                      <el-option v-for="item in D_BZ_SGPD" :key="item" :label="item.label" :value="item.value" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="事故责任" prop="duty">
                    <el-select v-model="data.formData.duty" clearable placeholder="请选择事故责任" style="width: 250px">
                      <el-option v-for="item in D_BZ_SGZR2" :key="item" :label="item.label" :value="item.value" />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row v-if="props.editObj.type == '60'">
                <el-col :span="24">
                  <el-form-item label="车辆选择" prop="carnumber">
                    <el-input v-model="data.formData.carnumber" placeholder="请选择车辆" disabled style="width: 646px">
                      <template #append>
                        <el-button @click="selectCar">选择</el-button>
                      </template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="酒驾时间" prop="happenTime">
                    <el-date-picker v-model="data.formData.happenTime" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
                      type="date" style="width: 646px" />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </div>
      </template>
      <template #footer>

        <el-button type="primary" v-loading='loadingshow' v-if="props.editObj.saveBtnShow" @click="submit(ruleFormRef)">
          <el-icon>
            <DocumentChecked />
          </el-icon>保存
        </el-button>
        <el-button @click="black">
          <el-icon>
            <DocumentDelete />
          </el-icon>关闭</el-button>
      </template>
    </MOSTY.FromPage>


    <!-- 选择证书模板 -->
    <CarList v-model="showCar" @changeClose="closeCarData" @listdata="getSonValue" :data="carData" />
  </div>
</template>
<script setup>
import { reactive, ref, watchEffect, getCurrentInstance, } from "vue";
import CarList from "./carList.vue";
import * as MOSTY from "@/components/MyComponents/index";
import PageTitle from "@/components/PageTitle/PageTitle.vue";
import { ElMessage } from "element-plus";
import { postApi } from "@/api/tobAcco_api.js";
import * as rule from "@/utils/rules.js";
import { JEblurFn } from "@/utils/auth.js";
const { proxy } = getCurrentInstance();
const { D_BZ_SGPD, D_BZ_SGZR2, D_BZ_GJJWZLX } = proxy.$dict("D_BZ_SGPD", "D_BZ_SGZR2", "D_BZ_GJJWZLX");
const props = defineProps({
  editObj: {
    type: Object,
    default: () => { },
  }
});
const loadingshow = ref(false)
const emit = defineEmits("changePage");
const ruleFormRef = ref();
const data = reactive({
  formData: {}
});
// 车辆选择框展示
const showCar = ref(false)
// 车辆数据
const carData = ref(null)
// 车辆选择
const selectCar = () => {
  showCar.value = true
}
const rules = {
  carnumber: [{ required: true, message: "请选择车辆", trigger: "blur" }],
  startTime: [{ required: true, message: "请选择起始时间", trigger: "change" }],
  startAddr: [{ required: true, message: "请输入起始位置", trigger: "blur" }],
  endAddr: [{ required: true, message: "请输入终止位置", trigger: "blur" }],
  ...rule.intRule({ validator: true, require: true }, "duration"),
  ...rule.intRule({ validator: true, require: true }, "speed"),
  ...rule.intRule({ validator: true, require: true }, "maxSpeed"),
  happenTime: [{ required: true, message: "请选择发生时间", trigger: "change" }],
  describes: [{ required: true, message: "请输入违规描述", trigger: "blur" }],
  trafficType: [{ required: true, message: "请选择违章类型", trigger: "blur" }],
  ...rule.numberzzsRule({ validator: true, require: true, iszs: true, num: 12 }, "score"),
  decide: [{ required: true, message: "请选择事故判定", trigger: "blur" }],
  duty: [{ required: true, message: "请输入事故责任", trigger: "blur" }],
};
// 保存车辆数据
const getSonValue = (value) => {
  carData.value = value
  data.formData.userid = value.userid
  data.formData.username = value.drivername
  data.formData.driverid = value.driverid
  data.formData.carmsgid = value.carmsgid
  data.formData.carnumber = value.carnumber
}
// 保存
const submit = async (formEl) => {
  if (!formEl) return;
  await formEl.validate((valid) => {
    if (valid) {
      loadingshow.value = true
      if (!data.formData.id) {
        postApi(data.formData, "/mosty-jcgl/driverViolation/addTbDriverViolationOne")
          .then(() => {
            ElMessage.success("新增成功");
            black()
            loadingshow.value = false
          })
      } else {
        postApi(data.formData, "/mosty-jcgl/driverViolation/updateTbDriverViolationOne")
          .then(() => {
            ElMessage.success("修改成功");
            loadingshow.value = false
            black()
          })
      }
    } else {
      ElMessage.error("请输入必填项!");
    }
  });
};
// 关闭车辆选择
const closeCarData = (val) => {
  showCar.value = val
}
const black = () => {
  let obj = {
    ...props.editObj
  };
  emit("changePage", "Main", obj);
};

watchEffect(() => {
  if (props.editObj) {
    data.formData = props.editObj;
  }
});
</script>
<style lang="scss" scoped>
.box {

  width: 800px;
  color: black;
  font-size: 20px;
  margin: 0 auto;
}
</style>