<template>
  <div class="pane-up-wrap right-list-toolbar right-list-panel-fieldset" v-loading="dataLoading">
    <el-toolbar>
      <div v-if="!!id && id!='root' && !createFlag">
        <el-button :loading="loading.saveBtn" @click="emitData" :disabled="!id || id=='root'">
          <i class="fa fa-floppy-o" aria-hidden="true"></i>保存
        </el-button>
        <el-button @click="matchData(false)" :disabled="!id || id=='root'">
          <i class="fa fa-list-alt" aria-hidden="true"></i>增量匹配
        </el-button>
        <el-button @click="matchData(true)" :disabled="!id || id=='root'">
          <i class="fa fa-repeat" aria-hidden="true"></i>全部重新匹配
        </el-button>
        <!-- <el-dropdown @command="matchData">
          <el-button>
            <i class="fa fa-ellipsis-h" aria-hidden="true"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item :command="false" :disabled="!id || id=='root'">
              <i class="fa fa-list-alt" aria-hidden="true"></i>增量匹配
            </el-dropdown-item>
            <el-dropdown-item :command="true" :disabled="!id || id=='root'">
              <i class="fa fa-repeat" aria-hidden="true"></i>全部重新匹配
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown> -->
      </div>
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <span>匹配模式：</span>
      <el-radio-group v-model="formData.matchType" :disabled="(!id || id=='root') && !createFlag">
        <el-radio label="simple">简单匹配</el-radio>
        <el-radio label="pattern">复杂匹配</el-radio>
      </el-radio-group>
      &nbsp;&nbsp;
      <el-checkbox v-model="isautowrap" v-if="this.formData.matchType=='pattern'">自动换行</el-checkbox>
    </el-toolbar>

    <div>
      <template v-if="formData.matchType=='pattern'" v-for="item in templates">
        <div style="padding:10px" :key="item.rowNo">
          <el-input :class="{autowrapoff:!isautowrap}" type="textarea" v-model="item.content" :autosize="{ minRows: 15, maxRows:30}" placeholder="" ></el-input>
        </div>
      </template>

      <div v-if="formData.matchType=='simple'" class="">
        <el-form label-width="100px" :model="formData">
          <div class="panel-fieldset">
            <h4 class="panel-legend">文章标题</h4>
            <el-form-item label="开始：" prop="pre_title">
              <el-input type="textarea" v-model="formData.pre_title" :autosize="{ minRows: 2, maxRows: 5}" placeholder="" ></el-input>
            </el-form-item>
            <el-form-item label="结束：" prop="tail_title">
              <el-input type="textarea" v-model="formData.tail_title" :autosize="{ minRows: 2, maxRows: 5}" placeholder="" ></el-input>
            </el-form-item>
          </div>
          <div class="panel-fieldset">
            <h4 class="panel-legend">发布日期</h4>
            <el-form-item label="开始：" prop="pre_publishdate">
              <el-input type="textarea" v-model="formData.pre_publishdate" :autosize="{ minRows: 2, maxRows: 5}" placeholder="" ></el-input>
            </el-form-item>
            <el-form-item label="结束：" prop="tail_publishdate">
              <el-input type="textarea" v-model="formData.tail_publishdate" :autosize="{ minRows: 2, maxRows: 5}" placeholder="" ></el-input>
            </el-form-item>
          </div>
          <div class="panel-fieldset">
            <h4 class="panel-legend">文章内容</h4>
            <el-form-item label="开始：" prop="pre_body">
              <el-input type="textarea" v-model="formData.pre_body" :autosize="{ minRows: 2, maxRows: 5}" placeholder="" ></el-input>
            </el-form-item>
            <el-form-item label="结束：" prop="tail_body">
              <el-input type="textarea" v-model="formData.tail_body" :autosize="{ minRows: 2, maxRows: 5}" placeholder="" ></el-input>
            </el-form-item>
          </div>
        </el-form>
      </div>

    </div>
  </div>
</template>

<script>
import util from '@src/common/util.js'
export default {
  data() {
    return {
      id: 0,
      initData: {},
      formData: {
        matchType: 'simple', // 匹配模式
        pre_title: '', // 文章标题开始
        tail_title: '', // 文章标题结束
        pre_publishdate: '', // 发布日期开始
        tail_publishdate: '', // 发布日期结束
        pre_body: '', // 文章内容开始
        tail_body: '' // 文章内容结束
      },
      isautowrap: true, // 自动换行
      templates: [{ rowNo: 1, content: '' }],
      interval: null, // interval
      dataLoading: false, // 数据加载状态
      loading: {
        saveBtn: false,
        matchData: false,
        matchAllData: false
      }
    }
  },
  methods: {
    // 初始化数据
    async init(id) {
      this.id = !this.id || this.id !== id ? id : this.id
      this.dataLoading = true
      let res = await axios.get(`/ui/fromweb/init`, {params: {ID: this.id}})
      this.dataLoading = false
      this.initData = res.data.status === 1 ? Object.assign({}, res.data.data) : this.initData
      let keys = Object.getOwnPropertyNames(this.formData)
      if (keys && keys.length > 0) {
        for (var i = 0; i < keys.length; i++) {
          this.formData[keys[i]] = this.initData[keys[i]]
        }
      }
      this.loadTemplateList()
    },

    // 加载复杂匹配下匹配模板
    async loadTemplateList() {
      if (!this.id || this.id === 'root') {
        return
      }
      this.dataLoading = true
      let res = await axios.get(`/ui/fromweb/${this.id}/templatelist`)
      // console.log(res.data.data)
      this.dataLoading = false
      this.templates = res.data.status === 1 ? res.data.data : this.templates
    },

    // 增量匹配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
      }
      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, '开始匹配')
      } else {
        util.showMessage(res)
      }
    },

    emitData() {
      let emitData = {}
      if (this.formData.matchType === 'pattern') {
        let temp = this.templates[this.templates.length - 1]
        let key = 'template' + temp.rowNo
        let value = temp.content
        emitData[key] = value
        emitData['matchType'] = this.formData.matchType
      } else if (this.formData.matchType === 'simple') {
        emitData = this.formData
      }
      emitData['ID'] = this.id
      let data = {
        type: 'Template',
        data: emitData
        // flag: flag
      }
      this.$emit('getData', data)

    // console.log(data)
    },
    // 采集类别radio改变事件
    typeRadioClick(label) {
      this.formData.type = label
      this.$emit('onTypeChange', label)
    },
    // 表单验证处理
    validateForm(form) {
      if (!form) {
        return false
      }
      if (form.matchType === 'simple') {
        if (!form.pre_title || form.pre_title.trim() === '') {
          this.Dialog('文章标题开始不能为空 ！')
          return false
        }
        if (!form.tail_title || form.tail_title.trim() === '') {
          this.Dialog('文章标题结束不能为空 ！')
          return false
        }
        if (!form.pre_publishdate || form.pre_publishdate.trim() === '') {
          this.Dialog('发布日期开始不能为空 ！')
          return false
        }
        if (!form.tail_publishdate || form.tail_publishdate.trim() === '') {
          this.Dialog('发布日期结束不能为空 ！')
          return false
        }
        if (!form.pre_body || form.pre_body.trim() === '') {
          this.Dialog('文章内容开始不能为空 ！')
          return false
        }
        if (!form.tail_body || form.tail_body.trim() === '') {
          this.Dialog('文章内容结束不能为空 ！')
          return false
        }
      } else if (form.matchType === 'pattern') {
        if (!this.templates || this.templates.length < 1 || !this.templates[0].content) {
          this.Dialog('匹配块内容不能为空 ！')
          return false
        }
      }
      return true
    },
    // 消息Dialog封装
    Dialog(msg) {
      this.$confirm(msg, '系统提示', {
        confirmButtonText: '确定',
        showCancelButton: false,
        type: 'warning'
      })
    }
  },
  created() {
    this.id = this.taskID
    if (this.createFlag && this.createFlag === 'screate') {
      this.init()
    }
  },
  props: {
    taskID: {
      type: [String, Number],
      default: 0
    },
    createFlag: {
      type: [String],
      default: ''
    }
  }
}
</script>

<style scoped>
.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>
.autowrapoff textarea {
  word-wrap: normal;
}
</style>
