<template>
  <div class="container" style="padding: 10px!important;">
    <el-row style="margin-bottom: 10px;">
      <el-col>  <el-button
        type="primary"
        plain
        icon="el-icon-plus"
        size="mini"
        class="btn-blue"
        @click="handleAdd"
      >新增</el-button></el-col>
    </el-row>

      <el-table v-loading="loading" :data="this.messages" style="height: 100%">
        <el-table-column label="序号" align="center" type="index" ></el-table-column>
        <el-table-column label="消息标题" align="center" key="title" prop="title"></el-table-column>
        
        <el-table-column label="用户账号" align="center" key="userName" prop="userName">
          <template slot-scope="scope">
            <span>{{scope.row.userId == 0 ? "全体":scope.row.userName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="用户昵称" align="center" key="nickName" prop="nickName">
          <template slot-scope="scope">
            <span>{{scope.row.userId == 0 ? "全体":scope.row.nickName }}</span>
          </template>
        </el-table-column>
        <el-table-column style="cursor:pointer;" label="消息内容" align="center" key="message" prop="message"  width="500" show-overflow-tooltip>
         
        </el-table-column>
        <el-table-column label="发送时间" align="center" key="sendTime" prop="sendTime">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.sendTime) }}</span>
          </template>
        </el-table-column>
<!--        <el-table-column label="操作" align="center" key="applyId" prop="applyId" width="200">-->
<!--          <template slot-scope="scope">-->
<!--              <span><el-button  size="mini"  type="text"-->
<!--                                icon="el-icon-edit" @click="auditTask(scope.row.applyId)">审核</el-button></span>-->
<!--          </template>-->
<!--        </el-table-column>-->
      </el-table>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    <el-dialog title="发送系统消息" :visible.sync="open" :close-on-click-modal="false" width="700px" height="700px"
               append-to-body>
      <el-form :model="form" :rules="rules" ref="form" label-width="120px">
        <el-form-item label="发送对象" prop="userId">
          <el-select v-model="form.userId" filterable  clearable  placeholder="请选择" :style="{width:'100%'}">
            <el-option
              v-for="item in users"
              :key="item.userId"
              :label="item.nickName + ',' + item.phonenumber"
              :value="item.userId">
            </el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="消息标题" prop="title">
          <el-input v-model="form.title"></el-input>
        </el-form-item> -->
        <el-form-item label="消息内容" prop="message">
          <el-input type="textarea"
                    :rows="5" v-model="form.message"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {listMessage,sendMessage} from "@/api/system/message";
  import {list} from "@/api/system/user";
  export default {
    name: "MessageManage",
    data() {
      return {
        open:false,
        // 遮罩层
        loading: true,
        title: '消息列表',
        messages: [],
        // 总条数
        total: 0,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          userId:''
        },
        form:{
          userId:'',message:''
        },
        rules:{  userId: [
            {required: true, message: "发送对象不能为空", trigger: "blur"}
          ],
         
          message: [
            {required: true, message: "消息内容不能为空", trigger: "change"}
          ]},
        users:[]
      }
    },
    methods: {
      /** 查询列表 */
      getList() {
        this.loading = true;
        this.list();
      },
      list() {
        listMessage(this.queryParams).then(response => {
            this.messages = response.rows;
            this.total = response.total;
            this.loading = false;
          }
        )
      },
      handleAdd(){
        list().then(response=>{
          this.users = response.user;
          this.users.unshift({
            userId: 0,
            userName:'全体',
            nickName:'全体',
            phonenumber: ''
          })
        })
        this.open = true;
      },
      submitForm(){
        this.$refs["form"].validate(valid => {
          if (valid) {
            sendMessage(this.form).then(response => {
              this.$notify({
                title: '发送成功',
                message: '',
                align: 'center',
                type: 'success'
              });
              this.resetForm("form");
              this.open = false;
              this.getList();
            });
          }
        });
      },
      cancel(){
        this.open = false;
      }
    },
    computed: {},
    created() {
      this.list();
    }
  }
</script>

<style scoped>
  .type {
    color: #1890FF;
    font-weight: bold;
    font-size: 14px;
    margin-right: 10px;
  }

  .tip {
    font-size: 13px;
    color: gray;
  }

  .el-link {
    margin-right: 10px;
    font-size: 13px;
  }

  .active {
    color: #1890FF;
  }

  .el-row {
    margin-bottom: 5px;
    display: flex;
    flex-wrap: wrap
  }

  .el-card {
    min-width: 100%;
    height: 100%;
    margin-right: 20px;
    transition: all .5s;
  }
</style>
