<template>
    <div class="freeShipping">
      <div id="pane-first">
        <div class="form-box">
          <div class='table-body'>
            <div style="justify-content: space-between; display: flex;">

              <div class="input-item">
                <el-input placeholder="请输入内容" v-model="msg.RulesName" >
                  <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
                </el-input>
              </div>
              <el-button type="primary" style="margin: -5px 0px; width: 80px; height: 32px; padding: 0" @click="addRule">添加规则</el-button>

            </div>

            <el-table
              :data="list"
              border
              style="width: 1707px">
              <el-table-column
                fixed
                prop="ID"
                label="ID"
                width="309">
              </el-table-column>

              <el-table-column
                fixed
                prop="RulesName"
                label="包邮规则名称"
                width="309">
              </el-table-column>

              <el-table-column
                fixed
                prop="AllRegionPrice"
                label="订单金额"
                width="309">
              </el-table-column>


              <el-table-column
                fixed
                label="地区"
                width="500">
                <template slot-scope="scope">
                  <div  style="display: flex;flex-direction: row;flex-wrap: wrap">
                    <span v-for="(item,index) in scope.row.RegionList" :key="index">{{item}}、</span>
                  </div>
                </template>
              </el-table-column >

              <el-table-column
                fixed="right"
                label="操作"
                width="280">
                <template slot-scope="scope">
                  <el-tooltip class="item" effect="dark" content="编辑" placement="top" >
                    <img src="../../../assets/img/setup/edit.png" alt="" class="imgstyle" @click="Edit(scope.row)">
                  </el-tooltip>
                  <el-tooltip class="item" effect="dark" content="删除" placement="top" >
                    <img src="../../../assets/img/setup/del.png" alt="" class="imgstyle" @click="delete_b(scope.row)">
                  </el-tooltip>
                </template>
              </el-table-column>
            </el-table>

            <el-pagination style="text-align:right" background @current-change="handleCurrentChange"
                           v-if="list&&list.length>0" :current-page.sync="msg.pageIndex"
                           layout="total,prev, pager, next" :page-size="msg.pageSize" :total="total">
            </el-pagination>

          </div>
        </div>
      </div>
    </div>
</template>

<script>
    export default {
        name: "freeShipping",
      data(){
          return{
            list:[],
            msg:{
              pageIndex:1,
              pageSize:20,
              RulesName:'',
            },
            total:0,//总条数
          }
      },
      methods:{
        getLogisticsPinkagePage(){
          this.apipost("/api/MallBase/GetLogisticsPinkagePage", this.msg, res => {
            if (res.data.resultCode == 1) {
              this.list = res.data.data.pageData;
              this.total = res.data.data.count;
            } else {
              this.Info(res.data.message);
            }
          })
        },
        search(){
          this.msg.pageIndex=1;
          this.msg.pageSize=20;
          this.getLogisticsPinkagePage()
        },
        formatterColumn(cellValue){
            console.log(cellValue)
        },
        addRule(){
          this.$emit("AddFreeShipping",);

        },
        Edit(row){
          this.$router.push({
            name: 'addFreeshipping',
            query: {
              ID:row.ID,
              blank: "y"
            }
          });
        },
        delete_b(row){

          let that=this;
          that.Confirm("是否删除?", function () {
            that.apipost(
              "/api/MallBase/DelPinkage",
              {Id:row.ID},
              res => {
                if (res.data.resultCode == 1) {
                  that.Success(res.data.message);
                  that.getLogisticsPinkagePage();
                } else {
                  that.Error(res.data.message);
                }
              },
            );
          });
        },
        handleCurrentChange(val){
          this.msg.pageIndex = val;
          this.GetLogisticsRulesPage();
        }
      },
      mounted(){
          this.getLogisticsPinkagePage()
      }
    }
</script>

<style scoped>
  .freeShipping .form-box{
    background: #fff;
    padding: 10px 0px 0px;
    margin-top: 10px;
  }
  .freeShipping .table-body{
    padding: 20px;
    background-color: #fff;
    margin-bottom: 20px;
  }
  .freeShipping .input-item{
    width: 250px;
    margin: 0 0 20px;
  }
  .freeShipping .imgstyle{
    width: 32px;
    height: 32px;
    margin: 0 5px;
  }
</style>
