<template>
    <el-dialog title="技术展示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
        <div class="notice">
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="新技术">
                    <el-select v-model="form.technique" placeholder="请选择新技术" @change="changeOption">
                        <el-option v-for="item in techniqueList" :key="item.value" :label="item.label"
                            :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="识别文本">
                    <el-input type="textarea" autosize v-model="form.text"></el-input>
                    <el-button style="margin-top: 10px;" type="success" @click="identifyText" size="small">识别</el-button>
                </el-form-item>
                <el-form-item label="识别结果">
                    <el-input type="textarea" v-model="form.result"></el-input>
                </el-form-item>
            </el-form>
        </div>
    </el-dialog>
</template>


<script>
import { entity, hotWord, summary, emotionNews } from '../../../api/newTechnique';
export default {
    data() {
        return {
            dialogVisible: false,
            form: {
                technique: '',
                text: '',
                result: '',
            },
            techniqueList: [
                { label: "命名实体识别", value: 1 },
                { label: "热词", value: 2 },
                { label: "消息摘要算法", value: 3 },
                { label: "情感识别", value: 4 },
            ]
        }
    },
    props: {
        visible: Boolean,
        type: Number
    },
    methods: {
        handleClose() {
            this.$emit('handleCancel');
        },
        changeOption(val) {
            this.form.text = '';
            this.form.result = '';
        },
        identifyText() {
            if (this.form.technique == 1) {
                if (this.form.text.trim() != '') {
                    entity({ action: "entity_extract", language: "zh", text: this.form.text.trim() }).then(res => {
                        this.form.result = res.map(e=>e.entity_list.map(a=>a.entity_name).join()).filter(b=>b.length).join();
                    }).catch(err=>{
                        this.$message.warning(err.message);
                    })
                } else {
                    this.$message.warning('识别文本不能为空');
                }
            } else if (this.form.technique == 2) {
                if (this.form.text.trim() != '') {
                    hotWord({ keywordInstanceId: 109, topk: 10, lang: "zh", text: this.form.text.trim() }).then(res => {
                        this.form.result = res.map(e=>e.keyword).join();
                    }).catch(err=>{
                        this.$message.warning(err.message);
                    })
                } else {
                    this.$message.warning("识别文本不能为空!");
                }
            } else if (this.form.technique == 3) {
                if (this.form.text.trim() != '') {
                    summary({ language: "zh", text: this.form.text.trim() }).then(res => {
                        this.form.result = res;
                    }).catch(err=>{
                        this.$message.warning(err.message);
                    })
                } else {
                    this.$message.warning('识别文本不能为空');
                }
            } else if (this.form.technique == 4) {
                if (this.form.text.trim() != '') {
                    emotionNews({ data: this.form.text.trim() }).then(res => {
                        this.form.result = JSON.parse(res.score);
                    }).catch(err=>{
                        this.$message.warning(err.message);
                    })
                } else {
                    this.$message.warning('识别文本不能为空');
                }

            } else {
                this.$message.success("敬请期待");
            }
        }
    },
    mounted() {
        this.dialogVisible = this.$props.visible;
        this.form.technique = this.$props.type;
    }
}
</script>

<style lang="scss">
.el-dialog {
    padding: 20px;
    box-sizing: border-box;
    background-color: transparent;
    background-image: url(../../../assets/img/home/dialog.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;

    .el-input__inner {
        border: 1px solid #535353 !important;
        box-shadow: 0 0 10px #535353;
    }

    .el-dialog__header {
        text-align: center;
    }

    .el-textarea__inner {
        color: white;
        border: 1px solid #535353 !important;
        box-shadow: 0 0 10px #535353;
        background-color: transparent;
    }
}
</style>