<template>
  <el-dialog :visible.sync="visible" :title="$t('btns.index_manager')">
    <el-button size="small" @click="optimization">优化</el-button>

    <el-table
      ref="multipleTable"
      v-loading="loading"
      :element-loading-text="$t('home.loading')"
      element-loading-spinner="el-icon-loading"
      :data="data"
      tooltip-effect="dark"
      style="width: 100%"
      height="450px"
      size='small'
      >
      <template slot="empty">
        <p>{{dataText}}</p>
       </template>
      <el-table-column
        prop="name"
        :label="$t('label.form_name')"
        >
      </el-table-column>
      <el-table-column
        prop="indexTotal"
        :label="$t('label.index_num')"
        >
      </el-table-column>
      <el-table-column
        prop="indexColumnNames"
        :label="$t('label.index_field_name')"
        >
      </el-table-column>
      <el-table-column
        :label="$t('label.suggest')"
        >
        <template slot-scope="scope">
          <span v-html="scope.row.suggestMsg"></span>
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
</template>
<script>
import { getIndexManager,optimization} from "@/service/AdvancedToolAPI.js";
export default {
  name: "IndexManagerList",
  props:['dialogvisible','editDataSourceId'],
  data() {
    return {
      data:[],
      loading:true,
      dataText: "", // 数据还未请求回来的显示的内容
    }
  },
  computed: {
    visible: {
      get() {
        return this.dialogvisible;
      },
      set(val) {
        this.$emit("update:dialogvisible", val);
      }
    }
  },
  created(){
    this.getData();
  },
  mounted(){
    
  },
  methods: {
    //优化索引
    optimization(){
      this.loading=true;
      let appId = sessionStorage.getItem("appId");
      optimization(appId,{
        onSucess: response => {
          if (response.data.errcode == 0) {
            this.loading=false;
            this.$message({
              message: this.$t('msg.optimization_ss'),
              type: 'success'
            });
          }
        }
      })
    },
    //获取索引数据
    async getData(){
      let appId = sessionStorage.getItem("appId");
      const response = await getIndexManager(this.editDataSourceId,appId)
      if(response.data.errcode == 0) {
        this.loading=false;
        this.data=response.data.data;
        if (this.data.length === 0) {
          this.dataText = this.$t('label.no_data');
        }
      }else{
        this.loading=false;
      }
    },
  },
}
</script>