<template>
  <div class="layout-no-cols right-list-toolbar right-list-panel-card">
      <el-toolbar>
        <el-button @click="createWebGather">
          <i class="fa fa-plus" aria-hidden="true"></i>新建
        </el-button>
      </el-toolbar>
      <div v-loading="webGatherListDataLoading">
        <el-list-view :data="webGatherTreeData" data-read-url="/ui/fromweb/tree" :auto-get-data="false" ref="dataTable">
          <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="8">
                  <span>任务ID：</span>
                  <em>{{row.ID}}</em>
                </el-col>
                <el-col :span="8">
                  <span>任务名称：</span>
                  <em>{{row.name}}</em>
                </el-col>
                <el-col :span="8">
                  <span>采集到此栏目：</span>
                  <em>{{row.catalogName}}</em>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <span>采集类别：</span>
                  <em>{{row.type === 'D' ? '文章采集' : '自定义采集'}}</em>
                </el-col>
                <el-col :span="16">
                  <span>任务描述：</span>
                  <em>{{row.intro}}</em>
                </el-col>
              </el-row>
              <el-row class="list-card-buttons">
                <el-col :span="10">
                  <el-tag v-if="row.status === 'Y'" size="small">启用</el-tag>
                  <el-tag v-else type="danger" size='medium'>停用</el-tag>
                </el-col>
                <el-col :span="14" class="tar">
                  <el-button @click.stop="createSimilarWebGather(row.ID)" type="text" title="类似创建">
                    <i class="fa fa-plus"></i>类似创建</el-button>
                  <el-button @click.stop="deleteWebGather(row.ID)" type="text" title="删除">
                    <i class="fa fa-remove"></i>删除</el-button>
                </el-col>
              </el-row>
            </div>
          </template>
        </el-list-view>
      </div>

  </div>
</template>

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

export default {
  data() {
    return {
      currentTreeID: 0,
      webGatherListDataLoading: false, // 左侧web采集列表tabs数据加载状态
      webGatherTreeData: [], // web采集列表树数据
      createType: 'create'
    }
  },
  methods: {
    gotoDetailPage(row) {
      let path = `${this.$route.path}/${row.ID}/tabs/info`.replace(/\/\//g, '/')
      this.$router.push(path)
    },

    // 删除web采集任务
    async deleteWebGather(ID) {
      this.currentTreeID = ID
      try {
        await this.$confirm('确认要删除该任务吗 ？', '系统提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
      } catch (e) {
        return
      }
      let res = await axios.delete(`/ui/fromweb/${this.currentTreeID}`)
      util.showResponseMessage(res.data)
      if (res.data.status === 1) {
        this.loadWebGatherTreeData()
      }
    },

    // 类似创建
    createSimilarWebGather(ID) {
      this.currentTreeID = ID
      this.createType = 'similarcreate'
      let path = `${this.$route.path}/new/${ID}`.replace(/\/\//g, '/')
      this.$router.push(path)
    },

    // 新建web采集任务
    createWebGather() {
      this.createType = 'create'
      let path = `${this.$route.path}/new`.replace(/\/\//g, '/')
      this.$router.push(path)
    },

    // 加载web采集任务列表树
    async loadWebGatherTreeData() {
      this.webGatherListDataLoading = true
      await this.$refs.dataTable.getData()
      this.webGatherListDataLoading = false
    }

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

<style scoped>
.tabs-wrap {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
}
</style>
