<template>
  <div class="container tactics-time-line">
    <!-- 头部 -->
    <el-card style="margin-bottom: 20px">
      <div style="display: flex; justify-content: space-between; align-items: center">
        <el-radio-group v-model="visibleRange" @input="tacticsTimeLineAllCancel">
          <el-radio :label="0">内部可见</el-radio>
          <el-radio :label="1">全部可见</el-radio>
        </el-radio-group>
        <el-button @click="addReport" type="primary">添加</el-button>
      </div>
    </el-card>
    <!-- 表格部分 -->
    <el-card>
      <el-select v-model="statusValue" placeholder="请选择状态" @change="listChangeHandel" clearable style="margin-bottom: 20px">
        <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
      </el-select>
      <el-table :data="dataTableList" border align="center">
        <el-table-column prop="PublishTime" label="日期" width="130" align="center"> </el-table-column>
        <el-table-column min-width="350">
          <template #header>
            <div style="text-align: center">文本</div>
          </template>
          <template slot-scope="{ row }">
            <span v-html="row.Content"></span>
          </template>
        </el-table-column>
        <el-table-column prop="Title" label="报告/图表标题" min-width="250" align="center"> </el-table-column>
        <el-table-column label="pv/uv" width="100" align="center">
          <template slot-scope="{ row }">
            <div class="pv-uv-download">
              <span>{{ row.Pv }}/{{ row.Uv }}</span>
              <a :href="exportPvUv(row)" download>
                <img src="~@/assets/img/rai_m/pvuv_download.png" alt="" />
              </a>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="状态" width="180" align="center">
          <template slot-scope="{ row }">
            <el-radio-group v-model="row.Status" @input="tacticsTimeLineCancel(row)">
              <el-radio :label="0">隐藏</el-radio>
              <el-radio :label="1">显示</el-radio>
            </el-radio-group>
          </template>
        </el-table-column>

        <el-table-column prop="ModifyTime" label="更新时间" width="180" align="center"> </el-table-column>
        <el-table-column label="操作" width="100" align="center">
          <template slot-scope="{ row }">
            <span class="editsty" @click="editReport(row)">编辑&nbsp;&nbsp;</span>
            <span v-if="row.Status === 0" class="deletesty" @click="deleteBtn(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>
    <!-- 弹框部分 -->
    <el-dialog :visible.sync="addOfEditDialog" :title="addOfEditText" v-dialogDrag :close-on-click-modal="false" :modal-append-to-body="false" center width="661px" @close="handleClose">
      <el-form :model="dataForm" :rules="dataRules" ref="ruleForm">
        <el-form-item prop="PublishTime">
          <el-date-picker type="date" value-format="yyyy-MM-dd" placeholder="请选择日期" v-model="dataForm.PublishTime" style="width: 100%"></el-date-picker>
        </el-form-item>
        <el-form-item prop="Content">
          <div class="fr-wrapper">
            <froala id="froala-editor" ref="froalaEditor" :tag="'textarea'" :config="froalaConfig" v-model="dataForm.Content"></froala>
          </div>
        </el-form-item>
        <el-form-item>
          <el-input type="textarea" placeholder="请输入报告或图表链接（网页版详情链接）" v-model="dataForm.Link"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="confirmPerson">确定</el-button>
        <el-button @click="handleClose">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { raiInterface } from "@/api/api.js";
import mPage from "@/components/mPage.vue";

export default {
  name: "",
  components: {
    mPage,
  },
  data() {
    var that = this;
    return {
      page_no: 1,
      total: 0, //条数
      PageSize: 10, //每页显示几条
      visibleRange: 3, //可见范围
      dataTableList: [],
      statusValue: "",
      statusOptions: [
        {
          label: "显示",
          value: 1,
        },
        {
          label: "隐藏",
          value: 0,
        },
      ],
      addOfEditDialog: false, //添加或者编辑
      addOfEditText: "",
      dataForm: {
        Link: "", // 链接
        PublishTime: "", //日期
        Content: "", //文本内容
        TimeLineId: 0,
      },
      dataRules: {
        PublishTime: [{ required: true, message: "请选择日期", trigger: "change" }],
        Content: [{ required: true, message: "请输入文本内容", trigger: "blur" }],
      },
      editor: null,
      froalaConfig: {
        toolbarButtons: ["bold", "italic", "underline", "strikeThrough", "insertHR", "fontSize", "align", "undo", "redo"],
        height: 200,
        fontSizeDefaultSelection: "16",
        quickInsertEnabled: false,
        theme: "dark", //主题
        placeholderText: "请输入文本内容",
        language: "zh_cn",
        events: {
          initialized: function () {
            that.editor = this;
            that.editor.toolbar.hide();
          },
        },
      },
      routerType: "",
    };
  },
  mounted() {
    this.getDataList();
  },
  watch: {
    "$route.path": {
      handler(newval) {
        this.routerType = newval == "/fixedIncomeTimeLine" ? "固收" : "策略";
      },
      deep: true,
      immediate: true,
    },
  },
  computed: {},
  methods: {
    // 获取数据
    async getDataList() {
      let params = {
        PageSize: this.PageSize,
        CurrentIndex: this.page_no,
        Status: this.statusValue === 0 || this.statusValue === 1 ? this.statusValue : 2,
      };
      const res = this.routerType == "固收" ? await raiInterface.getGushouTimeLineList(params) : await raiInterface.getTacticsTimeLineList(params);
      if (res.Ret === 200) {
        this.total = res.Data.Paging.Totals || 0;
        this.dataTableList = res.Data.List;
        this.visibleRange = res.Data.Status;
      }
    },
    // 添加
    addReport() {
      this.addOfEditDialog = true;
      this.addOfEditText = "添加";
    },
    // 编辑
    editReport(item) {
      this.dataForm = {
        Link: item.Link, // 链接
        PublishTime: item.PublishTime.replace(/\./g, "-"), //日期
        Content: item.Content, //文本内容
        TimeLineId: item.TimeLineId,
      };
      this.addOfEditText = "编辑";
      this.addOfEditDialog = true;
    },
    // 关闭弹框
    handleClose() {
      this.$refs.ruleForm.resetFields();
      this.addOfEditDialog = false;
      this.dataForm = {
        Link: "", // 链接
        PublishTime: "", //日期
        Content: "", //文本内容
        TimeLineId: 0,
      };
    },
    // 弹框的保存事件
    confirmPerson() {
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          this.dataForm.Content = this.dataForm.Content.replace(/<p data-f-id=\"pbf\".*?<\/p>/g, "");
          const res =
            this.routerType == "固收"
              ? await raiInterface.gushouTimeLinePreserveAndPublish({
                  ...this.dataForm,
                })
              : await raiInterface.tacticsTimeLinePreserveAndPublish({
                  ...this.dataForm,
                });
          if (res.Ret === 200) {
            this.$message.success("操作成功");
            this.handleClose();
            this.getDataList();
          }
        }
      });
    },
    // 导出pv uv
    exportPvUv(item) {
      let urlType = this.routerType == "固收" ? "gushou" : "tactics";
      const url = process.env.API_ROOT + `/cygx/${urlType}TimeLine/PvExport?TimeLineId=` + item.TimeLineId + "&" + localStorage.getItem("auth") || "";
      return url;
    },
    // 删除
    deleteBtn(item) {
      this.$confirm(`确定删除这条内容吗？`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let params = {
            TimeLineId: item.TimeLineId,
          };
          const res = this.routerType == "固收" ? await raiInterface.gushouTimeLineDelete(params) : await raiInterface.tacticsTimeLineDelete(params);
          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.getDataList();
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: `已取消删除`,
          });
        });
    },
    // 分页
    handleCurrentChange(page) {
      this.page_no = page;
      this.getDataList();
    },
    // 选择的change 事件
    listChangeHandel() {
      this.page_no = 1;
      this.getDataList();
    },
    // 一键发布/取消发布报告接口
    async tacticsTimeLineAllCancel() {
      const res = this.routerType == "固收" ? await raiInterface.gushouTimeLineAllCancel() : await raiInterface.tacticsTimeLineAllCancel();
      if (res.Ret === 200) {
        this.$message.success("操作成功");
      }
      this.getDataList();
    },
    // 发布/取消发布报告 显示隐藏
    async tacticsTimeLineCancel(item) {
      const res =
        this.routerType == "固收"
          ? await raiInterface.gushouTimeLineCancel({
              TimeLineId: item.TimeLineId,
            })
          : await raiInterface.tacticsTimeLineCancel({
              TimeLineId: item.TimeLineId,
            });
      if (res.Ret === 200) {
        this.$message.success("操作成功");
      }
      this.getDataList();
    },
  },
};
</script>
<style scoped lang="scss">
.tactics-time-line {
  .pv-uv-download {
    display: flex;
    align-items: center;
    justify-content: center;

    img {
      width: 14px;
      height: 14px;
      margin-left: 10px;
    }
  }
}
.fr-wrapper {
  border-top: 1px solid #cccccc !important;
  border-bottom: 1px solid #cccccc !important;
}
</style>
