<template>
    <div class="keyWord">
        <div class="keyWord-des">
            <div class="fl header">关键字提取</div>
            <div class="fr icons">
                <i class="icon keyWord_save" @click="keyWordUpdate" style="background: url(/static/image/icon/save.png) no-repeat center center;vertical-align:-3px;"></i>
                <i class="icon el-icon-share" @click="doDistribute"></i>
            </div>
        </div>
        <div class="keyWord-main">
            <div class="keyWordList">
                <el-table :data="keyWordList" :show-header="false" style="width: 100%">
                    <el-table-column align="right" prop="keyWord" width="110"> </el-table-column>
                    <el-table-column>
                        <template slot-scope="scope">
                            <el-input
                                type="textarea"
                                resize="none"
                                v-model="scope.row.valueWord"
                                :class="[!scope.row.valueWord? 'redBorder':'']"
                                :autosize="{minRows: 1}"
                                @focus="focus(scope.row)"
                            >
                            </el-input>
                        </template>
                    </el-table-column>
                </el-table>
               <!--  <el-form ref="form" label-width="100px">
                    <el-form-item v-for="(item,index) of keyWordList" :key="index" :label="item.key">

                    </el-form-item>
                </el-form> -->
            </div>
        </div>
        <a :href="getDownUrl" ref="downExcel" style="display:none;"></a>
    </div>
</template>
<script type="text/javascript">
    export default{
        name: 'KeyWord',
        props: ['keyWordList','pageNum','fileId'],
        data(){
            return {
                page: 1,
                currentKey: null,
                exportExcelUrl: '',
                export_ajax_flag: '',
                save_ajax_flag: '',
            }
        },
        mounted(){
            // this.$bus.on('updatePaginationPage', page => {
            //     this.page = page;
            // });
        },
        computed:{
            // getShowRow(){
            //     return this.keyWordList.filter( (item,index) => {
            //         return item.pageNum == this.pageNum;
            //     });
            // },
            getDownUrl(){
                return '/ocr/exproExcel?fileId=' + this.fileId;
            }
        },
        methods: {
            focus(row){
                this.currentKey = row;
            },
            random(){
                return Math.random() * 10;
            },
            keyWordUpdate(){
                if(!!this.save_ajax_flag){
                    return false;
                }
                let query = JSON.parse(JSON.stringify(this.keyWordList));
                query.forEach( (item,index) => {
                    item.coordinate = '';
                    delete item.keyPosition;
                });
                this.save_ajax_flag = this.$ocrhttp({
                    url: '/folder/saveValue',
                    type: 'post',
                    headers: {
                        'Content-Type': 'application/json;chhrset=UTF-8'
                    },
                    data:{
                        ocrKeyValues: query,
                    },
                    success: (res) => {
                        if(res.code == 200){
                            this.$notify({
                                title: '提示',
                                message: '保存成功',
                                type: 'success',
                                duration: 1500
                            });
                        }else{
                            this.$notify({
                                title: '提示',
                                message: '保存失败',
                                type: 'error',
                                duration: 1500
                            });
                        }
                        this.save_ajax_flag = '';
                    },
                    error: (err) => {
                        this.$notify({
                            title: '提示',
                            message: '保存失败',
                            type: 'error',
                            duration: 1500
                        });
                        this.save_ajax_flag = '';
                    }
                })
            },
            doDistribute() {
                let result = JSON.parse(JSON.stringify(this.keyWordList));
                result.forEach((item,index) => {
                    item.coordinate = '';
                    delete item.keyPosition;
                    delete item.pdfHtmlId;
                });
                this.identifyResults = result;
                this.$emit('distribute', this.identifyResults);
            },
            keyWordShare(){
                //如果上次请求没结束，则阻止
                if(!!this.export_ajax_flag){
                    return false;
                }
                this.export_ajax_flag = this.$ocrhttp({
                    url: '/folder/sendKeyWord/' + this.fileId,
                    type: 'GET',
                    success: (res) => {
                        if(res.code == 200){
                            this.$notify({
                                title: '提示',
                                message: '分享成功',
                                type: 'success',
                                duration: 1500
                            });
                        }else{
                            this.$notify({
                                title: '提示',
                                message: '分享失败',
                                type: 'error',
                                duration: 1500
                            });
                        }
                        this.export_ajax_flag = '';
                    },
                    error: (err) => {
                        this.$notify({
                            title: '提示',
                            message: '分享失败',
                            type: 'error',
                            duration: 1500
                        });
                        this.export_ajax_flag = '';
                    }
                });
            },

        },
        watch: {
            currentKey:{
                handler: function(newval,oldval){
                    if(newval.valueWord!==''){
                        if(newval.fileId != oldval.fileId){
                            this.$bus.emit('toggleFile',{fileId: newval.fileId,pageNum: newval.pageNum});
                        }else if(newval.pageNum !== 0 && (newval.pageNum != this.pageNum)){
                            this.$bus.emit('updatePageNum',newval.pageNum);
                        }
                        this.$bus.emit('updateHightKey', {valueWord: newval.valueWord,keyPosition: newval.coordinate,hightKeyPage: newval.pageNum});
                    }
                },
                deep: true
            }
        }
    }

</script>
<style type="text/css" scoped>
    .keyWord{
        width: 100%;
        height: 100%;
    }
    .keyWord-des{
        padding: 0px 20px;
        width: 100%;
        height: 35px;
        line-height: 35px;
        background: #f3f4f6;
    }
    .keyWord-des .header{
        font-weight: 900;
        color: rgba(60,68,85,0.7);
        font-size: 14px;
    }
    .keyWord-des .icon{
        display: inline-block;
        width: 20px;
        height: 20px;
        font-size: 18px;
        cursor: pointer;
    }

    .keyWord-des .icon.keyword_save{
        background: url(/static/image/icon/save.png) no-repeat center center;
    }

    .keyWord-main{
        width: 100%;
        height: calc(100% - 35px);
        overflow: auto;
    }

    .keyWord-main .keyWordList{
        padding: 20px;
        overflow: auto;
    }
    .redBorder{
        border: 1px solid #cc3d3d;
        border-radius: 4px;
    }
</style>
<style type="text/css">
    .keyWord .el-form-item{
        margin-bottom: 10px;
    }

    .keyWord .el-form-item__label {
        text-align: right;
        vertical-align: middle;
        float: left;
        font-size: 14px;
        color: #606266;
        line-height: 30px;
        padding: 0 10px 0 0;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
    .keyWord .el-form-item__content {
        line-height: 30px;
        font-size: 14px;
    }
    .keyWord .el-form-item input{
        height: 30px;
    }

</style>
