<style>
  .ruleSetup .el-tabs__header{
    padding: 0 20px;height: 56px;line-height: 56px; background-color: #fff;margin-bottom: 0;
  }
</style>
<template>
  <div class="ruleSetup">
    <el-tabs v-model="activeName" @tab-click="handleClick" >
      <el-tab-pane label="物流设置" name="first">

        <vlogistics></vlogistics>

      </el-tab-pane>
      <el-tab-pane label="运费规则" name="second">

        <freight @AddRule="AddRule"></freight>

      </el-tab-pane>
      <el-tab-pane label="包邮规则" name="third">

        <freeShipping @AddFreeShipping = 'AddFreeShipping'></freeShipping>

      </el-tab-pane>
      <el-tab-pane label="起送规则" name="fourth">
        <riseGiveRule></riseGiveRule>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  import vlogistics from './view/logistics';
  import freight from './view/freight';
  import freeShipping from './view/freeShipping';
  import riseGiveRule from './view/riseGiveRule';

    export default {
        name: "ruleSetup",

      data(){
          return{
            activeName: 'first'
          }
      },
      created(){
        if(this.$route.query.activeName){
          this.activeName = this.$route.query.activeName
        }
      },
      components:{
        vlogistics,
        freight,
        freeShipping,
        riseGiveRule
      },
      methods: {
        handleClick(tab, event) {
          // console.log(tab, event);
        },
        AddRule(){
          this.$router.push('/addFreightRule');
        },
        AddFreeShipping(){
          this.$router.push('/addFreeshipping');

        }
      }
    }
</script>

<style scoped>

</style>
