<style>
  .freight .form-box{
    background: #fff;
    padding: 10px 0px 0px;
    margin-top: 10px;
  }
  .freight .table-body{
    padding: 20px;
    background-color: #fff;
    margin-bottom: 20px;
  }
  .freight .input-item{
    width: 250px;
    margin: 0 0 20px;
  }
  .freight .imgstyle{
    width: 32px;
    height: 32px;
    margin: 0 5px;
  }
</style>
<template>
  <div class="freight">
    <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: 1699px">
            <el-table-column
              fixed
              prop="RulesName"
              label="规则名称"
              width="1339">
            </el-table-column>
            <el-table-column
              label="是否默认"
              width="180">
              <template slot-scope="scope">
                <el-radio v-model="radio" :label="scope.row.ID" @change="radioChange">
                  <span class="el-radio__label">默认</span>
                </el-radio>
              </template>
            </el-table-column>

            <el-table-column
              fixed="right"
              label="操作"
              >
              <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: "freight",
        data(){
          return{
            list:[],
            msg:{
              pageIndex:1,
              pageSize:20,
              RulesName:'',
            },
            radio:'',//单选按钮绑定值
            total:0,//总条数
            currentPage:1,//当前第几页
          }
        },
      methods:{
        GetLogisticsRulesPage(){
          this.apipost("/api/MallBase/GetLogisticsRulesPage", 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.GetLogisticsRulesPage()
        },
        radioChange(){

        },
        handleCurrentChange(val){
          this.msg.pageIndex = val;
          this.GetLogisticsRulesPage();
        },
        addRule(){
          this.$emit("AddRule",);
        },
        Edit(row){
          this.$router.push({
            name: 'addFreightRule',
            query: {
              ID:row.ID,
              blank: "y"
            }
          });
        },
        delete_b(row){//删除按钮

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

    }
</script>

<style scoped>

</style>
