<template>
  <div class="layout-no-cols right-list-toolbar">
  <el-toolbar>
    <el-col :span="12">
      <el-button @click="add" priv="ContentCore.SiteMenu.Add">
        <i class="fa fa-plus" aria-hidden="true"></i>新建
      </el-button>
      <el-button @click="importSiteVisible=true" priv="ContentCore.SiteMenu.Import">
        <i class="fa fa-globe"></i>导入站点
      </el-button>
    </el-col>
    <el-col :span="12" class="search-box-r tool-search-box-r">
      <el-input v-model="queryName" @keyup.enter.native="search" placeholder="请输入名称" class="search-bar-algin-toolbar"></el-input>
      <span class="search-icon"><i class="fa fa-search" @click="search" title="查询"></i></span>
    </el-col>
  </el-toolbar>
    <tree-table :data="sites" :expanded-level="2" row-key="ID">
      <tree-table-column label="站点名称" show-overflow-tooltip>
        <template slot-scope="scope" v-if="scope.row.ID">
          <a href="javascript:void(0)" @click.stop="gotoDetailPage(scope.row.ID)">
            <i :class="scope.row.icon || 'fa fa-home'" aria-hidden="true"></i> {{scope.row.name}}
          </a>
        </template>
      </tree-table-column>
      <el-table-column prop="ID" label="站点ID" show-overflow-tooltip width="80"></el-table-column>
      <el-table-column prop="branchName" label="所属机构" show-overflow-tooltip width="150"></el-table-column>
      <el-table-column prop="path" label="站点目录名" show-overflow-tooltip width="150"></el-table-column>
      <el-table-column label="操作" align="right" show-overflow-tooltip width="150">
        <template slot-scope="scope" v-if="scope.row.ID">
          <el-button class="table-operate-icon" @click.stop="handlePublishIndex(scope.row)"
            type="text" title="发布首页" :priv="`com.zving.cms.Site.Publish.${scope.row.ID}`">
            <i class="fa fa-paper-plane f16"></i></el-button>
          <el-button class="table-operate-icon" @click.stop="addSimilar(scope.row.ID)"
            type="text" title="类似创建" priv="ContentCore.SiteMenu.SimilarAdd">
            <i class="fa fa-plus f16"></i></el-button>
          <el-button class="table-operate-icon" @click.stop="preview(scope.row)" type="text" title="预览">
            <i class="fa fa-search f16"></i></el-button>
          <el-button class="table-operate-icon" @click.stop="del(scope.row.ID)"
            type="text" title="删除" :priv="`com.zving.cms.Site.Delete.${scope.row.ID}`">
            <i class="fa fa-remove f16"></i></el-button>
        </template>
      </el-table-column>
    </tree-table>
    <!--导入站点-->
    <site-import-dialog :show.sync="importSiteVisible" @callback="siteImportCallback"></site-import-dialog>
  </div>
</template>

<script>
import util from '@src/common/util.js'
import TreeTable from '@src/components/treeTable/TreeTable.vue'
import TreeTableColumn from '@src/components/treeTable/TreeTableColumn.vue'
import siteImportDialog from './components/SiteImportDialog.vue'
export default {
  components: {
    'site-import-dialog': siteImportDialog,
    'tree-table': TreeTable,
    'tree-table-column': TreeTableColumn
  },
  data() {
    return {
      importSiteVisible: false,
      queryName: '',
      sites: []
    }
  },
  methods: {
    async siteImportCallback(taskID) {
      try {
        await util.showProgress(taskID, '正在导入 . . .')
        this.getSiteDatas()
      } catch (e) {}
    },
    gotoDetailPage(ID) {
      this.$router.push(`${this.$route.path}/${ID}`)
    },
    addSimilar(ID) {
      this.$router.push(`${this.$route.path}/new/${ID}`)
    },
    add() {
      this.$router.push(`${this.$route.path}/new`)
    },
    preview(row) {
      if (!row || !row.ID) {
        return
      }
      window.open(`preview.html?id=${row.ID}&type=site`)
    },
    async del(id) {
      try {
        await this.$confirm('您确认要删除站点以及下级站点吗 ？ 删除后部分数据和文件将无法恢复', '系统提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        let res = await axios.delete(`/ui/sites/${id}`)
        if (res.data.status === 1) {
          await util.showProgress(res.data.taskID, '正在删除. . .')
          this.getSiteDatas()
        } else {
          util.showResponseMessage(res.data)
        }
      } catch (e) {

      }
    },
    search() {
      this.getSiteDatas()
    },
    async getSiteDatas() {
      let res = await axios.get('/ui/sites', {
        params: {
          name: this.queryName.trim(),
          random: (Math.random() + '').replace('0.', '')
        }
      })
      this.sites = res.data.data
    },
    async handlePublishIndex (row) {
      let siteID = row.ID
      if (!siteID) {
        this.$alert('请先选择一个站点！', '提示', {
          type: 'info'
        })
        return
      }
      try {
        await this.$confirm('本次生成的静态页面将覆盖原有页面，确认生成所有静态页面吗？', '发布首页', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        let res = await axios.put(`/ui/sites/${siteID}/publishindex`)
        util.showResponseMessage(res.data)
        if (res.data.status === 1) {
          await util.showProgress(res.data.taskID, '正在发布首页 . . .')
        }
      } catch (e) {

      }
    }
  },
  async mounted() {
    this.getSiteDatas()
  }
}
</script>
