<!-- 发信 -->
<template>
    <div class="dashboard-container" style="position:relative;">
      <div v-if="addType" class="list-container">
         <el-form :model="peopleform" label-width="66px">
            <el-row :gutter="30">
                 <el-col :span="8">
                  <el-form-item label="阅读状态">
                    <el-select v-model="peopleform.reviewStatus" placeholder="请选择">
                      <el-option v-for="item in reviewStatusArr" :key="item.value" :label="item.dictName" :value="item.dictCode"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-button @click="quryClick" class="outButton" icon="el-icon-search" type="primary">查询 </el-button>
                </el-col>
            </el-row> 
         </el-form>
         <el-row style="margin-bottom: 10px;">
           <el-col :span="12">
              <el-button type="primary" class="outButton" @click="add">
                <i class="iconfont iconfabu"></i>发送消息</el-button>
              <el-button 
                  type="primary" 
                  class="outButton" 
                  icon="el-icon-delete"
                  @click="batchDeleting">批量删除</el-button>
            </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <!-- @row-click='tableClick' -->
          <el-table
              :data="tableData"
              @selection-change="handleSelectionChange" 
              style="width: 100%"
              v-loading="loading"
              border 
              stripe 
              highlight-current-row
            >
            <el-table-column
              type="selection"
              width="60"
              align="center"
              >
            </el-table-column>
            <el-table-column type='index' width='60' align="center" label="序号">
                <template slot-scope="scope"><span>{{scope.$index+1}}</span></template>
            </el-table-column> 
            <el-table-column
                prop="title"
                label="消息标题"
                align="center"
                :show-overflow-tooltip="true"
                
                >
            </el-table-column>
            <el-table-column
                prop="receiver"
                label="接收人"
                align="center"
                :show-overflow-tooltip="true"
                
                >
            </el-table-column>
            <el-table-column
                prop="sendTime"
                label="发送日期"
                align="center"
                :show-overflow-tooltip="true"
                
                >  
            </el-table-column>
            <el-table-column
              prop="statusName"
              label="阅读状态"
              align="center"
              :show-overflow-tooltip="true"
              
              >
            </el-table-column>
            <el-table-column
              label="操作"
              align="center"
              width="179px"
              >
              <template slot-scope="scope">  
                <el-tooltip class="item" effect="light"  content="查看" placement="top">
                  <el-button type="primary"  :disabled="scope.row.statusCode!=1" @click.stop="lookDetail(scope.row)" size='mini' icon="el-icon-zoom-in" class="button"></el-button>
                </el-tooltip>          
                <el-tooltip class="item" effect="light"  content="草稿箱" placement="top">
                  <el-button type="primary"  :disabled="scope.row.statusCode!=0" @click.stop="revamp(scope.row)" size='mini' class="difStateEditBtn"><i class="el-icon el-icon-edit-outline"></i></el-button>
                </el-tooltip>
                <el-tooltip class="item" effect="light" content="删除" placement="top">
                  <el-button type="primary"  @click.stop="deleteClick(scope.row)" size='mini' icon="el-icon-delete" class="difStateDelBtn" ></el-button>
                </el-tooltip>
              </template>
            </el-table-column>
            </el-table>
            <!-- 分页开始 -->
            <div class="pag-right clearFix">
                <el-pagination 
                class="right"
                :current-page.sync="limit.page" 
                :page-size="limit.size" 
                :page-sizes="[10,20,30,40]"
                :total="limit.total"
                 @size-change="handleChangeTaskSize"
                @current-change="handleCurrentChangeTaskPage" 
                layout="total, sizes, prev, pager, next, jumper">
                </el-pagination>
            </div>
            </el-col>
        </el-row>
        </div>
        <div v-else class="add-container">
            <addModify :flag="flagNum" :rowId="rowIdVal"></addModify>
        </div>
    </div>
</template>
<script>
import { sendDeleteList,sendLetter } from "@/api/znx/index";
import addModify from "./addModify";
export default {
  components: {
    addModify
  },
  data() {
    return {
      flagNum:1,
      rowIdVal:"",
      addType:true,
      toExamine: false,
      tableData: [],
      userId: '',
      areaLevel:0,
      peopleform: {
        name: '',
        reviewStatus: ''
      },
      AnAblePersonVO: {
        statusCode:''
      },
      limit: {
        page: 1,
        size: 10,
        total: 0
      },
      batchDeleArrs: [],
      reviewStatusArr: [
        {
          value: "全部",
          dictName: "全部",
          dictCode: null
        },
        {
          value: "已发送",
          dictName: "已发送",
          dictCode: "1"
        },
        {
          value: "草稿箱",
          dictName: "草稿箱",
          dictCode: "0"
        }
      ],
      province: false,
      loading: false//加载flag
    }
  },
  methods: {
    fGoBack(){
      this.addType = true;
      this.getData()
    },
    tableClick(row) {//点击当前行
      this.lookDetail(row)
    },
    // 批量删除 id获取
    handleSelectionChange(val) {
      var batchDeleArr = []
      val.map(item => {
        batchDeleArr.push(item.id)
      })
      this.batchDeleArrs = batchDeleArr
    },
    // 批量删除
    batchDeleting() {
      if(this.batchDeleArrs.length != 0) {
        this.deleteMsg(this.batchDeleArrs)
      }else {
        this.$message({
          type: 'warning',
          message: '请选择删除项',
          duration: 2000
        })
      }
    },
    // 查询
    quryClick() {
      this.getData()
    },
    // 删除click
    deleteClick(row){
      let arr=[]
      arr.push(row.id)
      this.deleteMsg(arr)
    },
    // 新增click
    add(){
      this.addType = false;
      this.flagNum = 1;
      this.rowIdVal = undefined;
      // this.$router.push({
      //   path: '/sso/addznx',
      //   query: {
      //     flag:'1'
      //   }
	    // })
    },
    // 查看按钮
    lookDetail(row){
      this.addType = false;
      this.flagNum = 2;
      this.rowIdVal = row.id;
      // this.$router.push({
      //   path: '/sso/addznx',
      //   query: {
      //     id: row.id,
      //     flag:'2'
      //   }
	    // })
    },
    // 修改按钮
    revamp(row){
      this.addType = false;
      this.flagNum = 4;
      this.rowIdVal = row.id;
      // this.$router.push({
      //   path: '/sso/addznx',
      //   query: {
      //     id: row.id,
      //     flag:'4'
      //   }
	    // })
    },
    handleChangeTaskSize(val) {
      this.limit.size = val
      this.getData()
    },
    handleCurrentChangeTaskPage(val) {
      this.limit.page = val
      this.getData()
    },
    getData() {
      this.loading = true;
      this.AnAblePersonVO.statusCode = this.peopleform.reviewStatus
      const data = {
        page: this.limit.page,
        size: this.limit.size
      };
      sendLetter(data, this.AnAblePersonVO).then(res => {
        if(res.infoCode == 200) {
          this.tableData = res.data.list;
          this.limit.total = res.data.total;
        }else {
          this.$message({
            type: 'error',
            message: res.msg,
            duration: 2000
          })
        }
        this.loading = false;
      }).catch(err => {
        console.log(err)
        this.loading = false;
      })
    },
    /**
     *  调用删除接口删除数据
     *  参数：list 传入删除数据id 数据类型  array
     */
    deleteMsg(list){
      this.$confirm("您确定要删除吗?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
      }).then(() => {
        sendDeleteList(list).then(res => {
          if (res.infoCode==200) {
            this.$message({
                message: res.msg,
                type: "success",
                duration: 2000
              });
          } else {
            this.$message({
                message: res.msg,
                type: "error",
                duration: 2000
              });
          }
          this.getData();
        });
      })
    }
  },
  created() {
    this.getData()
  },
  mounted() {
  }
}
</script>
<style scoped>
.el-input,
.el-select {
  width: 100%;
}

.setYear {
  margin-bottom: 5px;
  /*width: 40%;*/
}

.contentBox {
  margin-top: 20px;
  padding: 0px 20px;
}

.out{
    line-height: 50px;
    margin-left: 80px;
}
.www{
  line-height: 22px;
  float: right;
    }
</style>