<template>
  <div class="container-internal-testing">
    <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('/addHaveReport')">添加</el-button>
        </div>
      </div>
      <el-table :data="tableData" style="width: 100%" border>
        <el-table-column prop="ColumnName" align="center" width="180" label="标题栏名称"></el-table-column>
        <el-table-column prop="" align="center" label="报告标题" min-width="260">
          <template slot-scope="scope">
            <span v-if="scope.row.Status == 1" class="editsty" @click="goDetail(scope.row)">{{ scope.row.Title }}</span>
            <span v-else>{{ scope.row.Title }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="ChartPermissionName" align="center" label="行业" width="100"></el-table-column>
        <el-table-column prop="MatchTypeName" align="center" label="报告类型" width="100"></el-table-column>
        <el-table-column prop="Label" align="center" label="关联产业/标的" width="200"></el-table-column>
        <el-table-column prop="PublishTime" align="center" label="发布时间" width="160"></el-table-column>
        <el-table-column prop="ModifyTime" align="center" label="更新时间" width="200"></el-table-column>
        <el-table-column align="center" label="发布状态" width="108">
          <template slot-scope="scope">
            {{ scope.row.Status == 1 ? "已发布" : scope.row.Status == 3 ? "已下线" : "未发布" }}
          </template>
        </el-table-column>
        <el-table-column width="135" label="PV / UV" align="center">
          <template slot-scope="scope">
            <div class="pv-uv-download">
              <span>{{ scope.row.Pv }}/{{ scope.row.Uv }}</span>
              <a :href="exportPvUv(scope.row.ProductInteriorId)" download>
                <img src="~@/assets/img/rai_m/pvuv_download.png" alt="" />
              </a>
            </div>
          </template>
        </el-table-column>
        <el-table-column key="VisibleRange" width="180" label="可见范围" align="center">
          <template slot-scope="{ row }" v-if="row.Status === 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>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="180">
          <template slot-scope="{ row }">
            <span v-if="row.Status == 0" class="editsty" @click="operationBtn(row.ProductInteriorId, '发布')">发布&nbsp;&nbsp;</span>
            <span v-if="row.Status == 1" class="editsty" @click="operationBtn(row.ProductInteriorId, '取消发布')">取消发布&nbsp;&nbsp;</span>
            <span v-if="row.Status == 3" class="editsty" @click="operationBtn(row.ProductInteriorId, '重新发布')">重新发布&nbsp;&nbsp;</span>
            <span class="editsty" @click="editReport(row.ProductInteriorId)">编辑&nbsp;&nbsp;</span>
            <span v-if="row.Status == 0" class="deletesty" @click="operationBtn(row.ProductInteriorId, '删除')"> 删除 </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>

<script>
import mPage from "@/components/mPage.vue";
import { raiInterface } from "@/api/api.js";
export default {
  name: "",
  components: { mPage },
  props: {},
  data() {
    return {
      page_no: sessionStorage.getItem("internalTestingBack") ? JSON.parse(sessionStorage.getItem("internalTestingBack")).page_no : 1,
      total: 0, //条数
      PageSize: 10, //每页显示几条
      status: "", //发布状态
      issueTime: "", //时间
      options: [
        { id: "未发布", name: "未发布" },
        { id: "已发布", name: "已发布" },
      ], //发布的数组
      tableData: [], //表格
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    if (sessionStorage.getItem("internalTestingBack")) {
      const initialize = JSON.parse(sessionStorage.getItem("internalTestingBack"));
      this.status = initialize.status;
      this.issueTime = initialize.issueTime;
    }
    this.getList();
  },
  methods: {
    //获取list数组
    async getList() {
      const res = await raiInterface.internalProductInteriorList({
        CurrentIndex: this.page_no,
        PageSize: this.PageSize,
        Status: this.status == "未发布" ? 0 : this.status == "已发布" ? 1 : 2,
        StartDate: this.issueTime[0],
        EndDate: this.issueTime[1],
      });
      if (res.Ret === 200) {
        this.tableData = res.Data.List;
        this.total = res.Data.Paging.Totals;
      }
    },
    //选择后的事件
    conditionChange() {
      this.page_no = 1;
      this.getList();
    },
    //发布，取消发布，删除
    operationBtn(id, value) {
      this.$confirm(`确定${value}该文章吗？`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          if (value == "删除") {
            const res = await raiInterface.internalProductInteriorDelete({ ProductInteriorId: id });
            if (res.Ret === 200) {
              this.$message.success("删除成功！");
              let page_num = Math.ceil((this.total - 1) / this.PageSize);
              if (this.page_no > page_num) {
                this.page_no = page_num;
              }
              this.getList();
            }
          } else {
            const res = await raiInterface.internalProductInteriorPublish({ ProductInteriorId: id });
            if (res.Ret === 200) {
              this.$message.success(value + "成功！");
              this.getList();
            }
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: `已取消${value}`,
          });
        });
    },
    //文章详情
    goDetail(row) {
      let url =
        process.env.NODE_ENV === "production"
          ? "https://web.hzinsights.com/internal/article"
          : process.env.NODE_ENV === "test"
          ? "https://clpttest.hzinsights.com/internal/article"
          : "https://clpttest.hzinsights.com/internal/article";
      let href = `${url}/${row.ProductInteriorId}`;
      window.open(href, "_blank");
    },
    //分页
    handleCurrentChange(page) {
      this.page_no = page;
      this.getList();
    },
    editReport(id) {
      this.$router.push({
        path: "/editHaveReport",
        query: { id },
      });
    },
    init() {
      this.status = ""; //发布状态
      this.issueTime = ""; //时间
    },
    //导出pv uv
    exportPvUv(id) {
      const url = process.env.API_ROOT + "/cygx/productInterior/PvExport?ProductInteriorId=" + id + "&" + localStorage.getItem("auth") || "";
      return url;
    },
    // 可见范围
    async reportVisibleRange(item) {
      const res = await raiInterface.internalProductInteriorVisibleRange({
        ProductInteriorId: item.ProductInteriorId,
      });
      if (res.Ret === 200) {
        this.$message.success("操作成功");
        this.getList();
      } else {
        this.getList();
      }
    },
  },
  beforeRouteEnter(to, from, next) {
    if (from.path != "/editHaveReport") {
      sessionStorage.removeItem("internalTestingBack");
    }
    next();
  },
  beforeRouteLeave(to, from, next) {
    let backData = {
      page_no: this.page_no,
      status: this.status, //状态
      issueTime: this.issueTime, //时间
    };
    sessionStorage.setItem("internalTestingBack", JSON.stringify(backData));
    next();
  },
};
</script>
<style scoped lang="scss">
.container-internal-testing {
  .top-box {
    display: flex;
    justify-content: space-between;
    .top-container {
      .el-select {
        width: 240px;
        margin-right: 20px;
      }
    }
  }
  .mx-datepicker {
    width: 230px !important;
    margin-right: 25px;
  }
  .pv-uv-download {
    display: flex;
    align-items: center;
    justify-content: center;
    img {
      width: 14px;
      height: 14px;
      margin-left: 10px;
    }
  }
}
</style>
