<template>
  <div class="height_100">
    <el-container>
        <el-header>
            <div style="display:flex;justify-content:flex-end;width: 100%;">
              <el-button type="primary" size="small" @click="add">添加</el-button>  
            </div>
            
        </el-header>
        <el-main v-DivHeight="getDivHeight">
            <el-table
                ref="table"
                :data="tableData"
                row-key="id"
                style="width: 100%"
                :maxHeight="tableHeight - 40"
                v-loading="loading"
                @selection-change="handleSelectionChange"
            >
                <el-table-column type="selection" width="55" :reserve-selection="true">

                </el-table-column>
                <el-table-column prop="searchCondition" label="检索式"></el-table-column>
                <el-table-column prop="searchBase" label="检索数据库" width="140">
                    <template slot-scope="scope">
                    <div>
                        {{ scope.row.searchBase }}
                    </div>
                    </template>
                </el-table-column>
                <el-table-column prop="allNum" label="检索数量" width="120">
                    <template slot-scope="scope">
                    <div>
                        {{ scope.row.allNum }}件
                    </div>
                    </template>
                </el-table-column>
                <el-table-column prop="searchPerson" label="检索人" width="120">
                    <template slot-scope="scope">
                    <div>
                        {{ scope.row.searchPerson }}
                    </div>
                    </template>
                </el-table-column>
                <el-table-column prop="searchTime" label="检索时间" width="120">
                    <template slot-scope="scope">
                    <div>
                        {{ scope.row.searchTime }}
                    </div>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="140">
                    <template slot-scope="scope">
                        <div class="icon">
                            <span @click="editSearch(scope.row)" class="margin-left_10">
                            <el-tooltip class="item" effect="dark" content="编辑" placement="top">
                                <i class="iconfont icon-bianji"></i>
                            </el-tooltip>
                            </span>
                            <!-- <span @click="executeSearch(scope.row)" class="margin-left_10">
                            <el-tooltip class="item" effect="dark" content="再次执行" placement="top">
                                <i class="iconfont icon-zidongzhihang"></i>
                            </el-tooltip>
                            </span> -->
                            <span @click="delSearch(scope.row)" class="margin-left_10">
                            <el-tooltip class="item" effect="dark" content="删除" placement="top">
                                <i class="iconfont icon-shanchu"></i>
                            </el-tooltip>
                            </span>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </el-main>
        <el-footer class="pagination" style="display:flex;justify-content:space-between;align-items:center">
          <div style="display:flex;align-items:center">
            <span v-if="multipleSelection.length > 0">
              已勾选 <b>{{ multipleSelection.length }}</b> 条
            </span>
            <div v-show="multipleSelection.length" class="margin-left_10">
              <el-button type="primary" size="small" @click="del">删除</el-button>
            </div>
          </div>
          <div>
            <el-pagination background layout="total, sizes, prev, pager, next, jumper"
              :current-page.sync="queryParams.current" :page-size.sync="queryParams.size"
              @current-change="handleCurrentChange" @size-change="getList" :total="total">
            </el-pagination>
          </div>

        </el-footer>
    </el-container>
    <addAndEditSearchRecords ref="addAndEditSearchRecords" :projectId="projectId" @save="getList"></addAndEditSearchRecords>
  </div>
</template>

<script>
import { getTableHeight } from '@/views/components/mixins'
import addAndEditSearchRecords from './dialog/addAndEditSearchRecords.vue';
export default {
    mixins:[getTableHeight],
  components: {
    addAndEditSearchRecords
  },
  props: {
    projectId:{
        default:0
    }
  },
  data() {
    return {
        tableData:[],
        multipleSelection:[],
        loading:false,
        queryParams:{
            current:1,
            size:10,
            projectId:this.projectId
        },
        total:0,
    };
  },
  watch: {},
  computed: {},
  created() {},
  mounted() {
    this.getList()
  },
  methods: {
    getList(){
        this.loading = true
        this.$api.querySearchRecords(this.queryParams).then(response=>{
            if(response.code == 200){
                this.tableData = response.data.data
                this.total = response.data.total
                this.loading = false
            }
        }).catch(error=>{
            this.tableData = []
            this.loading = false
        })
    },
    handleCurrentChange(val){
        this.queryParams.current = val
        this.getList()
    },
    add(){
        this.$refs.addAndEditSearchRecords.open({})
    },
    del(){
        var ids = this.multipleSelection.map(item=>{
            return item.id
        })
        this.removeSearchRecords(ids,1)
    },
    delSearch(row){
        this.removeSearchRecords([row.id])
    },
    removeSearchRecords(ids,type){
        this.$confirm('确认删除本条数据吗？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(() => {
            this.$api.removeSearchRecords(ids).then(response=>{
                if(response.code == 200){
                    this.$message.success('删除成功')
                    this.getList()
                    if(type){
                        this.multipleSelection = []
                        this.$refs.table.clearSelection();
                    }else{
                        var id = response.data.data[0]
                        var index = this.multipleSelection.findIndex(item=>{
                            return item.id == id
                        })
                        if(index!=-1){
                            this.multipleSelection.splice(index,1)
                        }
                    }
                    
                }
            }).catch(error=>{
                this.$message.error('删除失败')
            })
        })
    },
    handleSelectionChange(val){
        this.multipleSelection = val
    },
    editSearch(row){
        this.$refs.addAndEditSearchRecords.open(row)
    },
  },
};
</script>
<style lang="scss" scoped>
</style>