<template>
  <div class="app-container">
    <div class="container">
      <!-- 搜索表单 -->
      <el-form :model="queryParams"
        inline
        label-width="88px">
        <el-form-item label="直播间类型"
          prop="zbjQdType">
          <el-input v-model="queryParams.zbjQdType"
            placeholder="请输入直播间类型"
            clearable
            @input="getCate" />
        </el-form-item>
      </el-form>
      <!-- 操作按钮 -->
      <el-row class="mb8">
        <el-button icon="Upload"
          @click="uploadExcel"
          type="success">
          覆盖上传表格
        </el-button>
      </el-row>
      <!-- 展示表格 -->
      <el-table :data="tableData">
        <el-table-column label="直播间ID"
          prop="fbztId" />
        <el-table-column label="直播间类型"
          prop="zbjQdType" />
        <el-table-column label="分销商名字"
          prop="fenxiaoName" />
      </el-table>
    </div>
  </div>
</template>

<script setup>
import { getLiveCate, uploadLiveCate } from '@/api'

const { proxy } = getCurrentInstance()

// 覆盖上传直播间分类表格
const uploadExcel = () => {
  const fileInput = document.createElement('input');
  fileInput.type = 'file';
  fileInput.id = 'fileInput';
  fileInput.accept = '.xls, .xlsx'; // 限制只能选择 .xls 和 .xlsx 文件
  fileInput.addEventListener('change', async function () {
    const file = fileInput.files[0];
    if (file) {
      // 在这里可以添加文件上传的逻辑
      const formData = new FormData();
      formData.append('file', file);
      const res = await uploadLiveCate(formData)
      proxy.$modal.msgSuccess(res.data)
    }
  });
  document.body.appendChild(fileInput);
  fileInput.click()
}

/************ 直播间分类列表 *******************/
const tableData = ref([])
const queryParams = reactive({
  zbjQdType: ''
})
const getCate = async () => {
  const res = await getLiveCate(queryParams)
  tableData.value = res.data
}
getCate()


</script>
