<template>
  <!-- 考核结果 -->
  <div class="resultsPublicity">
    <div class="searchox">
      <n-radio-group v-model:value="orgValue" name="radiogroup" @update:value="handleUpdateValue">
        <n-space>
          <n-radio v-for="org in organ" :key="org.value" :value="org.value">
            {{ org.label }}
          </n-radio>
          <n-button type="primary" size="tiny" style="margin: 0 10px" @click="synCountResult">同步结果</n-button>
        </n-space>
      </n-radio-group>
      <n-button type="primary" style="margin: 0 10px" @click="exportData">导出</n-button>
    </div>
    <div class="tabBox">
      <Table :data="tableData" :tableLoading="tableLoading" />
    </div>
  </div>
</template>

<script>
import { ref, reactive, toRefs, onMounted } from 'vue';
import Table from './components/Table.vue';
import { getResultList, CountResult } from '@/services';
import axios from 'axios';
import { downloadBlob } from '@/utils/util';
import { useMessage } from 'naive-ui';

export default {
  name: 'resultsPublicity',
  components: { Table },
  setup() {
    const message = useMessage();
    const state = reactive({
      tableData: [],
      tableLoading: true,
      orgValue: 1,
      organ: [
        { label: '项目公司考评', value: 0 },
        { label: '水务局考评', value: 1 },
      ],
    });
    // 获取表格数据
    const getTableData = async () => {
      state.tableLoading = true;
      let pramas = {
        type: state.orgValue,
      };
      let res = await getResultList(pramas);
      if (res.code === 200) {
        state.tableLoading = false;
        if (res.data == null) return;
        state.tableData = res.data;
      }
    };
    //同步考核结果
    async function synCountResult() {
      let res = await CountResult();
      if (res && res.code == 200) {
        getTableData();
      }
    }
    // 导出数据
    const token = localStorage.getItem('tokenXF');
    async function exportData() {
      if (state.tableData.length == 0) {
        message.error('表格数据为空，无法导出');
        return;
      }
      axios
        .get(`/api/perform/performCount/getResultExcel`, {
          headers: {
            token: token,
          },
          responseType: 'blob',
          params: {
            type: state.orgValue,
          },
        })
        .then(function (res) {
          console.log(res, 'res');
          downloadBlob(res.data, decodeURIComponent(res.headers['content-disposition'].split('filename=')[1]));
        });
    }
    // 切换tab/年份/考评公司
    const handleUpdateValue = (value) => {
      getTableData();
    };
    onMounted(() => {
      getTableData();
    });
    return {
      ...toRefs(state),
      getTableData,
      exportData,
      handleUpdateValue,
      synCountResult,
    };
  },
};
</script>

<style lang="less" scoped>
.resultsPublicity {
  .tabBox {
    width: 100%;
    padding: 10px;
  }
  .searchox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
  }
  .question {
    position: absolute;
    top: 50px;
    left: 2.5%;
    width: 95%;
    height: calc(100% - 50px);
    display: flex;
    justify-content: center;
  }
}
</style>