<template>
  <div class="app-container">
    <el-tabs v-model="n" @tab-click="handleClick">
      <el-tab-pane label="过滤配置" name="math">
        <el-form>
          <el-form-item label="过滤单号">
            <el-input v-model="number" type="textarea" :rows="20" placeholder="一行一个，使用正则表达匹配" />
          </el-form-item>
          <el-form-item style="text-align:center">
            <el-button type="primary" @click="save()">
              保存
            </el-button>
            <el-button @click="test()">
              测试工具
            </el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="截取配置" name="sub">
        <el-button type="primary" size="small" @click="addSub">新增截取</el-button>
        <el-table border="" style="margin-top:10px" :data="data">
          <el-table-column label="匹配规则" prop="MathRegex" />
          <el-table-column label="截取组" prop="SelectGroup" />
          <el-table-column label="最后修改人" prop="UpdateUserName" />
          <el-table-column label="最后修改时间" prop="UpdateTime" />
          <el-table-column label="操作">
            <template slot-scope="r">
              <el-button @click="edit(r.row)">
                编辑
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
    <el-dialog :visible.sync="dialogRegex" title="测试匹配">
      <el-form label-width="200px">
        <el-form-item label="匹配正则表达式">
          <el-input v-model="regex" @change="testRegex2()" /></el-form-item>
        <el-form-item label="测试单号">
          <el-input v-model="tnumber" @change="testRegex2()" />
        </el-form-item>
        <el-form-item label="检验结果">
          <el-tag v-if="isMath" class="el-icon-check" type="success" effect="dark">通过</el-tag>
          <el-tag v-if="!isMath" class="el-icon-close" type="danger" effect="dark">未通过</el-tag>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog :visible.sync="dialogAddOrEdit" title="截取规则">
      <el-form>
        <el-form-item label="匹配正则表达式">
          <el-input v-model="mathRegex" @change="testRegex()" /></el-form-item>
        <el-form-item label="截取组">
          <el-input v-model="mathGroup" @change="testRegex()" />
        </el-form-item>
        <el-form-item label="测试单号">
          <el-input v-model="testNumber" @change="testRegex()" />
        </el-form-item>
      </el-form>
      <el-table :data="mathDatas" height="300" border>
        <el-table-column label="组号" prop="index">
          <template slot-scope="r">
            {{ r.row.index }}<el-tag v-if="r.row.index==mathGroup" type="success">当前匹配</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="截取值" prop="value" />
      </el-table>
      <div style="text-align:center;margin-top:10px">
        <el-button type="primary" @click="saveSub()">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { _getMaths, _setMaths, _refreshCache } from '@/api/barcode'
import { _getRegexsAsCache, _reshRegex, _addRegex, _editRegex } from '@/api/trackingNumberMath'
export default {
  name: 'BarCodeList',
  data() {
    return {
      n: 'math',
      number: '',
      data: [],
      dialogAddOrEdit: false,
      dialogRegex: false,
      mathRegex: '',
      regex: '',
      tnumber: '',
      mathGroup: 1,
      isMath: false,
      testNumber: '',
      id: 0,
      mathDatas: []
    }
  },
  mounted() {
    this.GetMaths()
  },
  methods: {
    test() {
      this.dialogRegex = true
    },
    testRegex2() {
      if (this.tnumber != '' && this.regex != '') {
        var regex2 = RegExp(this.regex, 'g')
        this.isMath = regex2.test(this.tnumber)
      }
    },
    testRegex() {
      if (this.mathRegex != '' && this.mathGroup != '' && this.testNumber != '') {
        var regex = RegExp(this.mathRegex, 'g')
        var d = regex.exec(this.testNumber)
        var arr = []
        if (d) {
          for (var i = 0; i < d.length; i++) {
            arr.push({ index: i, value: d[i] })
          }
          this.mathDatas = arr
        } else {
          d = []
        }
      }
    },
    handleClick(tab, event) {
      if (tab.name == 'sub') {
        this.GetRegexsAsCache()
      }
    },
    GetMaths() {
      _getMaths().then(r => {
        this.number = r.replace(/,/g, '\r\n')
      })
    },
    GetRegexsAsCache() {
      _getRegexsAsCache().then(r => {
        this.data = r
      })
    },
    edit(row) {
      debugger
      this.id = row.Id
      this.mathRegex = row.MathRegex
      this.mathGroup = row.SelectGroup
      this.dialogAddOrEdit = true
    },
    addSub() {
      this.dialogAddOrEdit = true
      this.id = 0
    },
    saveSub() {
      if (this.id == 0) {
        _addRegex({ MathRegex: this.mathRegex, SelectGroup: this.mathGroup }).then(r => {
          this.$message({ type: 'success', message: '添加成功' })
          this.dialogAddOrEdit = false
          this.GetRegexsAsCache()
          _reshRegex()
        })
      } else {
        _editRegex({ Id: this.id, MathRegex: this.mathRegex, SelectGroup: this.mathGroup }).then(r => {
          this.$message({ type: 'success', message: '修改成功' })
          this.dialogAddOrEdit = false
          this.GetRegexsAsCache()
          _reshRegex()
        })
      }
    },
    save() {
      var text = this.number.replace(/\r\n/g, ',')
      _setMaths(text).then(r => {
        this.$message({ type: 'success', message: '修改成功' })
        _refreshCache()
      })
    }
  }
}
</script>
