<script setup>
import { reactive } from 'vue'
import { Search } from "@element-plus/icons-vue";
import { dataMainInterface, interactiveInterface, customInterence } from '@/api/api.js'

function formatSource(e) {
  if (e == 1) {
    return '小程序'
  } else if (e == 2) {
    //实际为小程序pc
    return 'PC端'
  } else if (e == 3) {
    //实际为web pc
    return 'PC端'
  } else {
    return '--'
  }
}


const pageState = reactive({
  sectionOpts: [],//板块选项
  selectSec: '',//选择的板块
  varietyOpts: [],//品种选项
  selectVari: '',//选择的品种
  userOpts: [],//
  selectUser: '',
  keyword: '',
  ClickSort: '',

  tableData: [],
  page_no: 1,
  pageSize: 15,
  totals: 0,

  showDia: false,
  clickTableData: [],
  page_no_click: 1,
  pageSizeClick: 15,
  totalsClick: 0,
  curTitle: '',
  curNum: '',
  curId: 0,
})


async function geTableList() {
  const res = await dataMainInterface.voicePlayStatistic({
    CurrentIndex: pageState.page_no,
    PageSize: pageState.pageSize,
    SectionId: pageState.selectSec,
    VarietyId: pageState.selectVari,
    AdminId: pageState.selectUser,
    Title: pageState.keyword,
    ClickSort: pageState.ClickSort
  })
  if (res.Ret != 200) return
  const { List, Paging } = res.Data;

  pageState.tableData = List || [];
  pageState.totals = Paging.Totals;
}

function handleCurrentChange(e) {
  pageState.page_no = e
  geTableList()
}

function handleFilter() {
  pageState.page_no = 1
  geTableList()
}

function sortChangeHandle(item) {
  if (item.order == "descending") {
    pageState.ClickSort = 2
  } else if (item.order == "ascending") {
    pageState.ClickSort = 1
  } else {
    pageState.ClickSort = ''
  }
  pageState.page_no = 1
  geTableList()
}


function handleShowDetail(item) {
  pageState.curTitle = item.BroadcastName
  pageState.curNum = item.VisitCount
  pageState.curId = item.BroadcastId
  pageState.clickTableData = []
  pageState.page_no_click = 1
  pageState.totalsClick = 0
  getDetail()
  pageState.showDia = true
}

//获取某个语音播报详情数据
async function getDetail() {
  const res = await dataMainInterface.voicePlayDetailSta({
    CurrentIndex: pageState.page_no_click,
    PageSize: pageState.pageSizeClick,
    BroadcastId: Number(pageState.curId)
  })
  if (res.Ret != 200) return
  const { List, Paging } = res.Data;

  pageState.clickTableData = List || [];
  pageState.totalsClick = Paging.Totals;
}

function handleClickCurrentChange(e) {
  pageState.page_no_click = e
  getDetail()
}

//获取语音管理员筛选项
async function getUserOpts() {
  const res = await interactiveInterface.messageManageList({
    RoleTypeCode: 'yb_voice_admin',
    PageSize: 10000,
    CurrentIndex: 1
  })
  if (res.Ret === 200) {
    pageState.userOpts = res.Data.List || []
  }
}

//获取品种数据
async function getClassifyList() {
  const res = await customInterence.getvariety({ CompanyType: "ficc" })
  if (res.Ret !== 200) return
  pageState.varietyOpts = res.Data.List || []
}

//获取板块数据
async function getSectionList() {
  const res = await interactiveInterface.voiceList({
    CurrentIndex: pageState.page_no,
    PageSize: 100000
  })
  if (res.Ret !== 200) return
  const { List, Paging } = res.Data;

  pageState.sectionOpts = List || [];
}





function initPage() {
  geTableList()
  getUserOpts()
  getClassifyList()
  getSectionList()
}
initPage()

</script>

<template>
  <div class="voice-play-list-page">
    <div class="top-filter-wrap">
      <el-select
        v-model="pageState.selectSec"
        placeholder="请选择板块名称"
        clearable
        @change="handleFilter"
      >
        <el-option
          v-for="item in pageState.sectionOpts"
          :key="item.SectionId"
          :label="item.SectionName"
          :value="item.SectionId"
        >
        </el-option>
      </el-select>
      <el-cascader
        v-model="pageState.selectVari"
        placeholder="请选择品种"
        :options="pageState.varietyOpts"
        :props="{
          value: 'ChartPermissionId',
          label: 'ClassifyName',
          children: 'Items',
          emitPath: false,
        }"
        :show-all-levels="false"
        ref="cascader"
        clearable
        @change="handleFilter"
        style="margin: 0 20px"
      ></el-cascader>
      <el-select
        v-model="pageState.selectUser"
        filterable
        placeholder="请选择语音管理员"
        clearable
        @change="handleFilter"
      >
        <el-option
          v-for="item in pageState.userOpts"
          :key="item.AdminId"
          :label="item.RealName"
          :value="item.AdminId"
        >
        </el-option>
      </el-select>
      <el-input
        placeholder="请输入"
        v-model="pageState.keyword"
        style="max-width: 400px; margin-bottom: 8px; float: right"
        @input="handleFilter"
        clearable
        :prefix-icon="Search"
      >
      </el-input>
    </div>
    <div>
      <el-table
        :data="pageState.tableData"
        border
        style="width: 100%"
        @sort-change="sortChangeHandle"
      >
        <el-table-column prop="BroadcastName" label="语音标题" align="center" />
        <el-table-column prop="SectionName" label="板块名称" align="center" />
        <el-table-column
          prop="VarietyName"
          label="品种"
          align="center"
          width="200"
        />
        <el-table-column
          prop="PublishTime"
          label="发布时间"
          align="center"
          width="200"
        />
        <el-table-column
          prop="Author"
          label="语音管理员"
          align="center"
          width="200"
        />
        <el-table-column
          prop="VisitCount"
          label="点击量"
          width="200"
          align="center"
          sortable="custom"
        >
          <template #default="scope">
            <span
              style="color: #409eff; cursor: pointer"
              @click="handleShowDetail(scope.row)"
              >{{ scope.row.VisitCount }}</span
            >
          </template>
        </el-table-column>
        <template #empty>
          <div style="margin: 50px 0">
            <img
              style="width: 150px"
              src="~@/assets/img/cus_m/nodata.png"
              alt=""
            />
            <div>暂无数据~</div>
          </div>
        </template>
      </el-table>
      <el-pagination
        layout="total,prev,pager,next,jumper"
        background
        :current-page="pageState.page_no"
        @current-change="handleCurrentChange"
        :page-size="pageState.pageSize"
        :total="pageState.totals"
        style="float: right; margin-top: 20px"
      >
      </el-pagination>
    </div>

    <!-- 点击量弹窗 -->
    <el-dialog
      v-model="pageState.showDia"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      class="dialog"
      center
      width="900px"
      draggable
      title="点击量详情"
    >
      <div class="click-detail-dia-warp">
        <div class="title">{{ pageState.curTitle }}</div>
        <div class="num">点击量：{{ pageState.curNum }}</div>
        <el-table :data="pageState.clickTableData" border style="width: 100%">
          <el-table-column prop="RealName" label="用户姓名" align="center" />
          <el-table-column prop="CompanyName" label="公司名称" align="center" />
          <el-table-column
            prop="CompanyStatus"
            label="客户状态"
            align="center"
            width="100"
          />
          <el-table-column
            prop="VisitCount"
            label="点击次数"
            align="center"
            width="100"
          />
          <el-table-column
            prop="Source"
            label="点击来源"
            align="center"
            width="100"
          >
            <template #default="scope">
              <span>{{ formatSource(scope.row.Source) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="CreateTime"
            label="最近一次点击时间"
            align="center"
            width="180"
          />
          <template #empty>
            <div style="margin: 50px 0">
              <img
                style="width: 100px"
                src="~@/assets/img/cus_m/nodata.png"
                alt=""
              />
              <div>暂无数据~</div>
            </div>
          </template>
        </el-table>
        <el-pagination
          layout="total,prev,pager,next,jumper"
          background
          :current-page="pageState.page_no_click"
          @current-change="handleClickCurrentChange"
          :page-size="pageState.pageSizeClick"
          :total="pageState.totalsClick"
          style="float: right; margin-top: 20px"
        >
        </el-pagination>
      </div>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
.voice-play-list-page {
  background: #fff;
  border: 1px solid #ececec;
  border-radius: 4px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
  padding: 30px 30px 100px 30px;
  min-height: 80vh;
}
.top-filter-wrap {
  margin-bottom: 30px;
}

.click-detail-dia-warp {
  padding-bottom: 100px;
  .title {
    font-size: 14px;
    margin-bottom: 10px;
  }
  .num {
    margin-bottom: 10px;
  }
}
</style>