<template>
  <div class="home">
    <Header title="观影互动"/>
    <div class="commit-container">
      <van-tabs type="card" v-model="activeTab">
        <van-tab title="观影互动">
          <div class="commit-page">
              <commit-tab @updateActive="updateActive"/>
          </div>
        </van-tab>
        <van-tab title="互动历史">
          <div class="commit-page">
              <history-tab />
          </div>
        </van-tab>
      </van-tabs>
    </div>
    <my-tabbar active="0"></my-tabbar>
  </div>
</template>

<script>
import Header from '@/components/Header/index.vue'
import commitTab from './components/commitTab.vue'
import historyTab from './components/historyTab.vue'
export default {
  components:{
    Header,
    commitTab,
    historyTab
  },
  data() {
    return {
      activeTab: 1,
      form: {},
      cellIcon:'/images/applets/date.png',
      show: false,
      fileList: [],
      imgFileList: []
    };
  },
  mounted() {},
  methods: {
    updateActive(active){
      this.activeTab = active
    },
    onOversize(file) {
      console.log(file);
      this.$toast("文件大小不能超过 500kb");
    },
    // 打开日历
    onDisplay() {
      this.show = true;
    },
    // 关闭日历
    onClose() {
      this.show = false;
    },
    // 确认日历
    onConfirm(event) {
      this.show = false;
      this.form.studyTime = this.formatDate(event);
    },
    // 格式化日历
    formatDate(date) {
      date = new Date(date);
      return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
    },
    // 提交数据
    onSubmit() {
      console.log(this.form);
      this.$toast.success("提交成功");
    }
  }
};
</script>

<style lang="scss" scoped>
.home {
  width: 100%;
  height: 100vh;
  padding: 16px;
  box-sizing: border-box;
  .commit-container {
    margin-top: 44px;
    /deep/.van-tabs--card>.van-tabs__wrap {
      height: 40px;
      .van-tabs__nav--card {
        margin: 0;
        height: 40px;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        border: 1px solid #A4151D;
        .van-tab {
          color: #A4151D;
          border-right: 1px solid #A4151D;
          &.van-tab--active {
            color: #fff;
            background-color: #A4151D;
          }
          &:last-child {
            border-top-right-radius:8px;
          }
          &:first-child {
            border-top-left-radius:8px;
          }
        }
      }
    }
    .commit-page {
      width: 100%;
      height: 100vh;
    }
  }
}
</style>