<template>
  <div>
    <div class="bigBox">
      <MOSTY.FromPage :title="props.title" @closeDialog="CloseEvent">
        <template #content>
          <MOSTY.Assort :title="'基本信息'" />
          <span v-if="props.isShow" style="color: red;">
            注：需点击预览文件并预览后,任务列表中的处置状态才会变更为已处理
          </span>
          <div class="frobox">
            <el-form ref="ruleFormRef" :model="data.formData" :rules="rules" :disabled="!props.saveBtnShow"
              label-width="120px" class="demo-ruleForm" status-icon :inline="true" label-position="right">
              <el-form-item label="法律法规名称:" style="width: 90%" prop="lawname">
                <el-input v-model="data.formData.lawname" placeholder="请输入法律名称" style="width: 100%"></el-input>
              </el-form-item>
              <el-form-item label="发布单位:" style="width: 30%" prop="promulgationcompany">
                <el-input v-model="data.formData.promulgationcompany" placeholder="请输入颁布单位"
                  style="width: 100%"></el-input>
              </el-form-item>
              <el-form-item label="发布日期:" style="width: 30%" prop="promulgationdate">
                <el-date-picker v-model="data.formData.promulgationdate" type="date" placeholder="请输入颁布日期"
                  :disabled-date="disablednowDate1" :shortcuts="shortcuts" :size="size" value-format="YYYY-MM-DD"
                  style="width: 100%" @change="data.formData.implementationdate = ''" />
              </el-form-item>
              <el-form-item label="生效日期:" style="width: 30%" prop="implementationdate">
                <el-date-picker v-model="data.formData.implementationdate" type="date" placeholder="请输入实施日期"
                  :disabled-date="disablednowDate" :shortcuts="shortcuts" :size="size" style="width: 100%"
                  value-format="YYYY-MM-DD" />
              </el-form-item>
              <el-form-item label="文号:" style="width: 30%" prop="documentNumber">
                <el-input v-model="data.formData.documentNumber" placeholder="请输入文号" style="width: 100%"></el-input>
              </el-form-item>
              <el-form-item label="法律法规等级:" style="width: 30%" prop="lawLevel">
                <MOSTY.DictTree :zdbh="'LAW_LEVEL'" v-model="data.formData.lawLevel" :placeholder='"请选择法律法规等级"'
                  :disabled="!props.saveBtnShow" style="width: 100%" />
              </el-form-item>
              <el-form-item label="法律法规类型:" style="width: 30%" prop="lawType">
                <MOSTY.DictTree :zdbh="'LAW_TYPE'" v-model="data.formData.lawType" :placeholder='"请选择法律法规类型"'
                  :disabled="!props.saveBtnShow" style="width: 100%" />
              </el-form-item>
              <el-form-item label="录入单位:" style="width: 30%" prop="orgName">
                <el-input v-model="data.formData.orgName" placeholder="请输入录入单位" :disabled="true"
                  style="width: 100%"></el-input>
              </el-form-item>
              <el-form-item label="资源简介:" prop="bz" style="width: 90%">
                <el-input v-model="data.formData.bz" type="textarea" :rows="6" show-word-limit maxlength="600" />
              </el-form-item>
              <el-form-item label="资源附件：" prop="fileid" style="width: 90%;">
                <MOSTY.Upload :isAutoWidth="true" v-model="data.formData.fileid" :limit="3" :nopicer="true"
                  :isShow="props.isShow" :studyShowId="props.studyShowId" :delrow="delrow"
                  :disabled="!props.saveBtnShow" @filehandleChange="changeFile" :ShowfileList="true" :isImg="false"
                  :showinput="true" :placeholder="'请上传pdf,ofd, doc, docx, wps,xls, xlsx,wps'"
                  :gsgfList="['pdf', 'ofd', 'doc', 'docx', 'wps', 'xls', 'xlsx', 'wps']" />
                <!-- <el-button class="ml10" type="primary" @click="handleViewFile">
                  <el-icon>
                    <View />
                  </el-icon>
                  <span>查看历史附件</span>
                </el-button> -->
              </el-form-item>
            </el-form>
          </div>
        </template>
        <template #footer>
          <el-button style="margin-left: 10px" type="primary" v-if="props.saveBtnShow" :loading="loading"
            @click="searchHander(ruleFormRef)">
            <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>
    <el-dialog v-model="dialogVisible" title="Tips" width="50%">
      <span>历史附件</span>
      <template v-if="historyFiles">
        <MOSTY.Upload :widthNumber="510" v-model="historyFiles" :limit="3" :nopicer="true" :delrow="delrow"
          :disabled="true" @filehandleChange="changeFile" :ShowfileList="true" :isImg="false" :showinput="true"
          :placeholder="'请上传pdf,ofd, doc, docx, wps,xls, xlsx,wps'"
          :gsgfList="['pdf', 'ofd', 'doc', 'docx', 'wps', 'xls', 'xlsx', 'wps']" />
      </template>
      <el-empty description="暂无历史附件" v-else />
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">关闭</el-button>
        </span>
      </template>
    </el-dialog>
  </div>

</template>

<script setup>
// 引入
import {
  reactive,
  onMounted,
  ref,
  defineProps,
  watch,
  getCurrentInstance
} from "vue";
import { disablednowDate1 } from "@/utils/tools.js";
import { ElMessage } from "element-plus";
import { getApi, deleteApi, putApi, postApi } from "@/api/tobAcco_api.js";
import * as MOSTY from "@/components/MyComponents/index";
const emits = defineEmits(["close"]);
const { proxy } = getCurrentInstance();
const fujiandata = ref([]);
const ruleFormRef = ref();
const dialogVisible = ref(false);
const historyFiles = ref('');
const data = reactive({
  formData: {}
});
const rules = reactive({
  lawname: [{ required: true, message: "法律名称不能为空", trigger: "blur" }],
  promulgationdate: [
    { required: true, message: "发布日期", trigger: "blur" }
  ],
  implementationdate: [
    { required: true, message: "生效日期", trigger: "blur" }
  ],
  promulgationcompany: [
    { required: true, message: "发布单位", trigger: "blur" }
  ],
  bz: [
    { required: true, message: "资源简介", trigger: "blur" }
  ],
  fileid: [{ required: true, message: "资源附件不能为空", trigger: "blur" }],
  lawType: [
    { required: true, message: "法律法规类型不能为空", trigger: "blur" }
  ],
  orgName: [
    { required: true, message: "录入单位不能为空", trigger: "blur" }
  ],
  lawLevel: [{ required: true, message: "法律法规等级不能为空", trigger: "blur" }],
  documentNumber: [{ required: true, message: "文号不能为空", trigger: "blur" }]
});

const props = defineProps({
  saveBtnShow: {
    default: true,
    type: Boolean
  },
  isShow: {
    default: false,
    type: Boolean
  },
  studyShowId: {
    type: String,
    default: ''
  },
  title: String,
  zdlist: Object,
  editObj: {
    type: Object,
    default: () => { }
  },
  orgData: {
    type: Object,
    default: () => { }
  }
});
watch(
  () => props.editObj,
  (val) => {
    if (val) {
      data.formData = JSON.parse(JSON.stringify(val));
    }
  },
  { deep: true, immediate: true }
);
const handleViewFile = () => {
  historyFiles.value = data.formData.historyFileid
  dialogVisible.value = true
}
onMounted(() => {
  if (props.orgData.orgId) {
    data.formData.orgName = props.orgData.orgName
    data.formData.orgId = props.orgData.orgId
  }
});
function disablednowDate(time) {
  return time.getTime() + 24 * 60 * 60 * 1000 < new Date(data.formData.promulgationdate).getTime()
}
// 数据
//关闭综合配置表
const CloseEvent = () => {
  if (props.saveBtnShow) {
    proxy.$modal.confirm('离开会丢失页面中修改的内容，确认离开吗？')
      .then(() => {
        // 关闭上一次的表单校验
        ruleFormRef.value.clearValidate();
        emits("close");
      })
      .catch(() => {
        // catch error
      })
  } else {
    // 关闭上一次的表单校验
    ruleFormRef.value.clearValidate();
    emits("close");
  }

};
/** 移除null等空值 */
const removeNull = (strVal) => {
  if (strVal == null) return "";
  let arr = strVal.split(",");
  arr = arr.filter((item) => item !== 'null' && item !== "undefined" && item !== "");
  return arr.join(",");
};
// 新的文件上传返回
const changeFile = (row) => {
  fujiandata.value = row;
  row.forEach(item => {
    if (!item.url) {
      data.formData.historyFileid += ',' + item.id
      data.formData.historyFileid = removeNull(data.formData.historyFileid)
    }
  });
};
const loading = ref(false); //新增保存按钮截流
const searchHander = async (ruleFormRef) => {
  if (!ruleFormRef) return;
  await ruleFormRef.validate((valid) => {
    if (valid) {
      loading.value = true;
      data.formData.fileid = data.formData.fileid ? data.formData.fileid.toString() : null;
      postApi(data.formData, "/mosty-jcgl/lawRegulations/lawLawRegulaSave")
        .then((res) => {
          if (props.title === "法律法规新增") {
            loading.value = false;
            ElMessage.success("新增成功");
            emits("close");
          }
          if (props.title === "法律法规修改") {
            loading.value = false;
            ElMessage.success("修改成功");
            emits("close");
          }
        })
        .catch((err) => {
          loading.value = false;
        });
    } else {
      ElMessage.error("请输入必填项");
    }
  });
};

</script>

<style lang="scss" scoped>
.el-form {
  display: block !important;
  margin: 20px;
}

::-webkit-scrollbar {
  width: 0 !important;
  height: 0;
}

.bigBox {
  display: flex;


}


::v-deep .el-collapse {
  padding: 20px !important;
}
</style>
