<template>
  <div class="pane-up-wrap right-list-toolbar" v-loading="dataLoading">

      <!--工具栏按钮-->
      <el-toolbar v-if="!!id && id!='root'">
        <el-row>
          <el-col :span="24">
            <el-button :loading="toolBarBtnLoading.matchSelected" @click="matchSelected" :disabled="!id || id=='root' || !selectedRows.length>0">
              <i class="fa fa-table" aria-hidden="true"></i>匹配选中的行
            </el-button>
            <el-button @click="matchData(false)" :disabled="!id || id=='root'">
              <i class="fa fa-table" aria-hidden="true"></i>增量匹配
            </el-button>
            <el-button @click="matchData(true)" :disabled="!id || id=='root'">
              <i class="fa fa-table" aria-hidden="true"></i>全部重新匹配
            </el-button>
            <el-button @click="processSelected" :disabled="!id || id=='root' || !selectedRows.length>0">
              <i class="fa fa-table" aria-hidden="true"></i>处理选中的行
            </el-button>
            <el-button @click="processData(false)" :disabled="!id || id=='root'">
              <i class="fa fa-table" aria-hidden="true"></i>增量处理
            </el-button>
            <el-button @click="processData(true)" :disabled="!id || id=='root'">
              <i class="fa fa-table" aria-hidden="true"></i>全部重新处理
            </el-button>
          </el-col>
        </el-row>
        <!-- <el-dropdown @command="handleCommand">
          <el-button>
            <i class="fa fa-ellipsis-h" aria-hidden="true"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="matchData:false" :disabled="!id || id=='root'">
              <i class="fa fa-list-alt" aria-hidden="true"></i>增量匹配
            </el-dropdown-item>
            <el-dropdown-item command="matchData:true" :disabled="!id || id=='root'">
              <i class="fa fa-repeat" aria-hidden="true"></i>全部重新匹配
            </el-dropdown-item>
            <el-dropdown-item command="processSelected" :disabled="!id || id=='root' || !selectedRows.length>0">
              <i class="fa fa-table" aria-hidden="true"></i>处理选中的行
            </el-dropdown-item>
            <el-dropdown-item command="processData:false" :disabled="!id || id=='root'">
              <i class="fa fa-arrow-right" aria-hidden="true"></i>增量处理
            </el-dropdown-item>
            <el-dropdown-item command="processData:true" :disabled="!id || id=='root'">
              <i class="fa fa-repeat" aria-hidden="true"></i>全部重新处理
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown> -->
      </el-toolbar>
      <el-row>
        <el-col :span="24">
          <!--工具栏 搜索条件-->
          <div class="small-toolbar">
            <el-select v-model="searchParam.status" placeholder="请选择状态" clearable  @change="loadGatherResult" @clear="loadGatherResult" :disabled="!id || id=='root'">
              <el-option v-for="item in docStatus" :key="item.key" :label="item.value" :value="item.key"></el-option>
            </el-select>
            <el-input placeholder="请输入标题" v-model="searchParam.ttitle" @keyup.enter.native="loadGatherResult" :disabled="!id || id=='root'" slot="prepend" style="width:180px;"></el-input>
            <el-input placeholder="请输入URL"  v-model="searchParam.URL" @keyup.enter.native="loadGatherResult" :disabled="!id || id=='root'" style="width:230px;">
              <el-button slot="append" icon="search" title="搜索" @click="loadGatherResult" :disabled="!id || id=='root'"></el-button>
            </el-input>
          </div>
        </el-col>
      </el-row>
      <div>

        <!--数据表格-->
        <el-table :data-read-url="dataReadFunc" :page-size="20" :auto-get-data="false" ref="resultTable" style="width: 100%" @selection-change="resultTableSelectionChange">
          <el-table-column type="selection" align="center" width="50"></el-table-column>
          <el-table-column type="index" label="序号" width="80"></el-table-column>
          <el-table-column prop="url" label="URL" show-overflow-tooltip>
            <template slot-scope="scope">
              <a href="javascript:void(0)" @click="openGatherResultDialog(scope.row)">{{ scope.row.url }}</a>
            </template>
          </el-table-column>
          <el-table-column prop="title" label="标题" show-overflow-tooltip></el-table-column>
          <el-table-column prop="crawlLevel" label="级别" width="80"></el-table-column>
          <el-table-column prop="statusName" label="状态" width="100"></el-table-column>
        </el-table>
      </div>
    </div>

</template>

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

export default {
  data() {
    return {
      dataReadURL: '',
      id: 0,
      interval: null,
      selectedRows: [],
      gatherResult: [],
      formData: {},
      searchParam: {
        status: '',
        title: '',
        URL: ''
      },
      docStatus: [], // doc状态
      dataLoading: false, // 数据加载状态
      emitBasicInfo: {},
      toolBarBtnLoading: {
        matchSelected: false,
        processSelected: false,
        matchData: false,
        allMatchData: false,
        processData: false,
        allProcessData: false,
        dealData: false
      }, // 工具栏按钮禁用状态
      loading: {
        saveBtn: false,
        matchData: false,
        matchAllData: false
      }
    }
  },
  methods: {
    handleCommand(method) {
      if (method) {
        let arr = method.split(':')
        let fun = arr[0]
        let param = arr.length > 1 ? arr[1] : ''
        param = /^(false|true)$/.test(param) ? param === 'true' : param
        typeof this[fun] === 'function' && this[fun](param)
      } else {
        console.warn(`未找到改菜单对应的方法:${method}`)
      }
    },
    init(id) {
      if (this.id !== id || !this.id) {
        this.id = id
      }
      this.loadGatherResult(this.id)
    },
    clearSearchParam() {
      this.searchParam = {
        status: '',
        title: '',
        URL: ''
      }
    },
    dataReadFunc() {
      return [`/ui/fromweb/${this.id}/result`, { params: this.searchParam }]
    },
    emitData() {
      let flag = this.validateForm(this.basicInfo)
      if (flag) {
        let prop = Object.getOwnPropertyNames(this.emitBasicInfo)
        for (let i = 1; i < prop.length; i++) {
          this.emitBasicInfo[prop[i]] = this.basicInfo[prop[i]]
        }
        for (let i = 0; i < this.urlList.length; i++) {
          this.basicInfo['URL' + this.urlList[i].rowno] = this.urlList[i].url
          this.emitBasicInfo['URL' + this.urlList[i].rowno] = this.urlList[i].url
        }
        this.emitBasicInfo['id'] = this.id
        this.emitBasicInfo.copyimage = this.basicInfo.copyimage ? 1 : 0
        this.emitBasicInfo.cleanlink = this.basicInfo.cleanlink ? 1 : 0
        this.emitBasicInfo.dealaftergather = this.basicInfo.dealaftergather ? 1 : 0
        this.emitBasicInfo.proxyFlag = this.basicInfo.proxyFlag ? 1 : 0
        this.emitBasicInfo.filterflag = this.basicInfo.filterflag ? 1 : 0
        this.emitBasicInfo.catalogID = this.catalog.id
        this.emitBasicInfo.catalogname = this.catalog.catalogname
        let data = {
          type: 'Info',
          data: this.emitBasicInfo
        }
        this.$emit('getData', data)
      }
    },

    // 加载采集结果
    async loadGatherResult(id) {
      if (!this.id || this.id === 'root') {
        this.gatherResult = []
        this.tableDataTotal = 0
        return
      }

      !!this.$refs.resultTable && this.$refs.resultTable.getData()
      // TODO: 请测试这儿的功能
    },

    // 采集结果表格数据选中事件
    resultTableSelectionChange(selection) {
      this.selectedRows = selection
    // console.log(this.selectedRows)
    },

    // 打开采集结果Dialog  加载采集结果详情
    openGatherResultDialog(row) {
      this.$router.push({path: `/datachannel/fromWeb/${this.id}/result`, query: { url: row.url }})
    },

    // 匹配选中的行
    async matchSelected() {
      if (this.selectedRows.length < 1) {
        this.Dialog('请选择一条记录 ！')
        return
      }
      this.toolBarBtnLoading.matchSelected = true
      var urlsArr = []
      for (var item of this.selectedRows) {
        urlsArr.push(item.url)
      }
      let param = {
        ID: this.id,
        urls: urlsArr.join()
      }
      let res = await axios.put(`/ui/fromweb/${param.ID}/match`, param)
      this.toolBarBtnLoading.matchSelected = false
      util.showResponseMessage(res.data)
      if (res.data.status === 1) {
        await util.showProgress(res.data.data.taskID)
        this.loadGatherResult()
      }
    },
    // 增量匹配flag=false  全部重新匹配flag=true
    async matchData(flag) {
      if (!flag) {
        this.loading.matchData = true
      } else {
        this.loading.matchAllData = true
      }
      let param = {
        ID: this.id,
        all: flag
      }
      try {
        let res = await axios.put(`/ui/fromweb/${param.ID}/match`, param)
        if (!flag) {
          this.loading.matchData = false
        } else {
          this.loading.matchAllData = false
        }
        if (res.data.status === 1) {
          await util.showProgress(res.data.data.taskID, '开始匹配')
          this.loadGatherResult()
        } else {
          util.showMessage(res)
        }
      } catch (e) {
        util.showErrorNotification(e)
        if (!flag) {
          this.loading.matchData = true
        } else {
          this.loading.matchAllData = true
        }
      }
    },

    // 处理选中的行
    async processSelected() {
      if (this.selectedRows.length < 1) {
        this.Dialog('请选择一条记录 ！')
        return
      }
      var urlsArr = []
      for (var item of this.selectedRows) {
        urlsArr.push(item.url)
      }
      let param = {
        ID: this.id,
        urls: urlsArr.join()
      }
      this.toolBarBtnLoading.processSelected = true
      let res = await axios.put(`/ui/fromweb/${param.ID}/process`, param)
      util.showResponseMessage(res.data)
      this.toolBarBtnLoading.processSelected = false
      if (res.data.status === 1) {
        await util.showProgress(res.data.data.taskID)
        this.loadGatherResult()
      }
    },

    // 增量处理flag=false   全部重新处理flag=true
    async processData(flag) {
      if (flag) {
        this.toolBarBtnLoading.allprocessData = true
      } else {
        this.toolBarBtnLoading.processData = true
      }
      let param = {
        ID: this.id,
        all: flag
      }
      try {
        let res = await axios.put(`/ui/fromweb/${param.ID}/process`, param)
        if (flag) {
          this.toolBarBtnLoading.allprocessData = false
        } else {
          this.toolBarBtnLoading.processData = false
        }
        if (res.data.status === 1) {
          await util.showProgress(res.data.data.taskID, '开始处理')
          this.loadGatherResult()
        } else {
          util.showMessage(res)
        }
      } catch (e) {
        util.showErrorNotification(e)
        if (flag) {
          this.toolBarBtnLoading.allprocessData = false
        } else {
          this.toolBarBtnLoading.processData = false
        }
      }
    },
    // 消息Dialog封装
    Dialog(msg) {
      this.$confirm(msg, '系统提示', {
        confirmButtonText: '确定',
        showCancelButton: false,
        type: 'warning'
      })
    },
    async loadDocStatus() {
      let res = await axios.get(`/ui/fromweb/docstatus`)
      this.docStatus = res.data.status === 1 ? res.data.data : []
    }
  },
  created() {
    this.id = this.taskID
    this.loadDocStatus()
  },
  props: {
    taskID: {
      type: [String, Number],
      default: 0
    }
  }
}
</script>

<style scoped>
.small-toolbar {
  /* height: auto;
  padding: 5px 10px;
  text-align: right;
  position: absolute;
  right: 0; */
  padding: 0 0 10px 0;
}

.tabs-wrap {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
}

.info-form-wrap {
  margin-top: 10px;
  padding: 10px 0;
  width: 560px;
}

.tag-item,
.title {
  line-height: 1.5;
  margin: 0.2em 0 0.3em 0;
}

.tag-item .tag-label {
  display: inline-block;
  text-align: right;
  width: 100%;
}

.title {
  margin-top: 1em;
  font-size: 20px !important;
}
</style>
<style>
.tagP {
  font-size: 13px;
  margin: 20px 0 10px 10px;
}

input[type='file'] {
  display: none !important;
}

.el-upload__input {
  display: none !important;
}

label {
  margin: 0 !important;
  font-weight: normal !important;
}

.title .el-checkbox__label {
  font-size: inherit;
}
</style>
