<template>
  <div>
    <MOSTY.FromPage :title="pageTitle" @closeDialog="black">
      <template #content>
        <MOSTY.Assort :title="'基础信息'" />
        <div class="Box">
          <el-form ref="ruleFormRef" :model="formData" :rules="rules" label-width="100px" status-icon :inline="true"
            :disabled="!saveBtnShow">
            <el-form-item label="单位：">
              <el-input v-model="formData.orgname" disabled placeholder="请输入单位" style="width: 335px"></el-input>
            </el-form-item>
            <el-form-item label="登记部门：">
              <el-input v-model="formData.section" disabled placeholder="请输入登记部门" style="width: 335px"></el-input>
            </el-form-item>
            <el-form-item label="记录人：">
              <el-input v-model="formData.recorder" disabled placeholder="请输入记录人" style="width: 335px"></el-input>
            </el-form-item>
            <el-form-item label="员工姓名：" prop="username">
              <el-input v-model="formData.username" disabled placeholder="请输入员工姓名" style="width: 335px" readonly>
                <template #append>
                  <el-button class='cursor' @click="ChooesDdld()">选择</el-button></template>
              </el-input>
            </el-form-item>
            <el-form-item label="所属部门：" prop="userorgname">
              <el-input v-model="formData.userorgname" disabled placeholder="请输入所属部门" style="width: 335px"></el-input>
            </el-form-item>
            <el-form-item label="驾驶证号：" prop="licensenumber">
              <el-input v-model="formData.licensenumber" placeholder="请输入驾驶证号" style="width:335px"></el-input>
            </el-form-item>
            <el-form-item label="车牌号" prop="carbrand">
              <el-input v-model="formData.carbrand" placeholder="请输入车牌号" style="width: 335px"></el-input>
            </el-form-item>
            <el-form-item label="联系电话:" prop="phonenumber">
              <MaskInput v-model="formData.phonenumber" placeholder="请输入联系电话：" style="width: 335px" />
            </el-form-item>
            style="width:335px" />
            <!-- <el-form-item label="联系电话:" prop="phonenumber">
              <el-input v-model="formData.phonenumber" placeholder="请输入联系电话" style="width:335px"></el-input>
            </el-form-item> -->
          </el-form>

        </div>
      </template>
      <template #footer>

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

    <!-- 选择带队领导 -->
    <ChooseUser v-model="chooseUserVisible" :Single="singleShow" :data="memberList" :leaderid="leaderid"
      @choosedUsers="getSonValue"></ChooseUser>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
import * as MOSTY from "@/components/MyComponents/index";
import ChooseUser from "@/components/MyComponents/ChooseUser/Leader.vue";
import * as rule from "@/utils/rules.js";
import { ElMessage } from "element-plus";
import MaskInput from "@/components/MaskInput.vue"
import { getApi, postApi } from "@/api/tobAcco_api.js";
import { getItem } from "@/utils/storage";
const { proxy } = getCurrentInstance();
const rules = reactive({
  username: [{ required: true, message: "员工姓名不能为空", trigger: "blur" }],
  userorgname: [{ required: true, message: "所属部门不能为空", trigger: "blur" }],
  ...rule.identityCardRule({ require: true, validator: true, text: '驾驶证号' }, 'licensenumber'),
  carbrand: [{ required: true, message: "车牌号不能为空", trigger: "blur" }],
  ...rule.phoneRule({ validator: true, require: true }, "phonenumber"),
});

const props = defineProps({
  editObj: {
    type: Object,
    default: () => { }
  }
});
const chooseUserVisible = ref(false);
const loadingshow = ref(false);
const leaderid = ref("");
const singleShow = ref(true); //单选多选
const emit = defineEmits("changePage");
const ruleFormRef = ref();
const pageTitle = ref("私车登记新增");
const saveBtnShow = ref(true)
const dept = reactive(getItem("deptId"));
const formData = ref({});

const validateObj = ref({})

onMounted(() => {
  if (props.editObj) {
    pageTitle.value = props.editObj.title;
    saveBtnShow.value = props.editObj.saveBtnShow;
  }
  if (props.editObj.id) {
    getxqData(props.editObj.id)
  }
  formData.value.orgname = dept.ssdwmc
  formData.value.orgid = dept.ssdwid
  formData.value.section = dept.ssbmmc
  formData.value.sectionid = dept.ssbmid
  formData.value.recorder = getItem("USERNAME")
});
//获取详情
function getxqData(id) {
  getApi({ id }, '/mosty-jcgl/privatecar/queryPrivatecarById').then(res => {
    formData.value = res;
    formData.value.section = dept.ssbmmc
    formData.value.sectionid = dept.ssbmid
    formData.value.recorder = getItem("USERNAME")
  })
}
//选择员工姓名
function ChooesDdld() {
  leaderid.value = formData.value.userid ? formData.value.userid : null;
  singleShow.value = true;
  chooseUserVisible.value = true;
}
const getSonValue = (value) => {
  formData.value.username = value[0].userName;
  formData.value.userid = value[0].id;
  formData.value.userorgcode = value[0].deptId;
  formData.value.userorgname = value[0].deptName;
}
// 保存
const submit = async (formEl) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      loadingshow.value = true
      if (!formData.value.id) {
        postApi(formData.value, "/mosty-jcgl/privatecar/addPrivatecarOne").then((res) => {
          ElMessage.success("新增成功");
          emit("changePage", "Main");
          loadingshow.value = false
        })

      } else {
        postApi(formData.value, '/mosty-jcgl/privatecar/updatePrivatecarOne').then((res) => {
          ElMessage.success("修改成功");
          emit("changePage", "Main");
          loadingshow.value = false
        })

      }
    } else {
      ElMessage.error("请输入必填项!");
    }
  });
};

const black = () => {
  proxy.$modal.confirm('离开会丢失页面中修改的内容，确认离开吗？')
    .then(() => {
      emit("changePage", "Main");
    })
    .catch(() => {
      // catch error
    })

};
</script>

<style lang="scss" scoped>
::v-deep .el-cascader,
::v-deep .el-select {
  width: 100%;
}

.Box {
  width: 1100px;
  margin: auto;
  color: black;
  font-size: 20px;
  display: flex;
  justify-content: center;
}

.el-form {
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
}

.el-form-item {
  display: flex;
  align-items: center;
}

::v-deep .el-form-item--default .el-form-item__content {
  line-height: 32px;
}

.el-form--inline.el-form--label-top .el-form-item {
  display: flex;
  align-items: center;

}

.el-form--default.el-form--label-top .el-form-item .el-form-item__label {
  margin-bottom: 0px;
  line-height: 50px;
  width: 71px;
}
</style>