<template>
  <div>
    <PageTable ref="serverTable" :resource="dataList" :columnsFn="allColumns">
      <div slot="table-bar">
        <Button type="ghost" icon="plus-round" size="small" @click="add()">{{$t('module.datasource.createDatasource')}}</Button>
      </div>
    </PageTable>
  </div>
</template>

<script>
import DataSourceListPage from "./DataSourceList.vue";
import DataSourceNew from './DataSourceNew.vue'
export default {
  name: 'datasource-monitor',
  data() {
    return {
      last: "",
      dataList: []
    };
  },

  mounted: function () {
    this.search();
  },
  methods: {
    allColumns(){
      return [
        {
          title: this.$t('common.operating'),
          align: "center",
          width: 150,
          render: (h, params) => {
            return h("RowTools", {
              props: {
                data: [
                  {
                    type: "button",
                    text: this.$t('common.delete'),
                    handle: () => {
                      new $confirm(this.$t('module.datasource.confirmDelete'), this).then(() => {
                        $store.dispatch('DeleteDataSource', { serverIds: params.row.serverId }).then((res) => {
                          if (!res.success) {
                            this.$Message.warning({
                              content: res.msg,
                              duration: 2
                            });
                            return;
                          }
                          this.$Message.success({
                            content: this.$t('module.datasource.deleteSuccess'),
                            duration: 2
                          });
                          this.search();
                        })
                      })
                    }
                  },
                  {
                    type: "button",
                    text: this.$t('module.datasource.datasourceList'),
                    handle: () => {
                      let now = Date.now();
                      if (now - this.last > 1500) {
                        new this.$sidelipPage(DataSourceListPage, {
                          props: {
                            ipAddress: params.row.ipAddress,
                            jmxPort: params.row.jmxPort
                          }
                        }
                        );
                        this.last = now;
                      }                    }
                  }
                ]
              }
            });
          }
        },
        {
          title: this.$t('module.datasource.serverName'),
          key: "serverName",
          align: 'center',
          width: 170
        },
        {
          title: this.$t('module.datasource.ipAddress'),
          key: "ipAddress",
          width: 170,
          align: 'center',
        },
        {
          title: this.$t('module.datasource.httpPort'),
          key: "httpPort",
          align: 'center',
          width: 170
        },
        {
          title: this.$t('module.datasource.jmxPort'),
          key: "jmxPort",
          align: 'center',
          width: 170
        },
        {
          title: this.$t('module.datasource.serverDesc'),
          key: "serverDesc",
          align: 'center',
          width: 170
        }
      ]
    },
    add() {
      new this.$pageModal(DataSourceNew, {

      }, () => {
        this.search();
      })
    },
    search() {
      this.$store.dispatch("QueryServerList").then(response => {
        if (response.statusCode == "0") {
          this.dataList = response.dataResult;
          this.$refs["serverTable"].refresh();
        } else {
          this.$Message.error(response.msg);
        }
      });
    }
  },

};
</script>
