<template>
  <MOSTY.PageTree :pageTitle="'驾驶员标兵得分列表'" :searchType="'03'" @getDeptId="getdeptId">
    <template #serach>
      <el-divider />
      <section class="query-flex" ref="queryHeight">
        <section class="query-section">
          <section class="flex">
            <el-switch v-model="listQuery.switch" active-text="从高到底" inactive-text="文明标兵评分排序：默认"
              style="margin-right: 30px;" />
            <el-select v-model="listQuery.checkYear" filterable style="width: 250px;margin-right: 10px;">
              <el-option v-for="item in filterYear(7)" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
            <el-select v-model="listQuery.isCy" style="width: 250px;margin-right: 10px;" placeholder="是否参与">
              <el-option label="参与" value="Y" />
              <el-option label="未参与" value="N" />
            </el-select>
          </section>
          <template v-if="isOpensearch">
            <el-input v-model="listQuery.userName" style="width: 200px;" placeholder="驾驶员名称查询"></el-input>
          </template>
        </section>
        <div class="query-btn">
          <div class="toggle" :class="{ active: isOpensearch }" @click="handleClickOpen">
            <span>{{ isOpensearch ? "收起" : "展开" }}筛选</span>
            <el-icon>
              <DArrowLeft />
            </el-icon>
          </div>
          <el-button @click="getListData" class="ml6">
            <el-icon>
              <Search />
            </el-icon> <span>查询</span></el-button>
          <el-button @click="handleRest">
            <el-icon>
              <Refresh />
            </el-icon> <span>重置</span></el-button>
        </div>
      </section>
    </template>
    <template #table>
      <el-divider />
      <section class="button">
        <el-button type="primary" @click="export2Excel" v-loading="loadingShow">
          <el-icon>
            <Download />
          </el-icon>
          <span>导出</span>
        </el-button>
      </section>
      <section :style="{ 'height': totalHeight }">
        <MOSTY.Table :table-columns="tableColumns" :tableData="tableData" :tableloading="tableloading" :isSelect="true"
          :isSort="true" :tableHeight="'100%'" @SortChange="SortChange">
          <template #gwdb="{ row }">
            <span v-if="row.gwdb >= score">参与</span>
            <span v-else>不参与</span>
          </template>
          <template #actions="{ row }">
            <span class="operesee" @click="handleCz(row, 'show')">
              <el-icon>
                <View />
              </el-icon>查看</span>
          </template>
        </MOSTY.Table>
      </section>
      <div class="fenye">
        <Pages :pageConfiger="pageConfiger" @changeNo="handleCurrentChange" @changeSize="handleSizeChange" />
      </div>
    </template>
  </MOSTY.PageTree>
</template>

<script setup>
// 引入
import { reactive, onMounted, ref, watch, nextTick } from "vue";
import { filterYear } from "@/utils/auth.js";
import { exportXlsx } from "@/excel/Export2Excel.js";
import { getApi } from "@/api/tobAcco_api.js";
import * as MOSTY from "@/components/MyComponents/index";
import Pages from '@/components/aboutTable/Pages/index.vue'
const emit = defineEmits("changePage");
const props = defineProps({
  editObj: {
    type: Object,
    default: () => { },
  }
});
const tableColumns = ref([
  {
    title: "驾驶员姓名",
    prop: "drivername"
  },
  {
    title: "驾驶档案号",
    prop: "driverfileno"
  },
  {
    title: "加分",
    prop: "addScore"
  },
  {
    title: "扣分",
    prop: "subScore"
  },
  {
    title: "测评得分",
    prop: "pc"
  },
  {
    title: "岗位达标得分",
    prop: "gwdb"
  },
  {
    title: "文明标兵评分",
    prop: "avg"
  },
  {
    title: "是否参与",//正常、异常，平铺
    prop: "gwdb",
    slot: true,
  },
  {
    title: "操作",
    prop: "actions",
    fixed: 'right',
    slot: true
  }
])
const pageConfiger = reactive({
  pageSize: 20,
  pageCurrent: 1,
  total: 0
})
const tableData = ref([]);
const loadingShow = ref(false);
// 分页查询条件
const listQuery = reactive({
  pageCurrent: 1,
  pageSize: 20,
  orgid: "",
  checkYear: new Date().getFullYear(),
  userName: '',
  isCy: '',
  switch: false
});
const score = ref(80)
// 获取表格数据
const tableloading = ref(false);
const treeHeight = ref('')
const queryHeight = ref(null)
const isOpensearch = ref(false);
const totalHeight = ref(null)
const handleClickOpen = () => {
  isOpensearch.value = !isOpensearch.value
  nextTick(() => {
    if (isOpensearch.value) {
      totalHeight.value = `calc(100vh - ${340 + queryHeight.value.offsetHeight}px)`
      return
    }
    totalHeight.value = `calc(100vh - 368px)`
  })
}
onMounted(() => {
  nextTick(() => {
    totalHeight.value = `calc(100vh - 368px)`
  })
  // 查询岗位达标达标分数
  getGwdbScore()
  treeHeightFn()
  getListData();
});
//获取部门数据
const getdeptId = (val) => {
  listQuery.orgid = val.id;
  listQuery.pageCurrent = 1;
  getListData();
};

watch(
  () => listQuery.switch,
  (val) => {
    if (val) {
      listQuery.sort = 'desc'
    } else {
      listQuery.sort = 'asc'
    }
    getListData();
  }
)
function handleRest() {
  listQuery.switch = 'asc'
  listQuery.checkYear = new Date().getFullYear();
  listQuery.isCy = '';
  listQuery.userName = '';
  listQuery.pageCurrent = 1;
  getListData();
}
//导出表格
const export2Excel = () => {
  loadingShow.value = true;
  let title = {
    drivername: "驾驶员姓名",
    driverfileno: "驾驶员档案号",
    addScore: "加分",
    subScore: "扣分",
    pc: "测评得分",
    gwdb: "岗位达标得分",
    avg: "文明标兵得分",
    sfcy: "是否参与"
  };
  let prams = {
    ...listQuery,
    pageCurrent: 1,
    pageSize: 100000,
  }
  getApi(prams, `/mosty-jcgl/driverModelScore/getPageList`).then(
    (res) => {
      if (res.records) {
        let data = res.records
        data.forEach(item => {
          item.sfcy = item.gwdb >= score.value ? '参与' : '不参与'
        })
        let tableTitle = `驾驶员标兵得分情况`
        exportXlsx(title, data, tableTitle, tableTitle + '.xlsx');

      } else {
        ElMessage.warning('暂无数据');
      }
    }
  ).finally(() => {
    loadingShow.value = false
  })
};
function getGwdbScore() {
  getApi({}, `/mosty-base/sysConfigNew/getValue/GWDB_DB_SCORE`).then(
    (res) => {
      if (res) {
        score.value = Number(res)
      }
    }
  );
}
function getListData() {
  tableloading.value = true;
  if (listQuery.switch) {
    listQuery.order = 'avg'
    listQuery.sort = 'desc'
  } else {
    listQuery.sort = 'asc'
  }
  getApi(listQuery, `/mosty-jcgl/driverModelScore/getPageList`).then(
    (res) => {
      if (res.records) {
        tableloading.value = false;
        tableData.value = res.records;
        pageConfiger.total = res.total;
      } else {
        tableData.value = [];
        tableloading.value = false;
      }
    }
  ).finally(() => {
    tableloading.value = false;
  });
}
//详情
function handleCz(row, type) {
  if (type == 'show') {
    let obj = {
      title: "查看",
      ...row
    };
    emit("changePage", "Details", obj);
  }
}
//分页
const handleSizeChange = (currentSize) => {
  listQuery.pageSize = currentSize;
  pageConfiger.pageSize = currentSize;
  getListData();
};
const handleCurrentChange = (currentPage) => {
  listQuery.pageCurrent = currentPage;
  pageConfiger.pageCurrent = currentPage;
  getListData();
};
// 树高度计算
function treeHeightFn() {
  treeHeight.value = window.innerHeight - 187 + "px";
};
</script>

<style lang="scss" scoped>
.bigBox {
  display: flex;

  .title {
    height: 39px;
    line-height: 39px;
    font-size: 18px;
    color: #0f3916;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .el-icon {
      cursor: pointer;
    }
  }

  .left {
    width: 300px;
    background: #ffffff;
    box-shadow: 0px 2px 10px 0px rgba(107, 107, 107, 0.1);
    border-radius: 0px 0px 0px 0px;
    opacity: 1;

    .treeBox {
      overflow: auto;
    }
  }

  .right {
    padding: 0 10px;
    margin: 0px 14px;
    background: #fff;
  }
}

.button {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 12px;
}
</style>