<template>
  <el-col :span="24" class="mw">
    <div class="content-include">
      <div class="content-title">发货渠道配置>平台渠道发货配置</div>
      <div class="border-box">新增平台渠道配置</div>
      <div class="search-input">
        <el-form :inline="true" :model="insertPlatformChannelParams" class="demo-form-inline">
          <el-form-item label="平台代理编码:">
            <el-input v-model="insertPlatformChannelParams.agentCode" clearable size="mini" placeholder="平台代理编码"
                      @keyup.enter.native="searchPage"/>
          </el-form-item>
          <el-form-item label="平台授权编码:">
            <el-input v-model="insertPlatformChannelParams.authCode" clearable size="mini" placeholder="平台授权编码"
                      @keyup.enter.native="searchPage"/>
          </el-form-item>
          <el-form-item label="仓库编码:">
            <el-input v-model="insertPlatformChannelParams.storeCode" clearable size="mini" placeholder="仓库编码"
                      @keyup.enter.native="searchPage"/>
          </el-form-item>
          <el-form-item label="渠道编码:">
            <el-input v-model="insertPlatformChannelParams.channelCode" 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="border-box">查询平台渠道配置</div>
      <div class="search-input">
        <el-form :inline="true" :model="searchPlatformChannelParams" class="demo-form-inline">
          <el-form-item label="平台代理编码:">
            <el-input v-model="searchPlatformChannelParams.agentCode" clearable size="mini" placeholder="平台代理编码"
                      @keyup.enter.native="searchPage"/>
          </el-form-item>
          <el-form-item label="平台授权编码:">
            <el-input v-model="searchPlatformChannelParams.authCode" clearable size="mini" placeholder="平台授权编码"
                      @keyup.enter.native="searchPage"/>
          </el-form-item>
          <el-form-item label="仓库编码:">
            <el-input v-model="searchPlatformChannelParams.storeCode" clearable size="mini" placeholder="仓库编码"
                      @keyup.enter.native="searchPage"/>
          </el-form-item>
          <el-form-item label="渠道编码:">
            <el-input v-model="searchPlatformChannelParams.channelCode" 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>
      <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="authCode" label="平台授权"/>
        <el-table-column prop="channelCode" label="渠道编码" sortable/>
        <el-table-column prop="senderAddressId" label="发件人id" sortable/>
        <el-table-column prop="pickupAddressId" label="揽件人id" sortable/>
        <el-table-column prop="refundAddressId" label="退件人id" sortable/>
        <el-table-column prop="createDate" label="创建时间" sortable/>
        <el-table-column prop="createBy" 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="searchPlatformChannelParams.pageNo"
            :page-sizes="[30, 50, 100]"
            :page-size="searchPlatformChannelParams.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="searchPlatformChannelParams.total"
            style="float:right;display:inline-block"
        />
      </div>
    </el-col>
  </el-col>
</template>
<script>
export default {
  name: "platformChannelDelivery",
  data() {
    return {
      table: true,
      importTableData: [],
      tableMaxHeight: window.innerHeight - 263,
      insertPlatformChannelParams:{
        agentCode:'',
        authCode:'',
        storeCode:'',
        channelCode:''
      },
      searchPlatformChannelParams:{
        agentCode:'',
        authCode:'',
        storeCode:'',
        channelCode:'',
        pageNo:1,
        pageSize:30,
        total:0,
      },
    }
  },
  methods: {
    searchPage() {
      this.searchPlatformChannelParams.pageNo = 1
      this.getPage();
    },
    getPage() {
      this.axios({
        data: this.searchPlatformChannelParams,
        url: 'logisticsConfig/',
        method: 'post'
      }).then(res => {
        if (res.success) {
          this.importTableData = res.module.result;
          this.searchPlatformChannelParams.total = res.module.total;
        }
      })
    },
    insertOnline() {
      this.axios({
        data: this.insertPlatformChannelParams,
        url: 'logisticsConfig/',
        method: 'post'
      }).then(res => {
        if (res.success) {
          this.$message("录入成功")
          this.insertOnlineVisible = false;
          this.getPage();
        }
      })
    },
    handleSizeChange(val) {
      let that = this;
      that.searchPlatformChannelParams.pageSize = val;
      this.getPage();
    },
    handleCurrentChange(val) {
      let that = this;
      that.searchPlatformChannelParams.pageNo = val;
      this.getPage();
    },
  },
  mounted() {
    window.onresize = () => {
      return (() => {
        that.tableMaxHeight = window.innerHeight - 263
      })();
    },
        this.searchPage();
  },
  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;
}

.border-box {
  margin-top: 10px;
  margin-left: 10px;
  text-align: center;
  padding: 10px;
  border: 2px solid #909399;
  width: 100px;
  border-radius: 5px;
}
</style>
