<template>
    <div class="topicbox">
        <div class="topicheader">
            <div class="headerleft">
                <div class="totalbox">
                    <Button type="primary" @click="topicShow = !topicShow">{{ $t("jyzx.discuss.addTopic") }}</Button>
                </div>
                <div class="taginfo">
                    <span style="margin-left: 20px">{{ $t("jyzx.discuss.topicType") }}：</span>
                    <CheckboxGroup v-model="toType" @on-change="topicType">
                        <Checkbox label="1" border>{{ $t("jyzx.discuss.normal") }}</Checkbox>
                        <Checkbox label="2" border>{{ $t("jyzx.discuss.point") }}</Checkbox>
                    </CheckboxGroup>
                    <!-- <Tag checkable color="geekblue" size ="large" @on-change="topicType(1)">普通话题</Tag>
                    <Tag checkable color="volcano" size ="large" @on-change="topicType(2)">能力点话题</Tag> -->
                </div>
            </div>
            <div class="headerright">
                <div class="searchbox">
                    <Input
                        search
                        enter-button
                        :placeholder="$t('jyzx.discuss.placeholder1')"
                        v-model="keyword"
                        @on-search="searchKeyword"
                    />
                </div>
                <div class="aboutme">
                    <Dropdown @on-click="metopic">
                        <a href="javascript:void(0)">
                            {{ showType }}
                            <Icon type="ios-arrow-down"></Icon>
                        </a>
                        <DropdownMenu slot="list">
                            <DropdownItem name="allTopic">{{ $t("jyzx.discuss.allTopic") }}</DropdownItem>
                            <DropdownItem name="metopic">{{ $t("jyzx.discuss.myTopic") }}</DropdownItem>
                            <DropdownItem name="mereply">{{ $t("jyzx.discuss.replyMe") }}</DropdownItem>
                        </DropdownMenu>
                    </Dropdown>
                </div>
                <!-- <div class="topicbtn">
                    <Button
                        shape="circle"
                        icon="md-chatboxes"
                        size="large"
                        @click="topicShow = !topicShow"
                    ></Button>
                </div> -->
            </div>
        </div>

        <div id="statementBox" v-show="topicShow">
            <Form :model="formItem">
                <FormItem>
                    <Input v-model="formItem.input"
                           :placeholder="$t('jyzx.discuss.placeholder2')"></Input>
                </FormItem>
                <Select v-model="topicnameId" style="width:100%;margin-bottom:1%;" @on-change="comidTopic">
                    <Option v-for="item in topicData" :value="item.comid" :key="item.comid">{{item.no}}{{ item.name }}</Option>
                </Select>
                <div id="div1" style="height: 370px"></div>

                <!--<FormItem>
        <Input v-model="formItem.textarea" type="textarea" :autosize="{minRows: 5,maxRows: 9}"></Input>
    </FormItem>
    <FormItem>
        <div class="addimage">
            <Upload action="//jsonplaceholder.typicode.com/posts/" :show-upload-list="true" :max-size="50000">
                <Button icon="ios-cloud-upload-outline">添加附件</Button>
            </Upload>
        </div>
    </FormItem>-->
                <!--<textarea id="text1" style="width:100%; height:200px;"></textarea>-->
                <FormItem>
                    <Button type="primary" @click="discussSubmit">{{ $t("jyzx.common.sure") }}</Button>
                    <Button style="margin-left: 8px"
                            @click="
                            ()=>
                        {
                        topicShow = false
                        }
                        "
                        >{{ $t("jyzx.common.cancel") }}
                    </Button>
                </FormItem>
            </Form>
        </div>
    </div>
</template>
<script>
import E from "wangeditor"
export default {
    data() {
        return {
            toType: ["1", "2"], //话题类型
            formItem: {
                input: "",
            },
            topicShow: false,
            stemContent: "",
            keyword: "",
            showType: this.$t("jyzx.discuss.allTopic"),
            topicnameId: '',
            topicData:[]
        }
        },
        created() {
            this.getAlltrait()
        },
    methods: {
        //发表话题
        discussSubmit() {
            console.log(this.topicnameId,'comid123456')
            console.log(this.formItem.input, "标题")
            console.log(this.stemContent, "内容")
            var soureceType=''
            var myDate = new Date().getTime()
            var extime = new Date().getTime() + 1000 * 60 * 60 * 24 * 7
            let user = this.$store.state.userInfo
            var comID = this.topicnameId
            if (this.topicnameId != '') {
                this.soureceType = "ability"
            } else {
                this.soureceType ="normal"
            }
            this.$api.jyzx
                .topicInitiate({
                    comid: comID,
                    source: this.soureceType,
                    debate: {
                        id: "",
                        code: this.$store.state.userInfo.schoolCode,
                        tmdid: user.TEAMModelId,
                        tmdname: user.name,
                        title: this.formItem.input,
                        comment: this.stemContent,
                        time: myDate,
                        school: this.$store.state.userInfo.schoolCode,
                        wordCount: 500,
                        timeoutReply: false,
                        comid:comID,
                        expire: extime,
                    },
                })
                .then(
                    (res) => {
                        this.$Message.success(this.$t("jyzx.discuss.success1"))
                        console.log(res, "成功")
                        this.topicShow = false
                        this.$parent.$parent.totaltopic()
                    },
                    (error) => {
                        this.$Message.error(this.$t("jyzx.discuss.error1"))
                        console.log(error, "失败")
                    }
                )
        },
        // 筛选话题类型，1:普通话题，2:能力点话题
        topicType(check) {
            let allTopic = JSON.parse(localStorage.getItem("allTopic"))
            if(check.length == 1) {
                let arr = []
                if(check.includes("2")) {
                    allTopic.forEach(item => {
                        if(item.relevance) {
                            arr.push(item)
                        }
                    })
                } else {
                    allTopic.forEach(item => {
                        if(!item.relevance) {
                            arr.push(item)
                        }
                    })
                }
                this.$parent.$parent.discuss = arr
            }
            else if(check.length == 2) {
                this.$parent.$parent.discuss = allTopic
            }
            else if(!check.length) {
                this.$parent.$parent.discuss = []
            }
           
        },
        //关于我的
        metopic(name) {
            let allTopic = JSON.parse(localStorage.getItem("allTopic"))
            console.log(allTopic[0].tmdid, "数据")
            let user = this.$store.state.userInfo
            let metopicinfo = []
            let mereplyinfo = []
            function sortNumber(a, b) {
                return a.time - b.time
            }
            // 我的话题
            if (name === "metopic") {
                this.showType = this.$t("jyzx.discuss.myTopic")
                for (var x = 0; x < allTopic.length; x++) {
                    if (allTopic[x].tmdid === user.TEAMModelId) {
                        metopicinfo.push(allTopic[x])
                    }
                }
                metopicinfo.sort(sortNumber)
                this.$parent.$parent.discuss = metopicinfo
                this.$Message.success(this.$t("jyzx.discuss.message1"))
                console.log(metopicinfo)
            }
            // 回复我的
            else if (name === "mereply") {
                this.showType = this.$t("jyzx.discuss.replyMe")
                for (var y = 0; y < allTopic.length; y++) {
                    if (
                        allTopic[y].tmdid === user.TEAMModelId &&
                        allTopic[y].replyCount !== 0
                    ) {
                        mereplyinfo.push(allTopic[y])
                    }
                }
                mereplyinfo.reverse()
                this.$parent.$parent.discuss = mereplyinfo
                this.$Message.success(this.$t("jyzx.discuss.message2"))
            }
            // 所有话题
            else if (name === "allTopic") {
                this.showType = this.$t("jyzx.discuss.allTopic")
                this.$parent.$parent.discuss = allTopic
            }
        },
        //所有话题
        alltopics() {
            let all = JSON.parse(localStorage.getItem("allTopic"))
            this.$parent.$parent.discuss = all
        },
        //搜索关键字
        searchKeyword() {
            let all = JSON.parse(localStorage.getItem("allTopic"))
            let key = this.keyword
            console.log(key)
            let keywordData = []
            for (var k = 0; k < all.length; k++) {
                if (
                    all[k].comment.indexOf(key) > -1 ||
                    all[k].title.indexOf(key) > -1
                ) {
                    keywordData.push(all[k])
                }
            }
            console.log(keywordData)
            this.$parent.$parent.discuss = keywordData
        },
        //获取所有能力点
        getAlltrait() {
            this.$api.jyzx.getAlltrait(
                {
                    "code": this.$store.state.userInfo.schoolCode,
                    "scope": "school",
                    "status":1
                }
            ).then(
                res => {
                    this.topicData = res.abilities
                    console.log(this.topicData)
                    localStorage.setItem('trait', JSON.stringify(this.topicData))
                },
                error => {

                }
            )
        },
        comidTopic(res) {
            this.topicnameId=res
        },
    },

    mounted() {
        let stemEditor = new E("#div1")
        stemEditor.config.onchange = (html) => {
            this.stemContent = html
        }
        stemEditor.config.uploadImgShowBase64 = true
        stemEditor.config.zIndex = 500
        stemEditor.create()
    },
}
</script>
<style lang="less" scoped>
.topicbox {
    width: 100%;
    /* height:100%; */
}
.statementBox .w-e-text-container {
    z-index: 1 !important;
}
.statementBox .w-e-toolbar {
    z-index: 1 !important;
}
.topicheader {
    /* width: 90%; */
    height: 70px;
    /* margin: 0% 5%; */
    border-bottom: 1px solid #ccc;
}

.headerleft {
    width: 48%;
    float: left;
    padding: 1% 0% 1% 2%;
}

.totalbox {
    /* width:15%; */
    font-size: 20px;
    float: left;
}
.taginfo {
    display: flex;
    align-items: center;
    margin-left: 4%;

    .ivu-checkbox{
        display: none;
    }

    .ivu-checkbox-wrapper-checked.ivu-checkbox-border{
        background-color: #16C18E;
        border-color: #16C18E;
        color: #fff;
    }
}
#statementBox {
    margin: 1%;
}

.searchbox {
    width: 50%;
    /* float: left; */
    padding: 0% 2%;
    display: inline-block;
    margin-top: 10px;
}

.headerright {
    width: 45%;
    float: right;
    padding: 0.5% 2% 1% 2%;
    text-align: right;
}

.aboutme {
    /* width: 60%; */
    /* display: inline-block;
    line-height: 40px; */
    line-height: 48px;
    float: right;
}

.topicbtn {
    width: 15%;
    float: right;
}

.ivu-btn-circle {
    font-size: 27px !important;
}

.statementBox {
    width: 90%;
    padding: 1%;
    margin: 0% 3%;
}

.addfile,
.addimage {
    float: left;
    margin: 0% 1% 0% 0%;
}
</style>
<style lang="less">
.taginfo {

    .ivu-checkbox{
        display: none;
    }
}
</style>