<template>
  <div class="mailTemplate">
    <el-card shadow="never" style="margin-bottom:20px;">
      <el-form v-model="pagerDto" inline>
        <el-form-item label="模版名称">
          <el-input v-model="pagerDto._Co_TemplateName" clearable />
        </el-form-item>
        <el-form-item label="邮件主题">
          <el-input v-model="pagerDto._Co_MailSubject" clearable />
        </el-form-item>
        <el-form-item label="邮件类型">
          <el-select v-model="pagerDto._Eq_MailType" placeholder="邮件类型" clearable filterable>
            <el-option v-for="item in mailTypeOptions" :key="item.Id" :label="item.Name" :value="item.Id" />
          </el-select>
        </el-form-item>
        <el-form-item label="是否启用">
          <el-select v-model="pagerDto._Eq_IsEnable" clearable>
            <el-option v-for="item in isEnableOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :loading="tableLoading" @click="serarch()">查询</el-button>
          <el-button type="success" @click="addEditMailTemplate()">新增</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card shadow="never" style="margin-bottom:20px;">
      <el-table
        :data="dataSource"
        :highlight-current-row="true"
        :select-on-indeterminate="true"
        :height="570"
        :loading="tableLoading"
        border
      >
        <el-table-column label="模板参数" prop="TemplateID" :min-width="220" />
        <el-table-column label="模版名称" prop="TemplateName" :min-width="220" />
        <el-table-column label="邮件主题" prop="MailSubject" :min-width="220" />
        <el-table-column label="邮件类型" prop="MailType" :min-width="130">
          <template slot-scope="scope">
            <div v-if="scope.$index >= 0">
              {{ getMailType(scope.row.MailType) }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="是否启用" prop="IsEnable" :min-width="110">
          <template slot-scope="scope">
            <el-tag :type="scope.row.IsEnable? 'success' : 'danger'">
              {{ scope.row.IsEnable ? "启用" : "停用" }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" :width="170">
          <template slot-scope="scope">
             <el-button
              type="primary"
              size="mini"
              @click="addEditMailTemplate(scope.row)"
            >
              编辑
            </el-button>
            <el-button
              :type="scope.row.IsEnable ? 'danger' : 'success'"
              :icon="scope.row.IsEnable? 'el-icon-turn-off' : 'el-icon-open'"
              size="mini"
              @click="hanleStateUpdate(scope.row)"
            >
              {{ scope.row.IsEnable? "停用" : "启用" }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :page-sizes="[20, 50, 100, 150, 200]"
        :current-page="pagerDto.PageIndex"
        :page-size="pagerDto.PageSize"
        background
        layout="prev, pager, next ,total ,jumper,sizes,slot "
        :total="pagerDto.total"
        @current-change="pagerSerach"
        @size-change="sizeChange"
      />
    </el-card>
    <!-- 新增或修改模版 -->
    <el-dialog
      :title="getTemplateTitle"
      :visible.sync="dialogTemplate"
      width="42%"
      :before-close="handleCloseTemplate"
      custom-class="template-form"
    >
      <el-form ref="templateFormRef" :model="templateParamsDto" label-width="100px" :rules="templateParamsRules" inline>
        <el-row>
          <el-col :span="12">
            <el-form-item label="模版名称" prop="TemplateName">
              <el-input v-model="templateParamsDto.TemplateName" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="邮件类型" prop="MailType">
              <el-select v-model="templateParamsDto.MailType" placeholder="邮件类型" clearable filterable>
                <el-option v-for="item in mailTypeOptions" :key="item.Id" :label="item.Name" :value="item.Id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="邮件主题" prop="MailSubject" class="template-data-item">
              <el-input v-model="templateParamsDto.MailSubject" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="模版参数" prop="TemplateData" class="template-data-item">
              <el-input
                v-model="templateParamsDto.TemplateData"
                type="textarea"
                :rows="3"
                placeholder="模版参数"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleCloseTemplate">取 消</el-button>
        <el-button type="primary" @click="hanleSubmitTemplate">保 存</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getEnumsGetDes } from '@/api/enum/enums'
import { _queryTemplatePage, _saveTemplate, _templateEnableStateUpdate } from '@/api/email'
export default {
  name: 'Mailtemplate',
  data() {
    return {
      pagerDto: {
        _Co_TemplateName: '',
        _Co_MailSubject: '',
        _Eq_MailType: undefined,
        _Eq_PushStatus: undefined,
        PageIndex: 1,
        PageSize: 20,
        total: 0
      },
      isEnableOptions: [
        { value: 0, label: '停用' },
        { value: 1, label: '启用' }
      ],
      mailTypeOptions: [],
      dataSource: [], // [{ IsEnable: 1 }],
      tableLoading: false,
      // 新增或修改模版
      dialogTemplate: false,
      isAddTemplateParams: true,
      templateParamsDto: {
        TemplateID: undefined,
        TemplateData: undefined,
        TemplateName: undefined,
        MailSubject: undefined,
        MailType: undefined,
        IsEnable: 1
      },
      templateParamsRules: {
        TemplateData: [{ required: true, message: '请输入模版参数', trigger: 'blur' }],
        TemplateName: [{ required: true, message: '请输入模版名称', trigger: 'blur' }],
        MailSubject: [{ required: true, message: '请输入邮件主题', trigger: 'blur' }],
        MailType: [{ required: true, message: '请选择邮件类型', trigger: 'change' }]
      }
    }
  },
  computed: {
    getTemplateTitle() {
      return this.isAddTemplateParams ? '新增模版' : '编辑模版'
    }
  },
  created() {
    getEnumsGetDes('MailTypeEnum').then((res) => {
      this.mailTypeOptions = res
    })
    this.serarch()
  },
  methods: {
    // 返回枚举类型名称
    getMailType(type) {
      if (this.mailTypeOptions.length === 0) return ''
      const findObj = this.mailTypeOptions.find(item => item.Id === type)
      return findObj.Name || ''
    },
    // 分页
    pagerSerach(page) {
      // if (page === 1) return
      this.pagerDto.PageIndex = page
      this.serarch()
    },
    sizeChange(pageSize) {
      this.pagerDto.PageIndex = 1
      this.pagerDto.PageSize = pageSize
      this.serarch()
    },
    // 查询
    serarch() {
      this.tableLoading = true
      _queryTemplatePage(this.pagerDto)
        .then((response) => {
          this.dataSource = response.Result
          this.pagerDto.total = response.TotalCount
        })
        .finally((response) => {
          this.tableLoading = false
        })
    },
    // 新增、修改
    hanleSubmitTemplate() {
      this.$refs.templateFormRef.validate((valid) => {
        if (valid) {
          _saveTemplate(this.templateParamsDto).then(() => {
            this.$message({
              type: 'success',
              message: '保存成功!'
            })
          })
        } else {
          return false
        }
      })
    },
    // 更新模版启用与停用状态
    hanleStateUpdate(row) {
      const State = !row.IsEnable
      this.$confirm('如无已启用的同类型模版，将导致邮件无法正常发送，是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        _templateEnableStateUpdate(row.Id, State).then(() => {
          const IsEnable = State
          this.$set(row, 'IsEnable', IsEnable)
          this.$message({
            type: 'success',
            message: '更新成功!'
          })
        })
      })
    },
    addEditMailTemplate(data) {
      this.isAddTemplateParams = true
      if (data) {
        this.isAddTemplateParams = false
        Object.keys(data).forEach((key) => {
          this.templateParamsDto[key] = data[key]
        })
      }
      this.$nextTick(() => {
        this.dialogTemplate = true
      })
    },
    handleCloseTemplate() {
      this.$refs.templateFormRef.resetFields()
      this.dialogTemplate = false
    }
  }
}
</script>
<style>
.mailTemplate {
  background-color: #f3f3f3;
  padding: 20px;
}

.mailTemplate .template-data-item {
  width: 100%;
}

.mailTemplate .template-form .el-form-item__label {
  text-align: left;
}

.template-form .el-form-item__content {
  width: 95%;
}

.template-form .el-form-item__content .el-select {
  width: 100%;
}
@media screen and (max-width: 1440px) {
  .template-form .el-col-12,
  .template-form .el-form-item,
  .template-form .el-form-item__content .el-select {
    width: 100%;
  }
}
</style>

