<template>
  <div class="container" style="padding: 30px;">
<!--    <el-row style="margin-bottom: 10px;">-->
<!--      <el-col>  <el-button-->
<!--        type="primary"-->
<!--        plain-->
<!--        icon="el-icon-plus"-->
<!--        size="mini"-->
<!--        @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" key="sendTime" prop="sendTime" width="200">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.sendTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="消息内容" align="center" key="message" prop="message" >
        <template slot-scope="scope">
          <span>{{scope.row.message}}</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="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 {listMyMessage,sendMessage} from "@/api/system/message";
  import {list} from "@/api/system/user";
  import store from "@/store";
  export default {
    name: "MyMessage",
    data() {
      return {
        open:false,
        // 遮罩层
        loading: true,
        title: '消息列表',
        messages: [],
        // 总条数
        total: 0,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          userId:''
        },
        form:{
          userId:''
        },
        rules:{  userId: [
            {required: true, message: "发送对象不能为空", trigger: "blur"}
          ],
          message: [
            {required: true, message: "消息内容不能为空", trigger: "change"}
          ]},
        users:[]
      }
    },
    methods: {
      /** 查询列表 */
      getList() {
        this.loading = true;
        this.list();
      },
      list() {
        listMyMessage(this.queryParams).then(response => {
            this.messages = response.rows;
            this.total = response.total;
            this.loading = false;
            store.commit('SET_MESSAGECOUNT', 0);
          }
        )
      },
      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>
