<template>
    <el-card v-loading="loading" class="tjm_card_style_custom">
        <el-collapse v-model="activeNames">
            <el-collapse-item class="form-collapse-item" title="政策内容" name="detail">
                <share-form ref="shareForm" mode="detail" @formSuccess="loading = false" @formError="loading = false"></share-form>
            </el-collapse-item>
            <el-collapse-item title="政策关联" name="link">
                <el-empty v-if="!form.docNo"></el-empty>
                <template v-else>
                    <strive-link :docNo="form.docNo" tableHeight="auto"></strive-link>
                </template>
            </el-collapse-item>
            <el-collapse-item class="reply-collapse-item" title="政策留言" name="reply">
                <yh-reply-card v-if="form.id" :refId="form.id" isDetail :replyCount="replyCount || 5" :replyChildrenCount="3" @replySuccess="replySuccess"></yh-reply-card>
            </el-collapse-item>
        </el-collapse>
    </el-card>
</template>

<script>
import shareForm from "@/views/manage/policyShare/form.vue";
import striveLink from "@/views/publicDomain/link/strive.vue";
import yhReplyCard from "@/components/ReplyCard/index.vue";

export default {
    components: {
        shareForm,
        striveLink,
        yhReplyCard
    },

    data() {
        return {
            loading: false,
            activeNames: ["detail", "link", "reply"],
            replyCount: null,

            form: {
                id: null,
                name: null,
                docNo: null
            }
        }
    },

    methods: {
        setData(data, replyCount) {
            this.loading = true;
            this.replyCount = replyCount || null;
            this.form.id = data.id;
            this.form.docNo = data.docNo;
            nextTick(() => this.$refs.shareForm.setData(data.id));
        },

        replySuccess() {
            this.replyCount && nextTick(() => document.getElementsByClassName("reply-collapse-item") && document.getElementsByClassName("reply-collapse-item")[0] && document.getElementsByClassName("reply-collapse-item")[0].scrollIntoView({ block: "end" }));
        }
    }
}
</script>

<style lang="scss" scoped>
.tjm_card_style_custom > :deep(.el-card__body) .el-collapse {
  border: none;

  .el-collapse-item .el-collapse-item__header {
    font-size: 15px;
    font-weight: 600;
  }

  .form-collapse-item .el-form {
    padding-right: calc(var(--el-card-padding) * 2);
  }

  .reply-collapse-item .el-collapse-item__wrap {
    border-bottom: none;

    .el-collapse-item__content {
      padding-bottom: 0;

      .reply-card {
        border: 1px solid var(--el-card-border-color);
      }
    }
  }
}
</style>