<template>
  <div class="layout-pd">
    <el-dialog v-model="isShowDialog" style="width: 60%;">

      <el-row style="height: auto;">
        <!--操作-->
        <el-col :xs="24">
          <el-card class="my-fill mt8" shadow="never" :body-style="{ paddingBottom: '0' }">
            <div style="width: 100%;display: flex;justify-content: left;align-items: center;">
              <h1 style="margin-bottom: 10px;font-size: 30px;">推送模板：</h1>
            </div>
            <hr style="margin: 10px;" />
            <div style="width: 100%;display: flex;justify-content: center;align-items: center;">
              <el-form :inline="true" @submit.stop.prevent style="width: 60%;">
                <el-form-item label="模板名称：" style="width: 100%;">
                  <el-input v-model="Data.templateName" style="width: 100%;" placeholder="请输入" />
                </el-form-item>
              </el-form>
            </div>
            <div style="width: 100%;display: flex;justify-content: center;align-items: center;">
              <el-form :inline="true" @submit.stop.prevent style="width: 60%;">
                <el-form-item label="模板类型：" style="width: 100%;">
                  <el-select v-model="Data.templateType" placeholder="请选择">
                    <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id" />
                  </el-select>
                </el-form-item>
              </el-form>
            </div>
            <!-- 能不能通过调节距离的方式进行高度调节？？？ -->
            <div style="width: 100%;display: flex;justify-content: center;align-items: center;">
              <el-form :inline="true" @submit.stop.prevent style="width: 60%;">
                <el-form-item style="width: 100%;">
                </el-form-item>
                <el-form-item style="width: 100%;">
                </el-form-item>
              </el-form>
            </div>
            <div style="width: 100%;display: flex;justify-content: center;align-items: center;">
              <el-form :inline="true" @submit.stop.prevent style="width: 60%;">
                <el-form-item label="模&#8195;&#8195;板：" style="width: 100%;">
                  <el-input type="textarea" rows="12" v-model="Data.templateContent" style="width: 100%;"
                    placeholder="请输入" />
                </el-form-item>
              </el-form>
            </div>
            <div style="width: 100%;display: flex;justify-content: center;align-items: center;">
              <el-form :inline="true" @submit.stop.prevent style="width: 60%;">
                <el-row justify="end" style="margin-top: 30px;">
                  <el-button type="primary" @click="toSave">保存</el-button>
                </el-row>
                <el-row justify="end">
                  <label class="tooltip" v-if="isShowTooltip">模板名称不能为空</label>
                </el-row>
              </el-form>
            </div>
          </el-card>
        </el-col>
      </el-row>

    </el-dialog>
  </div>

</template>

<script setup lang="ts" name="">
import { reactive, ref } from 'vue';
import { pushTemplateModel } from "/@/api/admin/AlarmService/pushTemplateDto";
import { pushTemplateApi } from "/@/api/admin/AlarmService/pushTemplateApi";
import eventBus from "/@/utils/mitt";


let Data = ref({
  id: 0,
  templateName: '',
  templateType: '',
  templateContent: ''
} as pushTemplateModel)

const typeList = [
  { name: "微信公众号", id: "wx" },
  { name: "邮件", id: "email" }
]

// 提交数据
const toSave = async () => {
  if (Data.value.templateName == '') {
    isShowTooltip.value = true
    return
  }
  if (Data.value.id == 0) {
    Data.value.id = Number(new Date())
  }
  await new pushTemplateApi().addForm(Data.value).then(() => {
    eventBus.emit('refreshView')
  })
  Data.value.templateName = ''
  Data.value.templateType = ''
  Data.value.templateContent = ''
  isShowTooltip.value = false
  isShowDialog.value = false

}

const isShowDialog = ref(false)
const isShowTooltip = ref(false)
/**
 * 根据参数 打开表单
 * @param val
 */
const openDialog = (rowData: pushTemplateModel) => {
  isShowDialog.value = true
  if (rowData) {
    Data.value = rowData
  } else {
    Data.value = {
      id: 0,
      templateName: '',
      templateType: '',
      templateContent: ''
    } as pushTemplateModel
  }
}

defineExpose({
  openDialog,
})

</script>

<style scoped lang="scss">
.el-form .el-col.mb20 {
  margin: 0 !important;
}

.el-input {
  width: 240px;
}

.el-form-item__label {
  text-align: justify;
  height: 50px;
}

.el-card {
  height: 100%;
  padding: 0;
}

/* 输入框标签固定四个字符宽度 */
::v-deep .el-form-item__label {
  // 字体大小14，4个字符，12px右间距
  width: 100px;
  justify-content: start;
}

.tooltip {
  font-size: 12px;
  color: red;
}
</style>
