<template>
  <el-col :span="24" class="mw">
    <div class="content-include">
      <div class="content-title">物流配置>物流公司和渠道</div>
      <div class="df">
        <div class="pct50">
          <div class="search-input">
            <el-form :inline="true" :model="companyParams" class="demo-form-inline">
              <el-form-item label="物流公司查询:">
                <el-input v-model="companyParams.companyName" clearable size="mini" placeholder="输入物流公司名"
                          @keyup.enter.native="searchCompanyPage"/>
              </el-form-item>
              <el-button type="primary" size="mini" @click="searchCompanyPage" class="mt7 mr15 r mb10">
                查询
              </el-button>
            </el-form>
          </div>
          <div class="pl15 mt10">
            <el-button type="primary" size="mini" class="mb10" @click="openInsertCompany">+ 物流公司录入
            </el-button>
          </div>
          <el-table ref="multipleTable" :data="companyTableData" class="pl15 mb47"
                    @selection-change="companySearchChannel" :height="tableMaxHeight">
            <el-table-column type="selection" align="center"/>
            <el-table-column prop="companyName" label="公司名称"/>
            <el-table-column prop="contacts" label="联系人"/>
            <el-table-column prop="contactWay" label="联系方式"/>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <span class="poi textButton" @click="updateCompany(scope.row)">编辑</span>
                <span class="poi textButton" @click="removeCompany(scope.row)">删除</span>
              </template>
            </el-table-column>
          </el-table>
          <el-col :span="24">
            <div>
              <el-pagination
                  @size-change="handleSizeChange1"
                  @current-change="handleCurrentChange1"
                  :current-page="companyParams.pageNo"
                  :page-sizes="[30, 50, 100]"
                  :page-size="companyParams.pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="companyParams.total"
                  style="float:right;display:inline-block"
              />
            </div>
          </el-col>
        </div>
        <div class="pct50">
          <div class="search-input">
            <el-form :inline="true" :model="channelParams" class="demo-form-inline">
              <el-form-item label="渠道查询:">
                <el-input v-model="channelParams.channelName" clearable size="mini" placeholder="输入渠道名称"
                          @keyup.enter.native="searchChannelPage"/>
              </el-form-item>
              <el-button type="primary" size="mini" @click="searchChannelPage" class="mt7 mr15 r mb10">
                查询
              </el-button>
            </el-form>
          </div>
          <div class="pl15 mt10">
            <el-button type="primary" size="mini" class="mb10" @click="openInsertChannel">+ 渠道录入
            </el-button>
          </div>
          <el-table ref="multipleTable2" :data="channelTableData" class="pl15 mb47"
                    :height="tableMaxHeight">
            <el-table-column type="index" label="序号" fixed>
              <template slot-scope="scope">
                <span>{{ (channelParams.pageNo - 1) * channelParams.pageSize + scope.$index + 1 }}</span>
              </template>
            </el-table-column>
            <el-table-column type="selection" align="center" fixed/>
            <el-table-column prop="companyName" label="物流公司"/>
            <el-table-column prop="channelName" label="渠道名称"/>
            <el-table-column prop="channelCode" label="渠道编码"/>
            <el-table-column prop="channelNo" label="渠道号"/>
            <el-table-column prop="maxWeight" label="最大重量"/>
            <el-table-column label="是否启用">
              <template slot-scope="scope">
                <div>{{ scope.row.isEnabled ? '是' : '否' }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="agentCode" label="代理编码"/>
            <el-table-column prop="warehouseCode" label="分仓代码"/>
            <el-table-column label="结账方式">
              <template slot-scope="scope">
                <div>{{ scope.row.isOnline ? '线上' : '线下' }}</div>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <span class="poi textButton" @click="removeChannel(scope.row)">删除</span>
              </template>
            </el-table-column>
          </el-table>
          <el-col :span="24">
            <div style="float: top">
              <el-pagination
                  @size-change="handleSizeChange2"
                  @current-change="handleCurrentChange2"
                  :current-page="channelParams.pageNo"
                  :page-sizes="[30, 50, 100]"
                  :page-size="channelParams.pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="channelParams.total"
                  style="float:right;display:inline-block"
              />
            </div>
          </el-col>
          <el-dialog
              :visible="insertChannelVisible"
              title="录入渠道"
              width="600px"
              @close="insertChannelVisible = false"
              center>
            <el-row>
              <el-form label-position="right" label-width="110px" :model="insertChannelParams">
                <el-form-item prop="companyId" label-width="100px" :required="true">
                  <span slot="label">物流公司:</span>
                  <el-select size="small" v-model="insertChannelParams.companyId" clearable placeholder="请选择">
                    <el-option
                        v-for="item in companyList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item prop="channelName" label-width="100px" :required="true">
                  <span slot="label">渠道名称:</span>
                  <el-input v-model="insertChannelParams.channelName" placeholder="请输入" class="pct75"></el-input>
                </el-form-item>
                <el-form-item prop="maxWeight" label-width="100px" :required="true">
                  <span slot="label">最大重量:</span>
                  <el-input v-model="insertChannelParams.maxWeight" placeholder="请输入" class="pct75"></el-input>
                </el-form-item>
                <el-form-item prop="agentCode" label-width="100px">
                  <span slot="label">代理编码:</span>
                  <el-select size="small" v-model="insertChannelParams.agentCode" clearable placeholder="请选择">
                    <el-option
                        v-for="item in companyList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item prop="warehouseCode" label-width="100px">
                  <span slot="label">关联分仓:</span>
                  <el-select size="small" v-model="insertChannelParams.warehouseCode" clearable placeholder="请选择">
                    <el-option
                        v-for="item in companyList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item prop="labelExpired" label-width="100px" :required="true">
                  <span slot="label">运单过期天数:</span>
                  <el-input v-model="insertChannelParams.labelExpired" placeholder="请输入" class="pct75"></el-input>
                </el-form-item>
                <el-form-item prop="labelSize" label-width="100px" :required="true">
                  <span slot="label">运单尺寸:</span>
                  <el-select size="small" v-model="insertChannelParams.labelSize" clearable placeholder="请选择">
                    <el-option
                        v-for="item in labelSizeList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item prop="isEnabled" label-width="100px" :required="true">
                  <span slot="label">是否启用:</span>
                  <el-select size="small" v-model="insertChannelParams.isEnabled" clearable placeholder="请选择">
                    <el-option
                        v-for="item in isEnabledList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item prop="channelType" label-width="100px" :required="true">
                  <span slot="label">境内境外:</span>
                  <el-select size="small" v-model="insertChannelParams.channelType" clearable placeholder="请选择">
                    <el-option
                        v-for="item in channelTypeList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item prop="channelType" label-width="100px" :required="true">
                  <span slot="label">结账方式:</span>
                  <el-select size="small" v-model="insertChannelParams.isOnline" clearable placeholder="请选择">
                    <el-option
                        v-for="item in isOnlineList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item prop="position" label-width="100px" :required="true">
                  <span slot="label">货物类型:</span>
                  <el-checkbox
                      v-model="checkAllBizTag"
                      @change="handleAllAgentChange"
                  >全选
                  </el-checkbox>
                  <el-checkbox-group
                      v-model="insertChannelParams.position"
                      @change="(val)=>{handleCheckedAgentChange(val)}"
                  >
                    <el-checkbox
                        v-for="item in bizTagList"
                        :label="item.id"
                        :key="item.id"
                    >{{ item.name }}
                    </el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
                <div class="discuss-buy" @click="insertChannel">确认</div>
              </el-form>
            </el-row>
          </el-dialog>
          <el-dialog
              :visible="insertCompanyVisible"
              title="录入物流公司"
              width="600px"
              @close="insertCompanyVisible = false"
              center>
            <el-row>
              <el-form label-position="right" label-width="110px" :model="insertCompanyParams">
                <el-form-item prop="companyName" label-width="100px" :required="true">
                  <span slot="label">公司名称:</span>
                  <el-input v-model="insertCompanyParams.companyName" placeholder="请输入" class="pct75"></el-input>
                </el-form-item>
                <el-form-item prop="contacts" label-width="100px" :required="true">
                  <span slot="label">联系人:</span>
                  <el-input v-model="insertCompanyParams.contacts" placeholder="请输入" class="pct75"></el-input>
                </el-form-item>
                <el-form-item prop="contactWay" label-width="100px" :required="true">
                  <span slot="label">联系方式:</span>
                  <el-input v-model="insertCompanyParams.contactWay" placeholder="请输入" class="pct75"></el-input>
                </el-form-item>
                <div class="discuss-buy" @click="insertCompany">确认</div>
              </el-form>
            </el-row>
          </el-dialog>
        </div>
      </div>
    </div>
  </el-col>
</template>
<script>
export default {
  data() {
    return {
      table: true,
      companyParams: {
        pageNo: 1,
        pageSize: 30,
        total: 0,
        companyName: '',
      },
      channelParams: {
        pageNo: 1,
        pageSize: 30,
        total: 0,
        channelName: '',
        companyIds: [],
      },
      insertChannelParams: {
        companyId: '',
        channelName: '',
        maxWeight: '',
        agentCode: '',
        warehouseCode: '',
        labelExpired: 0,
        labelSize: '',
        isEnabled: '',
        position: [1],
        isOnline: '',
        channelType: '',
      },
      insertCompanyParams: {
        companyName: '',
        contacts: '',
        contactWay: ''
      },
      insertCompanyVisible: false,
      insertChannelVisible: false,
      checkAllBizTag: false,
      bizTagList: [{name: '平台物流', id: 0},
        {name: '普货', id: 1},
        {name: '带电', id: 2},
        {name: '液体', id: 3},
        {name: '粉尘', id: 4},
        {name: '口罩', id: 5}],
      companyList: [{name: '请选择', id: ''},],
      channelTypeList: [{name: '请选择', id: ''}, {name: '境内', id: '1'}, {name: '境外', id: '0'}],
      isOnlineList: [{name: '请选择', id: ''}, {name: '线下', id: '0'}, {name: '线上', id: '1'}],
      labelSizeList: [{name: '请选择', id: ''}, {name: '10*10', id: 'Lbl10*10'}, {name: '10*15', id: 'Lbl10*15'}],
      isEnabledList: [{name: '请选择', id: ''}, {name: '是', id: '1'}, {name: '否', id: '0'}],
      companyTableData: [],
      channelTableData: [],
      tableMaxHeight: window.innerHeight - 263,
    }
  },
  methods: {
    getCompanyList() {
      this.axios({
        data: null,
        url: 'logisticsConfig/logisticsCompany/getCompanyList',
        method: 'post'
      }).then(res => {
        if (res.success) {
          res.module.forEach(x => {
            this.companyList.push({name:x.companyName,id:x.id})
          })
        }
      })
    },
    getCompanyPage() {
      this.axios({
        data: this.companyParams,
        url: 'logisticsConfig/logisticsCompany/pageCompany',
        method: 'post'
      }).then(res => {
        if (res.success) {
          this.companyTableData = res.module.result;
          this.companyParams.total = res.module.total;
        }
      })
    },
    searchCompanyPage() {
      this.companyParams.pageNo = 1;
      this.getCompanyPage();
    },
    searchChannelPage() {
      this.channelParams.pageNo = 1;
      this.getChannelPage();
    },
    companySearchChannel(val) {
      this.channelParams.companyIds = [];
      if (val.length > 0) {
        val.forEach(x => {
          this.channelParams.companyIds.push(x.id)
        })
      }
      this.searchChannelPage();
    },
    getChannelPage() {
      this.axios({
        data: this.channelParams,
        url: 'logisticsConfig/logisticsCompany/pageChannel',
        method: 'post'
      }).then(res => {
        if (res.success) {
          this.channelTableData = res.module.result;
          this.channelParams.total = res.module.total;
        }
      })
    },
    insertCompany() {
      this.axios({
        data: this.insertCompanyParams,
        url: 'logisticsConfig/logisticsCompany/insertCompany',
        method: 'post'
      }).then(res => {
        if (res.success) {
          this.$message("录入成功")
          this.insertCompanyVisible = false;
          this.getCompanyPage();
        }
      })
    },
    insertChannel() {
      this.axios({
        data: this.insertChannelParams,
        url: 'logisticsConfig/logisticsCompany/insertChannel',
        method: 'post'
      }).then(res => {
        if (res.success) {
          this.$message("录入成功")
          this.insertChannelVisible = false;
          this.getChannelPage();
        }
      })
    },
    updateCompany() {
      this.axios({
        data: this.insertChannelParams,
        url: 'logisticsConfig/logisticsCompany/updateCompany',
        method: 'post'
      }).then(res => {
        if (res.success) {
          this.$message("更新成功")
          this.getChannelPage();
        }
      })
    },
    removeCompany(item) {
      this.$confirm('确定删除该物流公司?', '删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.axios({
          url: 'logisticsConfig/logisticsCompany/removeCompany',
          method: 'post',
          data: {
            id: item.id
          }
        }).then(result => {
          if (result.success) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.getCompanyPage();
          }
        })

      }).catch(() => {
      });
    },
    removeChannel(item) {
      this.$confirm('确定删除该渠道?', '删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.axios({
          url: 'logisticsConfig/logisticsCompany/removeChannel',
          method: 'post',
          data: {
            id: item.id
          }
        }).then(result => {
          if (result.success) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.getChannelPage();
          }
        })

      }).catch(() => {
      });
    },
    openInsertCompany() {
      this.insertCompanyVisible = true;
    },
    openInsertChannel() {
      this.insertChannelVisible = true;
    },
    handleAllAgentChange(val) {
      this.insertChannelParams.position = val ? this.bizTagList.map(x => x.id) : [];
    },
    handleCheckedAgentChange(value) {
      let checkedCount = value.length;
      this.checkAllBizTag = checkedCount === this.bizTagList.length;
    },
    handleSizeChange1(val) {
      let that = this;
      that.companyParams.pageSize = val;
      that.getCompanyPage();
    },
    handleCurrentChange1(val) {
      let that = this;
      that.companyParams.pageNo = val;
      that.getCompanyPage();
    },
    handleSizeChange2(val) {
      let that = this;
      that.channelParams.pageSize = val;
      that.getCompanyPage();
    },
    handleCurrentChange2(val) {
      let that = this;
      that.channelParams.pageNo = val;
      that.getCompanyPage();
    },

  },
  mounted() {
    window.onresize = () => {
      return (() => {
        that.tableMaxHeight = window.innerHeight - 263
      })();
    };
    this.searchCompanyPage();
    this.searchChannelPage();
    this.getCompanyList();
  },
  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>
