<template>
  <el-dialog v-model="dialogVisible" title="申请短信模板" width="800px">
    <!-- <div class="title">填写模板信息并提交审核，审核通过后可用于短信推送</div> -->
    <div class="gyq_flex">
      <div class="item">
        <el-form ref="formRef" :model="form" :rules="rules" label-position="left" label-width="120px">
          <el-form-item label="模板名称" prop="title">
            <el-input placeholder="请输入内容" v-model="form.title" :maxlength="30" style="width: 300px;"></el-input>
          </el-form-item>
          <el-form-item label="模版内容" prop="content">
            <div style="width: 300px;">
              <editorDiv ref="editorDivRef" v-model="form.content" />
            </div>
          </el-form-item>
          <el-form-item label="使用场景">
            <div class="ipt_wrap">
              <el-input type="textarea" :rows="8" :maxlength="500"
                placeholder="为了提高您短信模板审核的通过率，请您详细描述您的短信模板的使用场景(例如:说明该短信在何种情境下发送，以及短信接收对象等)如果短信中涉及到变量，也请详细说明变量的内容。此外，您也可以提供一份完整的、已填入变量内容的短停样例以供参考"
                v-model="form.sceneDetail" style="width: 300px;"></el-input>
              <span class="n">{{ form.sceneDetail.length }}/500</span>
            </div>
          </el-form-item>
        </el-form>
      </div>
      <div class="item">
        <div class="preview_wrap">
          <div class="preview_title">模板示例</div>
          <div class="preview">
            尊敬的{姓名}，您的会员卡将于{到期日期}到期，请及时续费享受会员权益
          </div>
        </div>
      </div>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" :loading="loading" @click="submitHandle">确 定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref } from 'vue'
import editorDiv from './editorDiv.vue'
import { smsTemplate, smsTemplateResubmit } from '@/api/coupon/index'
import { ElNotification } from 'element-plus'

const editorDivRef = ref(null)

const form = ref({
  id: '',
  shopId: '',
  title: '',
  content: '',
  sceneDetail: '',
})

const resetForm = ref('')

const rules = {
  title: [
    { required: true, message: '请输入模板名称', trigger: 'blur' },
    { min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' }
  ],
  content: [
    { required: true, message: '请输入模版内容', trigger: 'blur' },
    { min: 1, max: 500, message: '长度在 1 到 500 个字符', trigger: 'blur' }
  ]
}

// 开始提交
const formRef = ref(null)
const emits = defineEmits(["success"]);
const loading = ref(false);
function submitHandle() {
  formRef.value.validate(async (valid) => {
    try {
      if (valid) {
        loading.value = true;
        let data = { ...form.value }
        data.content = `${data.content}，拒收请回复R`
        if (data.id) {
          await smsTemplateResubmit(data);
        } else {
          await smsTemplate(data);
        }
        emits("success");
        dialogVisible.value = false;

        ElNotification({
          title: '注意',
          message: '保存成功',
          type: 'success'
        })

        form.value = { ...resetForm.value }
      }
    } catch (err) {
      console.log(err);
    }
    loading.value = false;
  });
}

// 从本地获取商户信息
const shopInfo = ref("");
function getLocalShopInfo() {
  shopInfo.value = JSON.parse(localStorage.getItem("userInfo"));
}

const dialogVisible = ref(false)
function show(obj = null) {
  if (obj && obj.id) {
    form.value = { ...obj }
  } else {
    nextTick(() => {
      editorDivRef.value?.reset()
    })
    form.value = { ...resetForm.value }
  }
  dialogVisible.value = true;
}

defineExpose({
  show,
});

onMounted(() => {
  resetForm.value = { ...form.value }
  getLocalShopInfo()
  form.value.shopId = shopInfo.value.shopId
})
</script>

<style scoped lang="scss">
.editor {
  min-height: 40px;
  border: 1px solid #ccc;
  padding: 8px;
  margin-top: 8px;
}

.title {
  color: #000;
  padding: 14px;
  background-color: #f8f8f8;
  margin-bottom: 14px;
  font-size: 16px;
}

.gyq_flex {
  display: flex;
  gap: 14px;

  .item {
    flex: 1;
    flex-shrink: 0;
  }
}

.column {
  width: 100%;
  display: flex;
  flex-direction: column;

  .column_item {
    flex: 1;
    display: flex;
  }
}

.ipt_wrap {
  position: relative;

  .n {
    position: absolute;
    right: 10px;
    bottom: 0;
    color: #999;
    font-size: 12px;
  }
}

.preview_wrap {
  border-radius: 4px;
  border: 1px solid #D9D9D9;
  background-color: #F8F8F8;
  padding: 14px;

  .preview_title {
    font-size: 16px;
    color: #333;
    font-weight: bold;
    margin-bottom: 10px;
  }

  .preview {
    color: #666;
  }
}
</style>