<template>
  <div>
    <el-dialog   
        ref='createDialog'
        title="新建查新检索"
        :visible.sync="visible"
        :width="dialogWidth"
        append-to-body
        :close-on-click-modal="false"
        :modal="false"
        :before-close="close">
        <div class="content">
            <div class="left">
                <div class="head">发明点</div>
                <div class="main" >
                    <myRichText class="left_search" customStyle="height:100%" v-model="inventionPoint" placeholder="请输入发明点"></myRichText>
                </div>
                <div class="foot">
                    <el-button type="primary" size="small" :loading="loading" @click="submit">提炼关键词</el-button>
                    <el-button type="primary" size="small" :loading="loading" @click="submit">查看相似案件</el-button>
                    <el-button type="primary" size="small" :loading="loading" @click="submit">确定</el-button>
                </div>
            </div>
            <div class="right" v-if="showRight" v-loading="loading">
                <div class="head">
                    <!-- <div style="line-height:1">以下是根据您输入的发明点找到的可能相同的案件，您确认一下是否是相同案件，如果是请相同案件的点击“进入”按钮,如果没有相同的案件就点击“直接进入”按钮进行检索</div> -->
                    <div style="line-height:1">以下是提炼的关键词</div>
                    <!-- <div>
                        <el-button type="text" @click="search">直接进入</el-button>
                    </div> -->
                </div>
                <div class="main">
                    <!-- <el-checkbox-group v-model="checkList">
                        <el-checkbox label="关键词1"></el-checkbox>
                        <el-checkbox label="关键词2"></el-checkbox>
                        <el-checkbox label="关键词3"></el-checkbox>
                    </el-checkbox-group> -->
                    <div class="keyWord"> 
                        中文关键词：
                        <div class="keyWord_content">
                            <el-tag
                                v-for="item in keyWord.CN"
                                :key="item"
                                type=""
                                @click="chooseKeyword(item)"
                                :effect="checkList.indexOf(item)==-1?'plain':'dark'">
                                {{ item }}
                            </el-tag>
                        </div>
                    </div>
                    <div class="keyWord"> 
                        英文关键词：
                        <div class="keyWord_content">
                            <el-tag
                                v-for="item in keyWord.EN"
                                :key="item"
                                @click="chooseKeyword(item)"
                                type=""
                                :effect="checkList.indexOf(item)==-1?'plain':'dark'">
                                {{ item }}
                            </el-tag>
                        </div>
                    </div>
                    <!-- <myCard class="box-card" v-for="(item,index) in tableData" :key="item.id">
                        <div slot="head">
                            <div>
                                序号：{{ (index + 1)  }}  
                                <span style="margin-left:20px;color:cadetblue">相似度：{{ item.same }}</span>
                            </div>
                        
                            <div>
                                <el-button type="primary" size="mini" @click="search2(item)">复用结果</el-button>
                            </div>
                        </div>
                        <el-form label-width="100px">
                            <el-form-item label="发明点：">
                                <div v-html="item.inventionPoint"></div>
                            </el-form-item>
                            <el-form-item label="创建人：">
                                <div v-html="item.createName"></div>
                            </el-form-item>
                            <el-form-item label="创建时间：">
                                <div v-html="item.createTime"></div>
                            </el-form-item>
                        </el-form>
                    </myCard> -->
                </div>
                <div class="foot">
                    <el-button type="primary" size="small" :loading="loading" @click="submit">检索</el-button>
                </div>
            </div>
        </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    show:{
        type:Boolean,
        default:false
    },
    width:{
        default:'500px'
    },
    position:{
        default:null
    }
  },
  data() {
    return {
        visible:this.show,
        dialogWidth:this.width,
        inventionPoint:'发明点',
        tableData:[],
        loading:false,
        showRight:false,
        checkList:[],
        keyWord:{
            CN:['关键词1','关键词2'],
            EN:['keyWord1','keyWord2']
        }
    };
  },
  watch: {},
  computed: {},
  created() {},
  mounted() {
    this.changePosition()
  },
  methods: {
    open(){
        this.dialogWidth=this.width
        this.changePosition()
        this.showRight = false
        this.visible = true
    },
    changePosition(){
        if(!this.position){
            return
        }
        var dom = this.$refs.createDialog
        
        if(dom){
            var dom2 = dom.$el.querySelector('.el-dialog')
            dom2.style.position = 'fixed'
            for(let key in this.position){
                dom2.style[key] = this.position[key]
            } 
        }
        
    },
    close(){
        this.visible = false
    },
    //使用检索式
    use(item){},
    //选择关键词
    chooseKeyword(item){
        var index = this.checkList.indexOf(item)
        if(index == -1){
            this.checkList.push(item)
        }else{
            this.checkList.splice(index,1)
        }
    },
    //确定
    submit(){
        if(!this.inventionPoint){
            this.$message.warning('发明点不能为空')
            return
        }
        this.loading = true
        this.$set(this,'dialogWidth','1000px')
        this.showRight = true
        setTimeout(()=>{
            this.tableData = [
                {
                  id:1,
                  number:'5W262525',
                  inventionPoint:'发明点',
                  searchRecords:[
                    {
                        searchRecord:'PA = (深圳市江波龙电子股份有限公司)'
                    }
                  ],
                  same:'99%',
                  createName:'管理员',
                  createTime:'2024-09-06 17:04'
                },
                {
                    id:2,
                    number:'5W131553',
                    inventionPoint:'发明点',
                    searchRecords:[
                        {
                            searchRecord:'TI = (石墨烯薄膜)'
                        }
                    ],
                    same:'90%',
                    createName:'管理员',
                    createTime:'2024-09-06 17:04'
                }
            ]
            
            this.loading = false
        },1000)
    },
    //直接进入
    search(){

    },
    //进入某一个项目
    search2(){},
  },
};
</script>
<style lang="scss" scoped>
.content{
    height: calc(100vh - 250px);
    width:100%;
    display: flex;
    .left{
        width:100%;
    }
    .right{
        width:100%;
        .head{
            display: flex;
            justify-content: space-between;
            align-items: center;
            &>*{

            }
        }
        .main{
            display: flex;
            flex-direction: column;
            .keyWord{
                height: 100%;
                width:100%;
                flex:1;
                .keyWord_content{
                    padding: 10px;
                    border:1px solid var(--bg);
                    height: calc(100% - 50px);
                }
            }
        }
    }
    .head{
        padding: 0 5px;
        border-bottom: 1px solid black;
        height: 40px;
        line-height: 50px;
        font-weight: bold;
    }
    .main{
        padding: 10px 5px;
        height: calc(100% - 120px);
        .left_search{
            height:100% !important;
        }
    }
    .foot{
        padding: 0 5px;
        margin-top: 20px;
        display: flex;
        justify-content: flex-end;
    }
}
</style>