<!-- 消息列表 -->
<template>
	<div class='overTime'>
		<el-dialog title="" :show-close="false" :append-to-body="true" :close-on-click-modal="false" :close-on-press-escape="false" :lock-scroll="true" v-if="dialogApprovalVisible" :visible.sync="dialogApprovalVisible">
			<div slot="title" class="header-title">
				<span class="dialogHeader">消息通知</span>
				<img @click="closeDialog('overtimeForm')" class="dialogHeaderClose" src="../assets/images/dialogClose.png" />
			</div>
			<div class="">
                <el-select v-model="value" placeholder="请选择" style="margin-bottom: 10px" @change="changeType">
                    <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
				<div style="padding: 0  0 24px;clear: both;">
                    <el-table
                        :data="messageList"
                        style="width: 100%">
                        <el-table-column
                            prop="updateTime"
                            align="center"
                            label="时间">
                        </el-table-column>
                        <el-table-column
                            prop="applyName"
                            align="center"
                            label="发起人">
                        </el-table-column>
                        <el-table-column
                            prop="responseName"
                            align="center"
                            label="接收人">
                        </el-table-column>
                        <el-table-column
                            prop="des"
                            align="center"
                            label="任务描述">
                        </el-table-column>
                        <el-table-column
                        fixed="right"
                        align="center"
                        label="操作"
                        width="100">
                        <template slot-scope="scope">
                            <el-button @click="open(scope.row)" type="text" size="small">查看</el-button>
                        </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div class="pageClass">
                    <el-pagination
                        hide-on-single-page
                        background
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page.sync="currentPage"
                        :page-size="pageSize"
                        layout="prev, pager, next, jumper"
                        :total="total">
                    </el-pagination>
                </div>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
	//例如：import 《组件名称》 from '《组件路径》';

	export default {
		name: "messageList",
        //import引入的组件需要注入到对象中才能使用
		components: {},
		props: ['addressListDialog'],
		data () {
        //这里存放数据
			return {
				dialogApprovalVisible: false,
                currentPage: 1,
				pageSize: 10,
                total: 0,
                messageList: [],
                options: [
                    {
                        value: '1',
                        label: '未处理的通知'
                    },
                    {
                        value: '2',
                        label: '我发起的通知'
                    }
                ],
                value: ''
			};
		},
        //监听属性 类似于data概念
		computed: {},
        //监控data中的数据变化
		watch: {
			addressListDialog: {
				immediate: true,
				handler(val) {
					this.dialogApprovalVisible = val;
				}
			},
		},
        //方法集合
		methods: {
			closeDialog() {
				this.$emit('close');
            },
            handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
			},
			handleCurrentChange(val) {
				this.currentPage = val;
				this.postAllAddress();
				// console.log(`当前页: ${val}`);
            },
            getFindNotReadNotice() {    //查询所有未处理的通知
                let id = JSON.parse(this.$Base64.decode(localStorage.getItem('login'))).id;
                console.log('id1-----------', JSON.parse(this.$Base64.decode(localStorage.getItem('login'))))
                this.$axios.getFindNotReadNotice(id).then((res) => {
					console.log('未处理的通知-----', res)
                    this.messageList = res.data;
                    if(this.messageList.length != 0) {
                        console.log('---------------------qwdqwdq-')
                        this.$parent.changeReadMessage(0);
                    }
				})
            },
            getFindReadNotice() {   //查询所有我发起的通知
                let id = JSON.parse(this.$Base64.decode(localStorage.getItem('login'))).id;
                console.log('id2-----------', JSON.parse(this.$Base64.decode(localStorage.getItem('login'))))
                this.$axios.getFindReadNotice(id).then((res) => {
					console.log('查询所有我发起的通知-----', res)
					this.messageList = res.data;
				})
            },
            changeType(value) { //分类查看通知
                // console.log('value----------', value)
                if(value == 2) {
                    this.getFindReadNotice();
                }else {
                    this.getFindNotReadNotice();
                }
            },
            open(row) {
                console.log('opne----', row)
                this.$confirm(row.des, '确认信息', {
                    distinguishCancelAndClose: true,
                    confirmButtonText: '同意',
                    cancelButtonText: '拒绝'
                })
                .then(() => {
                    
                    row.isAgree = '0';
                    this.$axios.postTeplyNotice(row).then((res) => {
                        console.log('查询所有我发起的通知-----', res)
                        this.$message({
                            type: 'success',
                            message: '确认成功'
                        });
                    })
                })
                .catch(action => {
                    if(action === 'cancel') {
                        this.$message({
                            type: 'info',
                            message: '拒绝'
                        })
                        row.isAgree = '0';
                        this.$axios.postTeplyNotice(row).then((res) => {
                            console.log('查询所有我发起的通知-----', res)
                            this.$message({
                                type: 'info',
                                message: '已拒绝'
                            })
                        })
                    }
                    
                });
            }
		},
        //生命周期 - 创建完成（可以访问当前this实例）
		created () {
            this.changeType()
		},
        //生命周期 - 挂载完成（可以访问DOM元素）
		mounted () {
		},
		beforeCreate () {
		}, //生命周期 - 创建之前
		beforeMount () {
		}, //生命周期 - 挂载之前
		beforeUpdate () {
		}, //生命周期 - 更新之前
		updated () {
		}, //生命周期 - 更新之后
		beforeDestroy () {
		}, //生命周期 - 销毁之前
		destroyed () {
		}, //生命周期 - 销毁完成
		activated () {
		}, //如果页面有keep-alive缓存功能，这个函数会触发
	}
</script>
<style scoped>
.header-title {
    margin-bottom: 14px;
}
</style>
