<template>
    <div class="strategy-report-page">
        <div class="top-box" style="margin-bottom:30px">
            <el-button type="primary" :loading="isPull" @click="handlePullReport">获取报告</el-button>
            <el-date-picker
                v-model="filterData.time"
                type="daterange"
                value-format="yyyy-MM-dd"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                style="margin:0 20px"
                @change="handleListChange"
            >
            </el-date-picker>
            <el-select v-model="filterData.state" placeholder="状态筛选" clearable @change="handleListChange">
                <el-option label="已同步" value="2"/>
                <el-option label="未同步" value="1"/>
            </el-select>
            <el-input
                placeholder="标题"
                v-model="filterData.keyword"
                style="maxWidth:400px;float: right;"
                @input="handleListChange"
                clearable
            >
				<i slot="prefix" class="el-input__icon el-icon-search"></i>
			</el-input>
        </div>
        <el-table
            :data="list"
            border
            style="width: 100%"
            v-loading="loading"
        >
            <el-table-column
                v-for="col in tableOpt"
                :key="col.label"
                :prop="col.prop"
                :label="col.label"
                align="center"
            >
                <template slot-scope="{row}" >
                    <div v-html="row.Abstract" v-if="col.prop=='Abstract'"></div>
                    <span v-else-if="col.prop=='State'" :style="{color:row.State==2?'#15C126':'#666666'}">{{row.State==1?"未同步":'已同步'}}</span>
                    <span v-else-if="col.prop=='SyncTime'">{{row.SyncTime||'--'}}</span>
                    <span v-else-if="col.prop=='Title'" style="color:#409EFF;cursor: pointer;" @click="goReportDetail(row)">{{row.Title}}</span>
                    <span v-else>{{ row[col.prop] || '' }}</span>
                </template>
            </el-table-column>
            <el-table-column 
                prop=""
                label="操作"
                align="center"
            >
                <template slot-scope="{row}">
                    <el-button type="text" :loading="isSync&&isSyncId==row.Id" style="color:#409eff" v-if="row.State==1" @click="handleSyncReport(row)">一键同步</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination 
			layout="total,prev,pager,next" 
			background
			:current-page="page"
			@current-change="handlePageChange"
			:page-size="pageSize" 
		    :total="total"
			style="float:right;margin-top:20px">
		</el-pagination>
    </div>
</template>

<script>
import {strategyReportInterence} from '@/api/api.js'
export default {
    data() {
        return {
            filterData:{
                time:['',''],
                state:'',
                keyword:''
            },
            loading:false,
            list:[],
            page:1,
            pageSize:15,
            total:0,
            tableOpt:[
                {prop:'Title',label:'报告标题'},
                {prop:'Abstract',label:'摘要'},
                {prop:'PublishTime',label:'创建时间'},
                {prop:'State',label:'状态'},
                {prop:'SyncTime',label:'同步时间'}
            ],
            isPull:false,//是否正在获取报告
            isSync:false,//正在同步报告
            isSyncId:0,//正在同步报告的id
        }
    },
    created(){
        this.getList()
    },
    methods: {
        async getList(){
            this.loading=true
            const res=await strategyReportInterence.getReportList({
                PageSize:this.pageSize,
                CurrentIndex:this.page,
                StartDate:this.filterData.time?this.filterData.time[0]:'',
                EndDate:this.filterData.time?this.filterData.time[1]:'',
                State:this.filterData.state,
                KeyWord:this.filterData.keyword
            })
            this.loading=false
            if(res.Ret===200){
                this.list=res.Data.List||[]
                this.total=res.Data.Paging.Totals
            }
        },

        handlePageChange(e){
            this.page=e
            this.getList()
        },

        handleListChange(){
            this.page=1
            this.getList()
        },

        //跳转报告详情
        goReportDetail(item){
            let {href} = this.$router.resolve({name:'预览报告',query:{id:item.Id,fromPage:'strategyReport'}});
			window.open(href,'_blank');
        },

        //获取报告
        async handlePullReport(){
            this.isPull=true
            const res=await strategyReportInterence.getStrategyReport({})
            setTimeout(() => {
                this.isPull=false
            }, 500);
            if(res.Ret===200){
                this.$message.success('获取成功')
                this.handleListChange()
            }
        },

        //同步报告
        async handleSyncReport(item){
            if(this.isSync&&this.isSyncId==item.Id) return
            this.isSync=true 
            this.isSyncId=item.Id
            const res=await strategyReportInterence.syncStrategyReport({Id:item.Id})
            setTimeout(() => {
                this.isSync=false
                this.isSyncId=0
            }, 500);
            if(res.Ret===200){
                this.$message.success('获取成功')
                this.getList()
            }
        }
    },
}
</script>

<style lang="scss" scoped>
.strategy-report-page{
    padding: 20px 30px;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 4px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
    min-height: 80vh;
    &::after{
        content: '';
        clear: both;
        display: block;
        height: 0;
    }
}
</style>