<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" @submit.native.prevent size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item prop="code">
        <el-input v-model="queryParams.code" placeholder="请输入标识" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item prop="title">
        <el-input v-model="queryParams.title" placeholder="请输入通知场景说明" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['system:messageConfig:add']">新增</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <Page uri="/mapi/system/messageConfig/list" :request-params="queryParams" ref="pagination" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" fixed="left" />
      <el-table-column label="标识" align="center" prop="code" />
      <el-table-column label="通知场景说明" align="center" prop="title" />
      <el-table-column label="公众号模板" align="center" prop="isWechat">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.message_show_flag" :value="scope.row.isWechat" />
        </template>
      </el-table-column>

      <el-table-column label="小程序消息" align="center" prop="isRoutine">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.message_show_flag" :value="scope.row.isRoutine" />
        </template>
      </el-table-column>
      <el-table-column label="发送短信" align="center" prop="isSms">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.message_show_flag" :value="scope.row.isSms" />
        </template>
      </el-table-column>

      <el-table-column label="APP推送" align="center" prop="isApp">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.message_show_flag" :value="scope.row.isApp" />
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center" prop="status">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.status" active-value="1" inactive-value="0" @change="handleStatusChange(scope.row)"></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="150">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:messageConfig:edit']">修改
          </el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['system:messageConfig:remove']">删除
          </el-button>
        </template>
      </el-table-column>
    </Page>

    <!-- 添加或修改消息配置对话框 -->
    <el-dialog :title="title" :visible.sync="open" size="30%" append-to-body :before-close="checkClose">
      <el-row :gutter="15" style="margin-bottom: 80px">
        <el-form ref="form" :model="form" :rules="rules" label-width="100px">
          <el-col :span="24">
            <el-form-item label="标识" prop="code">
              <el-input v-model="form.code" placeholder="请输入标识" maxlength="50" disabled="false" />

            </el-form-item>
            <el-form-item label="场景说明" prop="title">
              <el-input v-model="form.title" placeholder="请输入通知场景说明" maxlength="100" disabled="false" />
            </el-form-item>
            <el-form-item label="状态" prop="status">
              <el-radio-group v-model="form.status">
                <el-radio label="1">开启</el-radio>
                <el-radio label="0">关闭</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="公众号" name="first">
                <el-form-item label="模版ID" prop="wechatTempid">
                  <el-input v-model="form.wechatTempid" placeholder="请输入模版消息tempid" maxlength="255" show-word-limit />
                </el-form-item>
                <!-- <el-form-item label="模版消息参数" prop="wechatData">
                  <el-input v-model="form.wechatData" placeholder="请输入模版消息参数" maxlength="255" show-word-limit />
                </el-form-item> -->
                <el-form-item label="消息内容">
                  <el-input v-model="form.wechatContent" placeholder="请输入模版消息内容" type="textarea" :rows="4" />
                </el-form-item>
                <el-form-item label="跳转链接" prop="wechatLink">
                  <el-input v-model="form.wechatLink" placeholder="请输入模版跳转链接" maxlength="255" show-word-limit />
                </el-form-item>
                <el-form-item label="跳转小程序" prop="wechatToRoutine">
                  <el-radio-group v-model="form.wechatToRoutine">
                    <el-radio :label="1">开启</el-radio>
                    <el-radio :label="0">关闭</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="状态" prop="isWechat">
                  <el-radio-group v-model="form.isWechat">
                    <el-radio :label="1">开启</el-radio>
                    <el-radio :label="0">关闭</el-radio>
                  </el-radio-group>
                </el-form-item>

              </el-tab-pane>
              <el-tab-pane label="小程序" name="second">
                <el-form-item label="模板ID" prop="routineTempid">
                  <el-input v-model="form.routineTempid" placeholder="请输入模板ID" maxlength="255" show-word-limit />
                </el-form-item>
                <el-form-item label="消息内容">
                  <el-input v-model="form.routineContent" placeholder="请输入订阅消息内容" type="textarea" :rows="4" />
                </el-form-item>
                <!-- <el-form-item label="订阅消息参数" prop="routineData">
                  <el-input v-model="form.routineData" placeholder="请输入订阅消息参数" maxlength="255" show-word-limit />
                </el-form-item> -->
                <el-form-item label="跳转链接" prop="routineLink">
                  <el-input v-model="form.routineLink" placeholder="请输入跳转链接" maxlength="255" show-word-limit />
                </el-form-item>
                <el-form-item label="全局状态" prop="isRoutine">
                  <el-radio-group v-model="form.isRoutine">
                    <el-radio :label="1">开启</el-radio>
                    <el-radio :label="0">关闭</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-tab-pane>
              <el-tab-pane label="短信配置" name="third">
                <el-form-item label="短信ID" prop="smsId">
                  <el-input v-model="form.smsId" placeholder="请输入短信id" maxlength="32" show-word-limit />
                </el-form-item>
                <el-form-item label="短信内容" prop="smsText">
                  <el-input v-model="form.smsText" placeholder="请输入短信模版内容" type="textarea" :rows="4" />
                </el-form-item>
                <el-form-item label="状态" prop="isSms">
                  <el-radio-group v-model="form.isSms">
                    <el-radio :label="1">开启</el-radio>
                    <el-radio :label="0">关闭</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-tab-pane>
              <el-tab-pane label="APP配置" name="four">
                <el-form-item label="APP推送ID" prop="appId">
                  <el-input v-model="form.appId" placeholder="请输入app推送id" />
                </el-form-item>
                <el-form-item label="变量" prop="variable">
                  <el-input v-model="form.variable" placeholder="请输入变量" maxlength="256" show-word-limit type="textarea" :rows="4" />
                </el-form-item>
                <el-form-item label="状态" prop="isApp">
                  <el-radio-group v-model="form.isApp">
                    <el-radio :label="1">开启</el-radio>
                    <el-radio :label="0">关闭</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-tab-pane>
            </el-tabs>
          </el-col>
        </el-form>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm" style="margin-left: 5%">提交</el-button>
        <el-button @click="closeDialog">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listMessageConfig, getMessageConfig, delMessageConfig, addMessageConfig, updateMessageConfig, updateMessageConfigStatus } from "@/api/system/message";

export default {
  name: "MessageConfig",
  dicts: ['message_show_flag'],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      activeName: 'first',
      // 消息配置表格数据
      messageConfigList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        code: null,
        title: null
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        isWechat: [
          { required: true, message: "公众号模板消息不能为空", trigger: "blur" }
        ],
        isRoutine: [
          { required: true, message: "小程序订阅消息不能为空", trigger: "blur" }
        ],
        isSms: [
          { required: true, message: "发送短信不能为空", trigger: "blur" }
        ],
        isApp: [
          { required: true, message: "APP推送不能为空", trigger: "blur" }
        ]
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询消息配置列表 */
    getList() {
      this.$nextTick(() => {
        this.$refs.pagination.handleSearch(true)
      })
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    closeDialog() {
      this.open = false
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        code: null,
        title: null,
        isWechat: 0,
        wechatTempkey: null,
        wechatContent: null,
        wechatTempid: null,
        wechatData: null,
        wechatLink: null,
        wechatToRoutine: null,
        isRoutine: 0,
        routineTempkey: null,
        routineContent: null,
        routineTempid: null,
        routineData: null,
        routineLink: null,
        isSms: 0,
        smsId: null,
        smsText: null,
        isApp: 0,
        appId: null,
        variable: null,
        status: "0",
        createById: null,
        createBy: null,
        createTime: null,
        updateById: null,
        updateBy: null,
        updateTime: null,
        remark: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加消息配置";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids
      getMessageConfig(id).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改消息配置";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateMessageConfig(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addMessageConfig(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认删除消息配置编号为"' + ids + '"的数据项？').then(function () {
        return delMessageConfig(ids);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => { });
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('mapi/system/messageConfig/export', {
        ...this.queryParams
      }, `messageConfig_${new Date().getTime()}.xlsx`)
    },
    checkClose(done) {
      this.$confirm('是否关闭表单，关闭后数据将丢失？').then(function () {
        done()
      }).then(() => { }).catch(() => { });
    },
    handleStatusChange(row) {
      let text = row.status === "0" ? "停用" : "启用";
      this.$confirm('确认要' + text + ' ' + row.title + ' 吗？').then(function () {
        return updateMessageConfigStatus(row.id, row.status);
      }).then(() => {
        this.$modal.msgSuccess(text + "成功");
      }).catch(function () {
        row.status = row.status === "0" ? "1" : "0";
      });
    },

  }
};
</script>
