<!-- 养育话题 -->
<template>
  <div class="talk">
    <!-- 养育话题 -->
    <van-nav-bar :title="info.name" :border="true" :left-arrow="true" @click-left="onNavBack" left-text="返回">
        <template #left>
            <van-icon name="arrow-left" size="24" style="padding: 0" />
            <span>返回</span>
        </template>
    </van-nav-bar>
    <div class="main">
        <!-- 视频 -->
        <video :src="info.url" controls>
            你的浏览器不支持 <code>video</code> 标签。
        </video>
        <!-- 留言 -->
        <div class="message">
            <van-tag 
                round 
                type="primary" 
                size="large" 
                color="#179b3b"
                v-for="(item, index) in info.labels" 
                :key="index"
            >
                {{ item }}
            </van-tag>
        </div>
    </div>
    <!-- 提交 -->
    <div class="input">
        <van-search
            v-model="value"
            left-icon="chat-o"
            shape="round"
            placeholder="说点什么"
        />
        <van-button color="#179b3b" round type="info" size="small" icon="arrow-up" @click="submit" />
    </div>
  </div>
</template>

<script>
import APIOptimize from '@/api/optimize';
import { Search } from 'vant';
export default {
    components: {
        // TabBar
        [Search.name]: Search
    },
    data() {
        return {
            info: {},
            value: ''
        };
    },
    created() {
        this.init(this.$route.query.id);
    },
    mounted() {},
    methods: {
        onNavBack() {
            this.$router.push({
                name: 'Optimize'
            });
        },
        init(id) {
            // 养育话题详情
            APIOptimize.getTalkList(id)
                .then(res => {
                    if ( res.data.data.length != 0 ) {
                        this.info = res.data.data[0]
                        this.info.labels = this.info.labels.split('|')
                    }
                })
                .catch(e => {
                    console.log(e);
                })
        },
        submit() {
            if ( this.value !== '' ) {
                let labels = this.info.labels.join('|')
                labels += "|" + this.value
                this.value = "";
                let id = Number(this.$route.query.id);
                APIOptimize.addTalkLabels({ 'id': id, 'labels': labels }).then(res => {
                    console.log(res)
                    this.init(this.$route.query.id);
                });
            } else {
                this.$notify({ type: 'warning', message: '内容不能为空' });
            }
        }
    }
};
</script>
<style scoped lang="scss">
    @import './scss/talk.scss';
</style>
