<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 = () => {
  proxy.chooseFile({
    accept: '.xls, .xlsx'
  }).then(async file => {
    // 在这里可以添加文件上传的逻辑
    const formData = new FormData();
    formData.append('file', file);
    const res = await uploadLiveCate(formData)
    proxy.$modal.msgSuccess(res.data)
  }).catch(err => {
    proxy.$modal.msgError(err)
  })
}

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


</script>
