<template>
  <div class="container container-road-show">
    <div class="top-wrap">
      <div style="display: flex">
        <span @click="topTabsHandler(item)" :class="['item', tabActive === item.value && 'active']" v-for="item in topTabs" :key="item.value">{{ item.name }}</span>
      </div>
      <el-input v-model="fileName" @input="fileNameHandle" placeholder="请输入文件名称" clearable style="display: inline-block; width: 350px">
        <i slot="prefix" class="el-input__icon el-icon-search"></i>
      </el-input>
    </div>

    <!-- // 筛选 表格 -->
    <el-card style="margin-top: 20px">
      <div class="select-content">
        <div>
          <el-select style="margin-bottom: 20px" placeholder="行业" v-model="chartPermissionId" clearable @change="selectChangeHandle">
            <el-option v-for="item in chartPermissionList" :label="item.PermissionName" :key="item.ChartPermissionId" :value="item.ChartPermissionId"></el-option>
          </el-select>
          <el-select v-if="tabActive == 1 || tabActive == 2" placeholder="活动类型" clearable v-model="cactivityTypeVal" @change="selectChangeHandle">
            <el-option v-for="item in cactivityTypeList" :label="item.ActivityTypeName" :key="item.ActivityTypeId" :value="item.ActivityTypeId"></el-option>
          </el-select>
          <date-picker
            style="margin-bottom: 20px"
            v-model="issueTime"
            type="date"
            range
            :placeholder="tabActive == 4 || tabActive == 3 ? '发布时间' : '活动时间'"
            value-type="format"
            @change="selectChangeHandle"
          >
          </date-picker>
          <el-select v-if="tabActive == 4 || tabActive == 3" placeholder="发布状态" clearable v-model="publishStatus" @change="selectChangeHandle" style="margin-bottom: 20px">
            <el-option v-for="item in publishSelect" :label="item.name" :key="item.value" :value="item.value"></el-option>
          </el-select>
        </div>
        <div>
          <el-button type="primary" v-if="tabActive === 4" @click="addEditdialogVisib = true">添加视频</el-button>
          <el-button type="primary" v-if="tabActive === 3" @click="addEditdialogReleaseAudio = true">发布问答</el-button>
        </div>
      </div>
      <el-table :data="dataList" style="width: 100%" border @sort-change="sortChangeHandle">
        <el-table-column
          v-for="item in tableColums"
          :key="item.label"
          :label="item.label"
          :width="item.widthsty"
          :min-width="item.minwidthsty"
          align="center"
          :sortable="item.key === 'VideoCounts' || item.key === 'VoiceCounts' ? 'custom' : false"
        >
          <template slot-scope="{ row }">
            <span @click="handleRowClick(row, item.key)" :style="handleRowStyle(item.key)">{{ handleRowContent(row, item.key) }}</span>
          </template></el-table-column
        >
        <el-table-column align="center" prop="LastUpdatedTime" width="170" label="操作">
          <template slot-scope="{ row }">
            <div v-if="tabActive === 4 || tabActive === 3">
              <span class="editsty" @click="handlePublish(row)">{{ row.PublishStatus == 1 ? "取消发布" : "发布" }}</span>
              &nbsp;&nbsp;
              <span class="editsty" @click="handleEditVideo(row, '产业')">编辑</span>
            </div>
            <template v-else>
              <span class="editsty" @click="titleBtnClick(row.ActivityId)">活动详情</span>
              <span class="editsty" @click="handleEditVideo(row, '活动')">&nbsp;&nbsp;&nbsp;&nbsp;编辑活动</span>
            </template>
          </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>
    <playDetails :playDetailsVisible.sync="playDetailsVisible" :playDetailsList.sync="playDetailsList" :tabActive="tabActive" />
    <addVideoDlg :addEditdialogVisib.sync="addEditdialogVisib" :chartPermissionList="chartPermissionList" :playDetailsList.sync="editDetails" />
    <atc-particulars :dialogVisible.sync="dialogVisible" :detailData.sync="detailData" />
    <generation-ask :generaitondialogVisib.sync="generaitondialogVisib" :generaitonId="generaitonId" :generaitonType="generaitonType" :tabActiveRoadshow="tabActive" />
    <release-audio :addEditdialogReleaseAudio.sync="addEditdialogReleaseAudio" :chartPermissionList="chartPermissionList" :playDetailsList.sync="editDetails" />
  </div>
</template>

<script>
import { raiInterface, raiVideoApi } from "@/api/api.js";
import { tableColums, TopTabs } from "./roadShow/tableTabs";
import { PublishSelect } from "../components/apply/applyTableColums";
import mPage from "@/components/mPage.vue";
import playDetails from "./roadShow/components/playDetailsDlg.vue";
import addVideoDlg from "./roadShow/components/addVideoDlg.vue";
import moment from "moment";
import AtcParticulars from "../components/atcParticulars.vue";
import GenerationAsk from "../components/generationAsk.vue";
import ReleaseAudio from "./roadShow/components/releaseAudio.vue";

export default {
  name: "",
  components: { mPage, playDetails, addVideoDlg, AtcParticulars, GenerationAsk, ReleaseAudio },
  props: {},
  data() {
    return {
      tableColums: [],
      dataList: [],
      tabActive: 1, //tabs 选中
      chartPermissionList: [], //行业的数组
      chartPermissionId: "", //行业的id
      issueTime: "", //活动时间
      cactivityTypeVal: "", //活动类型
      cactivityTypeList: [],
      publishStatus: "", //发布状态
      fileName: "", //文件名称
      total: 0, //条数
      PageSize: 10, //每页显示几条
      page_no: 1, //页码
      playDetailsVisible: false, //播放详情的弹框
      playDetailsList: {}, //播放详情的数据//编辑的详情
      editDetails: {}, //播放详情的数据//编辑的详情
      addEditdialogVisib: false, //添加视频的弹框
      sortType: "",
      detailData: [],
      dialogVisible: false,
      generaitondialogVisib: false, //代问的弹框
      generaitonId: "",
      generaitonType: "微路演",
      addEditdialogReleaseAudio: false,
    };
  },
  computed: {
    topTabs() {
      return TopTabs;
    },
    //发布状态
    publishSelect() {
      return PublishSelect;
    },
  },
  watch: {},
  created() {
    if (sessionStorage.getItem("backRoadShowListPage")) {
      let { page_no, fileName, chartPermissionId, cactivityTypeVal, issueTime, tabActive } = JSON.parse(sessionStorage.getItem("backRoadShowListPage"));
      this.page_no = page_no;
      this.fileName = fileName;
      this.chartPermissionId = chartPermissionId;
      this.cactivityTypeVal = cactivityTypeVal;
      this.issueTime = issueTime;
      this.tabActive = tabActive;
    }
  },
  mounted() {
    this.tableColums = tableColums(this.tabActive);
    this.chartPermission();
    this.activityType();
    this.getVideoList();
  },
  methods: {
    topTabsHandler(item) {
      this.tabActive = item.value;
      this.tableColums = tableColums(this.tabActive);
      this.publishStatus = "";
      this.cactivityTypeVal = "";
      this.page_no = 1;
      this.getVideoList();
    },
    //获取行业
    async chartPermission() {
      const res = await raiInterface.chartPermission();
      if (res.Ret === 200) {
        this.chartPermissionList = res.Data.List;
      }
    },
    //活动类型
    async activityType() {
      const res = await raiInterface.getActivityType();
      if (res.Ret === 200) {
        this.cactivityTypeList = res.Data.List;
      }
    },
    async getVideoList() {
      // let SortParam = this.sortType && this.tabActive == 4 ? "videoCounts" : this.sortType && this.tabActive == 1 ? "voiceCounts" : "";
      let params = {
        PageSize: this.PageSize,
        CurrentIndex: this.page_no,
        KeyWord: this.fileName,
        StartDate: this.issueTime ? this.issueTime[0] : "",
        EndDate: this.issueTime ? this.issueTime[1] : "",
        PublishStatus: this.publishStatus ? Number(this.publishStatus) : "",
        ChartPermissionId: this.chartPermissionId,
        ActivityTypeId: this.cactivityTypeVal,
        SortType: this.sortType,
        SortParam: "videoCounts",
        SearchType: this.tabActive,
      };
      const res =
        this.tabActive == 4
          ? await raiVideoApi.videoList(params)
          : this.tabActive == 1
          ? await raiVideoApi.activityVoiceAndVideoList(params)
          : this.tabActive == 3
          ? await raiVideoApi.askserie_videoList(params)
          : await raiVideoApi.activityVoiceAndVideoList(params);
      if (res.Ret === 200) {
        this.dataList = res.Data.List;
        this.total = res.Data.Paging.Totals;
      }
    },
    //select 筛选条件后的事件
    selectChangeHandle() {
      this.page_no = 1;
      this.getVideoList();
    },
    //文件名称的搜索
    fileNameHandle() {
      this.issueTime = "";
      this.publishStatus = "";
      this.chartPermissionId = "";
      this.page_no = 1;
      this.getVideoList();
    },
    /* 点击表格的排序 */
    sortChangeHandle({ prop, order }) {
      this.sortType = order == "ascending" ? "asc" : order == "descending" ? "desc" : "";
      this.getVideoList();
    },
    //分页
    handleCurrentChange(page) {
      this.page_no = page;
      this.getVideoList();
    },
    /*
    表格三件套
    */
    handleRowContent(row, key) {
      if (key == "PublishStatus") {
        let status = row["PublishStatus"] == 1 ? "已发布" : row["PublishStatus"] == 3 ? "已取消" : "未发布";
        return status;
      } else if (key == "VideoDuration" || key == "VoicePlaySeconds") {
        let m = parseInt(row[key] / 60);
        let s = parseInt(row[key] % 60);
        let ms = `${m > 9 ? m : "0" + m}分${s > 9 ? s : "0" + s}秒`;
        return ms;
      } else {
        return row[key];
      }
    },
    handleRowStyle(key) {
      const style = {
        VideoCounts: "color: #409eff; cursor: pointer",
        VoiceCounts: "color: #409eff; cursor: pointer",
        CommentNum: "color: #409eff; cursor: pointer",
      };
      return style[key] ? style[key] : "";
    },
    //
    handleRowClick(row, key) {
      if (key == "VideoCounts" || key == "VoiceCounts") {
        this.playDetailsVisible = true;
        this.playDetailsList = row;
      } else if (key == "CommentNum") {
        this.generaitondialogVisib = true;
        this.generaitonId = this.tabActive == 1 || this.tabActive == 2 ? row.ActivityId : this.tabActive == 3 ? row.AskserieVideoId : row.VideoId;
      }
    },
    /*
    表格三件套
    */
    //点击标题的弹框
    titleBtnClick(id) {
      raiInterface.activityDetail({ ActivityId: Number(id) }).then((res) => {
        if (res.Ret == 200) {
          this.detailData = res.Data;
        }
      });
      this.dialogVisible = true;
    },
    //发布或者取消发布
    handlePublish(item) {
      let str = this.tabActive == 3 ? "音频" : "视频";
      this.$confirm(item.PublishStatus == 1 ? `确认取消发布该${str}吗？` : `确认发布该${str}吗？`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const res =
            this.tabActive == 3
              ? await raiVideoApi.askseriePublishAndcancel({
                  AskserieVideoId: item.AskserieVideoId,
                  PublishOrCancle: item.PublishStatus == 1 ? 0 : 1,
                })
              : await raiVideoApi.videoPublish({
                  VideoId: item.VideoId,
                  PublishOrCancle: item.PublishStatus == 1 ? 0 : 1,
                });
          if (res.Ret === 200) {
            this.$message.success("操作成功！");
            this.getVideoList();
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    //编辑
    handleEditVideo(item, type) {
      if (type == "活动") {
        this.$router.push({
          path: "/editActivity",
          query: {
            id: item.ActivityId,
            isShow: 1,
          },
        });
      } else {
        this.editDetails = item;
        if (this.tabActive == 3) {
          this.addEditdialogReleaseAudio = true;
        } else {
          this.addEditdialogVisib = true;
        }
      }
    },
  },
  // 进入
  beforeRouteEnter(to, from, next) {
    console.log(from);
    if (from.path !== "/editActivity") {
      sessionStorage.removeItem("backRoadShowListPage");
    }
    next();
  },
  // 离开
  beforeRouteLeave(to, from, next) {
    let backData = {
      page_no: this.page_no,
      fileName: this.fileName,
      chartPermissionId: this.chartPermissionId,
      cactivityTypeVal: this.cactivityTypeVal,
      issueTime: this.issueTime,
      tabActive: this.tabActive,
    };
    sessionStorage.setItem("backRoadShowListPage", JSON.stringify(backData));
    next();
  },
};
</script>
<style scoped lang="scss">
.container-road-show {
  .top-wrap {
    margin-bottom: 28px;
    padding: 20px;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 4px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    justify-content: space-between;
    .item {
      display: flex;
      width: 100px;
      height: 40px;
      background: #ecf5ff;
      border-radius: 4px;
      border: 1px solid #b3d8ff;
      color: #3385ff;
      font-size: 16px;
      align-items: center;
      justify-content: center;
      margin-right: 20px;
      cursor: pointer;
    }
    .active {
      border: none;
      background-color: #409eff;
      color: #fff;
    }
  }
  .select-content {
    display: flex;
    justify-content: space-between;
    .el-select {
      width: 220px;
      margin-right: 20px;
    }
    .mx-datepicker {
      width: 220px !important;
      margin-right: 20px !important;
    }
  }
}
</style>
