<template>
  <div>
    <el-card>
      <div>
        模版类型:
        <el-select v-model="queryInfo.templateType" placeholder="请选择模版" clearable>
          <el-option v-for="item in sendTemplateList" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
        <el-button type="primary" style="margin-left:10px" icon="el-icon-search" @click="queryData">查询</el-button>
      </div>
      <el-table :data="templateList" border style="width: 100%;margin-top:20px">
        <el-table-column type='index' width="50px">
          <template slot-scope="scope">
            <span>{{  (queryInfo.pageNum -1 ) * queryInfo.pageSize + scope.$index + 1}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="id" label="模版ID" width="100px"></el-table-column>
        <el-table-column label="模版类型" width="150px">
          <template slot-scope="scope">
            <p v-if="scope.row.templateType==1">行业短信</p>
            <p v-if="scope.row.templateType==2">push推送</p>
            <p v-if="scope.row.templateType==3">站内信</p>
            <p v-if="scope.row.templateType==5">营销短信</p>
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="模版名称" width="200px"></el-table-column>
        <el-table-column prop="content" label="模版内容" width="500px"></el-table-column>
        <el-table-column prop="deleted" label="模版状态" width="150px">
          <template slot-scope="scope">
            <p v-if="scope.row.deleted==true">禁用</p>
            <p v-if="scope.row.deleted==false">启用</p>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <slot slot-scope="scope">
            <el-button type="primary" icon="el-icon-position" @click="sendMessageBtn(scope.row)" v-permission="('auto:interface:edit')">发送</el-button>
          </slot>
        </el-table-column>
      </el-table>
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="queryInfo.pageNum" :page-size="queryInfo.pageSize" layout="total, prev, pager, next" :total="totalNum"></el-pagination>
    </el-card>
    <!-- 发送内容弹框 -->
    <el-dialog title="发送内容" :visible.sync="DialogSenMessageTemplate" @close="closeDialog" width="30%">
      <el-form ref="sendFormRef" :rules="rules" :model="sendForm" label-width="90px">
        <el-form-item label="手机号:" prop="phoneNo" style="width:400px">
          <el-input v-model="sendForm.phoneNo"></el-input>
        </el-form-item>
        <el-form-item label="发送内容:" style="width:400px">
          <el-input type="textarea" placeholder="请输入内容" v-model.trim="contentList" :disabled='isdisabled'></el-input>
          <div style="color:red;margin-left:10px" v-if="argumentsNumber>0">请输入{{argumentsNumber}}个参数，并且参数以英文逗号分割！</div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="DialogSenMessageTemplate=false">取 消</el-button>
        <el-button type="primary" @click="saveSendContent">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  getTemplateList,
  getQuick,
  getPush,
  getStationLetter,
  getMarket
} from '@/api/getMessage'
export default {
  data() {
    return {
      queryInfo: {
        pageNum: 1,
        pageSize: 10,
        namespace: '',
        templateType: 5
      },
      totalNum: 0,
      templateList: [],
      sendTemplateList: [
        {
          id: 1,
          name: '行业短信'
        },
        {
          id: 2,
          name: 'push推送'
        },
        {
          id: 3,
          name: '站内信'
        },
        {
          id: 5,
          name: '营销短信'
        }
      ],
      sendForm: {
        phoneNo: '',
        contentArgs: '',
        namespace: '',
        contentId: ''
      },
      DialogSenMessageTemplate: false,
      rules: {
        phoneNo: [
          {
            required: true,
            message: '手机号不能为空！',
            trigger: 'blur'
          }
        ]
      },
      argumentsNumber: 0,
      isdisabled: false,
      contentList: ''
    }
  },
  created() {
    this.getTemplateList()
  },
  methods: {
    handleSizeChange(newPage) {
      this.queryInfo.pageNum = newPage
      this.getTemplateList()
    },
    handleCurrentChange(newPage) {
      this.queryInfo.pageNum = newPage
      this.getTemplateList()
    },
    // 获取模版列表
    getTemplateList() {
      this.queryInfo.namespace = window.sessionStorage.getItem('env')
      getTemplateList(this.queryInfo).then((resp) => {
        this.templateList = resp.data.data.list
        this.totalNum = resp.data.data.total
      })
    },
    // 查询模版数据
    queryData() {
      this.getTemplateList()
    },
    // 点击发送按钮
    sendMessageBtn(row) {
      this.contentList = ''
      this.sendForm.contentId = row.id
      this.DialogSenMessageTemplate = true
      this.argumentsNumber = row.argumentsNumber
      if (this.argumentsNumber > 0) {
        this.isdisabled = false
      } else {
        this.isdisabled = true
      }
    },
    closeDialog() {
      this.$refs.sendFormRef.resetFields()
    },
    // 保存发送模版
    saveSendContent() {
      this.sendForm.namespace = window.sessionStorage.getItem('env')
      // 将字符串以逗号形式转化为数组
      this.sendForm.contentArgs = this.contentList.split(',')
      if (this.contentList === '') {
        this.sendForm.contentArgs = []
      }
      this.$refs.sendFormRef.validate((valid) => {
        if (!valid) {
          return false
        } else {
          if (this.queryInfo.templateType === 1) {
            getQuick(this.sendForm)
              .then((resp) => {
                if (resp.data.data === true) {
                  this.DialogSenMessageTemplate = false
                  this.$message.success('发送成功！')
                  this.contentList = ''

                  this.getTemplateList()
                } else {
                  this.$message.error(resp.data.msg)
                }
              })
              .catch((error) => {
                this.$message({ type: 'error', message: error })
              })
          } else if (this.queryInfo.templateType === 2) {
            getPush(this.sendForm)
              .then((resp) => {
                if (resp.data.data === true) {
                  this.DialogSenMessageTemplate = false
                  this.$message.success('发送成功！')
                  this.contentList = ''
                  this.getTemplateList()
                } else {
                  this.$message.error(resp.data.msg)
                }
              })
              .catch((error) => {
                this.$message({ type: 'error', message: error })
              })
          } else if (this.queryInfo.templateType === 3) {
            getStationLetter(this.sendForm)
              .then((resp) => {
                if (resp.data.data === true) {
                  this.DialogSenMessageTemplate = false
                  this.$message.success('发送成功！')
                  this.contentList = ''
                  this.getTemplateList()
                } else {
                  this.$message.error(resp.data.msg)
                }
              })
              .catch((error) => {
                this.$message({ type: 'error', message: error })
              })
          } else if (this.queryInfo.templateType === 5) {
            getMarket(this.sendForm)
              .then((resp) => {
                if (resp.data.data === true) {
                  this.DialogSenMessageTemplate = false
                  this.$message.success('发送成功！')
                  this.contentList = ''
                  this.getTemplateList()
                } else {
                  this.$message.error(resp.data.msg)
                }
              })
              .catch((error) => {
                this.$message({ type: 'error', message: error })
              })
          }
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.el-select {
  margin: 0 10px 0 5px;
}
</style>
