<!-- 模板管理 -->
<template>
  <div>
    <div class="row">
      <el-button type="primary" icon="Refresh" :loading="loading" @click="smsTemplateGetAjax">刷新</el-button>
      <el-button type="primary" @click="addTemplateRef.show()">申请新模板</el-button>
    </div>
    <div class="row" v-loading="loading">
      <div class="title">可用模板</div>
      <div class="card_wrap" :class="[`card_wrap${useData.length}`]">
        <div class="card" v-for="item in useData" :key="item.id">
          <div class="card_title">
            <span>{{ item.title }}</span>
            <el-button type="primary" @click="toUse(item)">去使用</el-button>
          </div>
          <div class="card_content">
            {{ item.content }}
          </div>
        </div>
        <el-empty description="没有数据" v-if="useData.length == 0" />
      </div>
      <div class="title">我申请的模板</div>
      <div class="card_wrap" :class="[`card_wrap${applyData.length}`]">
        <div class="card" v-for="item in applyData" :key="item.id">
          <div class="card_title">
            <span>{{ item.title }}</span>
            <el-button :type="statusOptions?.find(val => val.value == item.status).type" plain
              @click="toApplayHandle(item)">
              {{statusOptions?.find(val => val.value == item.status).label}}
            </el-button>
          </div>
          <div class="card_content">
            {{ item.content }}
          </div>
        </div>
        <el-empty description="没有数据" v-if="applyData.length == 0" />
      </div>
    </div>
    <addTemplate ref="addTemplateRef" @success="smsTemplateGetAjax" />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import addTemplate from './components/addTemplate.vue';
import { smsTemplateGet } from '@/api/coupon/index'

const addTemplateRef = ref(null)

const statusOptions = ref([
  {
    label: '待审核',
    value: 0,
    type: 'info'
  },
  {
    label: '审核中',
    value: 1,
    type: 'warning'
  },
  {
    label: '已通过',
    value: 2,
    type: 'success'
  },
  {
    label: '未通过',
    value: -1,
    type: 'danger'
  },
  {
    label: '待审核',
    value: -2,
    type: 'info'
  }
])

function toApplayHandle(item) {
  if (item.status === -1) {
    // 已通过 去使用
    addTemplateRef.value.show(item)
  }
}

const useData = ref([]) // 可用模板
const applyData = ref([]) // 申请模板

// 获取模板列表
const loading = ref(false)
async function smsTemplateGetAjax() {
  try {
    loading.value = true
    const res = await smsTemplateGet()
    useData.value = res.filter(item => item.status === 2)
    applyData.value = res.filter(item => item.status !== 2)
  } catch (error) {
    console.log('error', error);
  }
  setTimeout(() => {
    loading.value = false
  }, 500);
}

// 跳转去使用模板
const emit = defineEmits(['useTemplate'])
function toUse(item) {
  emit('useTemplate', item)
}

onMounted(() => {
  smsTemplateGetAjax()
})
</script>

<style scoped lang="scss">
.row {
  padding-top: 14px;
}

.title {
  color: #333;
  padding-bottom: 14px;
  font-size: 16px;
  font-weight: bold;
}

.card_wrap {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto;
  grid-column-gap: 14px;
  grid-row-gap: 14px;
  margin-bottom: 24px;

  &.card_wrap0 {
    grid-template-columns: repeat(1, 1fr);
  }

  .card {
    padding: 24px 14px;
    border-radius: 6px;
    border: 1px solid #ddd;

    .card_title {
      display: flex;
      align-items: center;
      justify-content: space-between;

      span {
        font-size: 16px;
        color: #333;
      }
    }

    .card_content {
      color: #666;
      padding-top: 14px;
    }
  }
}
</style>