<template>
  <div class="container yanxuan-special_container">
    <el-card style="margin-bottom: 20px" v-if="topLableList.length">
      <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 v-if="topLableList.length">
      <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; margin-right: 20px">
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
          </el-input>
          <el-autocomplete v-model="authorName" :fetch-suggestions="querySearchAsync" placeholder="请输入作者昵称" @select="conditionChange">
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
          </el-autocomplete>
        </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; margin-right: 20px">
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
          </el-input>
          <el-autocomplete v-model="authorName" :fetch-suggestions="querySearchAsync" placeholder="请输入作者昵称" @select="conditionChange">
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
          </el-autocomplete>
        </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 slot-scope="{ 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 v-if="Role == 'rai_admin' || Role == 'admin'">
                    <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 slot-scope="{ 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 slot-scope="{ row }">
                <span v-if="item.label != '总PV/UV' && item.key != 'Remark'" @click="handleRowClick(row, item.key)" :style="handleRowStyle(item.key)">{{ handleRowContent(row, item.key) }}</span>
                <div v-else-if="item.key == 'Remark'">
                  {{ handleRowContent(row, item.key) }}
                  <span @click="lookEditRemark(row)" class="editsty" style="font-size: 22px"> ... </span>
                </div>
                <span v-else>{{ row.Pv }} / {{ row.Uv }}</span>
              </template>
            </el-table-column>
            <el-table-column label="状态" align="center" width="200">
              <template slot-scope="{ row }">
                <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>
              </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 :iscollectFansDlgShow.sync="iscollectFansDlgShow" :collectFansDlgText.sync="collectFansDlgText" :collectFansDlgItem.sync="collectFansDlgItem" />
    <special-dlg :addAuthorDlgVisible.sync="addAuthorDlgVisible" :lookEditRemarkDlgShow.sync="lookEditRemarkDlgShow" :lookEditRemarkInfo.sync="lookEditRemarkInfo" />
  </div>
</template>

<script>
import { TopLableList, ReportStutsList, TableColums, AuthorTableColums } from "./components/yanXuanLable";
import { raiInterface } from "@/api/api.js";
import mPage from "@/components/mPage.vue";
import CollectFansDlg from "./components/collectFansDlg.vue";
import SpecialDlg from "./components/specialDlg.vue";

export default {
  name: "",
  components: { mPage, CollectFansDlg, SpecialDlg },
  props: {},
  data() {
    return {
      page_no: 1,
      total: 0, //条数
      PageSize: 10, //每页显示几条
      topLableActive: 1,
      reportStatusActive: 1,
      tableData: [],
      reportStatus: "", //文章类型
      authorStatus: "", // 作者状态
      reportTitle: "", //文章标题
      issueTime: [], // 文章发布时间
      authorColumnValue: "", // 专栏名称
      iscollectFansDlgShow: false,
      collectFansDlgText: "",
      collectFansDlgItem: {},
      addAuthorDlgVisible: false,
      lookEditRemarkDlgShow: false, // 查看编辑备注
      lookEditRemarkInfo: {},
      topLableList: [],
      sortType: "",
      sortParam: "",
      authorName: "", // 作者名称
    };
  },
  computed: {
    Role() {
      let role = localStorage.getItem("Role") || "";
      return role;
    },
    // 文章的状态
    reportStutsList() {
      return ReportStutsList;
    },
    reportTableColums() {
      return TableColums(this.reportStatusActive);
    },
    authorTableColums() {
      return AuthorTableColums;
    },
  },
  mounted() {
    this.getYanxuanShowButton();
    this.getyanxuanReportSpecial();
  },
  methods: {
    // 点击了头部的tlble
    tlableClickHandler(item) {
      this.topLableActive = item.value;
      this.authorName = "";
      this.page_no = 1;
      this.getyanxuanReportSpecial();
    },
    // 文章的状态点击
    reportStatusClickHandler(item) {
      this.reportStatusActive = item.value;
      this.page_no = 1;
      this.getyanxuanReportSpecial();
    },
    /* 表格行的样式 */
    handleRowStyle(key) {
      if (key == "Title" && this.reportStatusActive == 2) {
        return "color: #409eff; cursor: pointer";
      } else if ((key == "SpecialName" && (this.reportStatusActive == 2 || this.reportStatusActive == 3)) || (key == "SpecialName" && this.topLableActive == 2)) {
        return "color: #409eff; cursor: pointer";
      } else if (key == "ArticleCollectNum" && this.topLableActive == 1) {
        return "color: #409eff; cursor: pointer";
      } else {
        const style = {
          FansNum: "color: #409eff; cursor: pointer",
        };
        return style[key] ? style[key] : "";
      }
    },
    /* 表格行的点击事件 */
    handleRowClick(row, key) {
      if (key === "Title" && this.reportStatusActive == 2) {
        let href = `${process.env.CYGX_WEB}/column/detail/${row.Id}`;
        window.open(href, "_blank");
      } else if (key === "SpecialName" && (this.reportStatusActive == 2 || this.reportStatusActive == 3 || this.topLableActive == 2)) {
        let href = `${process.env.CYGX_WEB}/column/view/${row.SpecialAuthorId}`;
        window.open(href, "_blank");
      } else if ((key === "ArticleCollectNum" && this.topLableActive == 1) || key === "FansNum") {
        // 收藏的数量
        this.iscollectFansDlgShow = true;
        this.collectFansDlgText = key === "ArticleCollectNum" ? "收藏详情" : "粉丝详情";
        this.collectFansDlgItem = row;
      }
    },
    /* 表格行的数据处理 */
    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 if (key == "Remark") {
        return row[key] ? row[key].substring(0, 15) : "";
      } else {
        return row[key];
      }
    },
    // 是否显示
    isShowSortable(item) {
      return item.label == "总PV/UV" || item.label == "开通时间" || item.label == "已发布文章" ? "custom" : false;
    },
    // 排序事件
    sortChangeHandle(params) {
      this.page_no = 1;
      this.sortType = params.order === "descending" ? "desc" : "asc";
      this.sortParam = params.prop;
      this.getyanxuanReportSpecial();
    },
    // 选择的change事件
    conditionChange() {
      this.page_no = 1;
      this.getyanxuanReportSpecial();
    },
    // 获取数据
    async getyanxuanReportSpecial() {
      let params = {
        CurrentIndex: this.page_no,
        PageSize: this.PageSize,
        Status: this.topLableActive == 1 ? this.reportStatusActive : this.authorStatus,
        KeyWord: this.topLableActive == 1 ? this.reportTitle : this.authorColumnValue,
        Type: this.reportStatus,
        StartDate: this.issueTime[0],
        EndDate: this.issueTime[1],
        SortType: this.sortType,
        SortParam: this.sortParam,
        NickName: this.authorName,
      };
      const res =
        this.topLableActive == 1 && (this.reportStatusActive == 1 || this.reportStatusActive == 2)
          ? await raiInterface.yanxuanReportSpecial(params)
          : this.topLableActive == 1 && this.reportStatusActive == 3
          ? await raiInterface.yanxuanApprovalLogList(params)
          : this.topLableActive == 2
          ? await raiInterface.getYanxuanSpecialAuthor(params)
          : "";
      if (res.Ret === 200) {
        this.tableData = res.Data.List || [];
        this.total = res.Data.Paging.Totals;
      }
    },
    // 审核
    toExamineHandler(item) {
      let href = `${process.env.CYGX_WEB}/column/check/${item.Id}`;
      window.open(href, "_blank");
    },
    // 下载pv/uv 地址
    exportPvUv(id) {
      const url = process.env.API_ROOT + "/cygx/yanxuan_special/list_pv?SpecialId=" + id + "&" + localStorage.getItem("auth") || "";
      return url;
    },
    // 分页
    handleCurrentChange(page) {
      this.page_no = page;
      this.getyanxuanReportSpecial();
    },
    // 驳回理由
    reasonRejection(item) {
      this.$alert(item.Reason, "驳回理由", {
        confirmButtonText: "确定",
        customClass: "yanxuan-special-msg-box",
        callback: (action) => {},
      });
    },
    // 作者的禁用启用
    async switchChangeHandler(item) {
      const res = await raiInterface.yanxuan_specialAuthorEnable({
        UserId: item.UserId,
        Status: item.Status,
      });
      if (res.Ret === 200) {
        this.$message.success("操作成功!");
      }
    },
    authorColumnValueHandler() {
      this.reportStatus = ""; //文章类型
      this.authorStatus = ""; // 作者状态
      this.reportTitle = ""; //文章标题
      this.issueTime = []; // 文章发布时间
      this.page_no = 1;
      this.getyanxuanReportSpecial();
    },
    reportTitleHandle() {
      this.reportStatus = ""; //文章类型
      this.authorStatus = ""; // 作者状态
      this.issueTime = []; // 文章发布时间
      this.authorColumnValue = "";
      this.page_no = 1;
      this.getyanxuanReportSpecial();
    },
    // 隐藏作者按钮
    async getYanxuanShowButton() {
      const res = await raiInterface.getYanxuanShowButton();
      if (res.Ret === 200) {
        let { IsShowSpecialAuthor, IsShowYanXuanSpecial } = res.Data;
        if (IsShowSpecialAuthor && !IsShowYanXuanSpecial) {
          this.topLableList = [TopLableList[1]];
          this.topLableActive = 2;
        } else if (!IsShowSpecialAuthor && IsShowYanXuanSpecial) {
          this.topLableList = [TopLableList[0]];
        } else if (IsShowSpecialAuthor && IsShowYanXuanSpecial) {
          this.topLableList = TopLableList;
        }
      }
    },

    //查看或修改
    lookEditRemark(row) {
      this.lookEditRemarkInfo = row;
      this.lookEditRemarkDlgShow = true;
    },

    async querySearchAsync(queryString, cb) {
      cb([]);
      if (!queryString) {
        this.conditionChange();
      } else {
        const res = await raiInterface.yanxuan_specialAuthorSearch({
          KeyWord: queryString,
        });
        if (res.Ret === 200) {
          let arr = res.Data.List.map((item) => {
            return {
              ...item,
              value: item.KeyWord,
            };
          });
          cb(arr);
        }
      }
    },
  },
};
</script>
<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>
