<template>
  <div class="feedbackRecord">
    <Search :onClickSearch="onClickSearch" :onClickReset="onClickReset" />
    <div class="feedbackRecord-table">
      <a-table :scroll="{ x: '100%', y: 500 }" rowKey="logs_id" :loading="state.listLoading" :columns="columns"
        @change="refreshData" :rowClassName="rowClassName" :dataSource="state.list" :pagination="paginationConfig">
        <!-- 上传状态 -->
        <template #status="{ record }">
          <div v-if="record.status === 1">
            上传中
          </div>
          <div v-else-if="record.status === 2">
            成功
          </div>
          <div v-else-if="record.status === 3">
            取消
          </div>
          <div v-else-if="record.status === 4">
            失败
          </div>
        </template>
        <!-- 操作 -->
        <template #operation="{ record }">
          <div class="editable-row-operations">
            <div class="flex-align-center flex-row" style="color: #2d8cf0">
              <a-tooltip title="详情">
                <FileSearchOutlined style="margin-right: 10px;" @click="onClickDetail(record.logs_id)" />
              </a-tooltip>
            </div>
          </div>
        </template>
      </a-table>
    </div>
    <!-- 异常反馈-详情弹出层 -->
    <FeedbackDetailModal :currentId="state.currentId" :visible="state.drawerVisible"
      :onClickClose="() => state.drawerVisible = false" v-if="state.drawerVisible" />
  </div>
</template>

<script lang="ts" setup>
import { reactive, onMounted } from 'vue';
import { FileSearchOutlined } from '@ant-design/icons-vue';
import Search from './components/Search.vue';
import FeedbackDetailModal from '../deviceList/components/FeedbackDetailModal.vue';
import { apis } from '/@/api/custom/index';

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

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

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.fetchFeedbackRecordList({
      ...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: 'user_name',
    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),
  },
  {
    title: '固件版本',
    dataIndex: 'firmware_version',
    width: 150,
    ellipsis: true,
    slots: { customRender: 'firmware_version' }
  },
  {
    title: '设备异常描述',
    dataIndex: 'logs_info',
    width: 150,
    ellipsis: true,
    customRender: ({ text }: any) => {
      return text || '--';
    }
  },
  {
    title: '上传状态',
    dataIndex: 'status',
    slots: { customRender: 'status' },
    sorter: (a: any, b: any) => a.status.localeCompare(b.status),
    width: 150,
  },
  {
    title: '操作',
    dataIndex: 'operation',
    fixed: 'right',
    width: 80,
    slots: { customRender: 'operation' }
  },
]

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();
}

// 点击详情
const onClickDetail = (id: string) => {
  state.currentId = id;
  state.drawerVisible = true;
}
</script>

<style lang="scss">
.feedbackRecord {
  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;
}
</style>