<script setup>
import { onMounted, reactive, ref, toRefs, computed } from "vue";
import { ElMessageBox, ElMessage } from "element-plus";
import { InfoFilled } from "@element-plus/icons-vue";
import { raiInterface } from "@/api/api.js";

import { TopLableList, ReportStutsList, TableColums, AuthorTableColums } from "./components/yanXuanLable";
import mPage from "@/components/mPage.vue";
import CollectFansDlg from "./components/collectFansDlg.vue";
import SpecialDlg from "./components/specialDlg.vue";

const pageState = reactive({
  page_no: 1,
  total: 0, //条数
  PageSize: 10, //每页显示几条
  topLableActive: 1,
  reportStatusActive: 1,
  tableData: [],
  reportStatus: "", //文章类型
  authorStatus: "", // 作者状态
  reportTitle: "", //文章标题
  issueTime: [], // 文章发布时间
  authorColumnValue: "", // 专栏名称
  iscollectFansDlgShow: false,
  collectFansDlgText: "",
  collectFansDlgItem: {},
  addAuthorDlgVisible: false,
  topLableList: [],
  sortType: "",
  sortParam: "",
});

const reportStutsList = computed(() => {
  return ReportStutsList;
});

const authorTableColums = computed(() => {
  return AuthorTableColums;
});

const reportTableColums = computed(() => {
  return TableColums(pageState.reportStatusActive);
});

// 点击了头部的tlble
function tlableClickHandler(item) {
  pageState.topLableActive = item.value;
  pageState.page_no = 1;
  getyanxuanReportSpecial();
}
// 文章的状态点击
function reportStatusClickHandler(item) {
  pageState.reportStatusActive = item.value;
  pageState.page_no = 1;
  getyanxuanReportSpecial();
}
/* 表格行的样式 */
function handleRowStyle(key) {
  if (key == "Title" && pageState.reportStatusActive == 2) {
    return "color: #409eff; cursor: pointer";
  } else if ((key == "SpecialName" && (pageState.reportStatusActive == 2 || pageState.reportStatusActive == 3)) || (key == "SpecialName" && pageState.topLableActive == 2)) {
    return "color: #409eff; cursor: pointer";
  } else if (key == "ArticleCollectNum" && pageState.topLableActive == 1) {
    return "color: #409eff; cursor: pointer";
  } else {
    const style = {
      FansNum: "color: #409eff; cursor: pointer",
    };
    return style[key] ? style[key] : "";
  }
}
/* 表格行的点击事件 */
function handleRowClick(row, key) {
  if (key === "Title" && pageState.reportStatusActive == 2) {
    let href = `${import.meta.env.VITE_CYGX_WEB}/column/detail/${row.Id}`;
    window.open(href, "_blank");
  } else if (key === "SpecialName" && (pageState.reportStatusActive == 2 || pageState.reportStatusActive == 3 || pageState.topLableActive == 2)) {
    let href = `${import.meta.env.VITE_CYGX_WEB}/column/view/${row.SpecialAuthorId}`;
    window.open(href, "_blank");
  } else if ((key === "ArticleCollectNum" && pageState.topLableActive == 1) || key === "FansNum") {
    // 收藏的数量
    pageState.iscollectFansDlgShow = true;
    pageState.collectFansDlgText = key === "ArticleCollectNum" ? "收藏详情" : "粉丝详情";
    pageState.collectFansDlgItem = row;
  }
}
/* 表格行的数据处理 */
function handleRowContent(row, key) {
  if (key == "Type") {
    return row[key] == 1 ? "笔记" : "观点";
  } else if (key == "Source") {
    return row[key] == 1 ? "纪要" : row[key] == 2 ? "图表" : row[key] == 3 ? "纪要/图表" : row[key] == 4 ? "产业资源包" : row[key] == 5 ? "报告" : "活动";
  } else if (key == "ActivityType") {
    return row[key] == 1 ? "线上" : `线下(${row["City"]})`;
  } else if (key == "RegisterPlatform") {
    return row[key] == 1 ? "小程序" : row[key] == 2 ? "网页版" : row[key] == 3 ? "策略平台" : "";
  } else {
    return row[key];
  }
}
// 是否显示
function isShowSortable(item) {
  return item.label == "总PV/UV" || item.label == "开通时间" || item.label == "已发布文章" ? "custom" : false;
}
// 排序事件
function sortChangeHandle(params) {
  pageState.page_no = 1;
  pageState.sortType = params.order === "descending" ? "desc" : "asc";
  pageState.sortParam = params.prop;
  getyanxuanReportSpecial();
}
// 选择的change事件
function conditionChange() {
  pageState.page_no = 1;
  getyanxuanReportSpecial();
}
// 获取数据
async function getyanxuanReportSpecial() {
  let params = {
    CurrentIndex: pageState.page_no,
    PageSize: pageState.PageSize,
    Status: pageState.topLableActive == 1 ? pageState.reportStatusActive : pageState.authorStatus,
    KeyWord: pageState.topLableActive == 1 ? pageState.reportTitle : pageState.authorColumnValue,
    Type: pageState.reportStatus,
    StartDate: pageState.issueTime[0],
    EndDate: pageState.issueTime[1],
    SortType: pageState.sortType,
    SortParam: pageState.sortParam,
  };
  const res =
    pageState.topLableActive == 1 && (pageState.reportStatusActive == 1 || pageState.reportStatusActive == 2)
      ? await raiInterface.yanxuanReportSpecial(params)
      : pageState.topLableActive == 1 && pageState.reportStatusActive == 3
      ? await raiInterface.yanxuanApprovalLogList(params)
      : pageState.topLableActive == 2
      ? await raiInterface.getYanxuanSpecialAuthor(params)
      : "";
  if (res.Ret === 200) {
    pageState.tableData = res.Data.List || [];
    pageState.total = res.Data.Paging.Totals;
  }
}
// 审核
function toExamineHandler(item) {
  let href = `${import.meta.env.VITE_CYGX_WEB}/column/check/${item.Id}`;
  window.open(href, "_blank");
}
// 下载pv/uv 地址
function exportPvUv(id) {
  const url = import.meta.env.VITE_APP_API_ROOT + "/cygx/yanxuan_special/list_pv?SpecialId=" + id + "&" + localStorage.getItem("auth") || "";
  return url;
}
// 分页
function handleCurrentChange(page) {
  pageState.page_no = page;
  getyanxuanReportSpecial();
}
// 驳回理由
function reasonRejection(item) {
  ElMessageBox.alert(item.Reason, "驳回理由", {
    confirmButtonText: "确定",
    customClass: "yanxuan-special-msg-box",
    callback: (action) => {},
  });
}
// 作者的禁用启用
async function switchChangeHandler(item) {
  const res = await raiInterface.yanxuan_specialAuthorEnable({
    UserId: item.UserId,
    Status: item.Status,
  });
  if (res.Ret === 200) {
    ElMessage.success("操作成功!");
  }
}
function authorColumnValueHandler() {
  pageState.reportStatus = ""; //文章类型
  pageState.authorStatus = ""; // 作者状态
  pageState.reportTitle = ""; //文章标题
  pageState.issueTime = []; // 文章发布时间
  pageState.page_no = 1;
  getyanxuanReportSpecial();
}
function reportTitleHandle() {
  pageState.reportStatus = ""; //文章类型
  pageState.authorStatus = ""; // 作者状态
  pageState.issueTime = []; // 文章发布时间
  pageState.authorColumnValue = "";
  pageState.page_no = 1;
  getyanxuanReportSpecial();
}
// 隐藏作者按钮
async function getYanxuanShowButton() {
  const res = await raiInterface.getYanxuanShowButton();
  if (res.Ret === 200) {
    let { IsShowSpecialAuthor } = res.Data;
    if (IsShowSpecialAuthor) {
      pageState.topLableList = TopLableList;
    } else {
      pageState.topLableList = [TopLableList[0]];
    }
  }
}

onMounted(() => {
  getYanxuanShowButton();
  getyanxuanReportSpecial();
});

const {
  page_no,
  total,
  PageSize,
  topLableActive,
  reportStatusActive,
  tableData,
  reportStatus,
  authorStatus,
  reportTitle,
  issueTime,
  authorColumnValue,
  iscollectFansDlgShow,
  collectFansDlgText,
  collectFansDlgItem,
  addAuthorDlgVisible,
  topLableList,
  sortType,
  sortParam,
} = toRefs(pageState);
</script>

<template>
  <div class="container yanxuan-special_container">
    <el-card style="margin-bottom: 20px">
      <span @click="tlableClickHandler(item)" :class="['top-table-item', item.value == topLableActive && 'top-table-item-active']" v-for="item in topLableList" :key="item.value">{{ item.name }}</span>
    </el-card>
    <el-card>
      <template v-if="topLableActive == 1">
        <div class="report-stuts-content">
          <span
            @click="reportStatusClickHandler(item)"
            :class="['top-table-item', 'report-stuts-list', item.value == reportStatusActive && 'top-table-item-active']"
            v-for="item in reportStutsList"
            :key="item.value"
            >{{ item.name }}</span
          >
        </div>
        <div style="margin-bottom: 20px" v-if="reportStatusActive == 2">
          <el-select placeholder="请选择文章类型" clearable v-model="reportStatus" @change="conditionChange">
            <el-option
              v-for="item in [
                { label: '笔记', value: 1 },
                { label: '观点', value: 2 },
              ]"
              :label="item.label"
              :key="item.value"
              :value="item.value"
            />
          </el-select>
          <date-picker style="margin: 0 20px; width: 240px" v-model="issueTime" type="date" range placeholder="发布时间" value-type="format" @change="conditionChange"> </date-picker>
          <el-input @input="reportTitleHandle" v-model="reportTitle" placeholder="请输入文章标题" clearable style="display: inline-block; width: 240px"> </el-input>
        </div>
      </template>
      <div v-else style="margin-bottom: 20px; display: flex; justify-content: space-between">
        <div>
          <el-select style="margin-right: 20px" placeholder="作者状态" clearable v-model="authorStatus" @change="conditionChange">
            <el-option
              v-for="item in [
                { label: '启用', value: 1 },
                { label: '禁用', value: 2 },
              ]"
              :label="item.label"
              :key="item.value"
              :value="item.value"
            />
          </el-select>
          <el-input @input="authorColumnValueHandler" v-model="authorColumnValue" placeholder="请输入专栏名称" clearable style="display: inline-block; width: 240px"> </el-input>
        </div>
        <div>
          <el-button type="primary" @click="addAuthorDlgVisible = true">新建作者</el-button>
        </div>
      </div>
      <div>
        <el-table :data="tableData" border @sort-change="sortChangeHandle">
          <template v-if="topLableActive == 1">
            <el-table-column
              v-for="item in reportTableColums"
              :width="item.widthsty"
              :key="item.key"
              :prop="item.key"
              :label="item.label"
              align="center"
              :sortable="item.label == 'PV/UV' ? 'custom' : false"
            >
              <template #default="{ row }">
                <span v-if="item.label != 'PV/UV'" @click="handleRowClick(row, item.key)" :style="handleRowStyle(item.key)">{{ handleRowContent(row, item.key) }}</span>
                <div class="pv-uv-download" v-else>
                  <span>{{ row.Pv }} / {{ row.Uv }}</span>
                  <a :href="exportPvUv(row.Id)" download>
                    <img src="~@/assets/img/rai_m/pvuv_download.png" alt="" />
                  </a>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" v-if="reportStatusActive != 2">
              <template #default="{ row }">
                <span class="editsty" v-if="reportStatusActive == 3" @click="reasonRejection(row)">驳回理由</span>
                <span class="editsty" v-if="reportStatusActive == 1" @click="toExamineHandler(row)">审核</span>
              </template>
            </el-table-column>
          </template>
          <template v-else>
            <el-table-column v-for="item in authorTableColums" :width="item.widthsty" :key="item.key" :prop="item.key" :label="item.label" align="center" :sortable="isShowSortable(item)">
              <template #default="{ row }">
                <span v-if="item.label != '总PV/UV'" @click="handleRowClick(row, item.key)" :style="handleRowStyle(item.key)">{{ handleRowContent(row, item.key) }}</span>
                <span v-else>{{ row.Pv }} / {{ row.Uv }}</span>
              </template>
            </el-table-column>
            <el-table-column label="状态" align="center" width="200">
              <template #default="{ row }">
                <div v-if="topLableActive != 1">
                  <el-switch
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    @change="switchChangeHandler(row)"
                    v-model="row.Status"
                    :active-value="1"
                    :inactive-value="2"
                    active-text="已启用"
                    inactive-text="已禁用"
                  ></el-switch>
                </div>
              </template>
            </el-table-column>
          </template>
        </el-table>
        <!-- 分页 -->
        <el-col :span="24" class="toolbar">
          <m-page :total="total" :page_no="page_no" :pageSize="10" @handleCurrentChange="handleCurrentChange" />
        </el-col>
      </div>
    </el-card>
    <collect-fans-dlg v-model:iscollectFansDlgShow="iscollectFansDlgShow" v-model:collectFansDlgText="collectFansDlgText" v-model:collectFansDlgItem="collectFansDlgItem" />
    <special-dlg
      v-model:addAuthorDlgVisible="addAuthorDlgVisible"
      v-model:submitRejectDlgVisible="submitRejectDlgVisible"
      v-model:submitRejectId="submitRejectId"
      @updateParent="getyanxuanReportSpecial"
      @updateGetSpecialList="getSpecialList"
    />
  </div>
</template>

<style scoped lang="scss">
.yanxuan-special_container {
  .top-table-item {
    display: inline-block;
    margin-right: 30px;
    text-align: center;
    width: 120px;
    height: 40px;
    line-height: 40px;
    border-radius: 4px;
    color: #409eff;
    background-color: #ecf5ff;
    border: 1px solid #b3d8ff;
    cursor: pointer;
  }
  .report-stuts-content {
    margin-bottom: 20px;
    span:nth-child(2) {
      position: relative;
      margin: 0 60px 0 30px;
      &::before {
        content: "";
        position: absolute;
        left: -30px;
        top: 10px;
        display: inline-block;
        width: 2px;
        height: 20px;
        background: #000;
      }
      &::after {
        content: "";
        position: absolute;
        right: -30px;
        top: 10px;
        display: inline-block;
        width: 2px;
        height: 20px;
        background: #000;
      }
    }
  }
  .report-stuts-list {
    color: #000;
    background-color: rgba(255, 255, 255, 0.5);
    border: none;
  }
  .top-table-item-active {
    color: #fff;
    background-color: #409eff;
    border: none;
    opacity: 1;
  }
  .pv-uv-download {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    img {
      width: 14px;
      height: 14px;
      margin-left: 10px;
    }
  }
}
</style>
<style lang="scss">
.yanxuan-special-msg-box {
  border: none;
  .el-message-box__header {
    background: #3385ff;
    .el-message-box__title,
    .el-message-box__close {
      color: #fff !important;
    }
  }
  .el-message-box__btns {
    text-align: center;
    margin-top: 20px;
  }
}
</style>
