<script setup>
import { reactive, ref } from 'vue'
import { interactiveInterface } from '@/api/api.js';
import mPage from '@/components/mPage.vue'

const pageState = reactive({
  page_no: 1,
  totals: 0,
  tableData: [],
  tableColums: [
    {
      label: '报告标题',
      key: 'Title',
      minwidthsty: 150
    },
    {
      label: '发布时间',
      key: 'PublishTime',
    },
    {
      label: '点赞数量',
      key: 'LikeNum',
      sortable: 'custom'
    },
    {
      label: '最近一次点赞时间',
      key: 'ModifyTime'
    },
  ],
  sort_obj: {},

  openDetailDia: false,
  likeprops: {
    title: '点赞详情',
    like_num: 0
  },
  likeList: [],
  like_page_no: 1,
  like_totals: 0,
  likeTableColums: [
    {
      label: '用户姓名',
      key: 'RealName',
    },
    {
      label: '公司名称',
      key: 'CompanyName',
    },
    {
      label: '客户状态',
      key: 'CompanyStatus',
    },
    {
      label: '点赞来源',
      key: 'SourceAgent',
    },
    {
      label: '点赞时间',
      key: 'ModifyTime',
      minwidthsty: 200
    },
  ],

  /*  */
  showDataLoading: false,
  default_datatype: 1,
  tabsOptions: [
    { label: '报告点赞', key: 1 },
    { label: '问答点赞', key: 2 },
    { label: '视频点赞', key: 4 },
    { label: '问答吐槽', key: 3 },
    { label: '视频吐槽', key: 5 },
  ],
  subTabsOptions: [
    { label: '线上路演', key: 3 },
    { label: '视频社区', key: 2 }
  ],
  default_subtype: 3,//3 路演视频 2视频社区
})

/* 列表 */
async function getTableList() {
  pageState.showDataLoading = true;
  const { type, param } = pageState.sort_obj;

  let params = {
    SortParam: param || '',
    SortType: type || '',
    PageSize: 10,
    CurrentIndex: pageState.page_no
  }

  if ([2, 4].includes(pageState.default_datatype)) {
    params.DataType = 'like'
  }
  if ([3, 5].includes(pageState.default_datatype)) {
    params.DataType = 'tease'
  }
  if ([2, 3].includes(pageState.default_datatype)) {
    params.Source = 1
  }
  if ([4, 5].includes(pageState.default_datatype)) {
    params.Source = pageState.default_subtype
  }


  const { Ret, Data } = pageState.default_datatype === 1
    ? await interactiveInterface.likelist(params)
    : await interactiveInterface.questionLikeList(params)

  if (Ret !== 200) return

  const { List, Paging } = Data;
  pageState.tableData = List || [];
  pageState.totals = Paging.Totals;

  pageState.showDataLoading = false;
}

function likePageChange(page) {
  pageState.page_no = page;
  getTableList();
}

function likeDetailPageChange(page) {
  pageState.like_page_no = page;
  getDetailList()
}

/* 获取点赞/吐槽详情列表 */
async function getDetailList() {

  const { ReportId, ReportChapterId, CommunityQuestionId } = pageState.detailParams;

  const { Ret, Data } = pageState.default_datatype === 1
    ? await interactiveInterface.likeDetail({
      PageSize: 10,
      CurrentIndex: pageState.like_page_no,
      ReportId: ReportId || '',
      ReportChapterId: ReportChapterId || ''
    })
    : await interactiveInterface.questionLikeDetail({
      PageSize: 10,
      CurrentIndex: pageState.like_page_no,
      CommunityQuestionId: CommunityQuestionId || '',
      DataType: [2, 4].includes(pageState.default_datatype) ? 'like' : 'tease',
      Source: [2, 3].includes(pageState.default_datatype) ? 1 : pageState.default_subtype
    })

  if (Ret !== 200) return

  const { List, Paging } = Data;

  pageState.likeList = List || [];
  pageState.like_totals = Paging.Totals;
}
getTableList()

/* 查看详情 */
function toDetail({ ReportId, ReportChapterId, LikeNum, Title, CommunityQuestionId, Num, QuestionContent }) {
  pageState.detailParams = { ReportId, ReportChapterId, CommunityQuestionId };
  getDetailList()

  pageState.likeprops = {
    title: [1, 2, 4].includes(pageState.default_datatype) ? '点赞详情' : '吐槽详情',
    like_num: LikeNum || Num,
    sub_title: Title || QuestionContent
  }
  pageState.openDetailDia = true;
}

function closeDialog() {
  pageState.openDetailDia = false;
  pageState.like_page_no = 1;
}

/* 排序变化时 */
function sortChangeHandle({ prop, order }) {
  pageState.page_no = 1;

  pageState.sort_obj = {
    type: order === 'ascending' ? 'asc' : order === 'descending' ? 'desc' : '',
    param: prop
  }
  getTableList();
}

/* 改变表格类型  */
const table = ref(null)
function changeTabHandle({ key }) {
  pageState.default_datatype = key;
  pageState.default_subtype = pageState.subTabsOptions[0].key
  pageState.page_no = 1;
  pageState.sort_obj = {};
  table.value.clearSort();
  setColumns();
  getTableList();
}

// 二级类型切换
function changeSubTabHandle(item) {
  pageState.default_subtype = item.key
  pageState.page_no = 1;
  pageState.sort_obj = {};
  table.value.clearSort();
  setColumns();
  getTableList();
}

function setColumns() {
  let tag = [1, 2, 4].includes(pageState.default_datatype) ? '点赞' : '吐槽';
  if (pageState.default_datatype === 1) {
    pageState.tableColums = [
      {
        label: '报告标题',
        key: 'Title',
        minwidthsty: 150
      },
      {
        label: '发布时间',
        key: 'PublishTime',
      },
      {
        label: `${tag}数量`,
        key: 'LikeNum',
        sortable: 'custom'
      },
      {
        label: `最近一次${tag}时间`,
        key: 'ModifyTime'
      },
    ]

    pageState.likeTableColums = [
      {
        label: '用户姓名',
        key: 'RealName',
      },
      {
        label: '公司名称',
        key: 'CompanyName',
      },
      {
        label: '客户状态',
        key: 'CompanyStatus',
      },
      {
        label: '点赞来源',
        key: 'SourceAgent',
      },
      {
        label: '点赞时间',
        key: 'ModifyTime',
        minwidthsty: 200
      }
    ]
  } else if ([2, 3].includes(pageState.default_datatype)) {//问答
    pageState.tableColums = [
      {
        label: '提问内容',
        key: 'QuestionContent',
        minwidthsty: 150
      },
      {
        label: '提问时间',
        key: 'CreateTime',
      },
      {
        label: `${tag}数量`,
        key: 'Num',
        sortable: 'custom'
      },
      {
        label: `${tag}时间`,
        key: 'ModifyTime'
      },
    ]

    pageState.likeTableColums = [
      {
        label: '用户姓名',
        key: 'RealName',
      },
      {
        label: '公司名称',
        key: 'CompanyName',
      },
      {
        label: '客户状态',
        key: 'CompanyFiccStatus',
      },
      {
        label: `${tag}来源`,
        key: 'SourceAgent',
      },
      {
        label: `${tag}时间`,
        key: 'ModifyTime',
        minwidthsty: 200
      },
    ]
  } else if ([4, 5].includes(pageState.default_datatype)) {//视频
    pageState.tableColums = [
      {
        label: '视频标题',
        key: 'QuestionContent',
        minwidthsty: 150
      },
      {
        label: `所属${pageState.default_subtype == 2 ? '标签' : '品种'}`,
        key: 'VarietyClassifyTag',
      },
      {
        label: '发布时间',
        key: 'CreateTime',
      },
      {
        label: `${tag}数量`,
        key: 'Num',
        sortable: 'custom'
      },
      {
        label: `${tag}时间`,
        key: 'ModifyTime'
      },
    ]

    pageState.likeTableColums = [
      {
        label: '用户姓名',
        key: 'RealName',
      },
      {
        label: '公司名称',
        key: 'CompanyName',
      },
      {
        label: '客户状态',
        key: 'CompanyFiccStatus',
      },
      {
        label: `${tag}来源`,
        key: 'SourceAgent',
      },
      {
        label: `${tag}时间`,
        key: 'ModifyTime',
        minwidthsty: 200
      },
    ]
  }
}




</script>

<template>
  <div class="like-container">
    <div class="main">
      <ul class="tabs-cont">
        <li
          :class="['tab-item', { act: pageState.default_datatype === tab.key }]"
          v-for="tab in pageState.tabsOptions"
          :key="tab.key"
          @click="changeTabHandle(tab)"
        >
          {{ tab.label }}
        </li>
      </ul>
      <div v-if="[4, 5].includes(pageState.default_datatype)" class="sub-tabs">
        <span
          :class="[
            'sub-tab-item',
            pageState.default_subtype == item.key && 'active',
          ]"
          v-for="item in pageState.subTabsOptions"
          :key="item.key"
          @click="changeSubTabHandle(item)"
          >{{ item.label }}</span
        >
      </div>
      <el-table
        ref="table"
        border
        :data="pageState.tableData"
        v-loading="pageState.showDataLoading"
        element-loading-text="加载中..."
        style="margin-top: 20px"
        @sort-change="sortChangeHandle"
      >
        <el-table-column
          v-for="item in pageState.tableColums"
          :key="item.label"
          :label="item.label"
          :width="item.widthsty"
          :min-width="item.minwidthsty"
          :sortable="item.sortable"
          align="center"
          :prop="item.key"
        >
          <template #default="{ row }">
            <span
              v-if="['LikeNum', 'Num'].includes(item.key)"
              class="editsty"
              @click="toDetail(row)"
              >{{ row[item.key] || "——" }}</span
            >

            <span v-else-if="item.key === 'Title'">
              {{ row.ClassifyNameFirst ? `${row.ClassifyNameFirst}/` : "" }}
              {{ row[item.key] }}
            </span>

            <span v-else>{{ row[item.key] || "——" }}</span>
          </template>
        </el-table-column>
        <template #empty>
          <div style="padding: 100px 0">
            <img
              src="~@/assets/img/cus_m/nodata.png"
              alt=""
              style="
                display: block;
                width: 128px;
                height: 128px;
                margin: 0 auto;
              "
            />
            <span>暂无数据</span>
          </div>
        </template>
      </el-table>
      <div style="height: 40px; margin-top: 10px; padding: 0 20px">
        <m-page
          :page_no="pageState.page_no"
          :pageSize="10"
          :total="pageState.totals"
          @handleCurrentChange="likePageChange"
        />
      </div>
    </div>

    <!-- 详情弹窗 -->
    <el-dialog
      :model-value="pageState.openDetailDia"
      width="700px"
      :title="pageState.likeprops.title"
      @close="closeDialog"
    >
      <div class="dialog-cont">
        <h4 style="margin-bottom: 10px">{{ pageState.likeprops.sub_title }}</h4>
        <span>点赞数量：{{ pageState.likeprops.like_num }} </span>
        <el-table
          border
          :data="pageState.likeList"
          style="margin-top: 20px"
          max-height="350"
        >
          <el-table-column
            v-for="item in pageState.likeTableColums"
            :key="item.label"
            :label="item.label"
            :width="item.widthsty"
            :min-width="item.minwidthsty"
            align="center"
            :prop="item.key"
          >
            <template #default="{ row }">
              <span v-if="item.key === 'SourceAgent'">{{
                row[item.key] === 1 ? "小程序" : "PC"
              }}</span>
              <span v-else>{{ row[item.key] || "——" }}</span>
            </template>
          </el-table-column>
          <template #empty>
            <div style="padding: 20px 0">
              <img
                src="~@/assets/img/cus_m/nodata.png"
                alt=""
                style="
                  display: block;
                  width: 128px;
                  height: 128px;
                  margin: 0 auto;
                "
              />
              <span>暂无数据</span>
            </div>
          </template>
        </el-table>
        <div style="height: 40px; margin-top: 10px; padding: 0 20px">
          <m-page
            :page_no="pageState.like_page_no"
            :pageSize="10"
            :total="pageState.like_totals"
            @handleCurrentChange="likeDetailPageChange"
          />
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<style lang='scss' scoped>
* {
  box-sizing: border-box;
}
.like-container {
  .main {
    min-height: calc(100vh - 120px);
    padding: 20px 30px;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 4px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);

    .tabs-cont {
      display: flex;
      align-items: center;
      font-size: 15px;
      .tab-item {
        margin-right: 30px;
        // border-bottom: 3px solid transparent;
        min-width: 100px;
        text-align: center;
        padding: 10px 0;
        cursor: pointer;
        color: #606266;
        border: 1px solid #dcdfe6;
        border-radius: 4px;
        &.act {
          background: #409eff;
          color: #fff;
        }
      }
    }
    .sub-tabs {
      margin-top: 30px;
      .sub-tab-item {
        font-size: 16px;
        color: #999;
        display: inline-block;
        margin-right: 30px;
        padding-bottom: 5px;
        cursor: pointer;
        &.active {
          border-bottom: 4px solid #58aaff;
          color: #333;
        }
      }
    }
  }
}
</style>