<template>
  <base-list>
    <template slot="n_header">
      <el-form v-model="pagerDto" inline>
        <el-form-item label="渠道">
          <el-select v-model="pagerDto._Eq_ChannelId" placeholder="渠道" clearable filterable>
            <el-option v-for="item in channels" :key="'channel1' + item.Id" :value="item.Id" :label="item.Name" />
          </el-select>
        </el-form-item>
        <el-form-item label="通邮类型">
          <el-select v-model="pagerDto._Eq_PostalType">
            <el-option v-for="item in postalTypes" :key="item.value" :value="item.value" :label="item.name" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-form-item label="国家" prop="CountryCodeValues">
            <el-select v-model="pagerDto._Eq_CountryCode" filterable clearable>
              <el-option v-for="(item, index) in countries" :key="index" :label="item.CnName" :value="item.Code" />
            </el-select>
          </el-form-item>
        </el-form-item>
        <el-form-item label="省州">
          <el-input v-model="pagerDto._Eq_Province"></el-input>
        </el-form-item>
        <el-form-item label="城市">
          <el-input v-model="pagerDto._Eq_City"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="pagerSerach(1)">查询</el-button>
          <el-button type="primary" @click="openAdd">添加</el-button>
          <el-button type="warning" @click="openBatchImport">批量导入</el-button>
        </el-form-item>
      </el-form>
    </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="ChannelName" label="渠道名称" />
        <el-table-column prop="CountryCode" label="国家" />
        <el-table-column prop="City" label="城市" />
        <el-table-column prop="Province" label="省州" />
        <el-table-column prop="ZipCodeFrom" label="邮编(从)" />
        <el-table-column prop="ZipCodeTo" label="邮编(到)" />
        <el-table-column prop="PostalTypeName" label="通邮类型" />
        <el-table-column prop="Enabled" label="是否启用">
          <template scope="s">
            <el-tag v-if="s.row.Enabled == true" type="success">是</el-tag>
            <el-tag v-else type="error">否</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template scope="s">
            <el-button type="primary" size="medium" @click="openEdit(s.row)">编辑</el-button>
            <el-button type="danger" size="medium" @click="openDelete(s.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="pagerSerach"
      />
      <el-dialog title="新增" :visible.sync="isOpenAdd" width="30%" :close-on-click-modal="false">
        <el-form ref="editForm" :model="editItem" :rules="rules">
          <el-form-item label="渠道" prop="ChannelId">
            <el-select v-model="editItem.ChannelId" placeholder="渠道" clearable filterable>
              <el-option v-for="item in channels" :key="'channel2' + item.Id" :value="item.Id" :label="item.Name" />
            </el-select>
          </el-form-item>
          <el-form-item label="国家" prop="CountryCode">
            <el-select v-model="editItem.CountryCode" filterable clearable>
              <el-option v-for="(item, index) in countries" :key="index" :label="item.CnName" :value="item.Code" />
            </el-select>
          </el-form-item>
          <el-form-item label="省州">
            <el-input v-model="editItem.Province" />
          </el-form-item>
          <el-form-item label="城市">
            <el-input v-model="editItem.City" />
          </el-form-item>
          <el-form-item label="邮编(从)">
            <el-input v-model="editItem.ZipCodeFrom" />
          </el-form-item>
          <el-form-item label="邮编(到)">
            <el-input v-model="editItem.ZipCodeTo" />
          </el-form-item>
          <el-form-item label="通邮类型" prop="PostalType">
            <el-select v-model="editItem.PostalType">
              <el-option v-for="item in postalTypes" :key="item.value" :value="item.value" :label="item.name" />
            </el-select>
          </el-form-item>
          <el-form-item label="是否启用">
            <el-switch v-model="editItem.Enabled" />
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" :loading="adding" @click="submitSave">确 定</el-button>
        </span>
      </el-dialog>
      <el-dialog title="批量导入" :visible.sync="isOpenBatchImport" width="30%" :close-on-click-modal="false">
        <batch-import-postal-area ref="batchImportCtrl" v-loading="batchImporting" :channels="channels" @onBatchImport="batchImport" />
      </el-dialog>
    </template>
  </base-list>
</template>
<script>
import BaseList from '@/components/Xyy/baselist'
import { _getDeliverChannel, _getCountries } from '@/api/baseInfo'

import { _queryPage, _save, _remove, _batchImport } from '@/api/channel/postalArea'
import batchImportPostalArea from './batchImportPostalArea.vue'
export default {
  name: 'PostalArea',
  components: { 'base-list': BaseList, batchImportPostalArea },
  data() {
    return {
      batchImporting: false,
      countries: [],
      postalTypes: [
        { name: '通邮', value: 0 },
        { name: '偏远', value: 1 },
        { name: '不通邮', value: 2 }
      ],
      channels: [],
      data: [],
      dataLoading: false,
      pagerDto: { PageIndex: 0, PageSize: 10, total: 0 },
      isOpenAdd: false,
      isOpenBatchImport: false,
      adding: false,
      editItem: {
        ChannelId: null,
        CountryCode: null,
        City: null,
        Province: null,
        ZipCodeFrom: null,
        ZipCodeTo: null,
        PostalType: 0,
        Enabled: true
      },
      rules: {
        ChannelId: [{ required: true, message: '渠道不能为空', trigger: 'blur' }],
        CountryCode: [{ required: true, message: '国家不能为空', trigger: 'blur' }]
      }
    }
  },
  mounted() {
    this.pagerSerach(1)
  },
  created() {
    _getDeliverChannel().then((resp) => {
      this.channels = resp
    })
    _getCountries().then((resp) => {
      this.countries = resp
    })
  },
  methods: {
    batchImport(param) {
      this.batchImporting = true
      _batchImport(param).then((resp) => {
        this.$message({ type: 'success', message: '提交成功' })

        this.$refs['batchImportCtrl'].init()
        this.isOpenBatchImport = false
      }).finally(() => {
        this.batchImporting = false
      })
    },

    openBatchImport() {
      this.isOpenBatchImport = true
    },
    initEditItem() {
      this.editItem.Id = null
      this.editItem.ChannelId = null
      this.editItem.CountryCode = null
      this.editItem.City = null
      this.editItem.Province = null
      this.editItem.ZipCodeFrom = null
      this.editItem.ZipCodeTo = null
      this.editItem.PostalType = 0
      this.editItem.Enabled = true
    },
    openEdit(item) {
      this.initEditItem()
      this.editItem.Id = item.Id
      this.editItem.ChannelId = item.ChannelId
      this.editItem.CountryCode = item.CountryCode
      this.editItem.City = item.City
      this.editItem.Province = item.Province
      this.editItem.ZipCodeFrom = item.ZipCodeFrom
      this.editItem.ZipCodeTo = item.ZipCodeTo
      this.editItem.PostalType = item.PostalType
      this.editItem.Enabled = item.Enabled
      this.isOpenAdd = true
    },
    openDelete(item) {
      this.$confirm('是否删除？').then((res) => {
        const data = { id: item.Id }
        _remove(data).then((res) => {
          this.$message({ type: 'success', message: '成功' })
          const idx = this.data.findIndex((i) => i == item)
          if (idx >= 0) {
            this.data.splice(idx, 1)
          }
        })
      })
    },
    openAdd() {
      this.initEditItem()
      this.isOpenAdd = true
    },
    submitSave() {
      const _this = this
      this.$refs['editForm'].validate((valid) => {
        if (valid) {
          _this.adding = true
          _save(_this.editItem).then((resp) => {
            _this.$message({ type: 'success', message: '提交成功' })
            _this.adding = false
            _this.isOpenAdd = false
          })
        } else {
          return false
        }
      })
    },
    pagerSerach(index) {
      this.dataLoading = true
      if (index) {
        this.pagerDto.PageIndex = index
      }
      _queryPage(this.pagerDto)
        .then((res) => {
          this.data = res.Result
          this.pagerDto.total = res.TotalCount
        })
        .finally((res) => {
          this.dataLoading = false
        })
    },
    changePager(v) {
      this.PageSize = v
      this.pagerSerach()
    }
  }
}
</script>
