<template>
  <div>
    <el-toolbar v-show="!dataSetModal">
      <el-button @click="addClick" priv="Gather.OuterData.DataSetAdd">
        <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="!dataSetModal" @selection-change="onSelectionChange" :data="dataSetData" data-read-url="/ui/dataset"
      :page-size="10" ref="dataSetTable">
      <template slot-scope="row">
        <div class="panel-card">
          <el-row>
            <el-button class="el-button table-title-button el-button--text" priv="Gather.OuterData.DataSetEdit" @click.stop="editClick(row)">{{row.name}}</el-button>
            <span class="gray">代码：{{row.code}}</span>
          </el-row>
          <el-row>
            <el-col :span="6">
              <span>数据库名称：</span>
              <em>{{row.DBIDName || '无'}}</em>
            </el-col>
            <el-col :span="5">
              <span>添加人：</span>
              <em>{{row.addUser}}</em>
            </el-col>
            <el-col :span="7">
              <span>添加时间：</span>
              <em>{{row.addTime | fixDateTime}}</em>
            </el-col>
            <el-col :span="6">
              <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.DataSetEdit">
                <i class="fa fa-edit"></i>编辑</el-button>
              <el-button @click.stop="deleteClick([row])" type="text" title="删除" priv="Gather.OuterData.DataSetDelete">
                <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 {
  filters: {
    fixDateTime: function(val) {
      return util.formatDate(val, 'yyyy-MM-dd HH:mm')
    }
  },
  data() {
    return {
      dataSetData: [],
      selectedRows: [],
      dataSetModal: false,
      tmpDataSet: {
        // 外部数据集
        name: '',
        code: '',
        DBID: '',
        content: '',
        memo: ''
      }
    }
  },
  methods: {
    onSelectionChange(selection) {
      // 数据集表格行选中事件
      this.selectedRows = selection
    },

    addClick() {
      // 数据集添加
      this.$router.push({path: `/datachannel/outerData/dataSetForm/new`})
    },

    editClick(selectedRow) {
      // 数据集编辑
      this.ID = selectedRow.ID
      this.$router.push({path: `/datachannel/outerData/dataSetForm/${this.ID}`})
    },

    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/dataset/${ids}`)
      selectedRows = []
      util.showResponseMessage(res.data)
      if (res.data.status === 1) {
        this.getDataSetData()
      }
    },

    async dialogOkHandler(dataModel) {
      // 数据集模态框关闭
      if (this.editMode === 1) {
        this.getDataSetData()
      } else if (this.editMode === 2) {
        let index = this.dataSetData.findIndex(val => val.ID === dataModel.ID)
        this.dataSetData = [...this.dataSetData.slice(0, index), Object.assign({}, dataModel), ...this.dataSetData.slice(index + 1)]
      }
    },

    // 加载外部数据集数据
    getDataSetData() {
      this.$refs.dataSetTable.getData()
    }
  }
}
</script>
