
<!--
  @description: 模板管理新增/编辑弹框
  @Modifier: haofengxian
  @routerPath:
  @date: 2020-11-30-19:23
-->
<template>
  <el-dialog
    v-dialogDrag
    :visible.sync="dialog"
    :close-on-click-modal="false"
    title="选择模板"
    width="960px"
    append-to-body
    custom-class="el-dialog__body-p8 el-dialog_table"
  >
    <el-form
      ref="form"
      :model="formData"
      :rules="rules"
      :inline-message="true"
    >
      <table class="from_table">
        <tr>
          <td>
            <el-form-item ref="templateCode" label="模板编号" prop="templateCode" />
          </td>
          <td>
            <gx-input v-model="formData.templateCode" placeholder="模板编号" />
          </td>
          <td><el-form-item ref="platformTemplateCode" label="模板类型" prop="platformTemplateCode" /></td>
          <td>
            <el-select v-model="formData.platformTemplateCode" placeholder="请选择" style="width: 100%">
              <el-option
                v-for="(item,index) in publicSmsSendList"
                :key="index"
                :label="item.typename"
                :value="item.typecode"
              />
            </el-select>
          </td>
        </tr>
        <tr>
          <td>
            <el-form-item ref="templateName" label="模板名称" prop="templateName" />
          </td>
          <td>
            <gx-input v-model="formData.templateName" placeholder="模板名称" />
          </td>
          <td>
            <el-form-item ref="useStatus" label="使用状态" prop="useStatus" />
          </td>
          <td>
            <el-radio-group v-model="formData.useStatus">
              <el-radio v-for="(item,index) in useStatusList" :key="index" :label="item.typecode">
                {{ item.typename }}
              </el-radio>
            </el-radio-group>
          </td>
        </tr>
        <tr>
          <td>
            <el-form-item ref="templateContent" label="模板内容" prop="templateContent" />
          </td>
          <td colspan="3">
            <gx-input
              v-model="formData.templateContent"
              placeholder="项目编号${tenderNo} 项目名称 ${tenderName} 评标工作已结束，请登平台中查看并下载中标通知书。特此通知！"
              :autosize="{ minRows: 4, maxRows: 4 }"
              type="textarea"
              show-word-limit
              class="show-word-limit-padding"
              style="width: 96%"
            />
          </td>
        </tr>
        <tr /><tr>
          <td>
            <el-form-item ref="templateParams" label="模板参数" prop="templateParams" />
          </td>
          <td colspan="3">
            <gx-input v-model="formData.templateParams" placeholder="tenderNo,tenderName" style="width: 96%" />
          </td>
        </tr>
      </table>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="ensure('form')">确 定</el-button>
      <el-button @click="dialog = false">取 消</el-button>
    </span>
  </el-dialog>
</template>

<script>

/* 接口*/
import { saveOrUpdateSmsTemplate, selectSmsTemplateInfoById } from '@api/common/tools'
import { characters1_auto } from '@/assets/js/validate'// 校验输入内容
/* 混入开发 */
import { SMSTemplateGroup } from './../mixins/SMSGroupMixin' // 短信-字典信息
export default {
  name: 'SMSTemplateAddDialog',
  data() {
    return {
      /* 字典信息-start */
      publicSmsSendList: [], // 模板类型字典
      ...SMSTemplateGroup, // 字典信息
      /* 字典信息-end */
      loading: true, // 加载loading
      dialog: false,
      tableData: [], // 模板列表
      // 保存编辑模板参数
      formData: {
        id: '',
        platformTemplateCode: '', // 平台模板编码
        publicSmsSendId: '', // 关联短信配置表id
        templateCode: '', // 模板编号
        templateContent: '', // 模板内容
        templateName: '', // 模板名称
        templateParams: '', // 模板参数
        useStatus: '01' // 使用状态
      },
      rules: {
        templateName: [{ required: true, validator: characters1_auto, trigger: 'change' }], //  模板名称
        templateCode: [{ required: true, validator: characters1_auto, trigger: 'change' }], //  模板编号
        platformTemplateCode: [{ required: true, validator: characters1_auto, trigger: 'change' }], //  平台模板编码
        templateContent: [{ required: true, validator: characters1_auto, trigger: 'blur' }], // 模板内容
        templateParams: [{ required: true, validator: characters1_auto, trigger: 'change' }] //  模板参数
      }
    }
  },
  created() {
    // 短信发送所需字典
    this.initGroup()// 获取字典方法
  },
  methods: {
    // 获取字典方法
    initGroup() {
      const data = [
        'publicSmsSend' // 短信发送模版
      ]
      this.$store.dispatch('getGroupType', data).then(res => {
        Object.keys(res.bidTypeData).forEach((key) => {
          this[key] = res.bidTypeData[key]
        })
      })
    },
    // 打开弹框新增/编辑模板
    open(row) {
      this.dialog = true
      if (row) {
        this.getSelectSmsTemplateInfo(row)
      } else {
        this.formData.id = ''
        this.$nextTick(() => {
          this.$refs['form'].resetFields()
        })
      }
    },
    // 根据id查询短信模板
    getSelectSmsTemplateInfo(row) {
      selectSmsTemplateInfoById(row.id).then(res => {
        this.formData = res.data
      })
    },
    // 选择模板-确定
    ensure(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          saveOrUpdateSmsTemplate(this.formData).then(res => {
            this.$message.success(res.header.msg)
            this.dialog = false
            this.$emit('call-back')
          }).catch(() => {
          })
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
