<template>
  <MOSTY.PageTree :pageTitle="'绩效打分列表(百分制)'">
    <template #titleright>
      <span style="
            color: black;
            font-size: 18px;
            display: flex;
            align-items: center;
          ">
        计算公式：总分数=(一季度*{{
          data.headData.firstquarterratio
        }}%+二季度*{{ data.headData.twoquarterratio }}%+三季度*{{
          data.headData.threequarterratio
        }}%+四季度*{{ data.headData.fourquarterratio }}%)*{{
          data.headData.yearratio
        }}%+加分-减分
      </span>
    </template>
    <template #serach>
      <el-divider />
      <MOSTY.Search :searchArr="searchArr" @submit="onSearch">
        <el-button @click="submit" style="margin-left: 10px">保存</el-button>
        <el-button @click="handleChangefj" style="margin-left: 10px">附件</el-button>
      </MOSTY.Search>
    </template>
    <template #table>
      <section :style="{ height: totalHeight }">
        <MOSTY.Table :table-columns="data.tableColumn" :tableData="data.tableData" :tableloading="tableloading"
          :isSelect="false" :isSort="true" :tableConfiger="data.tableConfiger" style="width: 100%;" @rowClick="chooseData">
          <template #firstquarterscore="{ row }">
            <input class="table-input-class" v-if="row.input == true" type="number" @change="updatescore(row)"
              v-model.number="row.firstquarterscore" />
            <span v-else>{{ row.firstquarterscore }}</span>
          </template>
          <template #twoquarterscore="{ row }">
            <input class="table-input-class" v-if="row.input == true" type="number" @change="updatescore(row)"
              v-model.number="row.twoquarterscore" />
            <span v-else>{{ row.twoquarterscore }}</span>
          </template>
          <template #threequarterscore="{ row }">
            <input class="table-input-class" v-if="row.input == true" type="number" @change="updatescore(row)"
              v-model.number="row.threequarterscore" />
            <span v-else>{{ row.threequarterscore }}</span>
          </template>
          <template #fourquarterscore="{ row }">
            <input class="table-input-class" v-if="row.input == true" type="number" @change="updatescore(row)"
              v-model.number="row.fourquarterscore" />
            <span v-else>{{ row.fourquarterscore }}</span>
          </template>
        </MOSTY.Table>
      </section>
      <div class="fenye">
        <MOSTY.Pages :pageConfiger="data.pageConfiger" @changeNo="changeNo" @changeSize="changeSize" />
      </div>
    </template>
  </MOSTY.PageTree>
  <el-dialog v-model="dialogVisible" title="附件详情" :close-on-click-modal="false" width="50%" :before-close="handleClose">
    <div>
      <el-collapse v-model="activeNames" style="width: 100%">
        <el-collapse-item title="查询" name="1">
          <el-table ref="multipleTableRef" stripe :data="fjtableData" style="width: 100%"
            @selection-change="handleSelectionChange" border>
            <el-table-column label="附件名称" prop="name"> </el-table-column>
            <!--  -->
            <el-table-column label="操作" width="250">
              <template #default="scope">
                <span class="operate" style="color: yellowgreen" @click="onloadflie(scope.row)">下载</span>
                <el-popconfirm confirm-button-text="是" cancel-button-text="否" icon-color="red" title="确定要删除?"
                  @confirm="handlefjdelete(scope.row)">
                  <template #reference>
                    <span class="operate" style="color: yellowgreen" size="small">删除</span>
                  </template>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table></el-collapse-item>
        <el-collapse-item title="新增" name="2">
          <el-form>
            <div style="margin: 10px">
              <div>
                <el-button @click="addmodel">新增一个附件</el-button>
                <div v-for="(item, index) in data.fromObj" :key="index">
                  <div style="margin-top: 10px">
                    <MOSTY.Upload v-model="item.file" :isAutoWidth="true" :limit="1" :nopicer="true" :isImg="false"
                      :showinput="true" :delrow="delrow" @filehandleChange="changeFile"
                      :placeholder="'请上传附件（pdf,ofd,doc,docx,xls,xlsx,wps）'"
                      :gsgfList="['pdf', 'ofd', 'doc', 'docx', 'xls', 'xlsx','wps']">
                    </MOSTY.Upload>
                  </div>
                </div>
              </div>
            </div>
          </el-form>
        </el-collapse-item>
      </el-collapse>
    </div>
    <template #footer>
      <span class="dialog-footer">

        <el-button type="primary" @click="savefile"> <el-icon>
            <DocumentChecked />
          </el-icon>保存 </el-button>
        <el-button @click="
          dialogVisible = false;
        data.fromObj = [];
        "><el-icon>
            <DocumentDelete />
          </el-icon>关闭</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import * as MOSTY from "@/components/MyComponents/index";
import { filterYear } from "@/utils/auth.js";
import { getApi, postApi } from "@/api/tobAcco_api.js";
import { ElMessage } from "element-plus";
import { reactive, onMounted, ref } from "vue";
const emit = defineEmits("changePage");
const totalHeight = ref()
const searchArr = reactive([
  {
    showType: "select",
    prop: "year",
    options: filterYear(7),
    placeholder: "请选择年份",
  }
])
const data = reactive({
  num: 1,
  searchObj: {},
  fromObj: [],
  tableData: [],
  headData: {
    firstquarterratio: 100,
    twoquarterratio: 100,
    threequarterratio: 100,
    fourquarterratio: 100,
    yearratio: 100
  },
  tableColumn: [
    {
      title: "单位名称",
      prop: "orgname"
    },
    {
      title: "一季度分数",
      prop: "firstquarterscore",
      slot: true
    },
    {
      title: "二季度分数",
      prop: "twoquarterscore",
      slot: true
    },
    {
      title: "三季度分数",
      prop: "threequarterscore",
      slot: true
    },
    {
      title: "四季度分数",
      prop: "fourquarterscore",
      slot: true
    },
    {
      title: "年度得分",
      prop: "yearscore",
    },
    {
      title: "加分数",
      prop: "addscore",
    },
    {
      title: "减分数",
      prop: "jcf",
    },
    {
      title: "总分数",
      prop: "totalscore",
    }
  ],
  tableConfiger: {
    haveControls: false,
    showIndex: false,
    loading: false,
    height: '73vh',
    rowHeight: 61
  },
  pageConfiger: {
    pageSize: 10,
    pageCurrent: 1,
    total: 0
  }
});
function updatescore(row) {
  data.tableData.forEach((el) => {
    if (el == row) {
      let score =
        (el.firstquarterscore * data.headData.firstquarterratio) / 100 +
        (el.twoquarterscore * data.headData.twoquarterratio) / 100 +
        (el.threequarterscore * data.headData.threequarterratio) / 100 +
        (el.fourquarterscore * data.headData.fourquarterratio) / 100;
      el.yearscore = ((score * data.headData.yearratio) / 100).toFixed(2);
      el.totalscore = (el.yearscore + el.addscore - el.jcf).toFixed(2);
    }
  });
}
//分页
const changeNo = (val) => {
  listQuery.pageCurrent = val;
  getTableData();
};
const changeSize = (val) => {
  listQuery.pageSize = val;
  getTableData();
};
// 查询数据
const onSearch = obj => {
  listQuery.year = obj.year
  getTableData();
};
const listQuery = reactive({
  pageCurrent: 1,
  pageSize: 20,
  year: new Date().getFullYear()
});
const dialogVisible = ref(false);
const fjtableData = ref([]);
// 新的文件上传返回
const changeFile = (row) => {

};
//点击下载文件
function onloadflie(row) {
  getApi({}, `/mosty-base/minio/file/download/${row.file}`).then((res) => {
    const link = document.createElement("a");
    link.href = res.url;
    link.download = res.name;
    link.style.display = "none";
    link.click();
  });
}
const savefile = () => {
  data.fromObj.forEach((el) => {
    el.file = el.file ? el.file.toString() : null;
    el.year = listQuery.year;
  });
  if (data.fromObj) {
    postApi(data.fromObj, "/mosty-jcgl/jxkhPerformanceQuery/addJxkhFileByYear")
      .then((res) => {
        ElMessage.success("新增成功");
        data.fromObj = [];
        dialogVisible.value = false;
      })
      .catch((err) => {

      }).finally(() => {
        dialogVisible.value = false;
      });
  }
};
function getdata() {
  getApi(
    { year: listQuery.year },
    `/mosty-jcgl/jxkhPerformanceQuery/QueryJxkhFileByYear`
  ).then((res) => {
    if (res) {
      fjtableData.value = res;
      fjtableData.value.forEach((row) => {
        getApi({}, `/mosty-base/minio/file/download/${row.file}`).then(
          (res) => {
            row.name = res.originalName;
          }
        );
      });
    } else {
    }
  });
}
const activeNames = ref(["1"]);
//附件详情弹窗
function handleChangefj() {
  getdata();
  let arr = { file: "" };
  data.fromObj.push(arr);
  dialogVisible.value = true;
  activeNames.value = ["1", "2"];
}
//删除文件
const handlefjdelete = (row) => {
  getApi(
    { id: row.id },
    "/mosty-jcgl/jxkhPerformanceQuery/deleteJxkhFileByYear"
  )
    .then((res) => {
      ElMessage.success("删除成功");
      getdata();
    })
    .catch((err) => {

    });
};
//选中的数据
const chooseData = (val) => {
  data.tableData.forEach((el) => {
    if (el == val) {
      el.input = true;
    } else {
      el.input = false;
    }
  });
};
const tableloading = ref(false);
function getTableData() {
  tableloading.value = true;
  postApi({}, `/mosty-jcgl/jxkhPerformanceQuery/autoAddJxkhPerformance`).then(
    (res) => {
      postApi(
        listQuery,
        `/mosty-jcgl/jxkhPerformanceQuery/listJxkhPerformance`
      ).then((res) => {
        if (res) {
          data.tableData = res;
          data.tableData.forEach((el) => {
            (el.addscore = 0), (el.jcf = 0);
          });
          tableloading.value = false;
          data.pageConfiger.total = res.total;
        } else {
          data.tableData = [];
          tableloading.value = false;
        }
      }).finally(() => {
        tableloading.value = false;
      });
    }
  );
  postApi(listQuery, `/mosty-jcgl/jxkgConfig/queryJxkgConfig`).then((res) => {
    if (res.records) {
      data.headData = res.records[0] || {};
    } else {
      data.headData = {};
    }
  });
}
const submit = (l) => {
  let params = {
    tbJxkhPerformanceQueries: data.tableData
  };
  postApi(params, "/mosty-jcgl/jxkhPerformanceQuery/updateJxkhPerformanceList")
    .then((res) => {
      ElMessage.success("新增成功");
      getTableData();
    })
    .catch((err) => {

    });
};
onMounted(() => {
  totalHeight.value = `calc(100vh - 330px)`
  getTableData();
});
</script>

<style lang="scss" scoped>
::v-deep .table-input-class {
  width: calc(100%);
}
</style>