<template>
  <div class="app-container">
    <el-card>
      <el-tabs v-model="activeName" @tab-click="handleClick" v-hasPermi="['sysSetting:remind:list']">
        <el-tab-pane label="付款提醒" name="one" lazy>
          <Get v-if="activeName==='one'" />
        </el-tab-pane>
        <el-tab-pane label="收款提醒" name="two" lazy>
          <pay v-if="activeName==='two'" />
        </el-tab-pane>
      </el-tabs>
      <div class="btn-box">
        <el-button type="primary" size="mini" plain @click="handleAdd" v-hasPermi="['sysSetting:remind:add']">新增</el-button>
      </div>
    </el-card>
    <AddDialog :isOpen="isOpen" @onCancel="isOpen = false" @onConfirm="handleConfirm" />
  </div>
</template>

<script>
export default {
  //import引入组件才能使用
  props: {},
  components: {
    Get: () => import('./components/get'),
    Pay: () => import('./components/pay'),
    AddDialog: () => import('./components/addDialog'),
  },
  data() {
    return {
      activeName: 'one',
      isOpen: false,
    };
  },
  // 计算属性
  computed: {},
  // 监听data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    handleConfirm() {
      this.isOpen = false
    },
    handleAdd() {
      console.log(2121231);
      this.isOpen = true
    },
    handleClick(tab, event) {
      // console.log(tab, event);
    }
  },
  // 生命周期，创建完成时（可以访问当前this实例）
  created() {

  },
  // 生命周期：挂载完成时（可以访问DOM元素）
  mounted() {

  },
}
</script>
<style lang="scss" scoped>
@import '@/assets/styles/sysSetting/index.scss';
@import '@/assets/styles/common/index.scss';
</style>