<!-- 收信 -->
<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="阅读状态" class="fourLabel">
            <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="6">
          <!-- <el-button type="primary" class="button" @click="add">发送消息</el-button> -->
          <el-button type="primary" class="outButton" @click="batchDeleting" icon="el-icon-delete">批量删除</el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <!-- @row-click='tableClick' -->
          <el-table
            ref="multipleTable"
            :data="tableData"
            border 
            stripe 
            highlight-current-row
            style="width: 100%"
            @selection-change="handleSelectionChange"
            v-loading='loading'
          >
         <el-table-column
          type="selection"
          width="60"
          align="center"
          :selectable='selectable'
          >
         </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 align="center" label="消息标题" :show-overflow-tooltip="true">
            <template slot-scope="scope">{{ scope.row.title }}</template>
          </el-table-column>
          <el-table-column align="center" label="发送人" :show-overflow-tooltip="true">
            <template slot-scope="scope">{{ scope.row.sender }}</template>
          </el-table-column>
          <el-table-column align="center" prop="sendTime" label="发送日期" show-overflow-tooltip>
             <template slot-scope="scope">{{ scope.row.sendTime }}</template>
          </el-table-column>
          <el-table-column align="center" prop="statusName" label="阅读状态" show-overflow-tooltip>
             <template slot-scope="scope">{{ scope.row.statusName }}</template>
          </el-table-column>
          <el-table-column label="操作" width="120px" align="center">
              <template slot-scope="scope">
                <el-tooltip class="item" effect="light" content="查看" placement="top">
                  <el-button type="primary"  @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.statusName=='未读'" @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 { queryLetter,deleteList,findByIdUpdateById} from "@/api/znx/index";
import addModify from "./addModify";
export default {
  components: {
    addModify
  },
  data() {
    return {
      addType: true,
      flagNum:1,
      multipleSelection: [],
      tableData: [],
      areaLevel: 0,
      peopleform: {
        name: "",
        reviewStatus: ""
      },
      AnAblePersonVO: {
        statusCode: ""
      },
      limit: {
        page: 1,
        size: 10,
        total: 0
      },
      batchDeleArrs: [],//获取删除数据id变量
      // 下拉框的值
      reviewStatusArr: [
        {
          value: "全部",
          dictName: "全部",
          dictCode: null
        },
        {
          value: "已读",
          dictName: "已读",
          dictCode: "1"
        },
        {
          value: "未读",
          dictName: "未读",
          dictCode: "0"
        }
      ],
      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;
    },
    // 批量删除按钮click
    batchDeleting() {
      if(this.batchDeleArrs.length != 0) {
        this.deleteMsg(this.batchDeleArrs)
      }else {
        this.$message({
          type: 'warning',
          message: '请选择删除项',
          duration: 2000
        })
      }
    },
    // 删除单条数据按钮click
    deleteClick(row){
      let arr=[]
      arr.push(row.id)
      this.deleteMsg(arr)
    },
    // 查看按钮
    lookDetail(row){
      findByIdUpdateById(row.id).then(res=>{
        if (res.infoCode=="200") {
          this.addType = false;
          this.flagNum = 3;
          this.rowIdVal = row.id;
          // this.$router.push({
          //   path: '/sso/addznx',
          //   query: {
          //     id: row.id,
          //     flag:'3'
          //   }
          // })
        }
      })
      
    },
    // 控住表格复选框是否可选择
    selectable(row){
      return row.statusName =='已读'
    },
    // 查询请求接口
    quryClick() {
      this.getData();
    },
    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
      };
      queryLetter(data, this.AnAblePersonVO).then(res => {
        if(res.infoCode == 200) {
          this.tableData = res.data.list;
          this.limit.total = res.data.total;
          // console.log(this.tableData, 789);
        }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(() => {
        deleteList(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() {},
  mounted() {
    // 获取收信信息列表list
    this.getData(); 
  }
};
</script>
<style scoped>
  .el-select {
    width: 100%;
  }
</style>