<template>
  <div class="usermanage">
    <!-- 组织机构信息 -->
    <div class="right">
      <PageTitle :title="props.editObj.title">
        <el-button @click="black"><el-icon>
            <DocumentDelete />
          </el-icon>关闭</el-button>
      </PageTitle>
      <div class="title">
        <div class="card" @click="dbchange('1')">
          <div class="cardhead" style="background-color: var(--el-color-primary) ;">
            <span class="number">{{ headData.db }}</span>
          </div>
          <div class="cardbottom"><span class="name">已达标</span></div>
        </div>
        <div class="card" @click="dbchange('2')">
          <div class="cardhead" style="background-color: #fb8734;">
            <span class="number">{{ headData.kdb }}</span>
          </div>
          <div class="cardbottom"><span class="name">可达标</span></div>
        </div>
        <div class="card" @click="dbchange('3')">
          <div class="cardhead" style="background-color: #f54336;">
            <span class="number">{{ headData.bdb }}</span>
          </div>
          <div class="cardbottom"><span class="name">未达标</span></div>
        </div>
      </div>
      <div class="bottom">
        <div class="bottomright">
          <div class="table" style='background-color:#fff;'>
            <MyTable :tableData="data.tableData" :tableColumn="data.tableColumn" :tableloading="tableloading"
              :tableConfiger="data.tableConfiger" @chooseData="chooseData">
              <template #state="{ row }">
                <span v-if="row.state == '1'" style="color: var(--el-color-primary) ">已达标</span>
                <span v-if="row.state == '2'" style="color: #fb8734">
                  可达标</span>
                <span v-if="row.state == '3'" style="color: #f54336">
                  未达标</span>
              </template>
              <!-- 操作 -->
              <template #controls="{ row }">
                <span class="operesee" @click="showInfo(row)"> <el-icon>
                    <Compass />
                  </el-icon> 得分详情</span>
              </template>
            </MyTable>
            <div class="fenye">
              <MOSTY.Pages :pageConfiger="data.pageConfiger" @changeNo="changeNo" @changeSize="changeSize" />

            </div>
          </div>

        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import MyTable from "@/components/aboutTable/MyTable/index.vue";
import PageTitle from "@/components/PageTitle/PageTitle.vue";
import * as MOSTY from "@/components/MyComponents/index";
import { getApi, deleteApi, putApi, postApi } from "@/api/tobAcco_api.js";
import { onMounted, reactive, ref } from "vue";
const emit = defineEmits("changePage");
const tableloading = ref(false);
const props = defineProps({
  editObj: {
    type: Object,
    default: () => { }
  }
});
const listQuery = ref({
  pageCurrent: 1,
  pageSize: 20
});
let headData = ref({
  db: 0,
  kdb: 0,
  bdb: 0,
});
const data = reactive({
  searchObj: {},
  tableData: [],
  tableColumn: [
    {
      label: "姓名",
      prop: "username",
      showOverflowTooltip: false,
      sortable: false
    },
    {
      label: "部门",
      prop: "orgname",
      showOverflowTooltip: false,
      sortable: false
    },
    {
      label: "考核年度",
      prop: "checkyear",
      showOverflowTooltip: false,
      sortable: false
    },
    {
      label: "考核岗位",
      prop: "stationName",
      showOverflowTooltip: false,
      sortable: false
    },
    {
      label: "当前得分",
      prop: "factscore",
      showOverflowTooltip: false,
      sortable: false
    },
    {
      label: "当前扣分",
      prop: "subscore",
      showOverflowTooltip: false,
      sortable: false
    },
    {
      label: "可得分",
      prop: "havescore",
      showOverflowTooltip: false,
      sortable: false
    },
    {
      label: "状态",
      prop: "state",
      showOverflowTooltip: false,
      sortable: false,
      showSolt: true
    }
  ],
  tableConfiger: {
    showIndex: false,
    loading: false,
    height: '63vh'
  },
  pageConfiger: {
    pageSize: 20,
    pageCurrent: 1,
    total: 0
  },
});
onMounted(() => {
  if (props.editObj) {
    listQuery.value.orgcode = props.editObj.orgcode
    listQuery.value.year = props.editObj.year ? props.editObj.year : null
    // 查询详情
    // 查询列表信息
    getTableData()
    getcount()
  }
});
// 查询得分详情
const showInfo = (row) => {
  let obj = {
    title: `${row.username}得分详情`,
    saveBtnShow: false,
    userid: row.userid,
    depCode: props.editObj.orgcode,
    year: props.editObj.year ? props.editObj.year : null
  };

  emit("changePage", "Details", obj);
};

function dbchange(val) {
  listQuery.value.resultType = val
  getTableData()
}
//
function getcount() {
  postApi(listQuery.value, '/mosty-jcgl/gwdb/getGwdbStateSum').then((res) => {
    headData.value = res
  })
}
// 岗位达标统计-(列表主页)--详情(列表)
function getTableData() {
  tableloading.value = true;
  postApi(listQuery.value, '/mosty-jcgl/gwdb/getGwdbStateDetail').then((res) => {
    if (res.records) {
      data.tableData = res.records
      tableloading.value = false;
      data.pageConfiger.total = res.total;
    } else {
      data.tableData = [];
      tableloading.value = false;
    }
  })

}

// 返回
const black = () => {
  emit("changePage", "Main");
};
const changeNo = (val) => {
  listQuery.value.pageCurrent = val;
  getTableData();
};
const changeSize = (val) => {
  listQuery.value.pageSize = val;
  getTableData();
};
</script>

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

  .right {
    height: calc(100%);
    width: calc(100%);
    padding: 0 10px;
    box-sizing: border-box;

    .title {
      display: flex;
      margin: 10px 0;
      color: black;
      align-items: center;
      justify-content: space-between;

      .card {
        width: 30%;
        height: 80px;

        .cardhead {
          width: 100%;
          height: 50px;
          display: flex;
          align-items: center;
          justify-content: center;
          color: white;
          font-size: 20px;
          font-weight: 700;
          font-size: 30px;
        }

        .cardbottom {
          width: 100%;
          height: 30px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 18px;
          font-weight: 700;
          color: #666;
          background-color: #eeeeee;
        }
      }
    }
  }
}
</style>
