<template>
  <div>
    <!-- 工具栏 -->
    <el-toolbar v-show="!databaseModal">
      <el-button @click="addClick" priv="Gather.OuterData.DatabaseAdd">
        <i class="fa fa-plus"></i>新建</el-button>
      <!-- <el-button @click="deleteClick(selectedRows)" :disabled="selectedRows.length < 1">
        <i class="fa fa-remove"></i>删除</el-button> -->
    </el-toolbar>

    <el-list-view v-show="!databaseModal" @selection-change="onSelectionChange" :data="databaseData" data-read-url="/ui/database/binddata"
      :page-size="10" ref="databaseTable">
      <template slot-scope="row">
        <div class="panel-card">
          <el-row>
            <el-button class="el-button table-title-button el-button--text" priv="Gather.OuterData.DatabaseEdit" @click.stop="editClick(row)">{{row.name}}</el-button>
            <span class="gray">数据库名称：{{row.DBName}}</span>
          </el-row>
          <el-row>
            <el-col :span="5">
              <span>服务器类型：</span>
              <em>{{row.serverTypeName}}</em>
            </el-col>
            <el-col :span="5">
              <span>服务器地址：</span>
              <em>{{row.address}}</em>
            </el-col>
            <el-col :span="7">
              <span>添加时间：</span>
              <em>{{row.addTime | fixDateTime}}</em>
            </el-col>
            <el-col :span="7">
              <span>备注：</span>
              <em>{{row.memo || '无'}}</em>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24" class="tar">
              <el-button @click.stop="editClick(row)" type="text" title="编辑" priv="Gather.OuterData.DatabaseEdit">
                <i class="fa fa-edit"></i>编辑</el-button>
              <el-button @click.stop="deleteClick([row])" type="text" title="删除" priv="Gather.OuterData.DatabaseDelete">
                <i class="fa fa-remove"></i>删除</el-button>
            </el-col>
          </el-row>
        </div>
      </template>
    </el-list-view>
  </div>
</template>

<script>
import util from '@src/common/util.js'
export default {
  props: {
    fromDialog: {
      type: Boolean,
      default: false
    }
  },
  filters: {
    fixDateTime: function(val) {
      return util.formatDate(val, 'yyyy-MM-dd HH:mm')
    }
  },
  data() {
    return {
      ID: 0,
      selectedRows: [], // 选中的数据库列表行
      databaseModal: false, // 控制数据库表单弹框
      databaseData: [],
      tmpDatabase: {// 数据库表单对象
        port: '',
        serverType: ''
      }
    }
  },
  methods: {
    // 外部数据库连接表格改变选中行触发事件
    onSelectionChange(selection) {
      this.selectedRows = selection
      this.$emit('selection-change', selection)
    },
    // 添加外部数据库数据
    addClick() {
      this.$router.push({path: `/datachannel/outerData/databaseForm/new`})
    },
    // 编辑外部数据库数据
    editClick(selectedRow) {
      this.ID = selectedRow.ID
      this.$router.push({path: `/datachannel/outerData/databaseForm/${this.ID}`})
    },
    async dialogOkHandler(dataModel) {
      // 数据库模态框关闭
      if (this.editMode === 1) {
        this.getDatabaseData()
      } else if (this.editMode === 2) {
        let index = this.databaseData.findIndex(val => val.ID === dataModel.ID)
        this.databaseData = [...this.databaseData.slice(0, index), Object.assign({}, dataModel), ...this.databaseData.slice(index + 1)]
      }
    },
    // 加载外部数据库数据
    getDatabaseData() {
      this.$refs.databaseTable.getData()
    },
    // 删除外部数据库数据
    async deleteClick(selectedRows) {
      try {
        await this.$confirm('确定删除吗，删除后无法恢复。是否继续删除？', '删除确认', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
      } catch (e) {
        return
      }
      let rowIds = []
      selectedRows.forEach(function (row) {
        rowIds.push(row.ID)
      })
      let ids = rowIds.join(',')
      let res = await axios.delete(`/ui/database/${ids}`)
      selectedRows = []
      util.showResponseMessage(res.data)
      if (res.data.status === 1) {
        this.getDatabaseData()
      }
    }
  }
}
</script>
