<template>
  <!-- 晨会精华管理 -->
  <div class="moring-meeting-wrap">
    <div class="add-btn">
      <el-button type="primary" @click="handleTableClick({}, 'add')">添加报告</el-button>
    </div>
    <div class="meeting-wrap">
      <div class="select-box">
        <div class="select">
          <el-select placeholder="请选择发布状态" v-model="searchPublish" clearable @change="changeSelect">
            <el-option
              v-for="item in [
                { label: '已发布', value: 1 },
                { label: '未发布', value: 0 },
              ]"
              :label="item.label"
              :key="item.value"
              :value="item.value"
            />
          </el-select>
          <!-- <date-picker  type="date" range placeholder="晨会时间" v-model="searchDate" value-type="format"/> -->
          <el-date-picker v-model="searchDate" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" @change="changeSelect" class="date-pick" placeholder="晨会时间"> </el-date-picker>
        </div>

        <el-input placeholder="请输入产业标签" clearable v-model="searchLabel" @input="changeSelect">
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
      </div>

      <div class="table-wrap">
        <el-table :data="tableData" border>
          <el-table-column v-for="item in tableColumn" :key="item.key" :prop="item.key" :label="item.label" align="center" :min-width="item.minWidth">
            <template slot-scope="{ row }">
              <span v-if="item.key === 'meetingTime' && row[item.key]">{{ $moment(row[item.key]).format("YYYY.MM.DD") }}</span>
              <span v-else-if="item.key === 'status'">{{ row[item.key] === 1 ? "已发布" : "未发布" }}</span>
              <span v-else>{{ row[item.key] || "-" }}</span>
            </template>
          </el-table-column>
          <el-table-column width="150" label="PV / UV" align="center" key="pvUv" :render-header="renderHeader">
            <template slot="header" slot-scope="scope">
              <div class="todolabel" style="width: 100%; display: flex; justify-content: center; align-items: center">
                <span>PV / UV</span>
                <el-tooltip style="margin-left: 10px" effect="dark" placement="top-start">
                  <template slot="content">
                    <p>pv：报告被打开的次数，每次打开都计算一次（只统计有权限用户）</p>
                    <p>uv：访问报告的人数，每篇报告同一个人访问只计算一次（只统计有权限用户）</p>
                  </template>
                  <i class="el-icon-info" />
                </el-tooltip>
              </div>
            </template>
            <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="操作" align="center" min-width="160">
            <template slot-scope="{ row }">
              <div style="color: #4099ef; font-size: 24px">
                <span class="editsty" @click="handleTableClick(row, 'publish')">{{ row.status === 1 ? "取消发布" : "发布" }}</span>
                <span class="editsty" @click="handleTableClick(row, 'edit')">编辑</span>
                <span class="deletesty" style="cursor: pointer; color: #d1433a" v-if="row.status === 0" @click="handleTableClick(row, 'delete')">删除</span>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          layout="total,prev,pager,next,jumper"
          background
          :current-page="page_no"
          @current-change="handleCurrentChange"
          :page-size="pageSize"
          :total="total"
          style="text-align: end; margin-top: 20px"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { raiInterface } from "@/api/api.js";
export default {
  data() {
    return {
      tableColumn: [
        {
          key: "meetingTime",
          label: "晨会日期",
        },
        {
          key: "partNums",
          label: "段落数",
        },
        {
          key: "industryName",
          label: "相关产业",
          minWidth: 160,
        },
        {
          key: "publishTime",
          label: "发布时间",
        },
        {
          key: "modifyTime",
          label: "更新时间",
        },
        {
          key: "status",
          label: "发布状态",
        },
      ],
      tableData: [],
      //分页相关
      page_no: 1,
      pageSize: 10,
      total: 11,
      //搜索相关
      searchPublish: "",
      searchDate: "",
      searchLabel: "",
    };
  },
  watch: {},
  methods: {
    handleTableClick(data, type) {
      if (type === "delete") {
        this.$confirm("确定要删除这篇报告吗？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          this.deleteMeeting(data.Id);
        });
      }
      if (type === "add") {
        this.$router.push("/addMorningMeeting");
      }
      if (type === "edit") {
        this.$router.push({
          path: "/editMorningMeeting",
          query: { id: data.Id },
        });
      }
      if (type === "publish") {
        this.publishMeeting(data);
      }
    },
    handleCurrentChange(current) {
      this.page_no = current;
      this.getListData();
    },
    async getListData() {
      const res = await raiInterface.getMorningMeetingList({
        PageSize: this.pageSize,
        CurrentIndex: this.page_no,
        KeyWord: this.searchLabel,
        MeetingTime: this.searchDate,
        Status: this.searchPublish,
      });
      if (res.Ret !== 200) return;
      const { CurrentIndex, Totals } = res.Data.Paging;
      this.tableData = res.Data.List || [];
      this.page_no = CurrentIndex;
      this.total = Totals;
    },
    //删除晨会
    async deleteMeeting(id) {
      const res = await raiInterface.deleteListMeeting({ ReviewId: id });
      if (res.Ret !== 200) return;
      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.getListData();
    },
    //发布/取消发布晨会
    async publishMeeting(data) {
      let res = null;
      if (data.status === 1) {
        res = await raiInterface.cancelPublish({ ReviewId: data.Id });
      } else {
        res = await raiInterface.publishListMeeting({ ReviewIds: data.Id + "" });
      }
      if (res.Ret !== 200) return;
      this.$message.success(`${data.status === 0 ? "" : "取消"}发布成功`);
      this.searchPublish = "";
      this.searchDate = "";
      this.searchLabel = "";
      this.getListData();
    },
    //筛选条件更改
    changeSelect() {
      this.page_no = 1;
      this.getListData();
    },
    exportPvUv(row) {
      return process.env.API_ROOT + "/cygx/morningMeeting/list_pv?MeetingId=" + row.Id + "&" + localStorage.getItem("auth") + `&IsExport=${true}`;
    },
  },
  computed: {},
  mounted() {
    this.getListData();
  },
};
</script>

<style scoped lang="scss">
.moring-meeting-wrap {
  .add-btn,
  .meeting-wrap {
    background-color: #fff;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.05);
    border-radius: 4px;
    padding: 20px 30px;
    box-sizing: border-box;
  }
  .add-btn {
    text-align: right;
    height: 80px;
    margin-bottom: 20px;
  }
  .meeting-wrap {
    min-height: calc(100vh - 220px);
    .select-box {
      display: flex;
      margin-bottom: 20px;
      justify-content: space-between;
      .el-select,
      .date-pick {
        width: 210px !important;
        margin-right: 20px;
      }
      .el-input {
        width: 420px !important;
        margin-right: 0;
      }
      .date-pick {
        &.el-input {
          width: 210px !important;
          margin-right: 20px;
        }
      }
    }
  }
  .pv-uv-download {
    display: flex;
    align-items: center;
    justify-content: center;
    img {
      width: 14px;
      height: 14px;
      margin-left: 10px;
    }
  }
}
</style>
