<template>
  <div class="app-container">
    <el-form v-model="pagerDto" inline>
      <el-form-item label="中文品名">
        <el-input v-model="pagerDto._Eq_Name" clearable />
      </el-form-item>
      <el-form-item label="英文品名">
        <el-input v-model="pagerDto._Eq_EnName" clearable />
      </el-form-item>
      <el-form-item label="类型">
        <el-select v-model="pagerDto._Eq_Type" placeholder="请选择类型" clearable>
          <el-option
            v-for="(item,index) in types"
            :key="index"
            :value="item.Id"
            :label="item.Name"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="作用节点">
        <el-select v-model="pagerDto._Eq_OperationNode" placeholder="请选择节点" clearable>
          <el-option
            v-for="(item,index) in nodes"
            :key="index"
            :value="item.Id"
            :label="item.Name"
          />
        </el-select>
      </el-form-item>
      <el-button icon="el-icon-search" type="primary" @click="getSpecialGoodsNames">搜索</el-button>
      <el-button icon="el-icon-circle-plus-outline" type="success" @click="showAddPanel">新增</el-button>
    </el-form>
    <div>
      <el-table v-loading="loading" :data="sourceData" border>
        <el-table-column prop="IncludeChannelNames" label="包含渠道">
          <template slot-scope="scope">
            <div slot="reference">{{ scope.row.IncludeChannelNames }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="ExcludeChannelNames" label="排除渠道" />
        <el-table-column prop="IncludeCustomerCodes" label="包含客户" />
        <el-table-column prop="ExcludeCustomerCodes" label="排除客户" />
        <el-table-column prop="CountryCodes" label="国家" />
        <el-table-column prop="Name" label="中文品名" />
        <el-table-column prop="EnName" label="英文品名" />
        <el-table-column prop="TypeName" label="类型" />
        <el-table-column prop="OperationNodeName" label="作用节点" />
        <el-table-column prop="CreateUserName" label="创建人" />
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button @click="edit(scope.row)">编辑</el-button>
            <el-button type="danger" plain @click="remove(scope.row)">移除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <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"
      />
    </div>
    <el-dialog :visible.sync="showEditPannel">
      <el-form
        ref="editForm"
        v-loading="submiting"
        label-width="6em"
        :model="editItem"
        :rules="rules"
      >
        <el-form-item label="中文品名" prop="Name">
          <el-input v-model="editItem.Name" />
        </el-form-item>
        <el-form-item label="英文品名" prop="CnName">
          <el-input v-model="editItem.CnName" />
        </el-form-item>
        <el-form-item label="包含渠道" prop="IncludeChannelIdArr">
          <el-select v-model="editItem.IncludeChannelIdArr" multiple filterable clearable>
            <el-option v-for="item in channels" :key="item.Id" :label="item.Name" :value="item.Id" />
          </el-select>
          <el-tag effect="plain">不选则为全部渠道</el-tag>
        </el-form-item>
        <el-form-item label="排除渠道" prop="ExcludeChannelIdArr">
          <el-select v-model="editItem.ExcludeChannelIdArr" multiple filterable clearable>
            <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="IncludeCustomerIdArr">
          <el-select v-model="editItem.IncludeCustomerIdArr" multiple filterable clearable>
            <el-option
              v-for="item in customers"
              :key="item.CustomerNumber"
              :label="item.CompanyName"
              :value="item.Id"
            >
              <span style="float: left">{{ item.CompanyName }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.CustomerNumber }}</span>
            </el-option>
          </el-select>
          <el-tag effect="plain">不选则为全部客户</el-tag>
        </el-form-item>
        <el-form-item label="排除客户" prop="ExcludeCustomerIdArr">
          <el-select v-model="editItem.ExcludeCustomerIdArr" multiple filterable clearable>
            <el-option
              v-for="item in customers"
              :key="item.CustomerNumber"
              :label="item.CompanyName"
              :value="item.Id"
            >
              <span style="float: left">{{ item.CompanyName }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.CustomerNumber }}</span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="国家" prop="CountryCodeValues">
          <el-select v-model="editItem.CountryCodeValues" multiple filterable clearable>
            <el-option
              v-for="(item,index) in countries"
              :key="index"
              :label="item.CnName"
              :value="item.Code"
            />
          </el-select>
          <el-tag effect="plain">不选则为全部国家</el-tag>
        </el-form-item>
        <el-form-item label="类型" prop="Type">
          <el-select v-model="editItem.Type">
            <el-option
              v-for="(item,index) in types"
              :key="index"
              :value="item.Id"
              :label="item.Name"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="作用节点" prop="OperationNode">
          <el-select v-model="editItem.OperationNode">
            <el-option
              v-for="(item,index) in nodes"
              :key="index"
              :value="item.Id"
              :label="item.Name"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="是否启用">
          <el-checkbox v-model="editItem.Enabled" />
        </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>
</template>
<script>
import { _getDeliverChannel } from '@/api/baseInfo'
import request from '@/utils/request'
export default {
  name: 'SpecialGoodsName',
  data() {
    return {
      loading: false,
      submiting: false,
      showEditPannel: false,
      editMode: '',
      nodes: [
        { Name: '创建订单', Id: 1 },
        { Name: '收货', Id: 3 }
      ],
      types: [
        { Name: '禁止', Id: 1 },
        { Name: '特货', Id: 2 },
        { Name: '带电', Id: 3 }
      ],
      rules: {
        Type: { required: true, message: '请选择类型', trigger: 'blur' },
        OperationNode: {
          required: true,
          message: '请选择作用节点',
          trigger: 'blur'
        }
      },
      editItem: {
        Name: '',
        EnName: '',
        IncludeChannelIdArr: [],
        ExcludeChannelIdArr: [],
        IncludeCustomerIdArr: [],
        ExcludeCustomerIdArr: [],
        CountryCodeValues: [],
        Type: null,
        OperationNode: null,
        Enabled: false,
        Remark: null
      },
      sourceData: [],
      channels: [],
      countries: [],
      customers: [],
      pagerDto: {
        _Eq_Name: null,
        _Eq_OperationNode: null,
        _Eq_Type: null,
        keyword: null,
        PageIndex: 1,
        PageSize: 100,
        total: 0

      }
    }
  },
  created() {
    _getDeliverChannel().then((resp) => {
      this.channels = resp
    })
    this.getCountriesAndCustomers()
    this.pagerDto.PageIndex = 1
    this.pagerDto._Eq_ChannelId = ''
    this.getSpecialGoodsNames()
  },
  methods: {
    getSpecialGoodsNames() {
      this.loading = true
      request({
        url: '/SpecialGoodsName/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
        })
    },
    getCountriesAndCustomers() {
      request({
        url: '/channelMatchRules/CountriesAndCustomers',
        method: 'get'
      }).then((resp) => {
        this.customers = resp.Customers
        this.countries = resp.Countries
      })
    },
    edit(item) {
      this.editMode = 'edit'
      this.editItem.Id = item.Id
      this.editItem.Name = item.Name

      this.editItem.IncludeChannelIdArr = item.IncludeChannelIdArr
      this.editItem.ExcludeChannelIdArr = item.ExcludeChannelIdArr
      this.editItem.IncludeCustomerIdArr = item.IncludeCustomerIdArr
      this.editItem.CountryCodeValues = item.CountryCodeValues
      this.editItem.OperationNode = item.OperationNode
      this.editItem.Type = item.Type

      this.editItem.Enabled = item.Enabled
      this.editItem.Remark = item.Remark
      this.showEditPannel = true
    },
    remove(item) {
      this.$confirm('是否删除该品名设置?', '正在删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = true
        request({
          url: '/SpecialGoodsName/remove',
          params: { id: item.Id },
          method: 'post'
        })
          .then((resp) => {
            console.log(resp)
            if (resp === true) {
              const idx = this.sourceData.findIndex((i) => i.Id === item.Id)
              this.sourceData.splice(idx, 1)
            } else {
              const msg = resp.message
              this.$message(msg)
            }
          })
          .catch(() => {
            this.$message('删除出错')
          })
          .finally(() => {
            this.loading = false
          })
      })
    },
    pagerSerach(p) {
      this.pagerDto.PageIndex = p
      this.getSpecialGoodsNames()
    },
    initEditItem() {
      this.editItem.Name = ''
      this.editItem.IncludeChannelIdArr = []
      this.editItem.ExcludeChannelIdArr = []
      this.editItem.IncludeCustomerIdArr = []
      this.editItem.ExcludeCustomerIdArr = []
      this.editItem.CountryCodeValues = []
      this.editItem.Type = null
      this.editItem.OperationNode = null
      this.editItem.Enabled = false
      this.editItem.Remark = ''
    },
    showAddPanel() {
      this.editMode = 'add'
      this.initEditItem()
      this.showEditPannel = true
    },
    submit() {
      if (!this.editItem.Name && !this.editItem.EnName) {
        this.$message({ message: '中文品名和英文品名不能同时为空', type: 'error' })
        return
      }
      let url = '/SpecialGoodsName/create'
      let op = '新增'
      if (this.editMode === 'edit') {
        url = '/SpecialGoodsName/modify'
        op = '修改'
      }
      this.submiting = true
      request({
        url: url,
        data: this.editItem,
        method: 'post'
      })
        .then((resp) => {
          if (resp.success === true) {
            this.showEditPannel = false
            this.initEditItem()
            this.$alert(`${op}成功`, `${op}成功`, {
              confirmButtonText: '确定',
              callback: () => {
                this.getChannelMatchRules()
              }
            })
          } else {
            const msg = resp.message
            this.$message(msg)
          }
        })
        .finally(() => {
          this.submiting = false
        })
    },
    validtAndSubmit() {
      this.$refs['editForm'].validate((valid) => {
        if (valid) {
          this.submit()
        } else {
          return false
        }
      })
    }
  }
}
</script>
<style scoped>
</style>
