<template>
    <div class="contain">
        <p class="now_page_title">在线组件工具／ <span>搜索引擎</span> </p>
        <div class="contain_table">
            <div class="table_header">
                <div class="table_search">
                    <el-input
                        placeholder="请输入内容"
                        prefix-icon="el-icon-search"
                        v-model="input2">
                        <el-button slot="append" @click="search_list_btn()">搜索</el-button>
                    </el-input>
                </div>
            </div>
            <div class="table_container" v-if="tableData.length">
                <el-table
                    :data="tableData"
                    height="100%"
                    border
                    :header-cell-style="rowClass"
                    :cell-style="cellClass"
                    style="width: 100%;border-radius:12px;overflow:hidden;border-top:0;">
                    <el-table-column
                    prop="index"
                    label="序号"
                    align="center"
                    width="70">
                    </el-table-column>
                    <el-table-column
                    prop="COMPANY_NAME"
                    label="企业名称"
                    width="330">
                    </el-table-column>
                    <el-table-column
                    prop="HAZARD_NAME"
                    label="危险源名称"
                    align="center"
                    width="190">
                    </el-table-column>
                    <el-table-column
                    align="left"
                    header-align="center"
                    label="内容">
                    <template slot-scope="scope">
                        <span v-html="scope.row._source"></span>
                    </template>
                    </el-table-column>
                </el-table>
            </div>
            <list-pagination
                :total="listTotal"
                :page-size="pageSize"
                :page-sizes="[10,50,100]"
                :current-page="currentPage"
                @current-change="changeCurrentPage"
                @size-change="changeCurrentSize"
                 v-if="tableData.length"
            ></list-pagination>
        </div>
    </div>
</template>

<script>
import ListPagination from "@/components/comments-pagination";
export default {
    props: [],
    components: {
        ListPagination
    },
    data() {
        return {
            input2:'',
            tableData:[],
            listTotal:0,
            pageSize: 10,
            currentPage:1,
            input3:'',
        };
    },
    watch: {

    },
    computed: {

    },
    created() {
        // this.search_list()
    },
    mounted() {

    },
    methods: {
        search_list_btn(){
            this.currentPage = 1
            if(!this.input2){
                this.tableData = []
                return
            }
            this.input3 = this.input2
            this.search_list()
        },
        search_list(){
            this.$http
            .get(`/apaas/service/v3/service/manager/searchES?search=${this.input3}&limit=${this.pageSize}&page=${this.currentPage}`)
            .then(response => {
                if(response.data.success){
                    console.log(response.data);
                    this.listTotal = response.data.data.total
                    var temp = []
                    response.data.data.data.forEach((e,idx) => {
                        var temp_str = JSON.stringify(e._source)
                        var temp_arr = this.input3.split('')
                        temp_arr.forEach(el => {
                            let replaceReg = new RegExp(el, 'g')
                            let replaceString ='<span class="search-text">' + el + '</span>'
                            temp_str = (temp_str).replace(
                                replaceReg,
                                replaceString
                            )
                        });
                        // let replaceReg = new RegExp(this.input3, 'g')
                        // let replaceString ='<span class="search-text">' + this.input3 + '</span>'
                        // temp_str = (JSON.stringify(e._source)).replace(
                        //     replaceReg,
                        //     replaceString
                        // )


                        temp.push({...e._source,_source:temp_str,index:idx+1+(this.currentPage-1)*10})
                    });
                    this.tableData = temp
                }
            })
        },
        changeCurrentPage(value) {
            this.currentPage = value;
            this.search_list();
        },
        changeCurrentSize(value) {
            this.pageSize = value;
            this.search_list();
        },
        rowClass({ row, column, rowIndex, columnIndex}) {
            console.log(columnIndex) //表头行下标
            if(columnIndex==0){
                return 'background:#faf2e2;color:#242c43;border:1px solid #ebd9b6;borderRadius:12px 0 0 0;'
            }else if(columnIndex==4){
                return 'background:#faf2e2;color:#242c43;border:1px solid #ebd9b6;borderRadius:0 12px 0 0;'
            }else{
                return 'background:#faf2e2;color:#242c43;border:1px solid #ebd9b6;borderLeft:0;'
            }
            
        },
        cellClass({ row, column, rowIndex, columnIndex}){
            return 'color:#242c43;'
        }
    },
};
</script>

<style>
.table_search .el-input-group__append, .el-input-group__prepend {
    border-radius:0 8px 8px 0;
    width: 110px;
    text-align: center;
	background-color: #0f2683;
    font-size: 17px;
    color:#fff;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid #0f2683;
    padding: 0;
}
.table_search .el-input-group__append .el-button {
    width: 100%;
}
.table_search .el-input__inner{
    background-color: #f7f8f9;
}
.table_search .el-table--scrollable-y .el-table__body-wrapper{
    border-left: 1px solid #e3e5ef;
}
</style>
<style scoped>
.contain {
  width: calc(100% - 80px);
  height: calc(100vh - 210px);
  margin: 0 auto;
  margin-top: -157px;
  margin-bottom: 20px;
}
.now_page_title {
  margin:20px 0;
  color: #626de9;
  margin-top: 50px;
  padding-left: 20px;
}
.now_page_title span {
  color: #b4c0f5;
}
.contain_table{
    width: 100%;
    height: 100%;
    background-color: #fff;
    box-shadow: 0px 3px 6px 0px #f4f7fc;
    border-radius: 12px;
    padding: 20px;
}
.table_header{
    height: 70px;
    width: 100%;
    border-bottom: 2px solid #f4f7fc;
}
.table_search{
    width: 800px;
    height: 44px;
    margin: 0 auto;
}
.table_container{
    width: 100%;
    height: calc(100% - 130px);
    margin-top: 30px;
}
.table_container>>>.search-text{
    background-color: #fac266;
}
</style>
