<template>
  <div class="bigBox" :style="{ height: bigHeight }">
    <MOSTY.FromPage :title="data.config.title" @closeDialog="black">
      <template #content>
        <div class="box_cont">
          <div class="fromBoxs">
            <el-collapse v-model="activeNames" style="width: 100%">
              <el-collapse-item title="比例配置" name="1">
                <div style="width: 800px">
                  <el-form ref="ruleFormRef" :model="fromObj" :rules="rules" label-width="120px" class="demo-ruleForm"
                    status-icon :inline="true" :disabled="!data.config.saveBtnShow" label-position="top">
                    <div style="color: black; margin-bottom: 20px; width: 800px">
                      <span>计算公式：年度得分=（一季度*比例+二季度*比例+三季度*比例+四季度*比例）*季度总比例</span>
                    </div>
                    <el-form-item label="一季度占比(%)" prop="firstquarterratio">
                      <el-input v-model="fromObj.firstquarterratio" placeholder="请输入一季度占比(%)" type="number"
                        style="width: 500px" @input="labelClick(fromObj.firstquarterratio, 1)"></el-input>
                    </el-form-item>
                    <el-form-item label="二季度占比(%)" prop="twoquarterratio">
                      <el-input v-model="fromObj.twoquarterratio" placeholder="请输入二季度占比(%)" type="number"
                        style="width: 500px" @input="labelClick(fromObj.twoquarterratio, 2)"></el-input>
                    </el-form-item>
                    <el-form-item label="三季度占比(%)" prop="threequarterratio">
                      <el-input v-model="fromObj.threequarterratio" placeholder="请输入三季度占比(%)" type="number"
                        style="width: 500px" @input="labelClick(fromObj.threequarterratio, 3)"></el-input>
                    </el-form-item>
                    <el-form-item label="四季度占比(%)" prop="fourquarterratio">
                      <el-input v-model="fromObj.fourquarterratio" placeholder="请输入四季度占比(%)" type="number"
                        style="width: 500px" @input="labelClick(fromObj.fourquarterratio, 4)"></el-input>
                    </el-form-item>
                    <el-form-item label="年度占比(%)" prop="yearratio">
                      <el-input v-model="fromObj.yearratio" placeholder="请输入年度占比(%)" type="number"
                        style="width: 500px"></el-input>
                    </el-form-item>
                    <div style="color: black; margin-top: 20px; width: 800px">
                      <span>一季度占比(%)+二季度占比(%)+三季度占比(%)+四季度占比(%)=100%</span>
                    </div>
                  </el-form>
                </div>
              </el-collapse-item>
            </el-collapse>
          </div>
        </div>
      </template>
      <template #footer>

        <el-button type="primary" @click="submit(ruleFormRef)" v-if="data.config.saveBtnShow"><el-icon>
            <DocumentChecked />
          </el-icon>保存</el-button>
        <el-button @click="black"><el-icon>
            <DocumentDelete />
          </el-icon>关闭</el-button>

      </template>
    </MOSTY.FromPage>



  </div>
</template>

<script setup>
import {
  reactive,
  ref,
  watchEffect,
  getCurrentInstance,
  onMounted,
  watch,
  nextTick
} from "vue";
import { ElMessage } from "element-plus";
import * as MOSTY from "@/components/MyComponents/index";
import { getApi, deleteApi, putApi, postApi } from "@/api/tobAcco_api.js";
import PageTitle from "@/components/PageTitle/PageTitle.vue";
const { proxy } = getCurrentInstance();
const props = defineProps({
  saveBtnShow: {
    type: Boolean,
    default: true
  },
  editObj: {
    type: Object,
    default: () => { }
  }
});
const emit = defineEmits("changePage");
const ruleFormRef = ref();
const fromObj = ref({})
const data = reactive({
  fromObj: {},
  extendattr: {},
  config: {
    title: "",
    saveBtnShow: true,
    wbjlShow: false,
    jcrzShow: false
  }
});
const lecarr = ref([])
const rules = reactive({
  firstquarterratio: [
    {
      required: true,
      message: "请输入一季度占比(%)",
      trigger: "blur"
    },
    { validator: validateNumberRange, trigger: 'blur' }
  ],
  twoquarterratio: [
    {
      required: true,
      message: "请输入二季度占比(%)",
      trigger: "input"
    }, { validator: validateNumberRange, trigger: 'blur' }
  ],
  threequarterratio: [
    {
      required: true,
      message: "请输入三季度占比(%)",
      trigger: "blur"
    }, { validator: validateNumberRange, trigger: 'blur' }
  ],
  fourquarterratio: [
    {
      required: true,
      message: "请输入四季度占比(%)",
      trigger: "blur"
    }, { validator: validateNumberRange, trigger: 'blur' }
  ],
  yearratio: [
    {
      required: true,
      message: "请输入年度占比(%)",
      trigger: "blur"
    }, { validator: validateNumberRange, trigger: 'blur' }
  ],
  yamc: [
    {
      required: true,
      message: "请输入",
      trigger: "blur"
    }, { validator: validateNumberRange, trigger: 'blur' }
  ]
});
function validateNumberRange(rule, value, callback) {
  if (value === '') {
    callback(); // 如果为空，直接返回
  } else if (!(/^[0-9]{1,3}$/.test(value))) {
    callback('请输入0到100之间的数字！'); // 非法格式，显示错误信息
  } else if (parseInt(value) > 100 || parseInt(value) < 0) {
    callback('请输入0到100之间的数字！'); // 超出范围，显示错误信息
  } else {
    callback(); // 合法输入，无错误信息
  }
}
function labelClick(val, lab) {
  lecarr.value[lab] = val
  fromObj.value.yearratio = parseInt(fromObj.value.firstquarterratio ? fromObj.value.firstquarterratio : 0) + parseInt(fromObj.value.twoquarterratio ? fromObj.value.twoquarterratio : 0) + parseInt(fromObj.value.threequarterratio ? fromObj.value.threequarterratio : 0) + parseInt(fromObj.value.fourquarterratio ? fromObj.value.fourquarterratio : 0);
}

// 保存
const submit = async (formEl) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      if (data.config.title == "新增") {
        postApi(fromObj.value, "/mosty-jcgl/jxkgConfig/addJxkgConfigOne")
          .then((res) => {
            ElMessage.success("新增成功");
            emit("changePage", "Main");
          })

      } else if (data.config.title == "编辑") {
        postApi(fromObj.value, "/mosty-jcgl/jxkgConfig/updateJxkgConfig")
          .then((res) => {
            ElMessage.success("修改成功");
            emit("changePage", "Main");
          })

      }
    } else {
      ElMessage.error("表单验证失败，请检查输入内容");
    }
  });
};

const black = () => {
  if (data.config.saveBtnShow) {
    proxy.$modal.confirm('离开会丢失页面中修改的内容，确认离开吗？')
      .then(() => {
        // 关闭上一次的表单校验
        ruleFormRef.value.clearValidate();
        emit("changePage", "Main");
      })
      .catch(() => {
        // catch error
      })
  } else {
    // 关闭上一次的表单校验
    ruleFormRef.value.clearValidate();
    emit("changePage", "Main");
  }

};
//获取详情
function getmain(id) {
  if (id) {
    getApi({}, "/mosty-jcgl/jxkgConfig/getJxkgConfigById/" + id).then((res) => {
      if (res) {
        fromObj.value = res;
      }
    });
  }
}
const activeNames = ref(["1"]);
onMounted(() => {
  activeNames.value = ["1"];
  getmain(props.editObj.id);
});
watchEffect(() => {
  if (props.editObj) {
    data.config = JSON.parse(JSON.stringify(props.editObj));
  }
});
</script>

<style lang="scss" scoped>
::-webkit-scrollbar {
  width: 0 !important;
  height: 0;
}

.box_cont {
  height: calc(100vh - 15vh);
  overflow-y: scroll;
}

.fromBoxs {
  width: 800px;
  margin: 20px auto;
}

.ld_box {
  display: flex;
  margin-right: 30px;
}

.el-form {
  width: 100%;
  align-items: center;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.el-form-item {
  display: flex;
  margin-right: 20px;
}

.addbtn {
  margin-bottom: 10px;
}

.bigBox {
  display: block !important;
  padding: 0 14px;
  box-sizing: border-box;
}

.tabbox {
  max-height: 300px;
  overflow-y: scroll;

  .input {
    width: 100%;
    height: 100%;
  }
}

::v-deep .el-date-editor .el-range-input {
  color: black;
}

::v-deep .el-date-editor .el-range-separator {
  color: black;
}

::v-deep .el-table .cell {
  padding: 0 0 !important;
}

::v-deep .el-table--border .el-table__cell .cell {
  padding-left: 0px !important;

  >input {
    width: 100%;
    height: 33px;
  }
}

::v-deep .el-upload-list {
  width: 50%;
}
</style>