<template>
  <div class="app-container">
    <div class="filter-container">
      <el-form :inline="true" class="demo-form-inline">
        <el-select v-model="pagerDto._Eq_ChannelId" placeholder="派送渠道" clearable filterable>
          <el-option v-for="item in channels" :key="item.Id" :label="item.Name" :value="item.Id" />
        </el-select>
        <el-form-item>
          <el-button icon="el-icon-search" size="small" type="primary" @click="pagerSerach()">搜索</el-button>
          <el-button
            icon="el-icon-circle-plus-outline"
            size="small"
            type="success"
            @click="showAddPanel"
          >新增</el-button>
        </el-form-item>
      </el-form>
      <el-table v-loading="loading" border height="70vh" :data="sourceData">
        <el-table-column label="渠道名称" prop="ChannelName" />
        <el-table-column label="关键字" prop="FailMessageKeyword" />
        <el-table-column label="节点" prop="NodeName" />
        <el-table-column label="是否启用" prop="EnableName" />
        <el-table-column label="备注" prop="Remark" />
        <el-table-column label="创建人" prop="CreateUserName" />
        <el-table-column label="创建时间" prop="CreateTime" />
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button :data-id="scope.row.Id" @click="edit">编辑</el-button>
            <el-button :data-id="scope.row.Id" @click="remove">移除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div>
        <el-pagination
          :page-sizes="[100, 200, 300, 400]"
          :current-page="pagerDto.PageIndex"
          :page-size="pagerDto.PageSize"
          background
          layout="prev, pager, next ,total ,jumper,sizes,slot "
          :total="pagerDto.total"
          @current-change="pagerSerach"
          @size-change="pageSizeChange"
        />
      </div>
      <el-dialog :visible.sync="showEditPannel">
        <el-form ref="editForm" label-width="6em" :model="editItem" :rules="rules">
          <el-form-item label="渠道" prop="ChannelId">
            <el-select v-model="editItem.ChannelId" filterable>
              <el-option
                v-for="item in channels"
                :key="item.Id"
                :label="item.Name"
                :value="item.Id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="关键字" prop="FailMessageKeyword">
            <el-input v-model="editItem.FailMessageKeyword" />
          </el-form-item>
          <el-form-item label="节点" prop="Node">
            <el-select v-model="editItem.Node">
              <el-option
                v-for="item in Nodes"
                :key="item.Node"
                :label="item.NodeName"
                :value="item.Node"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="是否启用">
            <el-checkbox v-model="editItem.Enable" />
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="editItem.Remark" />
          </el-form-item>
          <el-form-item style="text-align:center">
            <el-button size="large" type="success" @click="validtAndSubmit">提交</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>
<script>
// import {getSettingData} from '@/api/autoTransferSetting';
import { _getDeliverChannel } from '@/api/baseInfo'
import request from '@/utils/request'

const validateChannelId = (rule, value, callback) => {
  if (value < 1) {
    callback(new Error('请选择渠道'))
  } else {
    callback()
  }
}

const validateNode = (rule, value, callback) => {
  if (value < 1) {
    callback(new Error('请选择节点'))
  } else {
    callback()
  }
}

export default {
  name: 'AutoTransferSetting',
  data: function() {
    return {
      showEditPannel: false,
      editMode: '',
      loading: true,
      pagerDto: {
        _Eq_ChannelId: '',
        PageIndex: 1,
        PageSize: 100,
        total: 100
      },
      channels: [],
      Nodes: [
        { Node: 1, NodeName: '下单' },
        { Node: 2, NodeName: '下载面单' }
      ],
      sourceData: [],
      editItem: {
        Id: 0,
        ChannelId: '',
        FailMessageKeyword: '',
        Node: '',
        Enable: false,
        Remark: ''
      },
      rules: {
        ChannelId: [
          {
            validator: validateChannelId
          }
        ],
        Node: [{ validator: validateNode }],
        FailMessageKeyword: [{ required: true, message: '关键字不能为空' }]
      }
    }
  },
  created() {
    _getDeliverChannel().then((resp) => {
      this.channels = resp
    })
    this.pagerDto.PageIndex = 1
    this.pagerDto._Eq_ChannelId = ''
    this.getSettingData()
  },
  methods: {
    validtAndSubmit() {
      this.$refs['editForm'].validate((valid) => {
        if (valid) {
          this.submit()
        } else {
          return false
        }
      })
    },

    submit() {
      let url = '/AutoTransferSetting/create'
      let op = '新增'
      if (this.editMode === 'edit') {
        url = '/AutoTransferSetting/modify'
        op = '修改'
      }

      request({
        url: url,
        data: this.editItem,
        method: 'post'
      }).then((resp) => {
        if (resp.success === true) {
          this.initEditItem()
          this.$alert(`${op}成功`, `${op}成功`, {
            confirmButtonText: '确定',
            callback: () => {
              this.showEditPannel = false
              this.getSettingData()
            }
          })
        } else {
          const msg = resp.message
          this.$message(msg)
        }
      })
    },

    getSettingData() {
      this.loading = true
      request({
        url: '/AutoTransferSetting/query',
        method: 'post',
        data: this.pagerDto
      })
        .then((resp) => {
          this.loading = false
          this.pagerDto.total = resp.TotalCount
          this.pagerDto.PageIndex = resp.PageIndex

          this.sourceData = resp.Result
        })
        .finally(() => {
          this.loading = false
        })
    },
    pagerSerach() {
      this.pagerDto.PageIndex = 1
      this.getSettingData()
    },
    pageSizeChange(e) {
      this.pagerDto.PageSize = e
    },
    initEditItem(item = undefined) {
      this.editItem.Id = item === undefined ? 0 : item.Id
      this.editItem.ChannelId = item === undefined ? '' : item.ChannelId
      this.editItem.FailMessageKeyword =
        item === undefined ? '' : item.FailMessageKeyword
      this.editItem.Node = item === undefined ? '' : item.Node
      this.editItem.Enable = item === undefined ? false : item.Enable
      this.editItem.Node = item === undefined ? '' : item.Node
      this.editItem.Remark = item === undefined ? '' : item.Remark
    },
    showAddPanel() {
      this.initEditItem()
      this.editMode = 'add'
      this.showEditPannel = true
    },
    edit() {
      const id = event.currentTarget.dataset.id
      const item = this.sourceData.find((i) => i.Id === id)
      this.initEditItem(item)
      this.editMode = 'edit'
      this.showEditPannel = true
    },
    remove(event) {
      const id = event.currentTarget.dataset.id
      this.$confirm('是否删除该设置?', '正在删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = true
        request({
          url: '/AutoTransferSetting/remove',
          params: { id: id },
          method: 'post'
        })
          .then((resp) => {
            if (resp.success === true) {
              const idx = this.sourceData.findIndex((i) => i.Id === id)
              this.sourceData.splice(idx, 1)
            } else {
              const msg = resp.message
              this.$message(msg)
            }
          })
          .catch(() => {
            this.$message('删除出错')
          })
          .finally(() => {
            this.loading = false
          })
      })
    }
  }
}
</script>
<style scoped>
</style>
