<template>
  <!--新增勤务等级 -->
  <div>
    <el-dialog
      v-model="dialogFormVisiblejs"
      title="新增勤务等级"
      width="80%"
      top="5vh"
      :destroy-on-close="true"
    >
      <el-form
        ref="elform"
        :model="form"
        :rules="rules"
        :inline="true"
        label-position="top"
      >
        <el-form-item prop="qwdj" label="勤务等级">
          <el-select @change="checkQwdj" style="width: 100%" v-model="form.qwdj">
            <el-option
              v-for="dict in D_BZ_DJQW"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="width: 48%" required label="勤务起止时间">
          <el-date-picker
            style="width: 100%"
            v-model="qwQzsj"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            format="YYYY-MM-DD HH:mm"
            value-format="YYYY-MM-DD HH:mm:ss"
          />
        </el-form-item>
        <el-form-item prop="zxfw" label="执行范围">
          <el-select disabled style="width: 100%" v-model="form.zxfw">
            <el-option
              v-for="dict in D_BZ_ZXFW"
              :key="dict.value"
              :disabled="dict.value != '03'"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="jyzqrybl" label="建议执勤人员比例（%）">
          <el-input-number
            :max="100"
            :min="0"
            style="width: 100%"
            v-model="form.jyzqrybl"
            :step="1"
          />
        </el-form-item>
        <el-form-item prop="jyzqclbl" label="建议执勤车辆比例（%）">
          <el-input-number
            style="width: 100%"
            v-model="form.jyzqclbl"
            :step="1"
          />
        </el-form-item>
        <el-form-item
          class="twoh"
          style="width: 100%"
          prop="qwyy"
          label="勤务原因"
        >
          <el-input
            v-model="form.qwyy"
            placeholder="请填写勤务原因"
            show-word-limit
            type="textarea"
          />
        </el-form-item>
        <el-form-item
          class="twoh"
          style="width: 100%"
          prop="qwyq"
          label="勤务要求"
        >
          <el-input
            v-model="form.qwyq"
            placeholder="请填写勤务要求"
            show-word-limit
            type="textarea"
          />
        </el-form-item>
        <el-form-item style="width: 100%" prop="fjzl" label="附件资料">
          <MOSTY.Upload
            width="800px"
            :limit="3"
            :isImg="false"
            v-model="form.fjzl"
          ></MOSTY.Upload>
        </el-form-item>
        <el-form-item label="备注" style="width: 100%">
          <el-input
            v-model="form.bz"
            placeholder="请输入关键字"
            show-word-limit
            type="textarea"
          />
        </el-form-item>
      </el-form>
      <div class="but_box">
        <el-button
          type="primary"
          size="large"
          :loading="btnLoading"
          @click="submit"
          >保存</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import emitter from "@/utils/eventBus.js";
import * as MOSTY from "@/components/MyComponents/index";
import { addQwdj } from "@/api/service/grade.js";
import { getItem } from "@/utils/storage";
import { reactive, ref, onMounted, onUnmounted, getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();
const { D_BZ_DJQW, D_BZ_ZXFW } = proxy.$dict("D_BZ_DJQW", "D_BZ_ZXFW"); //获取字典数据
const dialogFormVisiblejs = ref(false); //是否显示对话框
const elform = ref(null); //表单对象
const btnLoading = ref(false); //按钮截流
const qwQzsj = ref([]); //勤务起止时间
//表单数据
const form = ref({
  jyzqclbl: 34,
  jyzqrybl: 34,
  zxfw: "03",
  qwdj: "",
  qwyy: "",
  qwyq: "",
  fjzl: "",
  bz: ""
});
//表单验证
const rules = reactive({
  qwdj: [
    {
      required: true,
      message: "请选择勤务等级",
      trigger: "change"
    }
  ],
  qwkssj: [
    {
      required: true,
      message: "请选择勤务开始日期",
      trigger: "change"
    }
  ],
  qwjssj: [
    {
      required: true,
      message: "请选择勤务结束日期",
      trigger: "change"
    }
  ],
  zxfw: [
    {
      required: true,
      message: "请选择执行范围",
      trigger: "change"
    }
  ]
});
onMounted(() => {
  emitter.on("showAddQw", (res) => {
    dialogFormVisiblejs.value = true;
  });
});
onUnmounted(() => {
  emitter.off("showAddQw");
});
//提交
function submit() {
  form.value.pzrId = getItem("USERID") + "";
  elform.value.validate((valid) => {
    if (valid) {
      btnLoading.value = true;
      setTimeout(() => {
        btnLoading.value = false;
      }, 1500);
      addQwdj(form.value).then(() => {
        proxy.$message({
          type: "success",
          message: "新增成功"
        });
        dialogFormVisiblejs.value = false;
      });
    }
  });
}
</script>

<style lang="scss" scoped>
.but_box {
  text-align: center;
}

::v-deep .el-input__inner,
::v-deep .el-input.is-disabled .el-input__inner {
  background: #001238;
  border: 1px solid #03438b;
  color: #fff;
}

::v-deep .el-range-input,
::v-deep .el-input-number__decrease,
::v-deep .el-input-number__increase {
  background: #001238;
  color: #fff;
}

::v-deep .el-range-separator {
  color: #fff;
}

::v-deep .el-form--inline {
  display: flex;
  flex-wrap: wrap;
  padding: 0rem 12rem 0rem 12rem;
}

::v-deep .el-form-item--default {
  width: 23%;
  padding-bottom: 1.5rem;
  margin: 0 1%;
}

::v-deep .el-form-item--default.two {
  width: 46%;
  padding-bottom: 1.5rem;
  margin: 0 1%;
}

::v-deep .el-form-item--default.one {
  width: 92%;
  padding-bottom: 1.5rem;
  margin: 0 1%;
}

::v-deep .el-textarea__inner {
  height: 5.5em;
  border: 1px solid #07376d;
  background-color: #02163b;
  color: #fff;
}
::v-deep .el-dialog{
  background: #02163b;
}
::v-deep .el-dialog__title{
  color: #fff;
}
::v-deep .el-form-item__label{
  color: #fff;
}
::v-deep.el-form{
  max-height: 74vh;
  overflow: hidden;
  overflow-y: auto;
}
</style>