<template>


    <div style="color: #666; " class="content">
        <el-backtop target=".content" :bottom="100">
            <div>UP</div>
        </el-backtop>
        <el-page-header @back="goBack" content="项目详情页面">
        </el-page-header>

        <div style="margin: 20px 0; margin: 10px 120px;">

            <div class="pd-10" style="font-size: 25px; color: black; cursor: pointer;text-align: center">项目名称：{{ article.name }}</div>
            <div style="font-size: 14px; margin-top: 10px;text-align: center">
                <i class="el-icon-user-solid"style="color: #409EFF"></i> <span>发布人：{{ article.user }}</span>
                <i class="el-icon-time" style="margin-left: 10px;color:#25d1fc;"></i> <span>开始时间：{{ new Date(article.time).toLocaleDateString() }}</span>
                <i class="el-icon-time" style="margin-left: 10px;color: #FF0000"></i> <span>结束时间：{{ new Date(article.overtime).toLocaleDateString() }}</span>
            </div>
        </div>

        <div style="margin:10px 120px;" >
            <mavon-editor
                    class="md"
                    :value="article.content"
                    :subfield="false"
                    :defaultOpen="'preview'"
                    :toolbarsFlag="false"
                    :editable="false"
                    :scrollStyle="true"
                    :ishljs="true"
            />
			<div style="text-align: right; margin-top: 10px;">
			<el-button size="medium" type="primary" round @click="handleAdd">我要投标</el-button>
			</div>
        </div>
        <div style="margin: 10px 300px;margin-top:50px" >
            <div style="margin:0 auto;">
                <div style="border-bottom: 1px solid orangered; padding: 10px 0; font-size: 20px">评论</div>
                <div style="padding: 10px 0">
                    <el-input size="small" type="textarea" v-model="commentForm.content"></el-input>
                </div>
                <div class="pd-10" style="text-align: right">

                    <el-button type="primary" size="small" style="margin-left:0px" @click="save">评论</el-button>
                    <el-button type="primary" size="small"  @click="goBack">返回</el-button>
                </div>
            </div>
			<!-- 投标框 -->
			<el-dialog title="投标信息" :visible.sync="dialogVisible" width="30%" >
			    <el-form label-width="80px" size="small">
			     
			        <!-- <el-form-item label="招标项目">
			            <el-select  @change="changeOption" clearable v-model="form.pid" placeholder="请选择" >
			                <el-option v-if="item.state==='审核通过'
							&& item.states==='待开标' 
							&& !(new Date() < Date.parse(item.time))
							&& !(new Date() > Date.parse(item.overtime))"  
							v-for="item in bidders" :label="item.name" :key="item.id" :value="item.id">
			                </el-option>
			            </el-select>
			        </el-form-item> -->
					<el-form-item label="项目id">
					    <el-input v-model="form.pid" autocomplete="off" disabled></el-input>
					</el-form-item>
			        <el-form-item label="招标人">
			            <el-input v-model="form.tuser" autocomplete="off" disabled></el-input>
			        </el-form-item>
			        <el-form-item label="招标人id">
			            <el-input v-model="form.tid" autocomplete="off" disabled></el-input>
			        </el-form-item>
			        <el-form-item label="投标资金(单位万元)">
			            <el-input v-model="form.funds" autocomplete="off" style="width: 200px"></el-input>
			        </el-form-item>
			        <el-upload
			                :action="'http://' + serverIp +':9090/file/upload'"
			                :show-file-list="false"
			                :on-success="handleAvatarSuccess"
			                :headers="importHeaders"
			                style="display: inline-block"
			        >
			            <el-button type="primary" class="ml-5">上传投标标书<i class="el-icon-top"></i></el-button>
			         <!--   <i v-else class="el-icon-plus avatar-uploader-icon"></i>-->
			        </el-upload>
			    </el-form>
			    <div slot="footer" class="dialog-footer">
			        <el-button @click="dialogVisible = false">取 消</el-button>
			        <el-button type="primary" @click="tobidding">确 定</el-button>
			    </div>
			</el-dialog>
            <!--      评论列表-->
            <div>
                <div v-for="item in comments" :key="item.id" style="border-bottom: 1px solid #ccc; padding: 10px 0; ">
                    <div style="display: flex">
                        <div style="width: 100px; text-align: center">
                            <el-image :src="item.avatarUrl" style="width: 50px; height: 50px; border-radius: 50%"></el-image>
                        </div> <!--  头像-->
                        <div style="flex: 1; font-size: 14px; padding: 5px 0; line-height: 25px">
                            <b>{{ item.nickname }}：</b>
                            <span>{{ item.content }}</span>

                            <div style="display: flex; line-height: 20px; margin-top: 5px">
                                <div style="width: 200px;">
                                    <i class="el-icon-time"></i><span style="margin-left: 5px">{{ item.time }}</span>
                                </div>
                                <div style="text-align: right; flex: 1">
                                    <el-button style="margin-left: 5px" type="text" @click="handleReply(item.id)">回复</el-button>
                                    <el-popconfirm
                                            class="ml-5"
                                            confirm-button-text='确定'
                                            cancel-button-text='我再想想'
                                            icon="el-icon-info"
                                            icon-color="red"
                                            title="您确定删除吗？"
                                            @confirm="del(item.id)"

                                    >
                                    <el-button  slot="reference" type="text" style="color: red"  v-if="user.id === item.userId">删除</el-button>
                                    </el-popconfirm>
                                </div>
                            </div>
                        </div>   <!--  内容-->
                    </div>

                    <div v-if="item.children.length"  style="padding-left: 200px;">
                        <div v-for="subItem in item.children" :key="subItem.id"  style="background-color: #f0f0f0; padding: 5px 20px">
                            <!--          回复列表-->
                            <div style="font-size: 14px; padding: 5px 0; line-height: 25px">
                                <div>
                                    <b style="color: #3a8ee6" v-if="subItem.pnickname">@{{ subItem.pnickname }}</b>
                                </div>
                                <div style="padding-left: 5px">
                                    <b>{{ subItem.nickname }}：</b>
                                    <span>{{ subItem.content }}</span>
                                </div>

                                <div style="display: flex; line-height: 20px; margin-top: 5px; padding-left: 5px">
                                    <div style="width: 200px;">
                                        <i class="el-icon-time"></i><span style="margin-left: 5px">{{ subItem.time }}</span>
                                    </div>
                                    <div style="text-align: right; flex: 1">
                                        <el-button style="margin-left: 5px" type="text" @click="handleReply(subItem.id)">回复</el-button>
                                        <el-button type="text" style="color: red" @click="del(subItem.id)" v-if="user.id === subItem.userId">删除</el-button>
                                    </div>
                                </div>
                            </div>   <!--  内容-->
                        </div>

                    </div>


                </div>
            </div>
        </div>


        <el-dialog title="回复" :visible.sync="dialogFormVisible" width="50%" >
            <el-form label-width="80px" size="small">
                <el-form-item label="回复内容">
                    <el-input type="textarea" v-model="commentForm.contentReply" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false" size="small">取 消</el-button>
                <el-button type="primary" @click="save1"  size="small">确 定</el-button>
            </div>
        </el-dialog>
        <el-backtop target=".page-component__scroll .el-scrollbar__wrap"></el-backtop>
    </div>
</template>

<script>

    export default {
        name: "Article",
        data() {
            return {
                article: {},
                comments: [],
                commentForm: {},
                id: this.$route.query.id,
                dialogFormVisible: false,
				form: {},
				dialogVisible: false,
				importHeaders: {token:  JSON.parse(localStorage.getItem('user')).token},
				user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},
				bidders: {},
            }
        },
        created() {
            this.load()
            this.loadComment()
			this.request.get("/bids/findAll").then(res =>{
			    // console.log(res)
			    this.bidders=res.data
				console.log(this.bidders);
			})
        },
        methods: {
			handleAdd() {
			    /*this.dialogFormVisible = true*/
			    this.dialogVisible=true
			    this.form = {}
				this.form.pid=this.article.id
				this.form.tuser = this.article.user
				this.form.tid = this.article.uid
			},
			tobidding(){
				this.request.post("/tender", this.form).then(res => {
				    if (res.code === '200') {
				        this.$message.success("保存成功")
				        this.dialogFormVisible = false
				        this.load()
				    } else {
				        this.$message.error(res.msg)
				    }
				})
				 this.dialogVisible=false
			},
            goBack(){

                this.$router.go(-1);
            },
            load() {
                this.request.get("/bids/" + this.id).then(res => {
                    this.article = res.data
					console.log(res.data);
                })
            },
            loadComment() {
                this.request.get("/comment/tree/" + this.id).then(res => {
                    this.comments = res.data
                })
            },
            save() {
                if (!this.user.id) {
                    this.$message.warning("请登录后操作")
                    return
                }
                if (this.commentForm.content==null) {
                    this.$message.error("评论内容不能为空")
                    return
                }
                this.commentForm.articleId = this.id
                if (this.commentForm.contentReply) {
                    this.commentForm.content = this.commentForm.contentReply
                }
                this.request.post("/comment", this.commentForm).then(res => {
                    if (res.code === '200') {
                        this.$message.success("评论成功")
                        this.commentForm = {}  // 初始化评论对象内容
                        this.loadComment()
                        this.dialogFormVisible = false
                    } else {
                        this.$message.error(res.msg)
                    }
                })
            },
            save1() {
                if (!this.user.id) {
                    this.$message.warning("请登录后操作")
                    return
                }
                if (this.commentForm.contentReply==null) {
                   this.$message.error("评论内容不能为空")
                   return
               }
                this.commentForm.articleId = this.id
                if (this.commentForm.contentReply) {
                    this.commentForm.content = this.commentForm.contentReply
                }
                this.request.post("/comment", this.commentForm).then(res => {
                    if (res.code === '200') {
                        this.$message.success("评论成功")
                        this.commentForm = {}  // 初始化评论对象内容
                        this.loadComment()
                        this.dialogFormVisible = false
                    } else {
                        this.$message.error(res.msg)
                    }
                })
            },
            del(id) {
                this.request.delete("/comment/" + id).then(res => {
                    if (res.code === '200') {
                        this.$message.success("删除成功")
                        this.loadComment()
                    } else {
                        this.$message.error("删除失败")
                    }
                })
            },
            handleReply(pid) {
                this.commentForm = { pid: pid }
                this.dialogFormVisible = true
            },
			handleAvatarSuccess(res) {
			    this.form.fileurl = res
			    this.$message.success("上传成功")
			},
			
        }
    }
</script>

<style scoped>
    .content {
        height: 700px;
        overflow-y: scroll;
    }
</style>