<!--
 * @Descripttion: 当前组件信息
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2018-10-10 14:44:45
 * @LastEditors: 无尘
 * @LastEditTime: 2020-12-04 16:25:00
 -->
<template>
  <div class="unreview-wrap common-set-wrap">
    <div class="right-content">
      <div class="right-box" style="min-height: calc(100vh - 126px)">
        <div class="m-b-20 flex flex-space-between">
          <div class="flex">
            <div class="search-items">
              <p class="search-items-label">是否处理：</p>
              <el-select style="width:140px;" v-model="searchParams.dealFlag" placeholder="请选择是否处理" clearable @change="searchPage">
                <el-option label="是" :value="1"></el-option>
                <el-option label="否" :value="0"></el-option>
                <el-option label="无" :value="-1"></el-option>
              </el-select>
            </div>
            <div class="search-items">
              <p class="search-items-label">库地址：</p>
              <el-select style="width:140px;" v-model="searchParams.dataSourceId" placeholder="请选择库地址" clearable>
                <el-option v-for="item in sqlUrlOpts" :label="item.name" :value="item.key" :key="item.key"></el-option>
              </el-select>
            </div>
            <div class="search-items">
              <p class="search-items-label">库名：</p>
              <el-input style="width:140px;" placeholder="请输入库名" v-model="searchParams.scame" clearable> </el-input>
            </div>
            <div class="search-items">
              <p class="search-items-label">表名：</p>
              <el-input style="width:140px;" placeholder="请输入表名" v-model="searchParams.tableName" clearable> </el-input>
            </div>
            <el-button type="primary" @click="getTableList">筛选</el-button>
          </div>
          <el-button type="primary" @click="download">下载</el-button>
        </div>
        <div class="reviewed-body-content">
          <el-table ref="multipleTable" v-loading="loading" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column label="uuid" prop="uuid" show-overflow-tooltip></el-table-column>
            <el-table-column label="时间" prop="updateTime" show-overflow-tooltip></el-table-column>
            <el-table-column label="sql内容" prop="sqlContent" min-width="200">
              <template slot-scope="scope">
                <el-tooltip class="item" effect="dark" :content="scope.row.sqlContent" placement="top"
                  ><span class="ellipsis">{{ scope.row.sqlContent }}</span>
                </el-tooltip>
                <el-tooltip class="item" effect="dark" content="复制" placement="top"><i class="copy el-icon-copy-document" @click="copy(scope.row.sqlContent)"></i> </el-tooltip>
                <!-- el-icon-copy-document -->
              </template>
            </el-table-column>
            <el-table-column label="处理后的索引" prop="useIndex" show-overflow-tooltip></el-table-column>
            <el-table-column label="是否处理索引" width="120" prop="sureFlag" show-overflow-tooltip>
              <template slot-scope="scope">
                {{ scope.row.sureFlag === 0 ? '否' : '是' }}
              </template>
            </el-table-column>
            <el-table-column label="可能的索引" prop="sureUseIndex" show-overflow-tooltip></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="text" @click="openDailog(scope.row)">设置索引</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <!-- 设置索引 -->
    <el-dialog title="设置索引" :visible.sync="showDailog" width="600px" :before-close="handleClose">
      <div class="">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="索引" prop="moudleName">
            <el-input v-model="ruleForm.indexName" placeholder="请输入模块名称"></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="submitForm('ruleForm')">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import errMsg from '@/common/js/error';
// import { _debounce } from '@/common/js/public';
import { getRequest } from '@/api/api';
export default {
  name: 'unreview',
  data() {
    return {
      wxEnterpriseId: localStorage.getItem('userInfos') ? JSON.parse(localStorage.getItem('userInfos')).wxEnterpriseId : '',
      loading: false,
      tableData: [],
      sqlUrlOpts: [],
      searchParams: {
        tableName: '', // 表名 必填
        dataSourceId: '', // 库地址 必填
        scame: '', // 库名 必填
        dealFlag: -1 // 是否处理索引默认-1 1已处理  0未处理
      },
      showDailog: false,
      ruleForm: {
        indexName: '',
        uuid: ''
      },
      rules: {
        indexName: [{ required: true, message: '请输入索引', trigger: 'blur' }]
      }
    };
  },
  methods: {
    /**
     * 弹窗操作
     */
    openDailog(item) {
      const that = this;
      console.log(item);
      that.ruleForm = {
        indexName: item.useIndex || item.sureUseIndex || '',
        uuid: item.uuid
      };
      that.showDailog = true;
    },
    handleClose() {
      const that = this;
      that.showDailog = false;
      that.$refs['ruleForm'].resetFields();
    },
    download() {
      const that = this;
      that.loading = true;
      let para = { ...this.searchParams };
      getRequest('/redis-limiter-web/sql/sql-download', para)
        .then(res => {
          let resData = res.data;
          that.loading = false;
          if (resData.errorCode == 1) {
            return;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        })
        .finally(_ => (that.loading = false));
    },
    submitForm() {
      const that = this;
      let para = { ...this.ruleForm };
      getRequest('/redis-limiter-web/sql/set-index', para)
        .then(res => {
          let resData = res.data;
          errMsg.errorMsg(resData);
          that.handleClose();
          that.getTableList();
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    },
    searchPage() {
      const { tableName, dataSourceId, scame } = this.searchParams;
      if (tableName && dataSourceId && scame) this.getTableList();
    },
    /**
     * 获取列表数据
     */
    getTableList() {
      const that = this;
      that.loading = true;
      let para = { ...this.searchParams };
      getRequest('/redis-limiter-web/sql/sql-index-check', para)
        .then(res => {
          let resData = res.data;
          that.loading = false;
          if (resData.errorCode == 1) {
            that.tableData = resData.result || [];
            return;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        })
        .finally(_ => (that.loading = false));
    },
    /**
     * 获取sql地址列表
     */
    getSqlList() {
      const that = this;
      getRequest('/redis-limiter-web/sql/jdbc-url-list', {})
        .then(res => {
          let resData = res.data;
          that.loading = false;
          if (resData.errorCode == 1) {
            that.sqlUrlOpts = resData.result || [];
            return;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.loading = false;
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    },
    copy(value) {
      let newInput = document.createElement('input');
      newInput.value = value;
      document.body.appendChild(newInput);
      newInput.select();
      document.execCommand('Copy');
      newInput.remove();
      this.$message({
        message: '复制成功',
        type: 'success'
      });
    }
  },
  mounted() {
    const that = this;
    that.$emit('showTab', 2);
    that.getSqlList();
  },
  components: {}
};
</script>
<style lang="scss" scoped>
.search-items {
  display: flex;
  align-items: center;
  margin-right: 10px;
  .search-items-label {
    font-size: 14px;
    color: #303133;
  }
}
.ellipsis {
  display: inline-block;
  width: 80%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.copy.el-icon-copy-document {
  cursor: pointer;
  &:hover {
    color: #2f54ed;
  }
}
</style>
