<template>
  <el-col :span="24" class="mw">
    <div class="content-include">
      <div class="content-title">发货渠道配置>线上发货配置</div>
      <div class="search-input">
        <el-form :inline="true" :model="onlineDeliveryParams" class="demo-form-inline">
          <el-form-item label="平台代理编码:">
            <el-input v-model="onlineDeliveryParams.agentCode" clearable size="mini" placeholder="平台代理编码"
                      @keyup.enter.native="searchPage"/>
          </el-form-item>
          <el-form-item label="仓库编码:">
            <el-input v-model="onlineDeliveryParams.storeCode" clearable size="mini" placeholder="仓库编码"
                      @keyup.enter.native="searchPage"/>
          </el-form-item>
          <el-form-item label="订单国家编号:">
            <el-input v-model="onlineDeliveryParams.countryCode" clearable size="mini" placeholder="订单国家编号"
                      @keyup.enter.native="searchPage"/>
          </el-form-item>
          <el-form-item label="物流渠道:">
            <el-input v-model="onlineDeliveryParams.channelName" clearable size="mini" placeholder="物流渠道"
                      @keyup.enter.native="searchPage"/>
          </el-form-item>
          <el-button type="primary" size="mini" @click="searchPage" class="mt7 mr15 r mb10">
            查询
          </el-button>
        </el-form>
      </div>
      <div class="pl15 mt10">
        <el-button type="primary" size="mini" class="mb10" @click="openInsert">+ 新增平台发货渠道
        </el-button>
      </div>
      <el-table ref="multipleTable" :data="importTableData" class="pl15 mb47" :height="tableMaxHeight">
        <el-table-column type="selection" align="center"/>
        <el-table-column prop="agentCode" label="平台代理编码"/>
        <el-table-column prop="storeCode" label="仓库编码"/>
        <el-table-column prop="countryCode" label="订单国家编码"/>
        <el-table-column prop="orderMinPrice" label="订单金额(最小)" sortable/>
        <el-table-column prop="orderMaxPrice" label="订单金额(最大)" sortable/>
        <el-table-column prop="deliveryType" label="发货类型" sortable/>
        <el-table-column prop="channelName" label="物流渠道名称" sortable/>
        <el-table-column prop="channelCode" label="物流渠道系统编码" sortable/>
        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <span class="poi textButton" @click="openEdit(scope.row.id)">编辑</span>
            <span class="poi textButton" @click="removeOnline(scope.row)">删除</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-col :span="24">
      <div class="ceiling-pagination">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="onlineDeliveryParams.pageNo"
            :page-sizes="[30, 50, 100]"
            :page-size="onlineDeliveryParams.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="onlineDeliveryParams.total"
            style="float:right;display:inline-block"
        />
      </div>
    </el-col>
    <el-dialog
        :visible="insertOnlineVisible"
        title="新增平台发货渠道"
        width="600px"
        @close="insertOnlineVisible = false"
        center>
      <el-row>
        <el-form label-position="right" label-width="130px" :model="insertOnlineParams">
          <el-form-item prop="agentCode" label-width="130px" :required="true">
            <span slot="label">平台代理编码:</span>
            <el-select size="small" v-model="insertOnlineParams.agentCode" clearable placeholder="请选择">
              <el-option
                  v-for="item in agentList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="storeCode" label-width="130px" :required="true">
            <span slot="label">仓库:</span>
            <el-select size="small" v-model="insertOnlineParams.storeCode" clearable placeholder="请选择">
              <el-option
                  v-for="item in storeCodeList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="countryCode" label-width="130px" :required="true">
            <span slot="label">订单国家编号:</span>
            <el-input v-model="insertOnlineParams.countryCode" placeholder="请输入" class="pct75"></el-input>
          </el-form-item>
          <el-form-item prop="orderMinPrice" label-width="130px" :required="true">
            <span slot="label">订单金额最小值:</span>
            <el-input v-model="insertOnlineParams.orderMinPrice" placeholder="请输入" class="pct75"></el-input>
          </el-form-item>
          <el-form-item prop="orderMaxPrice" label-width="130px" :required="true">
            <span slot="label">订单金额最大值:</span>
            <el-input v-model="insertOnlineParams.orderMaxPrice" placeholder="请输入" class="pct75"></el-input>
          </el-form-item>
          <el-form-item prop="deliveryType" label-width="130px">
            <span slot="label">发货类型:</span>
            <el-select size="small" v-model="insertOnlineParams.deliveryType" clearable placeholder="请选择">
              <el-option
                  v-for="item in deliveryTypeList"
                  :key="item.id"
                  :label="item.id"
                  :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="channelName" label-width="130px" :required="true">
            <span slot="label">渠道名称:</span>
            <el-input v-model="insertOnlineParams.channelName" placeholder="请输入" class="pct75"></el-input>
          </el-form-item>
          <el-form-item prop="channelCode" label-width="130px" :required="true">
            <span slot="label">渠道系统编码:</span>
            <el-input v-model="insertOnlineParams.channelCode" placeholder="请输入" class="pct75"></el-input>
          </el-form-item>
          <div class="discuss-buy" @click="insertOnline">确认</div>
        </el-form>
      </el-row>
    </el-dialog>
    <el-dialog
        :visible="updateOnlineVisible"
        title="新增平台发货渠道"
        width="600px"
        @close="updateOnlineVisible = false"
        center>
      <el-row>
        <el-form label-position="right" label-width="130px" :model="updateOnlineParams">
          <el-form-item prop="agentCode" label-width="130px" :required="true">
            <span slot="label">平台代理编码:</span>
            <el-select size="small" v-model="updateOnlineParams.agentCode" clearable placeholder="请选择">
              <el-option
                  v-for="item in agentList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="storeCode" label-width="130px" :required="true">
            <span slot="label">仓库:</span>
            <el-select size="small" v-model="updateOnlineParams.storeCode" clearable placeholder="请选择">
              <el-option
                  v-for="item in storeCodeList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="countryCode" label-width="130px" :required="true">
            <span slot="label">订单国家编号:</span>
            <el-input v-model="updateOnlineParams.countryCode" placeholder="请输入" class="pct75"></el-input>
          </el-form-item>
          <el-form-item prop="orderMinPrice" label-width="130px" :required="true">
            <span slot="label">订单金额最小值:</span>
            <el-input v-model="updateOnlineParams.orderMinPrice" placeholder="请输入" class="pct75"></el-input>
          </el-form-item>
          <el-form-item prop="orderMaxPrice" label-width="130px" :required="true">
            <span slot="label">订单金额最大值:</span>
            <el-input v-model="updateOnlineParams.orderMaxPrice" placeholder="请输入" class="pct75"></el-input>
          </el-form-item>
          <el-form-item prop="deliveryType" label-width="130px">
            <span slot="label">发货类型:</span>
            <el-select size="small" v-model="updateOnlineParams.deliveryType" clearable placeholder="请选择">
              <el-option
                  v-for="item in deliveryTypeList"
                  :key="item.id"
                  :label="item.id"
                  :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="channelName" label-width="130px" :required="true">
            <span slot="label">渠道名称:</span>
            <el-input v-model="updateOnlineParams.channelName" placeholder="请输入" class="pct75"></el-input>
          </el-form-item>
          <el-form-item prop="channelCode" label-width="130px" :required="true">
            <span slot="label">渠道系统编码:</span>
            <el-input v-model="updateOnlineParams.channelCode" placeholder="请输入" class="pct75"></el-input>
          </el-form-item>
          <div class="discuss-buy" @click="editOnline">确认</div>
        </el-form>
      </el-row>
    </el-dialog>
  </el-col>
</template>
<script>
export default {
  name:'onlineDelivery',
  data() {
    return {
      table: true,
      onlineDeliveryParams: {
        agentCode: '',
        storeCode: '',
        countryCode: '',
        channelName: '',
        pageNo: 1,
        pageSize: 30,
        total: 0,
      },
      total: 0,
      importTableData: [],
      tableMaxHeight: window.innerHeight - 263,

      agentList: [{name: '阿里巴巴', id: 'alibaba'},
        {name: 'AliExpress', id: 'aliexpress'},
        {name: 'Allegro', id: 'allegro'},
        {name: 'Amazon', id: 'amazon'},
        {name: '国际分销', id: 'CHEAPFASTSALE'},
        {name: 'eBay', id: 'ebay'},
        {name: '京东', id: 'jd'},
        {name: 'Joom', id: 'joom'},
        {name: '国内分销', id: 'JZMFASTSALE'},
        {name: '智链互联分销', id: 'JZMSALE'},
        {name: 'Lazada', id: 'lazada'},
        {name: 'OfflineChannel', id: 'OfflineChannel'},
        {name: 'Shopee', id: 'shopee'},
        {name: 'shopify', id: 'shopify'},
        {name: '阿里巴巴国际站', id: 'supplier_alibaba'},
        {name: 'tophatter', id: 'tophatter'},
        {name: 'Vova', id: 'vova'},
        {name: 'Wish', id: 'wish'},
      ],
      deliveryTypeList: [{id:'warehouse'},{id:'epc'},{id:'gc'},{id:'pcu'},{id:'alp'},{id:'internal'},{id:'we'},{id:'bigbag'}],
      insertOnlineVisible: false,
      updateOnlineVisible: false,
      insertOnlineParams: {
        agentCode: '',
        storeCode: '',
        countryCode: '',
        orderMinPrice: 0,
        orderMaxPrice: 99999,
        deliveryType: '',
        channelName: '',
        channelCode: '',
        id: '',
      },
      updateOnlineParams: {
        agentCode: '',
        storeCode: '',
        countryCode: '',
        orderMinPrice: 0,
        orderMaxPrice: 99999,
        deliveryType: '',
        channelName: '',
        channelCode: '',
        id: '',
      },
      storeCodeList: [],

    }
  },
  methods: {
    openInsert() {
      this.insertOnlineVisible = true;
    },
    openEdit(id) {
      this.findOnline(id);
      this.updateOnlineVisible = true;
    },
    searchPage() {
      this.onlineDeliveryParams.pageNo = 1
      this.getPage();
    },
    getPage() {
      this.axios({
        data: this.onlineDeliveryParams,
        url: 'logisticsConfig/onlineDelivery/pageOnlineDelivery',
        method: 'post'
      }).then(res => {
        if (res.success) {
          this.importTableData = res.module.result;
          this.onlineDeliveryParams.total = res.module.total;
        }
      })
    },
    insertOnline() {
      this.axios({
        data: this.insertOnlineParams,
        url: 'logisticsConfig/onlineDelivery/insertOnlineDelivery',
        method: 'post'
      }).then(res => {
        if (res.success) {
          this.$message("录入成功")
          this.insertOnlineVisible = false;
          this.getPage();
        }
      })
    },
    removeOnline(item) {
      this.$confirm('确定删除该平台发货渠道?', '删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.axios({
          url: 'logisticsConfig/onlineDelivery/removeOnlineDelivery',
          method: 'post',
          data: {
            id: item.id
          }
        }).then(result => {
          if (result.success) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.getPage();
          }
        })

      }).catch(() => {
      });
    },
    findOnline(id) {
      this.axios({
        data: {id:id},
        url: 'logisticsConfig/onlineDelivery/findOnlineDelivery',
        method: 'post'
      }).then(res => {
        if (res.success) {
          this.updateOnlineParams = res.module;
        }
      })
    },
    editOnline() {
      this.axios({
        data: this.updateOnlineParams,
        url: 'logisticsConfig/onlineDelivery/updateOnlineDelivery',
        method: 'post'
      }).then(res => {
        if (res.success) {
          this.$message("更新成功");
          this.getPage();
        }
      })
    },
    handleSizeChange(val) {
      let that = this;
      that.onlineDeliveryParams.pageSize = val;
      this.getPage();
    },
    handleCurrentChange(val) {
      let that = this;
      that.onlineDeliveryParams.pageNo = val;
      this.getPage();
    },
    getStoreList() {
      this.axios({
        url: 'logisticsConfig/onlineDelivery/getStoreList',
        method: 'post'
      }).then(res => {
        if (res.success) {
          this.storeCodeList = []
          res.module.forEach(x => {
            this.storeCodeList.push({name:x.storeCode,id:x.storeCode})
          })
        }
      })
    },
  },
  mounted() {
    window.onresize = () => {
      return (() => {
        that.tableMaxHeight = window.innerHeight - 263
      })();
    },
        this.searchPage();
    this.getStoreList();
  },
  activated() {
    this.tableMaxHeight = window.innerHeight - 263;
  },
}
</script>
<style scoped lang="less">
.el-drawer__body {
  .el-pagination {
    margin-right: 0px
  }
}

.textButton {
  color: #4E74FC;
}

.textColor {
  color: #555555;
}

.el-table th.gutter {
  display: table-cell !important;
}

.test {
  margin-top: 14px;
}

.f13 {
  font-size: 13px;
  font-weight: normal;
}

.el-table th > .cell {
  display: inline-block;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
  vertical-align: middle;
  padding-right: 10px;
  width: 100%;
}

.show-overflow {
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
}

.errorRow {
  color: #F56C6C;
}

.very-long-font {
  font-size: 12px;
  display: -webkit-box;
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.pl0 {
  padding-left: 0;
}

.pt0 {
  padding-top: 0;
}

.has-choose {
  height: 25px;
  border: 1px solid #4E74FC;
  background: rgb(224, 244, 255);
  border-radius: 4px;
  line-height: 25px;
}

.discuss-buy {
  padding: 10px;
  text-align: center;
  color: #FFFFFF;
  background: #B70037;
  width: 150px;
  margin: 20px auto 0px auto;
  cursor: pointer;
}
</style>
