<template>
  <div class="layout-no-cols right-detail-tabs">

      <!--右侧tabs-->
      <div  class="layout-col-detail">
        <el-toolbar>
          <el-button @click="$router.push('/datachannel/fromWeb')" type="primary" size="medium" round class="shadow-primary">
            <i class="fa fa-chevron-left"></i> 返回上页
          </el-button>
        </el-toolbar>

        <el-tabs class="tabs-wrap" v-model="activeTabsName" @tab-click="tabsChangeClickHandler">
          <el-tab-pane label="基本信息" name="FromWebTaskInfo">
            <span slot="label">
              <i class="fa fa-list-alt"></i> 基础信息
            </span>
            <!--基础信息组件-->
            <fromweb-taskinfo :taskID="currentTreeID" ref="fromwebtaskinfo" @onTypeChange="typeChangeHandler" @getData="getTaskinfoComponentData"></fromweb-taskinfo>
          </el-tab-pane>

          <el-tab-pane label="匹配块" name="FromWebTaskTemplate" v-if="showTaskTemplate">
            <span slot="label">
              <i class="fa fa-th-large" aria-hidden="true"></i> 匹配块
            </span>
            <!--匹配块组件-->
            <fromweb-tasktemplate :taskID="currentTreeID" ref="fromwebtasktemplate" @onTypeChange="typeChangeHandler"  @getData="getTasktemplateComponentData"></fromweb-tasktemplate>
          </el-tab-pane>

          <el-tab-pane label="过滤块" name="FromWebTaskFilter">
            <span slot="label">
              <i class="fa fa-exclamation-triangle" aria-hidden="true"></i> 过滤块
            </span>
            <!--过滤块组件-->
            <fromweb-taskfilter :taskID="currentTreeID" ref="fromwebtaskfilter"   @getData="getTaskfilterComponentData"></fromweb-taskfilter>
          </el-tab-pane>

          <el-tab-pane label="采集结果" name="FromWebResult">
            <span slot="label">
              <i class="fa fa-link" aria-hidden="true"></i> 采集结果
            </span>
            <!--采集结果组件-->
            <fromweb-result :taskID="currentTreeID" ref="fromwebresult" @getData="getTaskfilterComponentData"></fromweb-result>
          </el-tab-pane>
        </el-tabs>
      </div>

  </div>
</template>

<script>
import fromWebTaskInfo from './FromWebTaskInfo.vue'
import fromWebTaskTemplate from './FromWebTaskTemplate.vue'
import fromWebTaskFilter from './FromWebTaskFilter.vue'
import fromWebResult from './FromWebResult.vue'

export default {
  props: {
    ID: {
      type: [String, Number],
      default: 0
    },
    tabName: {
      type: String,
      default: 'info'
    }
  },
  data() {
    return {
      selectedRows: [], // 当前选择行数据
      activeTabsName: 'FromWebTaskInfo', // 当前活动的tabs名称
      currentTreeID: 0,
      showTaskTemplate: true,
      currentNode: null
    }
  },
  methods: {
    // tabs切换事件
    tabsChangeClickHandler(tab, event) {
      this.selectedRows = []
      this.activeTabsName = tab.name
      let name = 'info'
      if (tab.name === 'FromWebTaskInfo') {
        name = 'info'
        this.$refs.fromwebtaskinfo.init(this.currentTreeID)
      } else if (tab.name === 'FromWebTaskTemplate') {
        name = 'template'
        this.$refs.fromwebtasktemplate && this.$refs.fromwebtasktemplate.init(this.currentTreeID)
      } else if (tab.name === 'FromWebTaskFilter') {
        name = 'filter'
        this.$refs.fromwebtaskfilter && this.$refs.fromwebtaskfilter.init(this.currentTreeID)
      } else if (tab.name === 'FromWebResult') {
        name = 'result'
        this.$refs.fromwebresult && this.$refs.fromwebresult.clearSearchParam()
        this.$refs.fromwebresult && this.$refs.fromwebresult.init(this.currentTreeID)
      }
      this.$router.replace(`/datachannel/fromWeb/${this.currentTreeID}/tabs/${name}`)
    },

    // 得到基本信息子组件的数据
    getTaskinfoComponentData(data) {
      if (data && data.data) {
        this.taskInfo = Object.assign({}, data.data)
        this.saveFromWeb(null, data.type)
      }
    },

    // 得到匹配块子组件的数据
    getTasktemplateComponentData(data) {
      if (data && data.data) {
        this.taskTemplate = Object.assign({}, data.data)
        this.saveFromWeb(null, data.type)
      }
    },

    // 得到过滤块子组件的数据
    getTaskfilterComponentData(data) {
      if (data && data.data) {
        this.taskFilter = Object.assign({}, data.data)
        this.saveFromWeb(null, data.type)
      }
    },

    // 保存基础信息 type为空，则表示保存全部选项卡，不为则指保存type所指的选项卡
    saveFromWeb(pw, type) {
      let param = {}

      // 基本信息 数据
      if (!type || type === 'Info') {
        param = this.taskInfo

        if (!param.name) {
          this.Dialog('任务名称不能为空')
          return false
        }
        if (param.type === 'D') {
          if (!param.catalogID) {
            this.Dialog('采集到此栏目不能为空 ！')
            return false
          }
          if (!param.url1) {
            this.Dialog('起始URL不能为空 ！')
            return false
          }
        }
      }

      // 匹配块数据
      if (!type || type === 'Template') {
        param = this.taskTemplate
        // return;
      }

      // 过滤块数据
      if (!type || type === 'Filter') {
        param = this.taskFilter
      }

      // 提交数据

      axios.put(`/ui/fromweb`, param).then(res => {
        let data = res.data
        if (data.status === 1) {
          this.MsgPop(data.message, 'success')
          if (type === 'Info') {
            this.$refs.fromwebtaskinfo.init(this.currentTreeID)
          } else if (type === 'Template') {
            this.$refs.fromwebtasktemplate.init(this.currentTreeID)
          } else if (type === 'Filter') {
            this.$refs.fromwebtaskfilter.init(this.currentTreeID)
          }

          return
        }
        this.Dialog(data.message)
      })
    },

    // 组件fromweb-taskinfo 采集类别改变事件
    typeChangeHandler(data) {
      if (data === 'D') {
        this.showTaskTemplate = true
      } else if (data === 'T') {
        this.showTaskTemplate = false
      }
    },

    // 消息Dialog封装
    Dialog(msg) {
      this.$confirm(msg, '系统提示', {
        confirmButtonText: '确定',
        showCancelButton: false,
        type: 'warning'
      })
    },

    // 消息显示封装
    MsgPop(msg, type) {
      if (!type) {
        this.$message(msg)
        return
      }
      this.$message({
        message: msg,
        type: type
      })
    }
  },
  created() {
    this.currentTreeID = this.ID
  },
  mounted() {
    if (this.tabName === 'result') {
      this.tabsChangeClickHandler({ name: 'FromWebResult' }, null)
    } else {
      this.$refs.fromwebtaskinfo && this.$refs.fromwebtaskinfo.init(this.currentTreeID)
    }
  },
  components: {
    'fromweb-taskinfo': fromWebTaskInfo,
    'fromweb-tasktemplate': fromWebTaskTemplate,
    'fromweb-taskfilter': fromWebTaskFilter,
    'fromweb-result': fromWebResult
  }
}
</script>

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