<template>
  <div>
    <title-bar title="日程提醒" @clickLeft="onClick">
      <van-icon slot="left" name="cross" size="24" />
    </title-bar>
    <div class="content">
      <div class="calendar">
        <van-calendar :show-title="false" color="#fd5065" :show-mark="false" :readonly="readonly" :poppable="false" :show-confirm="false" :style="{ height: '400px' }" />
      </div>
      <div class="hint">
        <div style="display: inline-block">提醒</div>
        <van-tabs type="card">
          <van-tab title="日">
            <div class="list-content">
              <div class="list-content-time">
                <div>2021年5月12日</div>
                <div>14:00</div>
              </div>
              <div class="list-content-text"><span>■</span>家庭户是指以家庭成员关系为主、居住一处共同生活的人组成的户。</div>
            </div>
            <div class="list-content">
              <div class="list-content-time">
                <div>2021年5月12日</div>
                <div>14:00</div>
              </div>
              <div class="list-content-text"><span>■</span>家庭户是指以家庭成员关系为主、居住一处共同生活的人组成的户。</div>
            </div>
          </van-tab>
          <van-tab title="周">周</van-tab>
          <van-tab title="月">月</van-tab>
          <van-tab title="全部">全部</van-tab>
        </van-tabs>
      </div>
    </div>
    <div @click="add_remind" class="add-remind">新增提醒</div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import TitleBar from "@/components/general/TitleBar.vue";
import { Tab, Tabs } from "vant";
import { Calendar } from "vant";

Vue.use(Calendar);

Vue.use(Tab);
Vue.use(Tabs);
/**
 * @Description 日程提醒
 * @Author JiangTao
 * @Date 2021-11-10 下午 03:46
 */
@Component({
  name: "More",
  components: { TitleBar },
})
export default class More extends Vue {
  pageTitle = ""; // 页面标题
  readonly = true;

  onClick() {
    console.log(111111);
  }
  mounted() {
    this.pageTitle = this.$route.meta?.name;
  }
  add_remind() {
    this.$router.push({
      path: "/workbench/schedule-reminder/add-reminder",
    });
  }
}
</script>

<style scoped>
.content {
  padding: 2.5%;
  display: flex;
  justify-content: flex-start;
}
.calendar {
  width: 33%;
  display: inline-block;
  border: 1px solid #999999;
}
.add-remind {
  width: 10.63%;
  margin-left: 12.5%;
  margin-top: 3%;
  border: 1px solid #fd5065;
  border-radius: 20px;
  text-align: center;
  background-color: white;
  color: #fd5065;
  font-size: 16px;
  padding: 0.391% 0;
}
.hint {
  width: 60%;
  /*display: flex;*/
  /*justify-content: space-between;*/
  margin-left: 4%;
}
.hint > div:nth-child(1) {
  font-size: 18px;
  font-family: "Arial Normal", "Arial";
  color: #333333;
  font-weight: bold;
}
.hint > div:nth-child(2) {
  width: 100%;
}
::v-deep .van-tabs__nav {
  width: 35%;
  float: right;
}
::v-deep .van-tabs--card {
  margin-top: -4%;
}
::v-deep .van-tabs__wrap {
  margin-bottom: 2%;
}
.list-content {
  width: 98%;
  margin-left: 1%;
  padding-top: 1.5%;
  border-bottom: 1px solid rgba(242, 242, 242, 1);
}
.list-content-time {
  display: flex;
  margin-bottom: 1.5%;
}
.list-content-time div {
  margin-right: 3%;
  color: #333333;
  font-family: "Arial Normal", "Arial";
}
.list-content-text {
  font-size: 16px;
  color: #333333;
  margin-bottom: 1.5%;
}
span {
  color: #aaaaaa;
}
</style>
