<template>
  <div class="layout-no-flex plugin-list scroll right-detail-tabs">
    <el-toolbar>
      <el-button @click="goBack" type="primary" size="medium" round class="shadow-primary">
        <i class="fa fa-chevron-left"></i> 返回上页
      </el-button>
    </el-toolbar>
    <div class="layout-col-detail">
      <el-tabs class="tabs-wrap" :value="defaultTabName" @tab-click="tabClick" v-loading="tabLoading">
        <el-tab-pane name="info">
          <span slot="label">
            <i class="fa fa-wpforms"></i>基本信息
          </span>
          <div class="padding-top-bottom">
            <div class="panel-fieldset">
              <h4 class="panel-legend">基本信息</h4>
              <el-table :data="info">
                <el-table-column prop="ID" label="ID"></el-table-column>
                <el-table-column prop="name" label="名称"></el-table-column>
                <el-table-column prop="statusName" label="状态"></el-table-column>
                <el-table-column prop="version" label="版本"></el-table-column>
                <el-table-column prop="provider" label="供应商"></el-table-column>
                <el-table-column prop="author" label="作者"></el-table-column>
                <el-table-column prop="description" label="备注"></el-table-column>
              </el-table>
            </div>
            <div class="panel-fieldset">
              <h4 class="panel-legend">依赖的插件</h4>
              <el-table :data="dependPlugin">
                <el-table-column width="68" type="index" label="序列"></el-table-column>
                <el-table-column prop="ID" label="ID"></el-table-column>
                <el-table-column prop="name" label="名称"></el-table-column>
                <el-table-column prop="version" label="版本"></el-table-column>
              </el-table>
            </div>
            <div class="panel-fieldset">
              <h4 class="panel-legend">直接或间接依赖于本插件的插件</h4>
              <el-table :data="beDependPlugin">
                <el-table-column width="68" type="index" label="序列"></el-table-column>
                <el-table-column prop="ID" label="ID"></el-table-column>
                <el-table-column prop="name" label="名称"></el-table-column>
                <el-table-column prop="version" label="版本"></el-table-column>
              </el-table>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane name="extend">
          <span slot="label">
            <i class="el-icon-time"></i>扩展
          </span>
          <div class="padding-top-bottom">
            <el-collapse :value="['1','2','3','4']">
              <el-collapse-item title="扩展服务列表" name="1">

                <el-table ref="ccc" fit :data="extendData.extendServices">
                  <el-table-column type="index" width="60"></el-table-column>
                  <el-table-column prop="ID" label="ID"></el-table-column>
                  <el-table-column prop="description" label="Description"></el-table-column>
                </el-table>

              </el-collapse-item>
              <el-collapse-item title=" 扩展项列表" name="2">
                <el-table :data="extendData.extendItems">
                  <el-table-column type="index" width="60"></el-table-column>
                  <el-table-column prop="ID" label="ID"></el-table-column>
                  <el-table-column prop="description" label="Description"></el-table-column>
                </el-table>
              </el-collapse-item>
              <el-collapse-item title=" 扩展点列表" name="3">
                <el-table :data="extendData.extendPoints">
                  <el-table-column type="index" width="60"></el-table-column>
                  <el-table-column prop="ID" label="ID"></el-table-column>
                  <el-table-column prop="UIFlag" label="UIFlag"></el-table-column>
                  <el-table-column prop="description" label="Description"></el-table-column>
                </el-table>
              </el-collapse-item>
              <el-collapse-item title="扩展行为列表" name="4">
                <el-table :data="extendData.extendActions">
                  <el-table-column type="index" width="60"></el-table-column>
                  <el-table-column prop="ID" label="ID"></el-table-column>
                  <el-table-column prop="description" label="Description"></el-table-column>
                </el-table>
              </el-collapse-item>
            </el-collapse>
          </div>
        </el-tab-pane>
        <el-tab-pane name="menu">
          <span slot="label">
            <i class="el-icon-menu"></i>菜单
          </span>
          <div class="padding-vertical-max">
            <tree-grid :columns="menuColumns" :tree-structure="true" :data-source="extendMenus">
            </tree-grid>
          </div>
        </el-tab-pane>
        <el-tab-pane name="files">
          <span slot="label">
            <i class="el-icon-share"></i>文件列表
          </span>
          <div class="padding-top-bottom">
            <div class="panel-card">
              <el-tree serialNumberName="序号" :data="pluginFiles" :props="{children: 'children', label: 'name'}" :render-content="renderTreeContent" :default-expand-all="true"></el-tree>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import TreeGrid from '@src/components/TreeGrid.vue'
import util from '@src/common/util.js'

export default {
  components: {
    'tree-grid': TreeGrid
  },

  props: {
    ID: String
  },

  data() {
    return {
      currentItem: {},
      defaultTabName: 'info',
      dependPlugin: [],
      beDependPlugin: [],
      info: [],
      extendData: {
        extendServices: [],
        extendItems: [],
        extendPoints: [],
        extendActions: []
      },
      extendMenus: [],
      menuColumns: [
        {
          text: '菜单名称',
          dataIndex: 'name'
        },
        {
          text: 'ID',
          dataIndex: 'ID'
        },
        {
          text: 'URL',
          dataIndex: 'URL'
        }
      ],
      pluginFiles: [],
      tabLoading: false
    }
  },

  async created() {
    await this.init()
    this.tabClick({paneName: this.defaultTabName})
  },

  methods: {
    goBack() {
      this.$router.push({path: '/platform/plugin/'})
    },

    async init() {
      let res = await axios.get(`/ui/plugins/${this.ID}`)
      if (res.data.status !== 1) {
        util.showResponseMessage(res.data)
        return
      }
      this.currentItem = res.data.data
    },

    async statusChange(status, row) {
      let params = {
        ID: row.ID,
        status: status
      }
      let res = await axios.put('/ui/plugins/status', params)
      util.showResponseMessage(res.data)
      if (res.data.status === 1) {
        row.status = status
      }
    },

    async tabClick(tab) {
      const item = this.currentItem
      let name = tab.paneName
      this.defaultTabName = name

      if (!item.ID) {
        this.info = []
        this.dependPlugin = []
        this.beDependPlugin = []
        this.extendData = {}
        this.extendMenus = []
        this.pluginFiles = []
        return
      }

      this.tabLoading = true
      let res
      try {
        res = await axios.get('/ui/plugins')
      } catch (e) {
        this.tabLoading = false
        return
      }
      this.tabLoading = false
      let data = res.data.data
      let resItem = data.find(val => val.ID === item.ID)
      resItem && Object.assign(this.currentItem, resItem)

      this.info = [this.currentItem]
      this.dependPlugin = this.currentItem.requiredPlugins
      this.beDependPlugin = this.currentItem.deRequiredPlugins
      this.extendData = this.currentItem.extends
      this.extendMenus = this.currentItem.menus
      this.pluginFiles = this.currentItem.pluginFiles
    },

    renderTreeContent(h, { node }) {
      if (node.data.type === 'directory') {
        return h('span', { class: ['folder-node'], style: { verticalAlign: 'sub' } }, [
          h(
            'i',
            {
              class: {
                fa: true,
                'fa-folder': !node.expanded,
                'fa-folder-open': node.expanded
              }
            },
            ''
          ),
          h('span', {}, node.data.name)
        ])
      }

      return h(
        'span',
        {
          class: ['file-node'],
          style: {
            verticalAlign: 'sub'
          }
        },
        [
          h(
            'i',
            {
              class: ['fa', 'fa-file']
            },
            ''
          ),
          h('span', {}, node.data.name)
        ]
      )
    }
  }
}
</script>
<style>
  .ccc {
    color: #ccc;
  }

  .plugin-list tr.el-table__row.current-row {
    color: #28B06F;
  }

  .plugin-list tr.el-table__row.current-row a {
    color: #28B06F;
  }
</style>

<style scoped>
  .plugin-list button>span>i,
  li>i,
  span>i,
  h5>i {
    padding: 3px 5px;
  }

  .folder-node i {
    color: #2d8cf0;
    font-size: 14px;
  }

  .folder-node span {
    font-size: 14px;
  }

  .el-collapse-item {
    margin-bottom: 15px;
  }
</style>
