<template>
  <div class="layout-no-cols right-list-toolbar right-list-panel-card">
    <el-row>
      <el-col :span="14">
        <el-toolbar>
          <el-button @click="addMetaClickHandler" priv="Platform.Metadata.Add">
            <i class="fa fa-plus"></i>新建元数据
          </el-button>
          <el-button v-if="false" :disabled="selectedRows.length === 0" @click="deleteMetaClickHandler" priv="Platform.Metadata.Delete">
            <i class="fa fa-remove"></i>删除
          </el-button>
        </el-toolbar>
      </el-col>
      <el-col :span="10"   class="dropdown-search-box-r search-bar-algin-toolbar">
        <el-input v-model="search.key" placeholder="请输入关键字" size="medium" @keyup.enter.native="searchClickHandler">
          <el-select placeholder="请选择类型" clearable slot="prepend" v-model="search.typeId" @change="searchClickHandler">
            <el-option v-for="item in metadataTypes" :key="item.ID" :label="item.name" :value="item.ID">
            </el-option>
          </el-select>
        </el-input>
        <span class="search-icon"><i class="fa fa-search" @click="searchClickHandler" title="查询"></i></span>
      </el-col>
    </el-row>
    <el-list-view :data="metadata" ref="table" :data-read-url="metadataURL"  @selection-change="onSelectionChange" :page-size="10">
      <template slot-scope="row">
        <div class="panel-card">
          <el-row> <a class="list-card-title" href="javascript:void(0)" @click.stop="gotoDetailPage(row)">{{row.name}}</a> </el-row>
          <el-row>
            <el-col :span="7"><span>代码：</span><em>{{row.code}}</em></el-col>
            <el-col :span="7"><span>类型：</span>
              <em>{{metadataTypes && metadataTypes.length ? metadataTypes.filter(val=>val.ID===row.ownerType)[0].name:''}}</em>
            </el-col>
            <el-col :span="10" class="tar">
              <el-button @click.stop="cloneMetaClickHandler(row)" priv="Platform.Metadata.Add" type="text" title="类似创建">
                <i class="fa fa-plus"></i>类似创建
              </el-button>
              <el-button @click.stop="gotoDetailPage(row)" priv="Platform.Metadata.Save" type="text" title="编辑">
                <i class="fa fa-edit"></i>编辑
              </el-button>
              <el-button @click.stop="deleteMetaClickHandler(row)" priv="Platform.Metadata.Delete" type="text" title="删除">
                <i class="fa fa-times"></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: {
    ID: {
      type: [String, Number],
      default: 0
    }
  },
  data() {
    return {
      metadata: [], //  元数据表格数据
      selectedRows: [], //  选中的行
      metadataTypes: [], //  元数据类型
      search: {
        // 查询条件
        typeId: null,
        key: ''
      }
    }
  },
  created() {
    this.loadMetadataTypes()
  },
  methods: {
    // 加载元数据类型
    async loadMetadataTypes() {
      let res = await axios.get('/ui/metamodels/types')
      this.metadataTypes = res.data.data
    },
    // 加载元数据表格
    metadataURL() {
      return [
        '/ui/metamodels',
        {
          params: {
            typeId: this.search.typeId,
            key: encodeURIComponent(this.search.key)
          }
        }
      ]
    },
    // 查询点击事件
    searchClickHandler() {
      this.$refs.table.getData()
    },
    onSelectionChange(selection) {
      this.selectedRows = selection
    },
    // 点击名称进入详情页
    gotoDetailPage(row) {
      this.$router.push({path: `/platform/metadata/${row.ID}/info`})
    },
    // 删除元数据
    async deleteMetaClickHandler(row) {
      let ids = row && row.ID ? [row.ID] : util.getSelectedIDs(this.selectedRows)
      if (!ids || !ids.length) {
        return
      }
      try {
        await this.$confirm('确定删除吗？删除后无法恢复。是否继续删除？', '删除确认', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        let res = await axios.delete(`/ui/metamodels/${ids.join()}`)
        util.showResponseMessage(res.data)
        if (res.data.status === 1) {
          this.metadata = this.metadata.filter(val => !ids.includes(val.ID))
          this.selectedRows = []
        }
      } catch (e) {

      }
    },
    // 类似创建元数据
    cloneMetaClickHandler(row) {
      if (!row.ID) {
        util.showErrorMessageBox('数据异常，请重新尝试！')
        return
      }
      this.$router.push(`/platform/metadata/${row.ID}`)
    },
    // 新建元数据
    addMetaClickHandler() {
      this.$router.push(`/platform/metadata/new`)
    }
  }
}
</script>
<style>
.search-bar {
  padding: 5px 0;
}
</style>
