<template>
  <div id="leaving" class="app">
    <van-sticky :offset-top="0">
      <van-nav-bar left-arrow @click-left="onClickLeft" title="留言板" />
    </van-sticky>
    <van-tabs v-model="active">
      <van-tab title="发布留言">
        <van-field
          v-model="message"
          rows="15"
          autosize
          type="textarea"
          placeholder="请输入留言"
        />
        <div class="btn">
          <van-button type="danger" round block @click="addComment">
            提交
          </van-button>
        </div>
      </van-tab>
      <van-tab title="留言簿">
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
          <van-cell-group>
            <van-cell
              v-for="item in list"
              :key="item.id"
              :title="item.nickName"
              :value="item.createTime"
              :label="item.content"
            />
          </van-cell-group>
        </van-pull-refresh>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import {
  PullRefresh as vanPullRefresh,
  CellGroup as vanCellGroup,
  NavBar as vanNavBar,
  Button as vanButton,
  Sticky as vanSticky,
  Field as vanField,
  Tabs as vanTabs,
  Cell as vanCell,
  Tab as vanTab,
  Toast
} from "vant";
import "vant/lib/pull-refresh/style";
import "vant/lib/cell-group/style";
import "vant/lib/nav-bar/style";
import "vant/lib/button/style";
import "vant/lib/sticky/style";
import "vant/lib/field/style";
import "vant/lib/tabs/style";
import "vant/lib/toast/style";
import "vant/lib/cell/style";
import "vant/lib/tab/style";
import { addComment, lookComment } from "@/api/party/party.js";
export default {
  name: "leaving",
  data: function() {
    return {
      active: 1,
      message: "",
      isLoading: false,
      list: []
    };
  },
  methods: {
    onClickLeft() {
      history.go(-1);
    },
    onRefresh() {},
    onLoad() {},
    addComment() {
      addComment({ content: this.message }).then(() => {
        this.list = [];
        this.message = "";
        Toast("提交成功！");
        this.getList();
      });
    },
    getList(id) {
      lookComment(id).then(res => {
        let r = res || { childCommentList: [], commentList: [] };
        let list = [...r.childCommentList, ...r.commentList];
        this.list.push(...list);
        this.isLoading = false;
      });
    }
  },
  mounted() {
    this.getList();
  },
  beforeDestroy: function() {},
  components: {
    vanPullRefresh,
    vanCellGroup,
    vanSticky,
    vanNavBar,
    vanButton,
    vanField,
    vanTabs,
    vanCell,
    vanTab
  }
};
</script>
<style lang="scss">
#leaving {
  height: 100%;
  overflow: hidden;
  overflow-y: scroll;
  .btn {
    width: 100%;
    padding: 2em;
  }
}
</style>
