<template>
  <div class="changeRecord">
    <Search :onClickSearch="onClickSearch" :onClickReset="onClickReset" />
    <div class="changeRecord-table">
      <a-table :scroll="{ x: '100%', y: 500 }" rowKey="device_sn" :loading="state.listLoading" :columns="columns"
        @change="refreshData" :rowClassName="rowClassName" :dataSource="state.list" :pagination="paginationConfig">
        <!-- 设备型号 -->
        <template #device_name="{ record }">
          <CustomCell :record="record" fieldName="device_name" />
        </template>
        <!-- 设备SN -->
        <template #device_sn="{ record }">
          <CustomCell :record="record" fieldName="device_sn" />
        </template>
        <!-- 设备名称 -->
        <template #nick_name="{ record }">
          <CustomCell :record="record" fieldName="nick_name" />
        </template>
      </a-table>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, onMounted } from 'vue';
import Search from './components/Search.vue';
import CustomCell from './components/CustomCell.vue';
import { apis } from '/@/api/custom/index';

interface State {
  query: any,
  listLoading: boolean,
  list: any[],
};

const state: State = reactive({
  query: undefined,
  listLoading: false,
  list: [],
});

const paginationConfig = reactive({
  pageSizeOptions: ['20', '50', '100'],
  showQuickJumper: true,
  showSizeChanger: true,
  pageSize: 20,
  current: 1,
  total: 0
})

const fetchList = async () => {
  state.listLoading = true;
  try {
    const res = await apis.fetchChangeRecordList({
      ...state.query,
      page: paginationConfig.current,
      page_size: paginationConfig.pageSize
    });
    if (res.code === 0) {
      state.list = res.data.list;
      paginationConfig.total = res.data.pagination.total
      paginationConfig.current = res.data.pagination.page
      paginationConfig.pageSize = res.data.pagination.page_size
    }
  } catch (e) {
    console.error(e);
  } finally {
    state.listLoading = false;
  }
}

onMounted(async () => {
  await fetchList();
})

const columns = [
  {
    title: '加入项目时间',
    dataIndex: 'create_time',
    width: 200,
    sorter: (a: any, b: any) => a.create_time.localeCompare(b.create_time),
  },
  {
    title: '操作用户',
    dataIndex: 'username',
    width: 150,
  },
  {
    title: '绑定项目',
    dataIndex: 'workspace_name',
    width: 200,
  },
  {
    title: '绑定码',
    dataIndex: 'bind_code',
    width: 150,
  },
  {
    title: '变化描述',
    dataIndex: 'log_info',
    width: 150,
  },
  {
    title: '设备型号',
    dataIndex: 'device_name',
    width: 150,
    sorter: (a: any, b: any) => a.device_name.localeCompare(b.device_name),
    slots: { customRender: 'device_name' }
  },
  {
    title: '设备SN',
    dataIndex: 'device_sn',
    width: 250,
    slots: { customRender: 'device_sn' }
  },
  {
    title: '设备名称',
    dataIndex: 'nick_name',
    width: 150,
    slots: { customRender: 'nick_name' },
    sorter: (a: any, b: any) => a.nick_name.localeCompare(b.nick_name),
  }
]

const rowClassName = (record: any, index: number) => {
  const className = []
  if ((index & 1) === 0) {
    className.push('table-striped')
  }
  return className.toString().replaceAll(',', ' ')
}

const refreshData = async (page: any) => {
  paginationConfig.current = page?.current!
  paginationConfig.pageSize = page?.pageSize!
  await fetchList();
}

// 点击搜索
const onClickSearch = async (query: any) => {
  state.query = query;
  await fetchList();
}

// 点击重置
const onClickReset = async (query: any) => {
  state.query = query;
  await fetchList();
}
</script>

<style lang="scss">
.changeRecord {
  padding: 20px;
}

.ant-table {
  border-top: 1px solid rgb(0, 0, 0, 0.06);
  border-bottom: 1px solid rgb(0, 0, 0, 0.06);
}

.ant-table-tbody tr td {
  border: 0;
}

.table-striped {
  background-color: #f7f9fa;
}
</style>