<template>
  <div class="gyq_container">
    <div class="gyq_content">
      <headerCard icon="dxts" name="短信推送" intro="给用户推送服务通知" />
      <div class="row">
        <el-tabs v-model="activeKey">
          <el-tab-pane label="群发短信" :name="1">
            <noteList ref="noteListRef" />
          </el-tab-pane>
          <el-tab-pane label="用量记录" :name="2">
            <record />
          </el-tab-pane>
          <el-tab-pane label="模版管理" :name="3">
            <templateManage @useTemplate="useTemp" />
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import noteList from './noteList.vue'
import record from './record.vue'
import templateManage from './templateManage.vue'

const activeKey = ref(1)

const noteListRef = ref(null)
function useTemp(item) {
  activeKey.value = 1
  noteListRef.value?.useTemplate(item)
}
</script>

<style scoped lang="scss">
.gyq_container {
  padding: 14px;

  .gyq_content {
    padding: 14px;
    background-color: #fff;
    border-radius: 8px;
  }
}
</style>