<template>
  <el-button class="addbtn" type="primary" @click="addjcjl" style="margin-bottom: 10px"
    v-if="props.honorTitle !== '查看'">
    <el-icon>
      <CirclePlus />
    </el-icon>
    <span>新增</span>
  </el-button>

  <el-table ref="multipleTableRef" stripe :data="tableData" style="width: 100%" height="30vh" border
    v-loading="tableLoading">
    <!-- <el-table-column label="检查日期" show-overflow-tooltip property="ckeckDate"></el-table-column>
    <el-table-column label="检测危害因素" property="checkHazardousFactors">
      <template #default="{ row }">
        <dict-tag :options="props.dicData.D_TB_ZYJK_WHYS" :value="row.checkHazardousFactors" :tag="false" />
      </template>
</el-table-column>
<el-table-column label="检查周期" property="inspectionCycle">
  <template #default="{ row }">
        <dict-tag :options="props.dicData.D_TB_JCZQ" :value="row.inspectionCycle" :tag="false" />
      </template>
</el-table-column> -->
    <el-table-column label="实战演练数量" property="actualDrillQty"></el-table-column>
    <el-table-column label="实战演练参与人员数量" property="actualDrillPersonQty"></el-table-column>
    <el-table-column label="桌面推演数量" property="desktopDeducQty"></el-table-column>
    <el-table-column label="桌面推演参与人员数量" property="desktopDeducPersonQty"></el-table-column>
    <el-table-column label="演练评估次数" property="emergencyDrillEvaluationQty"></el-table-column>
    <el-table-column label="操作" width="190px">
      <template #default="scope">
        <!-- <span class="operedit" v-if="props.honorTitle !== '查看'" @click="handleCbj(scope.row, scope.$index)">
          <el-icon> <EditPen /> </el-icon>修改</span
        > -->
        <el-popconfirm v-if="props.honorTitle !== '查看'" confirm-button-text="是" cancel-button-text="否" icon-color="red"
          title="确定要删除?" @confirm="delRow(scope.row, scope.$index)">
          <template #reference>
            <span class="operdel" size="small">
              <el-icon>
                <Delete />
              </el-icon>
              删除</span>
          </template>
        </el-popconfirm>
        <!-- <span class="operesee" @click="handleCbjxq(scope.row, scope.$index)"
          ><el-icon> <Compass /> </el-icon>查看</span
        > -->
      </template>
    </el-table-column>
  </el-table>
  <!-- <div class="flex just-center">
    <MOSTY.Pages :pageConfiger="pageConfiger" @changeNo="changeNo" @changeSize="changeSize">
    </MOSTY.Pages>
  </div> -->

  <el-dialog :title="jltitle" width="50%" v-model="dialogVisible" :before-close="closeDialog">
    <!-- 培训计划新增或修改 -->
    <div class="config">
      <el-form ref="fromRuls" :disabled="jltitle.includes('详情')" :model="ruleForm" :rules="rules" label-width="200px"
        class="demo-ruleForm.value">
        <!-- <el-form-item label="检查日期：" prop="ckeckDate">
          <el-date-picker v-model="ruleForm.ckeckDate" :disabled-date="disablednowDate" style="width: 100%" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
        </el-form-item>
        <el-form-item label="检测危害因素:" prop="checkHazardousFactors">
          <el-select v-model="ruleForm.checkHazardousFactors" placeholder="请选择危害因素" style="width: 250px">
            <el-option v-for="item in props.dicData.D_TB_ZYJK_WHYS" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="实战演练数量:" prop="actualDrillQty">
          <el-input-number v-model="ruleForm.actualDrillQty" :precision="0" style="width: 250px;" :min="0" />
        </el-form-item>
        <el-form-item label="实战演练参与人员数量:" prop="actualDrillPersonQty">
          <el-input-number v-model="ruleForm.actualDrillPersonQty" :precision="0" style="width: 250px;" :min="0" />
        </el-form-item>
        <el-form-item label="桌面推演数量:" prop="desktopDeducQty">
          <el-input-number v-model="ruleForm.desktopDeducQty" :precision="0" style="width: 250px;" :min="0" />
        </el-form-item>
        <el-form-item label="桌面推演参与人员数量:" prop="desktopDeducPersonQty">
          <el-input-number v-model="ruleForm.desktopDeducPersonQty" :precision="0" style="width: 250px;" :min="0" />
        </el-form-item>
        <el-form-item label="演练评估次数:" prop="emergencyDrillEvaluationQty">
          <el-input-number v-model="ruleForm.emergencyDrillEvaluationQty" :precision="0" style="width: 250px;"
            :min="0" />
        </el-form-item>
        <!-- emergencyDrillEvaluationQty -->
        <!-- <el-form-item label="检查周期:" prop="inspectionCycle">
          <el-select v-model="ruleForm.inspectionCycle" placeholder="请选择检查周期" style="width: 250px">
            <el-option v-for="item in props.dicData.D_TB_JCZQ" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注:" prop="bz" style="width: 100%">
          <el-input v-model="ruleForm.bz" type="textarea" autosize show-word-limit style="width: 730px" maxlength="200" />
        </el-form-item>
        <el-form-item label="检测报告附件:" style="width: 100%" prop="file">
          <MOSTY.Upload :widthNumber="730" :limit="5" :nopicer="true" :isImg="false" :ShowfileList="true" v-model="ruleForm.file" :showinput="true"></MOSTY.Upload>
        </el-form-item> -->
      </el-form>
    </div>

    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="handleSave" v-if="!jltitle.includes('详情')" style="margin-right: 10px"
          v-loading="loadingshow">
          <el-icon>
            <DocumentChecked />
          </el-icon>
          <span>保存</span>
        </el-button>
        <el-button @click="closeDialog" type="primary">
          <el-icon>
            <DocumentDelete />
          </el-icon>
          <span>关闭</span>
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { onMounted, ref, reactive, getCurrentInstance, watch, nextTick } from "vue";
import { getApi, postApi } from "@/api/tobAcco_api.js";
import { disablednowDate } from "@/utils/tools.js";
import { ElMessage } from "element-plus";
import * as MOSTY from "@/components/MyComponents/index";
import * as rule from "@/utils/rules.js";
const { proxy } = getCurrentInstance();
const props = defineProps({
  honorTitle: String,
  sourceId: String,
  dicData: Object
});
const dialogVisible = ref(false);
const tableData = ref([]);
const tableLoading = ref(false);
const pageConfiger = ref({
  pageSize: 5,
  pageCurrent: 1,
  total: 0
});
const listQuery = reactive({
  // occupationalHazardId: props.formId,
  pageCurrent: 1,
  pageSize: 5
});
const jltitle = ref("");
const ruleForm = ref({});
const loadingshow = ref(false);
const fromRuls = ref(null);

//规则校验
const rules = reactive({
  // ckeckDate: [{ required: true, message: "检查日期不能为空", trigger: "blur" }],
  // inspectionCycle: [{ required: true, message: "检查周期不能为空", trigger: "blur" }],
  // checkHazardousFactors: [{ required: true, message: "检查危害因素不能为空", trigger: "blur" }],
  ...rule.numberzzsRule({ validator: true, require: true, num: 999999 }, "actualDrillQty"),
  ...rule.numberzzsRule({ validator: true, require: true, num: 9999999 }, "actualDrillPersonQty"),
  ...rule.numberzzsRule({ validator: true, require: true, num: 9999999 }, "desktopDeducQty"),
  ...rule.numberzzsRule({ validator: true, require: true, num: 9999999 }, "desktopDeducPersonQty"),
  ...rule.numberzzsRule({ validator: true, require: true, num: 9999999 }, "emergencyDrillEvaluationQty"),
  // standardValue: [
  //   {
  //     validator: (rule, value, callback) => {
  //       if (!value) {
  //         callback(new Error("请输入标准值"));
  //       } else if (value < 0 || !/^[0-9]{0,9}(\.[0-9]{0,2})?$/.test(value)) {
  //         callback(new Error(`最多输入11位整数，2位小数`));
  //       } else {
  //         callback();
  //       }
  //     },
  //     trigger: "blur",
  //     required: true
  //   }
  // ],
  // exceedingNumberPoints: [
  //   {
  //     validator: (rule, value, callback) => {
  //       if (!value && value != 0) {
  //         callback(new Error("超标点位数量不能为空"));
  //       } else if (value > ruleForm.value.checkNumberPoints) {
  //         callback(new Error("超标点位数量必须小于检测点位数量"));
  //       } else {
  //         callback();
  //       }
  //     },
  //     trigger: "blur",
  //     required: true
  //   }
  // ]
});
onMounted(() => {
  if (props.sourceId) {
    getTableData();
  }

});

defineExpose({ tableData });

const closeDialog = () => {
  if (!jltitle.value.includes('详情')) {
    proxy.$modal.confirm('离开会丢失页面中修改的内容，确认离开吗？')
      .then(() => {
        dialogVisible.value = false;
      })
      .catch(() => {
        // catch error
      })
  } else {
    dialogVisible.value = false;
  }

};
function closeDialogs() {
  dialogVisible.value = false;
}
const getTableData = () => {
  tableLoading.value = true;
  getApi({}, `/mosty-jcgl/data/emergencyPlanInfo/detail/list/drill?sourceId=${props.sourceId}`).then((res) => {
    if (res) {
      tableLoading.value = false;
      tableData.value = res;
    } else {
      tableData.value = [];
      tableLoading.value = false;
    }
  });
};
const changeNo = (val) => {
  listQuery.pageCurrent = val;
  pageConfiger.value.pageCurrent = val;
  getTableData();
};
const changeSize = (val) => {
  listQuery.pageSize = val;
  pageConfiger.value.pageSize = val;
  getTableData();
};
function addjcjl() {
  jltitle.value = "应急预案新增";
  dialogVisible.value = true;

  nextTick(() => {
    fromRuls.value.resetFields();
    fromRuls.value.clearValidate();
    ruleForm.value = {
      file: null
    };
  });
}
function handleCbj(row, index) {
  jltitle.value = "应急预案修改";
  dialogVisible.value = true;
  // ruleForm.value = row;
  getApi({}, `/mosty-jcgl/OccupationalHazardCheckRecords/getTbOccupationalHazardCheckRecordsById/${row.id}`).then((res) => {
    if (res) {
      ruleForm.value = res;
    }
  });
}
function handleCbjxq(row, index) {
  jltitle.value = "应急预案详情";
  dialogVisible.value = true;
  getApi({}, `/mosty-jcgl/OccupationalHazardCheckRecords/getTbOccupationalHazardCheckRecordsById/${row.id}`).then((res) => {
    if (res) {
      ruleForm.value = res;
    }
  });
  // ruleForm.value = row;
}
function delRow(val, index) {
  tableData.value.splice(index, 1)
  return
  let ids = [val.id];
  postApi(ids, "/mosty-jcgl/OccupationalHazardCheckRecords/delTbOccupationalHazardCheckRecordsByIds").then((res) => {
    ElMessage.success("删除成功");
    getTableData();
  });
}
const handleSave = async () => {
  await fromRuls.value.validate((valid, fields) => {
    if (valid) {
      // loadingshow.value = true;
      // ruleForm.value.file = ruleForm.value.file ? ruleForm.value.file.toString() : null;
      tableData.value.push(JSON.parse(JSON.stringify(ruleForm.value)))
      dialogVisible.value = false;
    }
  });
};


</script>

<style lang="scss" scoped></style>
