<template>
  <div class="report-page BaseApp-page">
    <header class="BaseApp-page-header">
      <div class="report-header-title">报表管理</div>
    </header>
    <main class="BaseApp-page-main">
      <vxe-input
        class="BaseApp-search"
        v-model="queryObj.name"
        prefix-icon="vxe-icon-search"
        placeholder="请输入样品名称"
        @blur="search"></vxe-input>
      <div class="report-table-wrapper">
        <vxe-table
          class="BaseApp-table"
          ref="tableRef"
          :data="tableData"
          show-overflow
          stripe
          height="100%"
          :checkbox-config="{ highlight: true }">
          <vxe-column type="checkbox" width="50"></vxe-column>
          <vxe-column field="battery_name" title="样品名称" min-width="100"></vxe-column>
          <vxe-column field="battery_code" title="样品编号" min-width="60"></vxe-column>
          <vxe-column field="battery_company" title="电池厂家" min-width="60"></vxe-column>
          <vxe-column field="battery_model" title="电池型号" min-width="60"></vxe-column>
          <vxe-column field="battery_spec" title="电池规格" min-width="60"></vxe-column>
     
          
          <vxe-column title="操作" min-width="55">
            <template #default="{ row }">
              <div class="BaseApp-table-btn-group">
                <div class="BaseApp-table-btn" @click="viewRow(row)">查看详情</div>
              </div>
            </template>
          </vxe-column>
        </vxe-table>
      </div>
      <CommonPage
        class="BaseApp-pagination"
        :maxNum="queryObj.maxPage"
        :page_no="queryObj.page_no"
        @changePage="loadData4Page" />
    </main>
    <footer class="BaseApp-page-footer">
      <div class="BaseApp-btn" @click="goBack">返回</div>
      <div class="BaseApp-btn BaseApp-btn--blue" @click="exportExcel">导出</div>
    </footer>
  </div>
</template>

<script setup>
import { ref, reactive, onBeforeUnmount, onMounted, nextTick } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { notify } from '@/utils/message.js';
import { getExpData } from '@/api/experiment';
import { showConfirmDialog } from 'vant';

const router = useRouter();
let tableData = reactive([]);
let queryObj = reactive({
  page_no: 1,
  page_size: 6,
  maxPage: 1,
  name: ''
});
const tableRef = ref();

/**
 * 搜索
 */
const search = () => {
  queryObj.page_no = 1;
  loadData();
};

/**
 * 加载数据
 */
const loadData = async () => {
  const res = await getExpData({
    ...queryObj
  });
  let { code, desc, pagination } = res?.data || {};
  if (code !== 200) {
    notify(desc);
    return;
  }
  tableData.length = 0;
  tableData.push(...res.data.data);
  console.log(pagination, res);
  queryObj = Object.assign(queryObj, {
    ...pagination,
    maxPage:
      Math.floor(pagination.total_count / pagination.page_size) +
      (pagination.total_count % pagination.page_size ? 1 : 0)
  });
};

/**
 * 删除
 */
const delRow = (rowObj) => {
  showConfirmDialog({
    title: '提示',
    message: `确定删除样片名称：[${rowObj.name}]的报表吗？`,
    className: 'BaseApp-MessageBox-Confirm'
  })
    .then(async () => {
      const res = await delExperimentApi(rowObj.experiment_id);
      let { code, desc } = res.data;
      if (code != 200) {
        notify(desc);
        return;
      }
      notify(desc, 'success ');

      loadData();
    })
    .catch(() => {});
};

/**
 * 查看
 */
const viewRow = (rowObj) => {
  console.log(rowObj);
  router.push({
    path: '/report/detail',
    query: {
      name: rowObj.battery_name
    }
  });
};

/**
 * 
分页 */
const loadData4Page = (type) => {
  if (type === 'pre') {
    if (queryObj.page_no == 1) return;
    queryObj.page_no--;
    queryObj.page_no = Math.max(queryObj.page_no, 1);
  } else if (type === 'next') {
    if (queryObj.page_no == queryObj.maxPage) return;
    if (queryObj.page_no < queryObj.maxPage) {
      queryObj.page_no = queryObj.page_no + 1;
    }
  }
  loadData();
};

const goBack = () => {
  router.go(-1);
};

const exportExcel = () => {
  const $table = tableRef.value;
  if ($table) {
    const selectRecords = $table.getCheckboxRecords();
    if (selectRecords.length == 0) {
      notify('请选择要导出的报表');
      return;
    }
    let rowIdList = selectRecords.map((item) => item.experiment_id);
    console.log(rowIdList);
  }
};

onMounted(() => {
  loadData();
});
</script>

<style lang="less" scoped>
.report-page {
  font-size: 20px;
  color: #666666;
  .BaseApp-page-header {
    margin: 40px 0 0 40px;
    .report-header-title {
      font-weight: bold;
      font-size: 28px;
      color: #3a3a3a;
    }
  }
  .BaseApp-page-main {
    margin: 20px;
    background: #f6f6f6;
    box-shadow: 0px 3px 9px 1px rgba(0, 0, 0, 0.16);
    border-radius: 12px 12px 12px 12px;
    border: 1px solid #cccccc;
  }
  .report-table-wrapper {
    flex: 1;
    margin-top: 20px;
  }

  .BaseApp-pagination {
    margin: 20px 0 0 0;
  }
}
</style>
