<template>
  <div class="commit-page-content">
    <div class="field-title">
      <span>基本信息</span>
    </div>
    <div class="input-box">
      <van-field label="展板名称" v-model="form.banName" placeholder="请输入展板名称" input-align="right" />
      <van-field
        label="账户名"
        v-model="form.username"
        placeholder="请输入账户名称"
        readonly
        input-align="right"
      />
      <van-cell
        class="calendar-icon"
        title="学习时间"
        :value="form.studyTime|| ''"
        @click="onDisplay"
        :icon="form.studyTime || cellIcon"
      />
      <van-calendar v-model="show" @close="onClose" @confirm="onConfirm" />
      <van-field label="观影人数" v-model="form.num" placeholder="请输入观影人数" input-align="right" />
      <van-field label="管理员账号" v-model="form.name" placeholder="请输入管理员账号" input-align="right" />
      <van-field
        type="password"
        label="管理员密码"
        v-model="form.password"
        placeholder="请输入管理员密码"
        input-align="right"
      />
    </div>
    <div class="field-title">
      <span>上传视频</span>
    </div>
    <div class="field-content">
      <div class="upload-content">
        <div class="uplaod-video" style="min-height: 60px">
          <van-uploader
            :max-count="3"
            :max-size="500 * 1024"
            @oversize="onOversize"
            v-model="fileList"
            accept="video/*"
            multiple
          >
            <div class="avatar-plus">
              <span>+</span>
            </div>
          </van-uploader>
        </div>
        <div class="tips">
          <img src="/images/applets/tip.png" alt />
          <span>
            最多支持上传
            <b>3</b> 段视频,每段时长
            <b>20s</b>。
          </span>
        </div>
      </div>
    </div>
    <div class="field-title">
      <span>上传照片</span>
    </div>
    <div class="field-content">
      <div class="upload-content">
        <div class="uplaod-video" style="min-height: 60px">
          <van-uploader
            :max-count="6"
            accept="image/png, image/jpeg"
            v-model="imgFileList"
            multiple
          >
            <div class="avatar-plus">
              <span>+</span>
            </div>
          </van-uploader>
        </div>
        <div class="tips">
          <img src="/images/applets/tip.png" alt />
          <span>
            最多支持上传
            <b>6</b> 张照片
          </span>
        </div>
      </div>
    </div>
    <div class="field-title">
      <span>上传资料简介</span>
    </div>
    <div class="field-content">
      <van-field
        class="field-textarea"
        type="textarea"
        v-model="form.content"
        maxlength="500"
        show-word-limit
      />
    </div>
    <div class="commit-page-button">
      <van-button type="default" @click="onSubmit">提交</van-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {},
      cellIcon: "/images/applets/date.png",
      show: false,
      fileList: [],
      imgFileList: []
    };
  },
  mounted() {},
  methods: {
    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("提交成功");
      this.$emit('updateActive',1)
    }
  }
};
</script>

<style lang="scss" scoped>
.commit-page-content {
    padding: 24px 12px;
    height: calc(100% - 200px);
    overflow-y: auto;
    .field-title {
    position: relative;
    padding-bottom: 20px;
    span {
        color: #333;
        font-size: 16px;
        line-height: 20px;
        padding-left: 16px;
        &:before {
        content: "";
        height: 16px;
        width: 4px;
        border-radius: 1px;
        display: inline-block;
        background: #a4151d;
        position: absolute;
        left: 0;
        top: 2px;
        }
    }
    }
    .field-content {
    padding-bottom: 32px;
    }
    .input-box {
    padding-bottom: 32px;
    .van-cell {
        line-height: 40px;
        padding-left: 0;
        padding-right: 0;
        border-bottom: 1px solid #eee;
    }
    .van-cell:after {
        display: none;
    }
    }
    .calendar-icon {
    .van-icon {
        position: absolute;
        width: 20px;
        height: 20px;
        right: 0;
        bottom: 22px;
        z-index: 2;
    }
    }
    .commit-page-button {
    padding: 0 40px;
    box-sizing: border-box;
    width: 100%;
    .van-button--normal {
        background: #a4151d;
        border-radius: 4px;
        height: 40px;
        width: 100%;
        color: #fff;
        border: none;
        font-size: 16px;
    }
    }
    .van-field__control,
    .van-cell__value {
    color: #333;
    }

    /deep/.field-textarea {
    min-height: 80px;
    .van-field__value {
        background-color: #f5f5f5;
    }
    .van-cell {
        padding: 0;
    }
    }

    .upload-content {
    .avatar-plus {
        width: 48px;
        height: 48px;
        line-height: 48px;
        text-align: center;
        background-color: #f5f5f5;
        border-radius: 1px;
        font-size: 25px;
        color: #999;
        margin-bottom: 12px;
    }
    .tips {
        img {
        width: 12px;
        height: 12px;
        vertical-align: middle;
        }
        span {
        margin-left: 4px;
        color: #666;
        font-size: 12px;
        vertical-align: middle;
        }
    }
    }
}
</style>