<script>
import { defineComponent } from "vue";

export default defineComponent({
  beforeRouteEnter(to, from, next) {
    if (from.path != "/editSummarizing") {
      sessionStorage.removeItem("theLastWeek");
    }
    next();
  },
});
</script>

<script setup>
import { onMounted, reactive, ref, toRefs, computed } from "vue";
import { ElMessageBox, ElMessage } from "element-plus";

import mPage from "@/components/mPage.vue";
import { raiInterface } from "@/api/api.js";
import { onBeforeRouteLeave, useRouter, useRoute } from "vue-router";

const $route = useRoute();
const $router = useRouter();

const pageState = reactive({
  page_no: sessionStorage.getItem("theLastWeek") ? JSON.parse(sessionStorage.getItem("theLastWeek")).page_no : 1,
  total: 0, //条数
  PageSize: 10, //每页显示几条
  //industry: "", //行业
  status: "", //发布状态
  issueTime: "", //时间
  //chartPermissionList: [], //行业的数组
  options: [
    { id: 0, name: "未发布" },
    { id: 1, name: "已发布" },
  ], //发布的数组
  tableData: [], //表格
});

const sta = computed(() => {
  return pageState.status === 0 ? pageState.status : pageState.status === 1 ? pageState.status : 2;
});

//获取list数组
async function getList() {
  const res = await raiInterface.minutesSummaryList({
    CurrentIndex: pageState.page_no,
    PageSize: pageState.PageSize,
    PublishStatus: sta.value - 0,
    CategoryName: pageState.industry,
    StartDate: pageState.issueTime[0],
    EndDate: pageState.issueTime[1],
  });
  if (res.Ret === 200) {
    pageState.tableData = res.Data.List;
    pageState.total = res.Data.Paging.Totals;
  }
}
//导出pv uv
function exportPvUv(id) {
  const url = import.meta.env.VITE_APP_API_ROOT + "/cygx/reportSelection/articleHistoryExport?ArticleId=" + id + "&Source=4&" + localStorage.getItem("auth") || "";
  return url;
}
//选择后的事件
function conditionChange() {
  pageState.page_no = 1;
  getList();
}
//发布，取消发布，删除
function operationBtn(id, value) {
  ElMessageBox.confirm(`确定${value}该文章吗？`, "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      if (value == "删除") {
        const res = await raiInterface.minutesSummaryDelete({ ArticleId: id });
        if (res.Ret === 200) {
          ElMessage.success("删除成功！");
          let page_num = Math.ceil((pageState.total - 1) / pageState.PageSize);
          if (pageState.page_no > page_num) {
            pageState.page_no = page_num;
          }
          getList();
        }
      } else {
        const res = await raiInterface.minutesSummaryPublishAndCancel({ ArticleId: id });
        if (res.Ret === 200) {
          ElMessage.success(value + "成功！");
          getList();
        }
      }
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: `已取消${value}`,
      });
    });
}
//文章详情
function goDetail(row) {
  let url =
    process.env.NODE_ENV === "production"
      ? "https://web.hzinsights.com/summary/3"
      : process.env.NODE_ENV === "test"
      ? "https://clpttest.hzinsights.com/summary/3"
      : "https://clpttest.hzinsights.com/summary/3";
  let href = `${url}/${row.ArticleId}`;
  window.open(href, "_blank");
}
//去往编辑页面
function editReport(id) {
  $router.push({
    path: "/editSummarizing",
    query: { id },
  });
}
//分页
function handleCurrentChange(page) {
  pageState.page_no = page;
  getList();
}
function emailGroup(row) {
  ElMessageBox.confirm("确定要对正式/试用客户群发该报告吗？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      const res = await raiInterface.minutesSummarySendMail({
        ArticleId: row.ArticleId,
      });
      if (res.Ret === 200) {
        ElMessage.success("发送成功");
      }
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: `已取消`,
      });
    });
}
// 可见范围
async function reportVisibleRange(item) {
  const res = await raiInterface.minutesSummaryVisibleRange({
    ArticleId: item.ArticleId,
  });
  if (res.Ret === 200) {
    ElMessage.success("操作成功");
    getList();
  } else {
    getList();
  }
}
onMounted(() => {
  if (sessionStorage.getItem("theLastWeek")) {
    const initialize = JSON.parse(sessionStorage.getItem("theLastWeek"));
    pageState.status = initialize.status;
    pageState.issueTime = initialize.issueTime;
  }
  getList();
});
onBeforeRouteLeave((to, from, next) => {
  let backData = {
    page_no: pageState.page_no,
    status: pageState.status, //状态
    issueTime: pageState.issueTime, //时间
  };
  sessionStorage.setItem("theLastWeek", JSON.stringify(backData));
  next();
});

const { page_no, total, PageSize, status, issueTime, options, tableData } = toRefs(pageState);
</script>

<template>
  <div class="container-the-last-week">
    <!-- 上周研究汇总 -->
    <el-card>
      <div class="top-box">
        <div class="top-container">
          <el-select placeholder="发布状态" clearable v-model="status" @change="conditionChange" style="margin-bottom: 20px">
            <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
          <date-picker v-model="issueTime" type="date" range placeholder="发布时间" value-type="format" @change="conditionChange"> </date-picker>
        </div>
        <div>
          <el-button type="primary" @click="$router.push('/addSummarizing')">添加</el-button>
        </div>
      </div>
      <el-table :data="tableData" style="width: 100%" border>
        <el-table-column prop="Title" align="center" label="标题" min-width="260">
          <template #default="scope">
            <span class="editsty" @click="goDetail(scope.row)">{{ scope.row.Title }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="Periods" align="center" label="期数" width="118"></el-table-column>
        <el-table-column prop="PublishDate" align="center" label="发布时间" min-width="118"></el-table-column>
        <el-table-column prop="LastUpdatedTime" align="center" label="更新时间" min-width="165"></el-table-column>
        <el-table-column prop="" align="center" label="发布状态" width="118">
          <template #default="scope">
            <span>{{ scope.row.PublishStatus == 1 ? "已发布" : "未发布" }}</span>
          </template>
        </el-table-column>
        <el-table-column width="135" label="PV / UV" align="center">
          <template #header>
            <div style="display: flex; align-items: center; justify-content: center">
              <p style="margin-right: 5px">PV / UV</p>
              <el-tooltip placement="top-start">
                <template #content>
                  <p>pv：报告被打开的次数，每次打开都计算一次（只统计有权限用户）</p>
                  <p>uv：访问报告的人数，每篇报告同一个人访问只计算一次（只统计有权限用户）</p>
                </template>
                <el-icon><InfoFilled /></el-icon>
              </el-tooltip>
            </div>
          </template>
          <template #default="scope">
            <div class="pv-uv-download">
              <span>{{ scope.row.Pv }}/{{ scope.row.Uv }}</span>
              <a :href="exportPvUv(scope.row.ArticleId)" download>
                <img src="~@/assets/img/rai_m/pvuv_download.png" alt="" />
              </a>
            </div>
          </template>
        </el-table-column>
        <el-table-column key="VisibleRange" width="156" label="可见范围" align="center">
          <template #default="{ row }">
            <div v-if="row.PublishStatus === 1">
              <el-radio-group v-model="row.VisibleRange" @input="reportVisibleRange(row)">
                <el-radio :label="1">全部</el-radio>
                <el-radio :label="0">内部</el-radio>
              </el-radio-group>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" min-width="168">
          <template #default="scope">
            <span v-if="scope.row.PublishStatus !== 1" class="editsty" @click="operationBtn(scope.row.ArticleId, '发布')">发布&nbsp;&nbsp;</span>
            <span v-else class="editsty" @click="operationBtn(scope.row.ArticleId, '取消发布')">取消发布&nbsp;&nbsp;</span>
            <span class="editsty" @click="editReport(scope.row.ArticleId)">编辑&nbsp;&nbsp;</span>
            <span v-if="scope.row.PublishStatus !== 1 && !scope.row.Periods" class="deletesty" @click="operationBtn(scope.row.ArticleId, '删除')">删除</span>
            <span v-if="scope.row.PublishStatus == 1" class="editsty" @click="emailGroup(scope.row)">群发邮件</span>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-col :span="24" class="toolbar">
        <m-page :total="total" :page_no="page_no" :pageSize="10" @handleCurrentChange="handleCurrentChange" />
      </el-col>
    </el-card>
  </div>
</template>

<style scoped lang="scss">
.container-the-last-week {
  .top-box {
    display: flex;
    justify-content: space-between;
    height: 40px;
    margin-bottom: 30px;
    .top-container {
      .el-select {
        margin-right: 20px;
      }
    }
    .el-button {
      padding: 0 30px;
      height: 40px;
    }
  }
  .mx-datepicker {
    width: 220px !important;
    margin-right: 25px;
  }
  .pv-uv-download {
    display: flex;
    align-items: center;
    justify-content: center;
    img {
      width: 14px;
      height: 14px;
      margin-left: 10px;
    }
  }
}
</style>
