<template>
  <div class="app-container">
  <div class="el-container-md">

    <el-form :model="queryParams" class="live-goods-css" ref="queryForm" :inline="true" v-show="showSearch" label-width="100px">
      <el-form-item label="直播名称" prop="liveName">
        <el-input
          v-model="queryParams.liveName"
          placeholder="请输入直播名称"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
<!--      <el-form-item label="用户名称" prop="userName">-->
<!--        <el-input-->
<!--          v-model="queryParams.userName"-->
<!--          placeholder="请输入用户名称"-->
<!--          clearable-->
<!--          size="small"-->
<!--          @keyup.enter.native="handleQuery"-->
<!--        />-->
<!--      </el-form-item>-->
<!--      <el-form-item label="销售名称" prop="companyUserName">-->
<!--        <el-input-->
<!--          v-model="queryParams.companyUserName"-->
<!--          placeholder="请输入销售名称"-->
<!--          clearable-->
<!--          size="small"-->
<!--          @keyup.enter.native="handleQuery"-->
<!--        />-->
<!--      </el-form-item>-->
<!--      <el-form-item label="公司名称" prop="companyName">-->
<!--        <el-input-->
<!--          v-model="queryParams.companyName"-->
<!--          placeholder="请输入公司名称"-->
<!--          clearable-->
<!--          size="small"-->
<!--          @keyup.enter.native="handleQuery"-->
<!--        />-->
<!--      </el-form-item>-->
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

<!--    <div class="selection-toolbar">-->
<!--      <el-checkbox :indeterminate="isIndeterminate" v-model="allChecked" @change="toggleSelectAll">-->
<!--        {{ multipleSelection.length > 0 ? `已选 ${multipleSelection.length} 条` : '选中本页' }}-->
<!--      </el-checkbox>-->
<!--      <el-button  plain size="mini" @click="handleShelf">上架</el-button>-->
<!--      <el-button  plain size="mini" @click="handleUnshelf">下架</el-button>-->
<!--      <el-button  plain size="mini" @click="handleDeleteSelected">删除</el-button>-->
<!--      <el-button  plain type="mini" icon="el-icon-plus" @click="handleAddLiveGoods">添加商品</el-button>-->
<!--    </div>-->
    <el-table
      ref="dataTable"
      :data="dataList"
      style="width: 100%"
      v-loading="loading"
    >
      <!-- 题干列：显示试题的主要内容 -->
      <el-table-column
        prop="liveId"
        label="直播ID"
        show-overflow-tooltip
      ></el-table-column>

      <el-table-column
        prop="liveName"
        label="直播名称"
      >
      </el-table-column>

      <el-table-column
        prop="companyName"
        label="公司名称"
      ></el-table-column>

<!--      <el-table-column-->
<!--        prop="companyId"-->
<!--        label="公司ID"-->
<!--      ></el-table-column>-->

      <el-table-column
        prop="companyUserId"
        label="销售ID"
      ></el-table-column>
      <el-table-column
        prop="companyUserName"
        label="销售名称"
      ></el-table-column>
      <el-table-column
        prop="liveNum"
        label="邀请人数"
      ></el-table-column>

      <el-table-column
        label="操作"
        width="120"
        align="center"
      >
        <template slot-scope="scope">
          <el-button
            type="text"
            size="mini"
            @click="handleDetail(scope.row)"
          >查看详情</el-button>
        </template>
      </el-table-column>

<!--      <el-table-column-->
<!--        prop="payPrice"-->
<!--        label="支付价格"-->
<!--      ></el-table-column>-->

<!--      <el-table-column-->
<!--        prop="isPay"-->
<!--        label="是否支付"-->
<!--      >-->
<!--        <template slot-scope="scope">-->
<!--          <el-tag type="success" v-if="scope.row.isPay == 1">已支付</el-tag>-->
<!--          <el-tag type="info" v-if="scope.row.isPay == 0">未支付</el-tag>-->
<!--        </template>-->
<!--      </el-table-column>-->
<!--      <el-table-column-->
<!--        prop="status"-->
<!--        label="订单状态"-->
<!--      >-->
<!--        <template slot-scope="scope">-->
<!--          <el-tag v-if="scope.row.status == -1">申请退款</el-tag>-->
<!--          <el-tag v-if="scope.row.status == -2">退货成功</el-tag>-->
<!--          <el-tag v-if="scope.row.status == 0">已取消</el-tag>-->
<!--          <el-tag v-if="scope.row.status == 1">待支付</el-tag>-->
<!--          <el-tag v-if="scope.row.status == 2">代发货</el-tag>-->
<!--          <el-tag v-if="scope.row.status == 3">待收货</el-tag>-->
<!--          <el-tag v-if="scope.row.status == 4">待评价</el-tag>-->
<!--          <el-tag v-if="scope.row.status == 5">已完成</el-tag>-->
<!--        </template>-->
<!--      </el-table-column>-->
<!--      <el-table-column-->
<!--        prop="companyUserId"-->
<!--        label="销售id"-->
<!--      ></el-table-column>-->
<!--      <el-table-column-->
<!--        prop="companyUserName"-->
<!--        label="销售名称"-->
<!--      ></el-table-column>-->
<!--      <el-table-column-->
<!--        prop="companyName"-->
<!--        label="公司名称"-->
<!--      ></el-table-column>-->



    </el-table>

    <!-- 分页组件：用于分页展示试题列表 -->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
      style="margin-top: 20px;"
    />

    <!-- 详情抽屉 -->
    <el-drawer
      title="直播间用户详情"
      :visible.sync="drawerVisible"
      direction="rtl"
      size="50%"
    >
      <div v-if="detailInfo" style="padding: 20px;">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="直播间ID">{{ detailInfo.liveId }}</el-descriptions-item>
          <el-descriptions-item label="直播间名称">{{ detailInfo.liveName }}</el-descriptions-item>
          <el-descriptions-item label="销售ID">{{ detailInfo.companyUserId }}</el-descriptions-item>
          <el-descriptions-item label="销售名称">{{ detailInfo.companyUserName }}</el-descriptions-item>
          <el-descriptions-item label="进入用户数" :span="2">{{ detailList.length }} 人</el-descriptions-item>
        </el-descriptions>

        <el-divider></el-divider>

        <el-table
          :data="detailList"
          style="width: 100%"
          v-loading="detailLoading"
        >
          <el-table-column
            prop="userId"
            label="用户ID"
            width="100"
          ></el-table-column>
          <el-table-column
            prop="userName"
            label="用户名称"
          ></el-table-column>
          <el-table-column
            prop="firstEntryTime"
            label="进入时间"
            width="180"
          >
            <template slot-scope="scope">
              {{ formatDateTime(scope.row.firstEntryTime) }}
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-drawer>

  </div>
  </div>
</template>

<script>
import {liveProfitList, liveProfitDetail} from '@/api/live/liveProfit';
export default {
  data() {
    return {
      loading: true,
      // 查询条件
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        orderCode: null,
        userName: null,
        companyUserName: null,
        companyName: null,
      },
      // 数据列表
      dataList:[],
      total:0,
      // 显示搜索条件
      showSearch: true,
      // 抽屉相关
      drawerVisible: false,
      detailLoading: false,
      detailInfo: null,
      detailList: [],
    }
  },
  created(){
    this.getList();
  },
  methods: {
    getList(){
      this.loading = true;
      liveProfitList(this.queryParams).then(res=>{
        this.dataList = res.rows;
        this.total = res.total;
        this.loading = false;
      }).catch(() => {
        this.loading = false;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        orderCode: null,
        userName: null,
        companyUserName: null,
        companyName: null,
      };
      this.handleQuery();
    },
    /** 查看详情 */
    handleDetail(row) {
      this.drawerVisible = true;
      this.detailLoading = true;
      this.detailInfo = {
        liveId: row.liveId,
        liveName: row.liveName,
        companyUserId: row.companyUserId,
        companyUserName: row.companyUserName
      };
      this.detailList = [];
      
      liveProfitDetail(row.liveId, row.companyUserId).then(res => {
        if (res.code === 200) {
          this.detailList = res.data || [];
        } else {
          this.$modal.msgError(res.msg || '获取详情失败');
        }
        this.detailLoading = false;
      }).catch(() => {
        this.detailLoading = false;
        this.$modal.msgError('获取详情失败');
      });
    },
    /** 格式化日期时间 */
    formatDateTime(dateTime) {
      if (!dateTime) return '';
      const date = new Date(dateTime);
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      const hours = String(date.getHours()).padStart(2, '0');
      const minutes = String(date.getMinutes()).padStart(2, '0');
      const seconds = String(date.getSeconds()).padStart(2, '0');
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
  },
}
</script>



<style scoped lang="scss">

</style>
