<!--通知公告-->
<template>
  <div class="app-container notice">
    <div class="page-container noticePage" v-if="pageType == 1">
      <div class="page-form-title-box">
        <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
          <el-form-item label="" prop="title">
            <el-input
              v-model="queryParams.searchValue"
              placeholder="公告标题/操作人员"
              clearable
              size="small"
            />
          </el-form-item>
          <el-form-item label="" prop="noticeType">
            <el-select v-model="queryParams.noticeType" placeholder="请选择类型" clearable size="small">
              <el-option
                v-for="dict in typeList"
                :key="dict.code"
                :label="dict.name"
                :value="dict.code"
              />
            </el-select>
          </el-form-item>
          <p class="page-inquire-common-style-button" @click="handleQuery">查询</p>
          <p class="page-reset-common-style-button" @click="resetQuery">重置</p>
          <p class="page-submit-common-style-button"
             style="float: right;"
             @click="tableButton(1)"
             v-hasPermiRouter="['system:notice:add']"
          >新增</p>
        </el-form>
      </div>
      <div class="page-content-box">
        <el-table class="table-box" v-loading="loading" border :data="dataList">
          <el-table-column label="消息类型" align="left" prop="sendName" width="140" show-overflow-tooltip>
            <template slot-scope="scope">
              <span v-for="item in typeList" v-if="item.code==scope.row.noticeType">{{item.name}}</span>
            </template>
          </el-table-column>
          <el-table-column label="消息标题" align="left" prop="title" show-overflow-tooltip/>
          <!--<el-table-column label="消息内容" align="left" prop="content" show-overflow-tooltip/>-->
          <el-table-column label="发送状态" align="left" prop="sendState" width="160" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{scope.row.sendState == 0 ? '待发送' : (scope.row.sendState == 1 ? '已发送' : (scope.row.sendState == 2 ? '已撤回' : ''))}}</span>
            </template>
          </el-table-column>
          <el-table-column label="发送时间" align="left" prop="sendTime" width="160" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{parseTime(scope.row.sendTime,"{y}-{m}-{d} {h}:{i}")}}</span>
            </template>
          </el-table-column>
          <el-table-column label="发送人" align="left" prop="userName" width="160" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{scope.row.userName?scope.row.userName:'--'}}</span>
            </template>
          </el-table-column>
          <el-table-column label="创建时间" align="left" prop="createTime" width="160" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{parseTime(scope.row.createTime,"{y}-{m}-{d} {h}:{i}")}}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="left" class-name="small-padding fixed-width" width="240" v-if="tableButtonType">
            <template slot-scope="scope">
              <div class="table-button-box">
                <p class="table-button-null"></p>
                <p class="table-button-p"
                   @click="tableButton(7,scope.row)"
                   v-hasPermiRouter="['system:notice:detail']"
                >详情</p>
                <p class="table-button-p"
                   v-if="scope.row.sendState != 1"
                   @click="tableButton(2,scope.row)"
                   v-hasPermiRouter="['system:notice:edit']"
                >发送</p>
                <p class="table-button-p"
                   v-if="scope.row.sendState == 1 && scope.row.cancelType"
                   @click="tableButton(3,scope.row)"
                   v-hasPermiRouter="['system:notice:perms']"
                >撤回</p>
                <p class="table-button-p"
                   v-if="scope.row.sendState != 1"
                   @click="tableButton(4,scope.row)"
                   v-hasPermiRouter="['system:notice:edit']"
                >编辑</p>
                <p class="table-button-p"
                   v-if="scope.row.sendState != 1"
                   @click="tableButton(5,scope.row)"
                   v-hasPermiRouter="['system:notice:del']"
                >删除</p>
                <p class="table-button-null"></p>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <pagination :page-sizes="[20, 30, 40, 50]"
                    v-show="total>0"
                    :total="total"
                    layout="total, prev, pager, next, sizes, jumper"
                    :page.sync="queryParams.page"
                    :limit.sync="queryParams.pageSize"
                    @pagination="getList"
        />
      </div>
    </div>
    <add-page v-if="pageType == 2" :propsData="propsData"></add-page>
    <div class="message-max-big-box" v-if="pageType == 3">
      <div class="page-top-title-box">
        <p class="page-top-title-name-p">消息详情</p>
        <p class="page-top-title-out-p" @click="tableButton(6)">返回</p>
      </div>
      <div class="info-max-big-box scrollbar-box">
        <div>
          <p>消息标题：</p>
          <p>{{messageData.title}}</p>
        </div>
        <div>
          <p>消息类型：</p>
          <p>
            <span v-for="item in typeList" v-if="item.code==messageData.noticeType">{{item.name}}</span>
          </p>
        </div>
        <div>
          <p>发送人：</p>
          <p>{{messageData.userName?messageData.userName:'--'}}</p>
        </div>
        <div>
          <p>发送时间：</p>
          <p>{{parseTime(messageData.sendTime,'{y}-{m}-{d} {h}:{i}')}}</p>
        </div>
        <div>
          <p>消息内容：</p>
          <p v-html="messageData.content" class="htmlMessage w-e-text"></p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { systemNoticeList,systemNoticeDelete,systemNoticeCancel,
  systemNoticeSend } from "@/api/systemManagement/index";
import { systemNoticeGetNoticeType } from "@/api/commonality/permission";
import calculation from "@/utils/calculation";
import addPage from "./addPage.vue"

export default {
  name: "Notice",
  components: {
    addPage,
  },
  data() {
    return {
      tableButtonType:this.hasPermiDom(['system:notice:edit','system:notice:detail','system:notice:del','system:notice:perms']),
      pageType:1,
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 公告表格数据
      dataList: [],
      // 消息类型
      typeList: [],
      // 查询参数
      queryParams: {
        page: 1,
        pageSize:20,
        searchValue: undefined,
        title: undefined,
        createBy: undefined,
        state: undefined
      },
      //新增编辑页面传参
      propsData:{},
      messageData:{},
    };
  },
  created() {
  },
  mounted(){
    this.systemNoticeGetNoticeType();
    this.getList();
  },
  methods: {
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.page = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams.searchValue='';
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 查询列表 */
    getList() {
      this.loading = true;
      systemNoticeList(this.queryParams).then(response => {
        let timestamp = parseInt(calculation.accDiv(new Date().getTime(),1000));
        response.data.records.forEach((item)=>{
          if(item.sendTime){
            let time = calculation.accDiv(new Date(item.sendTime).getTime(),1000);
            item.cancelType = calculation.accSub(timestamp, time) < 900;
          }
        })
        this.$set(this,'dataList',response.data.records);
        this.$set(this,'total',response.data.total);
        this.loading = false;
      });
    },
    //消息类型
    systemNoticeGetNoticeType(){
      systemNoticeGetNoticeType().then(response => {
        this.$set(this,'typeList',response.data);
      });
    },
    //按钮
    tableButton(type,row){
      let self = this;
      if(type == 1){
        //新增
        this.$set(this,'propsData',{});
        this.$set(this,'pageType',2);
      }else if(type == 2){
        //发送
        this.$confirm('是否确认发送?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          systemNoticeSend({noticeId:row.noticeId}).then(response => {
            self.msgSuccess(response.message)
            self.getList();
          });
        }).then(() => {
        }).catch(() => {});
      }else if(type == 3){
        //撤回
        this.$confirm('是否确认撤回?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          systemNoticeCancel({noticeId:row.noticeId}).then(response => {
            self.msgSuccess(response.message)
            self.getList();
          });
        }).then(() => {
        }).catch(() => {});
      }else if(type == 4){
        //编辑
        this.$set(this,'propsData',row);
        this.$set(this,'pageType',2);
      }else if(type == 5){
        //删除
        this.$confirm('是否确认删除?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          systemNoticeDelete({noticeId:row.noticeId}).then(response => {
            self.msgSuccess(response.message)
            self.getList();
          });
        }).then(() => {
        }).catch(() => {});
      }else if(type == 6){
        this.handleQuery();
        this.$set(this,'pageType',1);
      }else if(type == 7){
        this.$set(this,'messageData',row);
        this.$set(this,'pageType',3);
      }
    },
  }
};
</script>

<style scoped lang="scss">
  .notice{
    .noticePage{

    }
    .message-max-big-box{
      flex:1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      .info-max-big-box{
        padding:30px 40px;
        div{
          display: flex;
          margin-bottom:20px;
          p{
            font-size:16px;
            line-height:20px;
          }
          p:nth-child(1){
            width:80px;
          }
          p:nth-child(2){
            flex:1;
          }
          .htmlMessage{
            border:1px solid #dedede;
            border-radius:6px;
            min-height:400px;
            padding:10px 20px;
          }
        }
      }
    }
  }
</style>
