<template>
  <div class="m-container">
    <h2>
      <div class="squrt"></div>收费管理
      <!-- <div @click="chargeOperation('create')" v-permission="'paymentConfig/add'" class="newBand">添加</div> -->
    </h2>
    <div class="m-core">
      <!-- navMenu -->
      <el-tabs v-model.trim="activeIndex" type="card" @tab-click="handleClick">
        <el-tab-pane label="比例" name="0" v-if="permissionList.scalc">
            <one v-if="activeIndex == 0" />
        </el-tab-pane>
        <el-tab-pane label="金额" name="1" v-if="permissionList.money">
            <two v-if="activeIndex == 1" />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
import one from './one'
import two from './two'
import { permission} from '@/utils/directivePage'
export default {
  components: {
    one,
    two
  },
  name: 'chargeManager',
  data () {
    return {
      activeIndex: '0',
      permissionList: {
        scalc: permission('/chargeManager/scalc'),
        money: permission('/chargeManager/money'),
      }
    }
  },
  methods: {
    handleClick (val) {
      this.activeIndex = val.name
    }
  }
}
</script>
<style lang="scss" scoped>
/deep/.m-container {
  padding: 0 10px 40px
}
</style>