<template>
  <!-- 考核结果 -->
  <div class="CGresultsPublicity">
    <div class="searchox">
      <n-space>
        <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-space>
        </n-radio-group>
        <!-- <n-date-picker v-model:value="selectyear" size="tiny" type="year" @update:value="handleUpdateValue" /> -->
        <n-select
          v-model:value="selectyear"
          placeholder="请选择考核年份"
          clearable
          :options="yearOptions"
          style="width: 200px"
          @update:value="handleUpdateValue"
          size="small"
        >
        </n-select>
      </n-space>
      <n-button type="primary" style="margin: 0 10px" @click="exportData">导出</n-button>
    </div>
    <div class="tabBox">
      <CGResultsTable :data="tableData" :tableLoading="tableLoading" />
    </div>
  </div>
</template>

<script>
import { ref, reactive, toRefs, onMounted } from 'vue';
import CGResultsTable from './components/CGResaultsTable.vue';
import { normalPerformQuestionStatisticList, normalNameList } from '@/services';
import axios from 'axios';
import { downloadBlob } from '@/utils/util';
import { useMessage } from 'naive-ui';
import { formatDate } from '@/utils/util';

export default {
  name: 'resultsPublicity',
  components: { CGResultsTable },
  setup() {
    const message = useMessage();
    const state = reactive({
      tableData: [],
      yearOptions: [],
      selectyear: String(new Date().getFullYear()),
      tableLoading: true,
      orgValue: 1,
      organ: [
        { label: '项目公司考评', value: 0 },
        { label: '水务局考评', value: 1 },
      ],
    });
    // 获取表格数据
    const getTableData = async () => {
      state.tableLoading = true;
      let pramas = {
        type: state.orgValue,
        year: formatDate(state.selectyear, 'YYYY'),
      };
      let res = await normalPerformQuestionStatisticList(pramas);
      if (res.code === 200) {
        state.tableLoading = false;
        if (res.data == null) return;
        state.tableData = res.data;
      }
    };
    // 导出数据
    const token = localStorage.getItem('tokenXF');
    async function exportData() {
      if (state.tableData.length == 0) {
        message.error('表格数据为空，无法导出');
        return;
      }
      axios
        .get(`/api/perform/performCount/normalPerformQuestionStatisticExcel`, {
          headers: {
            token: token,
          },
          responseType: 'blob',
          params: {
            type: state.orgValue,
            year: formatDate(state.selectyear, 'YYYY'),
          },
        })
        .then(function (res) {
          console.log(res, 'res');
          downloadBlob(res.data, decodeURIComponent(res.headers['content-disposition'].split('filename=')[1]));
        });
    }
    // 切换tab/年份/考评公司
    const handleUpdateValue = (value) => {
      getTableData();
    };
    // 获取年份
    async function getYear() {
      state.yearOptions = [];
      let res = await normalNameList();
      if (res && res.code === 200) {
        res.data.map((item) => {
          state.yearOptions.push({
            value: item.year,
            label: item.performName,
          });
        });
      }
    }
    onMounted(() => {
      getYear();
      getTableData();
    });
    return {
      ...toRefs(state),
      getTableData,
      exportData,
      handleUpdateValue,
    };
  },
};
</script>

<style lang="less">
.CGresultsPublicity {
  width: 1739px;
  height: 927px;
  .tabBox {
    width: 100%;
    height: 850px;
    padding: 10px;
    overflow: auto;
    tbody,
    tfoot,
    thead,
    tr,
    th,
    td {
      vertical-align: middle;
    }
  }
  .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>