<template>
  <div>
    <el-dialog title="新增综合检查" width="50%" v-model="props.diaShow" @close="closeDialog" :before-close="handleClose">
      <div class="titleBox">
        <div class="title">安全责任告知书</div>
        <el-button type="primary">
          <el-icon>
            <Download />
          </el-icon>
          <span>导出</span>
        </el-button>
      </div>
      <el-form :model="fromList" :rules="rules" label-width="140px" class="demo-ruleForm" :size="formSize" status-icon>
        <el-form-item label="受检单位：">
          <el-input placeholder="请输入受检单位" v-model="fromList.sjdw" clearable style="width: 100%"></el-input>
        </el-form-item>
        <el-form-item label="检查时间：" required>
          <el-date-picker v-model="fromList.startTime" type="datetime" label="检查时间" placeholder="Pick a date"
            style="width: 100%" />
        </el-form-item>
        <el-form-item label="受检负责人签字：">
          <el-input placeholder="请输入受检负责人名字" v-model="fromList.fzrqz" clearable style="width: 100%"></el-input>
        </el-form-item>
        <el-form-item label="第几检查组：">
          <el-input placeholder="请输入第几检查组" v-model="fromList.jcz" clearable style="width: 100%"></el-input>
        </el-form-item>
        <el-form-item label="组长：">
          <el-input v-model="fromList.zzxm" clearable style="width: 100%"></el-input>
        </el-form-item>
        <el-form-item label="组员：">
          <el-input v-model="fromList.zyxm" clearable style="width: 100%"></el-input>
        </el-form-item>
        <el-form-item label="存在的隐患（问题）">
          <el-input v-model="fromList.czyhwt" type="textarea" clearable style="width: 100%"></el-input>
        </el-form-item>
        <el-form-item label="判定依据">
          <el-input v-model="fromList.pdyj" type="textarea" clearable style="width: 100%"></el-input>
        </el-form-item>
        <el-form-item label="隐患类别">
          <el-input v-model="fromList.yhlb" type="textarea" clearable style="width: 100%"></el-input>
        </el-form-item>
        <el-form-item label="整改建议">
          <el-input v-model="fromList.zgyj" type="textarea" clearable style="width: 100%"></el-input>
        </el-form-item>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="handleSave">
            <el-icon>
              <DocumentChecked />
            </el-icon>
            <span>保存</span>
          </el-button>
          <el-button @click="handleClose" type="primary">
            <el-icon>
              <DocumentDelete />
            </el-icon>
            <span>关闭</span>
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
// 引入
import { defineProps, ref, defineEmits, getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();
// 数据

const props = defineProps({
  diaShow: {
    type: Boolean,
    default: false
  }
});
const emits = defineEmits(["changeAqVi"]);
const fromList = ref({
  sjdw: "",
  startTime: "",
  fzrqz: "",
  jcz: "",
  zzxm: "",
  zyxm: "",
  czyhwt: "",
  pdyj: "",
  yhlb: "",
  zgyj: ""
});

// 方法

const closeDialog = () => {
  emits("changeAqVi", false);
};
const handleSave = () => {
  emits("changeAqVi", false);
};
const handleClose = () => {
  proxy.$modal.confirm('离开会丢失页面中修改的内容，确认离开吗？')
    .then(() => {
      emits("changeAqVi", false);
    })
    .catch(() => {
      // catch error
    })

};
</script>

<style lang="scss" scoped>
.el-form {
  margin-top: 20px;
  flex-wrap: wrap;
  justify-content: space-between;

  .el-form-item {
    width: 800px;
  }
}

.titleBox {
  align-items: center;
  padding: 20px;
  border: 1px solid rgb(32, 75, 54);
}

.content {
  margin-top: 50px;

  div {
    margin-bottom: 20px;
  }
}

.one {
  display: flex;
  width: 100%;
  justify-content: space-between;

  div {
    width: 32%;
    display: flex;

    // align-items: center;
    .el-input {
      width: 60%;
    }
  }
}

.two {
  display: flex;
  justify-content: space-between;
  align-items: center;

  span {
    width: 15%;
  }
}
</style>