<template>
  <div class="coupon-rule-container">
    <el-row class="coupon-rule-wrapper">
      <el-col :span="4" class="left-panel">
        <coupon-rule-div ref="couponRuleDiv" @switch="handleSwitchCouponRule" />
      </el-col>
      <el-col :span="20" class="right-panel">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <h5>{{ currentCouponRule.ruleName }}</h5>
            <div class="role-context">{{ currentCouponRule.remark }}</div>
          </div>
          <el-divider></el-divider>
          <el-tabs v-model="activeTab" @tab-click="handleTabClick">
            <el-tab-pane :label="$t('couponRule.coupon')" name="couponRuleCpps">
              <coupon-rule-cpps v-if="activeTab === 'couponRuleCpps'" :rule-id="currentCouponRule.ruleId" />
            </el-tab-pane>
            <el-tab-pane :label="$t('couponRule.fee')" name="couponRuleFee">
              <coupon-rule-fees v-if="activeTab === 'couponRuleFee'" :rule-id="currentCouponRule.ruleId" />
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>

    <add-coupon-rule ref="addCouponRule" @success="handleSuccess" />
    <edit-coupon-rule ref="editCouponRule" @success="handleSuccess" />
    <delete-coupon-rule ref="deleteCouponRule" @success="handleSuccess" />
  </div>
</template>

<script>
import CouponRuleDiv from '@/components/scm/CouponRuleDiv'
import CouponRuleCpps from '@/components/scm/CouponRuleCpps'
import CouponRuleFees from '@/components/scm/CouponRuleFees'
import AddCouponRule from '@/components/scm/AddCouponRule'
import EditCouponRule from '@/components/scm/EditCouponRule'
import DeleteCouponRule from '@/components/scm/DeleteCouponRule'

export default {
  name: 'CouponRuleList',
  components: {
    CouponRuleDiv,
    CouponRuleCpps,
    CouponRuleFees,
    AddCouponRule,
    EditCouponRule,
    DeleteCouponRule
  },
  data() {
    return {
      activeTab: 'couponRuleCpps',
      currentCouponRule: {
        ruleId: '',
        ruleName: '',
        remark: ''
      }
    }
  },
  methods: {
    handleSwitchCouponRule(rule) {
      this.currentCouponRule = rule
    },
    handleTabClick(tab) {
      this.activeTab = tab.name
    },
    handleSuccess() {
      this.$refs.couponRuleDiv.refreshList()
    },
    openAddModal() {
      this.$refs.addCouponRule.open()
    },
    openEditModal() {
      if (!this.currentCouponRule.ruleId) {
        this.$message.warning(this.$t('couponRule.selectRuleFirst'))
        return
      }
      this.$refs.editCouponRule.open(this.currentCouponRule)
    },
    openDeleteModal() {
      if (!this.currentCouponRule.ruleId) {
        this.$message.warning(this.$t('couponRule.selectRuleFirst'))
        return
      }
      this.$refs.deleteCouponRule.open(this.currentCouponRule)
    }
  }
}
</script>

<style lang="scss" scoped>
.coupon-rule-container {
  padding: 20px;
  height: 100%;
  
  .coupon-rule-wrapper {
    height: 100%;
    
    .left-panel {
      padding-right: 10px;
      height: 100%;
    }
    
    .right-panel {
      height: 100%;
      
      .box-card {
        height: 100%;
        
        .clearfix {
          h5 {
            margin: 0;
            font-size: 16px;
            font-weight: bold;
          }
          
          .role-context {
            margin-top: 5px;
            color: #999;
            font-size: 12px;
          }
        }
      }
    }
  }
}
</style>