<template>
  <base-list>
    <template slot="n_header">
      <div>
        <div>
          <el-form v-model="pagerDto" inline>
            <el-form-item label="关键字">
              <el-input v-model="pagerDto._Eq_Keyword" />
            </el-form-item>
            <el-form-item label="关键字类型">
              <el-select v-model="pagerDto._Eq_KeywordType">
                <el-option :value="0" label="任意" />
                <el-option :value="1" label="一字匹配" />
                <el-option :value="2" label="二字匹配" />
                <el-option :value="3" label="三字匹配" />
                <el-option :value="4" label="四字匹配" />
                <el-option :value="5" label="五字匹配" />
                <el-option :value="6" label="精准匹配" />
              </el-select>
            </el-form-item>
            <el-form-item label="HsCode">
              <el-input v-model="pagerDto._Eq_HsCode" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="pagerSerach">搜索</el-button>
              <el-button type="success" @click="openAdd">新建</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div>
          <el-divider content-position="left">关键字测试</el-divider>
          <el-form inline>
            <el-form-item label="关键字">
              <el-input v-model="testKeyword" />
            </el-form-item>
            <el-form-item>
              <el-button
                type="success"
                :loading="testLoading"
                @click="test"
              >测试</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </template>
    <template slot="n_option" />
    <template>
      <el-table
        v-loading="dataLoading"
        :data="data"
        :highlight-current-row="true"
        :select-on-indeterminate="true"
        width="100%"
      >
        <el-table-column prop="HsCode" label="HsCode" />
        <el-table-column prop="KeywordAll" label="精准匹配" />
        <el-table-column prop="Keyword5" label="五字匹配" />
        <el-table-column prop="Keyword4" label="四字匹配" />
        <el-table-column prop="Keyword3" label="三字匹配" />
        <el-table-column prop="Keyword2" label="二字匹配" />
        <el-table-column prop="Keyword1" label="一字匹配" />
        <el-table-column label="是否启用">
          <template scope="scope">
            <el-tag v-if="scope.row.Enabled == true" type="success">是</el-tag>
            <el-tag v-else type="warning">否</el-tag>
          </template>
        </el-table-column>
        <el-table-column abel="操作" width="300px">
          <template scope="scope">
            <el-button
              v-if="scope.row.Enabled == true"
              type="warning"
              @click="setEnable(scope.row, false)"
            >禁用</el-button>
            <el-button
              v-else
              type="primary"
              @click="setEnable(scope.row, true)"
            >启用</el-button>
            <el-button type="primary" @click="openEdit(scope.row)">编辑</el-button>
            <el-button type="danger" @click="remove(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :page-sizes="[10, 20, 40, 100, 400]"
        :current-page="pagerDto.PageIndex"
        :page-size.sync="pagerDto.PageSize"
        background
        layout="prev, pager, next ,total ,jumper,sizes,slot "
        :total="pagerDto.total"
        @size-change="changePager"
        @current-change="pageChange"
      />
    </template>
    <el-dialog
      :title="editTitle"
      :visible.sync="showEditPanel"
      width="30%"
      :before-close="closeEdit"
    >
      <div>
        <el-form v-model="editItem">
          <el-form-item
            label="HsCode"
          ><el-input
            v-model="editItem.HsCode"
          /></el-form-item>
          <el-form-item
            label="一字匹配"
          ><el-input
            v-model="editItem.Keyword1"
          /></el-form-item>
          <el-form-item
            label="二字匹配"
          ><el-input
            v-model="editItem.Keyword2"
          /></el-form-item>
          <el-form-item
            label="三字匹配"
          ><el-input
            v-model="editItem.Keyword3"
          /></el-form-item>
          <el-form-item
            label="四字匹配"
          ><el-input
            v-model="editItem.Keyword4"
          /></el-form-item>
          <el-form-item
            label="五字匹配"
          ><el-input
            v-model="editItem.Keyword5"
          /></el-form-item>
          <el-form-item
            label="精确字匹配"
          ><el-input
            v-model="editItem.KeywordAll"
          /></el-form-item>
          <el-form-item
            label="是否启用"
          ><el-switch
            v-model="editItem.Enabled"
            active-color="#13ce66"
            inactive-color="#ff4949"
          /></el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeEdit">取 消</el-button>
        <el-button type="primary" @click="submitEdit">确 定</el-button>
      </span>
    </el-dialog>
  </base-list>
</template>
<script>
import BaseList from '@/components/Xyy/baselist'
import {
  _create,
  _modify,
  _delete,
  _queryPage,
  _setEnable,
  _test
} from '@/api/hsCodeMatch'
export default {
  name: 'HsCodeMatch',
  components: { 'base-list': BaseList },
  data() {
    return {
      data: [],
      editTitle: '新建',
      showEditPanel: false,
      isAdd: true,
      testKeyword: null,
      testLoading: false,
      editItem: {
        Id: 0,
        HsCode: '',
        Keyword1: '',
        Keyword2: '',
        Keyword3: '',
        Keyword4: '',
        Keyword5: '',
        KeywordAll: '',
        Enabled: true
      },
      dataLoading: false,
      pagerDto: {
        _Eq_Keyword: null,
        _Eq_HsCode: null,
        _Eq_KeywordType: 0,
        QuerySort: [{ Field: 'Id', IsDesc: true }],
        PageIndex: 1,
        PageSize: 10,
        total: 0
      }
    }
  },
  mounted() {
    this.pagerSerach(1)
  },
  methods: {
    test() {
      this.testLoading = true
      _test(this.testKeyword)
        .then((res) => {
          if (res) {
            this.data = [res]
          } else this.data = []
        })
        .finally(() => {
          this.testLoading = false
        })
    },
    closeEdit() {
      this.isAdd = true
      this.showEditPanel = false
    },
    submitEdit() {
      if (this.isAdd == true) {
        const data = this.editItem
        _create(data).then((res) => {
          this.pagerSerach()
          this.$message({ type: 'success', message: '新增成功' })
        })
      } else {
        const data = this.editItem
        _modify(data).then((res) => {
          this.pagerSerach()
          this.$message({ type: 'success', message: '修改成功' })
        })
      }
    },
    openEdit(item) {
      this.isAdd = false
      this.editItem = item
      this.showEditPanel = true
    },
    openAdd() {
      this.isAdd = true
      this.showEditPanel = true
      this.initEditItem()
    },
    initEditItem() {
      this.editItem = {
        Id: 0,
        HsCode: '',
        Keyword1: '',
        Keyword2: '',
        Keyword3: '',
        Keyword4: '',
        Keyword5: '',
        KeywordAll: '',
        Enabled: true
      }
    },
    remove(item) {
      this.$confirm('确定删除?').then((res) => {
        const id = item.Id
        _delete(id).then((res) => {
          const idx = this.data.findIndex((d) => d.Id == id)
          this.data.splice(idx, 1)
          this.$message({ message: '删除成功', type: 'success' })
        })
      })
    },
    setEnable(rule, enable) {
      const id = rule.Id
      const data = { id, enable }
      _setEnable(data).then((res) => {
        rule.Enabled = enable
      })
    },
    pageChange(p) {
      this.pagerDto.PageIndex = p
      this.pagerSerach()
    },
    pagerSerach() {
      this.dataLoading = true
      _queryPage(this.pagerDto)
        .then((res) => {
          this.data = res.Result
          this.pagerDto.total = res.TotalCount
        })
        .finally((res) => {
          this.dataLoading = false
        })
    },
    changePager(v) {
      this.pagerDto.PageSize = v
      this.pagerSerach()
    }
  }
}
</script>
