<template>
  <div class="page-wrap">
    <div class="ppt-page-wrap">
      <div class="top-wrap">
          <el-button type="primary" @click="toPage({PptVersion:2},'add')">添加ppt</el-button>
          <el-input placeholder="标题/创建人" v-model="key_word" size="medium" prefix-icon="el-icon-search" @input="getpptlist" style="max-width:420px;"></el-input>
        </div>
      <div class="list-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">
            <template slot-scope="{row}">
              <span v-if="item.key==='ModifyTime'">{{$moment(row.ModifyTime).format('YYYY.MM.DD HH:MM:ss')}}</span>
              <span v-else>{{ row[item.key] }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" min-width="200">
            <template slot-scope="{row}">
							<div style="color:#4099ef; font-size:24px;">
								<span class="editsty" @click="toPage(row,'publish')">预览发布</span>
                <span class="editsty" @click="toPage(row,'present')" v-if="row.PptVersion===2">演示</span>
								<a @click.prevent="downloadPpt(row.PptxUrl)" :download="row.Title" class="editsty">下载pptx</a>
								<span class="editsty" @click="toPage(row,'edit')" v-if="row.PptVersion===2">编辑</span>
                <el-popover placement="top" width="160" v-model="row.deletePopVisible"
              :ref="`pop_${row.PptId}`">
              <p>该操作不可撤销,确定删除吗？</p>
              <div style="text-align: right; margin: 0;font-size:14px;">
                <el-button size="mini" type="text" @click="row.deletePopVisible = false">取消</el-button>
                <el-button type="primary" size="mini" @click="deletePpt(row)">确定</el-button>
              </div>
              <span class="deletesty" style="cursor: pointer; color: #d1433a" slot="reference">删除</span>
            </el-popover>
								<!-- <span class="deletesty" @click="deletePpt(row)">删除</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"
        >
      </el-pagination>
      </div>
    </div>
      
  </div>
</template>

<script>
import {pptInterface} from '@/api/api.js';
export default {
  data() {
    return {
      key_word:'',
      tableColumn:[{
        label:'标题',
        key:'Title'
      },{
        label:'更新时间',
        key:'ModifyTime'
      },{
        label:'创建人',
        key:'AdminRealName'
      }],
      tableData:[],
      page_no:1,
      pageSize:10,
      total:2
    };
  },
  methods: {
    async getpptlist(){
      //this.tableData = pptTableData
      const res  = await pptInterface.getpptList({
        CurrentIndex:this.page_no,
        PageSize:this.pageSize,
        KeyWord:this.key_word
      })
      if(res.Ret===200){
        const {Paging,List} = res.Data
        this.page_no = Paging.CurrentIndex
        this.total = Paging.Totals
        this.tableData = List
      }
    },
    toPage(item,type){
      const urlMap = {
        add:'/ppteditor',
        edit:`/ppteditor?id=${item.PptId}`,
        publish:`/pptpublish?id=${item.PptId}`,
        present:`/pptpresent?id=${item.PptId}`
      }
      if(item.PptVersion===2){
        window.open(urlMap[type],'_blank');
      }else{
        if(type==='publish'){
          sessionStorage.setItem('ppt_id',item.PptId);
					sessionStorage.setItem('ppt_auth',item.IsAuth);
          window.open('/pptdtl','_blank');
        }
      }
			
    },
    downloadPpt(url){
      if(url){
        let isIE=false;
				if (!!window.ActiveXObject || 'ActiveXObject' in window) {
					isIE=true;
				} else {
					isIE=false;
				}
        if(isIE){
          window.open(url, '_blank')
        }else{
          let a = document.createElement('a') 
          a.href = url 
          a.click();
        }
      }else{
        this.$message.warning('请先预览发布')
      }
    },
    async deletePpt(item){
      const res = await pptInterface.deleteppt({
        PptId:item.PptId
      })
      if(res.Ret===200){
        this.$message.success('删除成功')
        this.getpptlist()
      }
    },
    handleCurrentChange(index){
      this.page_no = index
      this.getpptlist()
    }
  },
  mounted(){
    this.getpptlist()
  }
};
</script>

<style lang="scss">
@import './css/common.scss';
</style>
<style scoped lang="scss">
.page-wrap{
  .ppt-page-wrap{
    height: auto;
  }
  .top-wrap{
    padding: 15px 25px;
    height:80px;
    border: none !important;
    box-shadow: 0 3px 6px rgba(37,37,239,0.1) !important;
    border-radius: 4px  0;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .list-wrap{
    padding:30px;
    /* height: calc(100vh - 200px); */
  }
}
</style>
