<template>
  <div class="table-box">
    <ProTable
      ref="proTable"
      :columns="columns"
      :request-api="getTableList"
      :init-param="initParam"
      :data-callback="dataCallback"
      row-key="advertiserId"
    >
      <!-- 表格 header 按钮 -->
      <template #tableHeader="scope">
        <el-button type="primary" plain :disabled="!scope.isSelected" @click="batchUpdateAdvertiserAccount(scope.selectedList)">
          批量更新广告主账户
        </el-button>
      </template>
    </ProTable>
  </div>
</template>

<script setup lang="tsx" name="useProTable">
import { ref, reactive, onMounted } from "vue";
import type { AdvertiserAccountList } from "@/api/modules/dataManage";
import ProTable from "@/components/ProTable/index.vue";
import { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";
import { ElMessage, ElMessageBox } from "element-plus";
import { getAdvertiserAccountList, updateAdvertiserAccountBatch } from "@/api/modules/dataManage";
import { advertiserStatus } from "@/utils/dict";

// ProTable 实例
const proTable = ref<ProTableInstance>();

// 如果表格需要初始化请求参数，直接定义传给 ProTable (之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
const initParam = reactive({  });

// dataCallback 是对于返回的表格数据做处理，如果你后台返回的数据不是 content && total 这些字段，可以在这里进行处理成这些字段
// 或者直接去 hooks/useTable.ts 文件中把字段改为你后端对应的就行
const dataCallback = (data: any) => {
  return {
    content: data?.content || [],
    total: Number(data?.total) || 0
  };
};

// 如果你想在请求之前对当前请求参数做一些操作，可以自定义如下函数：params 为当前所有的请求参数（包括分页），最后返回请求列表接口
// 默认不做操作就直接在 ProTable 组件上绑定	:requestApi="getUserList"
const getTableList = (params: any) => {
  let newParams = JSON.parse(JSON.stringify(params));
  return getAdvertiserAccountList(newParams);
};


// 表格配置项
const columns = reactive<ColumnProps<AdvertiserAccountList>[]>([
  { type: "selection", fixed: "left", width: 70 },
  { prop: "advertiserId", label: "广告主ID", search: { el: "input" }, width: 200,
  render: scope => {
        return (
          <div>
              {scope.row?.advertiserId || '--'}
              <div style="font-size: 12px; color: #999;">
                {scope.row?.advertiserName || '--'}
              </div>
          </div>
        );
      }
  },
  // { prop: "advertiserName", label: "广告主名称", width: 160 },
  { prop: "advertiserStatus", label: "广告主状态", width: 160, enum: advertiserStatus },
  { prop: "advCompanyId", label: "广告主公司ID", width: 200,
  render: scope => {
        return (
          <div>
              {scope.row?.advCompanyId || '--'}
              <div style="font-size: 12px; color: #999;">
                {scope.row?.advCompanyName || '--'}
              </div>
          </div>
        );
      }
   },
  // { prop: "advCompanyName", label: "广告主公司名称", width: 160 },
  { prop: "firstAgentId", label: "一级代理商ID", width: 200,
  render: scope => {
        return (
          <div>
              {scope.row?.firstAgentId || '--'}
              <div style="font-size: 12px; color: #999;">
                {scope.row?.firstAgentName || '--'}
              </div>
          </div>
        );
      }
   },
  // { prop: "firstAgentName", label: "一级代理商名称", width: 160 },
  { prop: "firstAgentCompanyId", label: "一级代理商公司ID", width: 200,
  render: scope => {
        return (
          <div>
              {scope.row?.firstAgentCompanyId || '--'}
              <div style="font-size: 12px; color: #999;">
                {scope.row?.firstAgentCompanyName || '--'}
              </div>
          </div>
        );
      }
   },
  // { prop: "firstAgentCompanyName", label: "一级代理商公司名称", width: 160 },
  { prop: "firstIndustryName", label: "一级行业名称", width: 160 },
  { prop: "secondIndustryName", label: "二级行业名称", width: 160 },
  { prop: "selfOperationTag", label: "自运营标签", width: 160 },
  // {
  //   prop: "username",
  //   label: "用户姓名",
  //   search: { el: "input", tooltip: "我是搜索提示" },
  //   render: scope => {
  //     return (
  //       <el-button type="primary" link onClick={() => ElMessage.success("我是通过 tsx 语法渲染的内容")}>
  //         {scope.row.username}
  //       </el-button>
  //     );
  //   }
  // },
  // {
  //   prop: "gender",
  //   label: "性别",
  //   // 字典数据（本地数据）
  //   enum: genderType,
  //   // 字典请求不带参数
  //   // enum: getUserGender,
  //   // 字典请求携带参数
  //   // enum: () => getUserGender({ id: 1 }),
  //   search: { el: "select", props: { filterable: true } },
  //   fieldNames: { label: "genderLabel", value: "genderValue" }
  // },
  // { prop: "idCard", label: "身份证号", search: { el: "input" } },
  // { prop: "email", label: "邮箱" },
  // { prop: "address", label: "居住地址" },
  // {
  //   prop: "createTime",
  //   label: "创建时间",
  //   width: 180,
  //   search: {
  //     el: "date-picker",
  //     span: 2,
  //     props: { type: "datetimerange", valueFormat: "YYYY-MM-DD HH:mm:ss" }
  //   }
  // },
]);

// 批量更新广告主账户
const batchUpdateAdvertiserAccount = async (selectedList: any[]) => {
  console.log(selectedList);
  if (!selectedList || selectedList.length === 0) {
    ElMessage.warning("请先选择要更新广告主账户的数据");
    return;
  }
  const advertiserId = selectedList.map(item => item.advertiserId);
  console.log(advertiserId);
  const params = {
    advertiserIdList: advertiserId
  };
  console.log(params);
  
  ElMessageBox.confirm(
    '是否更新广告主账户？',
    '温馨提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'info',
    }
  )
    .then(async () => {
      await updateAdvertiserAccountBatch(params);
      proTable.value?.getTableList();
      ElMessage({
        type: 'success',
        message: '更新广告主账户成功',
      })
    })
    .catch(() => {
      
    })


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