<template>
  <MOSTY.PageTree :pageTitle="'绩效打分列表(百分制)'" :isShowLeftTree="false">
    <template #titleright>
      <div style="color: black;font-size: 18px;display: flex;align-items: center;">
        计算公式：总分数=(一季度*20%+二季度*25%+三季度*30%+四季度*25%)*85%+加分-减分
      </div>
    </template>
    <template #serach>
      <el-divider />
      <MOSTY.Search :searchArr="searchArr" @submit="onSearch">
        <el-button @click="submit">保存</el-button>
        <el-button @click="toAdd">附件</el-button>
      </MOSTY.Search>
    </template>
    <template #table>
      <section :style="{ height: totalHeight }">
        <MOSTY.Table :tableData="data.tableData" :table-columns="data.tableColumn" :tableConfiger="data.tableConfiger"
          @chooseData="chooseData">
        </MOSTY.Table>
      </section>
      <div class="fenye">
        <MOSTY.Pages :pageConfiger="data.pageConfiger" @changeNo="changeNo" @changeSize="changeSize" />
      </div>
    </template>
  </MOSTY.PageTree>
</template>

<script setup>
import * as MOSTY from "@/components/MyComponents/index";
import { filterYear } from "@/utils/auth.js";
import { onMounted, reactive, ref, watch } from "vue";
const emit = defineEmits("changePage");
const totalHeight = ref()
const searchArr = reactive([
  {
    showType: "select",
    prop: "year",
    options: filterYear(7),
    placeholder: "请选择年度"
  }
]);
const data = reactive({
  searchObj: {},
  tableData: [],
  tableColumn: [
    {
      title: "单位名称",
      prop: "dwmc",
    },
    {
      title: "一季度分数",
      prop: "yjdzb",
    },
    {
      title: "二季度分数",
      prop: "ejdzb",
    },
    {
      title: "三季度分数",
      prop: "sjdzb",
    },
    {
      title: "四季度分数",
      prop: "sijdzb",
    },
    {
      title: "年度得分",
      prop: "ndzb",
    },
    {
      title: "加分数",
      prop: "jfs",
    },
    {
      title: "减分数",
      prop: "jianfs",
    },
    {
      title: "总分数",
      prop: "zfs",
    },
  ],
  tableConfiger: {
    haveControls: false,
    showIndex: false,
    loading: false,
    height: '74vh',
    rowHeight: 61
  },
  pageConfiger: {
    pageSize: 10,
    pageCurrent: 1,
    total: 0
  },
  deptId: "",
  clickTree: null,
  searchFont: "",
  treedata: [],
  treePorps: {
    label: "name",
    key: "associateId"
  },
  dialogVisible: false,
  modelTitle: "新增部门",
  formData: {
    orgName: "", // 部门名称
    parentId: "", // 上级部门的关联id
    bz: "" // 备注
  },
  rules: {
    orgName: [
      {
        required: true,
        message: "请输入部门名称",
        trigger: "blur"
      }
    ]
  }
});
const showSex = (sex) => {
  let str = "";
  switch (sex) {
    case "1":
      str = "男";
      break;
    case "2":
      str = "女";
      break;
    case "3":
      str = "未知";
      break;
  }
  return str;
};
const changeNo = (val) => {
  data.pageConfiger.pageCurrent = val;
  getTableData();
};
const changeSize = (val) => {
  data.pageConfiger.pageSize = val;
  getTableData();
};
// 查询数据
const onSearch = (obj) => {
  data.searchObj = obj;
  getTableData();
};


const edit = (row) => {
  emit("changePage", "AddOrEdite", row);
};
const del = (obj) => { };

const handleNodeClick = (node) => {
  data.clickTree = node;
  data.pageConfiger.pageCurrent = 1;
  getTableData();
};

const loadNode = (node, resolve) => {
  let attr = {
    isHavePeople: false,
    parentId: 0
  };
  if (node.level > 0) {
    attr.parentId = node.key;
  }
};

function getTableData() {
  let list = [
    {
      dwmc: "领导成员",//单位名称
      yjdzb: "",//一季度分数
      ejdzb: "",//二季度分数
      sjdzb: "",//三季度分数
      sijdzb: "",//四季度分数
      ndzb: "",//年度得分
      jfs: "0",//加分数
      jianfs: "0",//减分数
      zfs: "",//总分数
    }
  ];
  data.tableData = list;
  // if(!data.clickTree) return ElMessage.warning("选选择部门更好查找");
  // let attr = {
  //   orgId: data.clickTree.associateId,
  //   pageCurrent: data.pageConfiger.pageCurrent,
  //   pageSize: data.pageConfiger.pageSize
  // };
  // attr = {...attr, ...data.searchObj}
  // fns.selectUserPage(attr).then((res) => {
  //   data.tableData = res.records;
  //   data.pageConfiger.total = res.total;
  // });
}

const toAdd = () => {
  // if (!data.clickTree) return ElMessage.warning("请先选择部门");
  // let obj = {
  //   showPageAdd: true
  // };
  // obj = { ...obj, ...data.clickTree };
  emit("changePage", "AddOrEdite");
  // data.clickTree = null;
};
const toEdite = (obj) => {
  if (data.clickTree.name) {
    obj.treeName = data.clickTree.name;
  }
  emit("changePage", "AddOrEdite", obj);
};
const depProps = {
  lazy: true,
  checkStrictly: true,
  label: "name",
  value: "associateId",
  lazyLoad(node, resolve) {
    const { level } = node;
    let attr = {
      isHavePeople: false
    };
    if (level > 0) {
      attr.parentId = node.value;
    }
  }
};
const submit = async (formEl) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      data.dialogVisible = false;
    }
  });
};
const treeRef = ref();
watch(
  () => data.searchFont,
  (val) => {
    treeRef.value.filter(val);
  }
);
const filterNode = (value, node) => {
  if (!value) return true;
  return node.name.includes(value);
};
onMounted(() => {
  totalHeight.value = `calc(100vh - 330px)`
  getTableData();
})
</script>

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