<template>
  <div style="background:white;padding:20px 20px 0;">
    <el-button @click="deletes()"><i class="iconfont icon-shanchu"></i> 删除<span v-if="multipleSelection.length>0">{{ multipleSelection.length }}条</span><span v-else>所有</span>检索记录</el-button>
    <el-divider></el-divider>
    <el-table
      ref="table"
      :data="tableData"
      style="width: 100%"
      :maxHeight="height - 230"
      v-loading="loading"
      :row-key="getRowKeys"
      @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" :reserve-selection="true">

      </el-table-column>
      <el-table-column prop="conditions" label="检索式"></el-table-column>
      <el-table-column prop="dbType" label="检索范围" width="140">
        <template slot-scope="scope">
          <div>
            {{ dbType[scope.row.dbType] }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="time" label="创建/更新时间" width="240">
        <template slot-scope="scope">
          <div class="time">
            <p>创建：{{ scope.row.retrieveTime }}</p>
            <p>更新：{{ scope.row.updateTime }}</p>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="totalNum" label="检索结果" width="120">
        <template slot-scope="scope">
          <div>
            {{ scope.row.totalNum }}件
          </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>
<div class="foot">
  <el-pagination
          background
          layout="total, prev, pager, next, jumper"
          :current-page.sync="queryParams.current"
          :page-size.sync="queryParams.size"
          @current-change="handleCurrentChange"
          @size-change="getList"
          :total="queryParams.total"
        >
        </el-pagination>
</div>
    <el-dialog title="编辑检索式" :visible.sync="dialogVisible" width="800px" :before-close="handleClose" :close-on-click-modal="false" append-to-body>
      <div>
        <el-form :model="form" label-width="120px" size="small" label-position="right">
          <el-form-item label="检索范围：">
            <el-radio-group v-model="form.dbType">
              <el-radio label="CN">中国专利检索</el-radio>
              <el-radio label="WD">世界专利检索</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="检索式：">
            <el-input type="textarea" v-model="form.conditions"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="submit" :loading="btnLoading">检 索</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  components: {},
  props:['importData'],
  data() {
    return {
      height:document.documentElement.clientHeight,
        tableData:[],
        multipleSelection:[],
        loading:false,
        dialogVisible:false,
        btnLoading:false,
        queryParams:{
          size:10,
          current:1,
          total:0
        },
        dbType:{
          'CN':'中国专利检索',
          'WD':'世界专利检索'
        },
        form:{},
    };
  },
  watch: {},
  computed: {},
  created() {},
  mounted() {
    this.getList()
  },
  methods: {
    getRowKeys(row) {
      return row.id
    },
    open(){
      this.getList()
    },
    handleSelectionChange(val){
        this.multipleSelection = val
    },
    //切换页数
    async handleCurrentChange(val) {
      this.queryParams.current = val;
      await this.getList();
    },
    //查询检索历史
    getList(){
      this.loading = true
      this.$api.queryRetrieveRecord(this.queryParams).then(response=>{
        if(response.code == 200){
          this.tableData = response.data.records
          this.queryParams.total = response.data.total
          this.loading = false
        }
      }).catch(error=>{
        this.tableData = []
        this.loading = false
      })
    },
    //打开编辑检索历史弹窗
    editSearch(row){
      this.form = {
        dbType:row.dbType,
        id:row.id,
        conditions:row.conditions,
      }
      this.dialogVisible = true
    },
    //关闭编辑检索历史弹窗
    handleClose(){
      this.form = {}
      this.dialogVisible = false
    },
    //提交编辑内容
    submit(){
      // this.btnLoading = true
      // this.$api.updateRetrieveRecord(this.form).then(response=>{
      //   if(response.code == 200){
      //     this.$message.success('编辑成功')
      //     this.btnLoading = false
      //     this.handleClose()
      //     this.getList()
      //   }
      // }).catch(error=>{

      // })
      var a = {
        condition:this.form.conditions,
        DBType:this.form.dbType,
        importToId:this.importData.importToId,
        retrieveRecordId:null
      }
      const router = this.$router.resolve({
                path: '/searchResult',
                query: {
                  data:JSON.stringify(a)
                }
            })
            // this.$s.setSession('retrieveRecordId',0)
            this.handleClose()
            this.getList()
            window.open(router.href, '_blank');
    },
    //执行检索历史
    executeSearch(row){
      var a = {
        condition:row.conditions,
        DBType:row.dbType,
        importToId:this.importData.importToId,
        retrieveRecordId:null
      }
      const router = this.$router.resolve({
                path: '/searchResult',
                query: {
                  data:JSON.stringify(a)
                }
            })
            // this.$s.setSession('retrieveRecordId',row.id)
            window.open(router.href, '_blank');
    },
    //检索历史id加入到数组
    delSearch(row){
      var a = [row.id]
      this.deletes(a)
    },
    //删除检索历史
    deletes(val){
      var arr = {
        isAll:false
      }
      if(val){
        arr.ids = val
      }else{
        if(this.multipleSelection.length>0){
          arr.ids = this.multipleSelection.map(item=>{return item.id})
        }else{
          arr.isAll = true
          arr.ids = []
        }
      }
      this.$confirm('确认删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = true
        this.$api.deleteRetrieveRecord(arr).then(response=>{
          if(response.code == 200){
            this.$message.success('删除成功')
            if(this.multipleSelection.length>0){
              this.multipleSelection = []
              this.$refs.table.clearSelection();
            }
            
            this.loading = false
            this.getList()
          }
        }).catch(error=>{
          this.loading = false;
        })
      })
        
    }
  },
};
</script>
<style lang="scss" scoped>
.time{
  p{
    margin:0;
  }
}
.icon{
  i{
    font-size:20px;
  }
}
.foot{
  margin-top:10px;
  display: flex;
  justify-content: center;
}
</style>