<template>
  <div>
    <div class="bigBox">
      <MOSTY.FromPage :title="props.title" @closeDialog="CloseEvent">
        <template #content>
          <MOSTY.Assort :title="'基本信息'" />
          <el-form :model="dialogForm" :rules="rules" ref="ruleFormRef" label-width="150px"
            :disabled="!props.saveBtnShow">
            <el-form-item label="标题：" prop="reportname">
              <el-input v-model="dialogForm.reportname" style="width: 337px;" />
            </el-form-item>
            <el-form-item label="姓名：" style="display: flex" prop="username">
              <el-input v-model="dialogForm.username" readonly style="width: 337px;">
                <template #append>
                  <el-button @click="ChooesDdld('01')" class='cursor'>选择</el-button>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item label="年份：" prop="year">
              <el-date-picker style="width:337px" v-model="dialogForm.year" type="year" format="YYYY"
                value-format="YYYY" placeholder="请选择年份"></el-date-picker>
            </el-form-item>
            <el-form-item label="是否涉及安全内容：" prop="issafte">
              <!-- <el-select v-model="dialogForm.issafte" filterable style="width: 337px;">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
              </el-select> -->
              <MOSTY.DictRidioAndSelect style="width:337px" selectType="select" :dictData="options"
                v-model="dialogForm.issafte" />
            </el-form-item>
            <el-form-item label="备注：" style="overflow-x: scroll;">
              <el-input v-model="dialogForm.bz" type="textarea" autosize style="width: 844px" />
            </el-form-item>
            <el-form-item label="附件：">
              <MOSTY.Upload v-model="dialogForm.files" :delrow="delrow"
                :placeholder="'请上传pdf,ofd, doc, docx, xls, xlsx,wps'"
                :gsgfList="['pdf', 'ofd', 'doc', 'docx', 'xls', 'xlsx', 'wps']" :isEdit="fileEdit" :ShowfileList="true"
                :isAutoWidth="true" @filehandleChange="changeFile" :showinput="true" :limit="4" :nopicer="true"
                :isImg="false" />
            </el-form-item>
          </el-form>
        </template>
        <template #footer>

          <el-button type="primary" v-loading='loading' @click="save(ruleFormRef)" v-if="props.saveBtnShow">
            <el-icon>
              <DocumentChecked />
            </el-icon>
            <span>保存</span>
          </el-button>
          <el-button type="primary" @click="CloseEvent">
            <el-icon>
              <DocumentDelete />
            </el-icon>
            <span>关闭</span>
          </el-button>
        </template>
      </MOSTY.FromPage>
    </div>
    <ChooseUser v-model="chooseUserVisible" :Single="singleShow" :leaderid="leaderid" :deptId="props.orgcode"
      @choosedUsers="getSonValue"></ChooseUser>
  </div>
</template>

<script setup>
// 引入
import { reactive, getCurrentInstance, ref, defineProps, watch } from "vue";
import { postApi } from "@/api/tobAcco_api.js";
import ChooseUser from "@/components/MyComponents/ChooseUser/Leader.vue";
import { ElMessage } from "element-plus";
import * as MOSTY from "@/components/MyComponents/index";
const emits = defineEmits(["close"]);
const { proxy } = getCurrentInstance();
const options = [
  {
    value: "1",
    label: "是"
  },
  {
    value: "2",
    label: "否"
  }
];
const props = defineProps({
  saveBtnShow: {
    default: true,
    type: Boolean
  },
  title: String,
  orgcode: String,
  rowData: {
    default: {},
    type: Object
  }
});
// 数据
const rules = reactive({
  reportname: [{ required: true, message: "请输入标题", trigger: "change" }],
  username: [{ required: true, message: "请输入姓名", trigger: "change" }],
  issafte: [{ required: true, message: "请选择是否涉及安全内容", trigger: "change" }],
  year: [{ required: true, message: "请选择年份", trigger: "change" }],
});
const chooseUserVisible = ref(false);
const singleShow = ref(true); //单选多选
const leaderid = ref("");
const dialogForm = ref({});
const fileEdit = ref(true);
const zzlx = ref(null);
// 新的文件上传返回
const changeFile = (row) => {
};
function ChooesDdld(val) {
  zzlx.value = val;
  leaderid.value = "";
  if (val == "01") {
    leaderid.value = dialogForm.value.userid;
  }
  chooseUserVisible.value = true;
  singleShow.value = true;
}
const getSonValue = (value) => {
  dialogForm.value.username = value[0].userName;
  dialogForm.value.userid = value[0].id;
};
watch(
  () => props.rowData,
  (val) => {
    dialogForm.value = val;
  },
  { deep: true, immediate: true }
);

const ruleFormRef = ref();
//关闭综合配置表
const CloseEvent = () => {
  if (props.saveBtnShow) {
    proxy.$modal.confirm('离开会丢失页面中修改的内容，确认离开吗？')
      .then(() => {
        // 关闭上一次的表单校验
        ruleFormRef.value.clearValidate();
        emits("close");
      })
      .catch(() => {
        // catch error
      })
  } else {
    // 关闭上一次的表单校验
    ruleFormRef.value.clearValidate();
    emits("close");
  }

};

// 接收外层新增保存
const loading = ref(false); //新增保存按钮截流
const save = async (ruleFormRef) => {
  if (!ruleFormRef) return;
  await ruleFormRef.validate((valid) => {
    if (valid) {
      loading.value = true;
      dialogForm.value.files = dialogForm.value.files ? dialogForm.value.files.toString() : null;
      if (!dialogForm.value.id) {
        let params = dialogForm.value;
        postApi(params, "/mosty-jcgl/performanceReport/add").then((res) => {
          loading.value = false;
          ElMessage.success("新增成功");
          emits("close");
        }).catch(() => {
          loading.value = false;
        })
      } else {
        let params = dialogForm.value;
        postApi(params, "/mosty-jcgl/performanceReport/edit").then((res) => {
          loading.value = false;
          ElMessage.success("修改成功");
          emits("close");
        }).catch(() => {
          loading.value = false;
        })
      }
    } else {
      ElMessage.error("请输入必填项!");
    }
  });
};
</script>

<style lang="scss" scoped>
// ::v-deep .el-form-item__content {
//   flex-wrap: nowrap !important;
// }

.bigBox {
  width: 100%;
  box-sizing: border-box;
}

.el-form {
  width: 90%;
  margin: 0 auto;
  flex-wrap: wrap;

  .el-form-item {
    width: 100%;
    margin-right: 20px;
  }
}
</style>
