<template>
  <div>
    <PageTable ref="dataSourceTable" :resource="dataList" :columnsFn="allColumns" >
    </PageTable>
  </div>
</template>

<script>
import DataSourceDetailPage from "./DataSourceDetail.vue";
import ConnectionListPage from "./ConnectionList.vue";

export default {

  props: {
    ipAddress: {
      type: String,
      default() {
        return "";
      }
    },
    jmxPort: {
      type: String,
      default() {
        return "";
      }
    }
  },

  data() {
    return {
      last:'',
      dataList: [],

      serverInfo: {
        ipAddress: this.ipAddress,
        jmxPort: this.jmxPort
      }
    };
  },

  mounted: function () {
    this.search();
  },

  methods: {
    allColumns() {
       return [
        {
          title: this.$t('module.datasource.operate'),
          align: "center",
          width: 120,
          // fixed: 'right',
          render: (h, params) => {
            return h("RowTools", {
              props: {
                data: [
                  {
                    type: "button",
                    text: this.$t('module.datasource.detail'),
                    handle: () => {
                      let now = Date.now();
                      if(now-this.last > 1500){
                      new this.$sidelipPage(DataSourceDetailPage, {
                        props: {
                          ipAddress: this.ipAddress,
                          jmxPort: this.jmxPort,
                          Identity: params.row.Identity
                        }
                      });
                      this.last = now;
                     }
                    }
                  },
                  {
                    type: "button",
                    text: this.$t('module.datasource.connectList'),
                    handle: () => {
                      let now = Date.now();
                      if(now-this.last > 1500){
                      new this.$sidelipPage(ConnectionListPage, {
                        props: {
                          ipAddress: this.ipAddress,
                          jmxPort: this.jmxPort,
                          Identity: params.row.Identity
                        }
                       }
                      );
                       this.last = now;
                     }
                    }
                  }
                ]
              }
            });
          }
        },
        {
          title: this.$t('module.datasource.datasourceId'),
          key: "Identity",
          // fixed: 'left',
          align: 'center',
          width: 170
        },
        {
          title: this.$t('module.datasource.datasourceName'),
          key: "Name",
          // fixed: 'left',
          align: 'center',
          width: 170
        },
        {
          title: this.$t('module.datasource.datasourceType'),
          key: "DbType",
          align: "center",
          width: 170
        },
        {
          title: this.$t('module.datasource.userName'),
          key: "UserName",
          align: 'center',
          width: 170
        },
        {
          title: this.$t('module.datasource.URL'),
          key: "URL",
          align: 'center',
          width: 170
        }
      ]
    },
    search() {
      $store.dispatch("QueryDataSourceList", this.serverInfo).then(response => {
        if (response.statusCode == "0") {
          this.dataList = response.dataResult;
          this.$refs["dataSourceTable"].refresh();
        } else {
          this.$Message.error(response.msg);
        }
      });
    }
  }
};
</script>
