<template>
    <div class="commit-container">
        <div class="commit-bg"></div>
        <div class="commit-page">
            <div class="commit-page-title">我有话对党说</div>
            <div class="commit-page-content">
                <div class="field-title">
                    <span>基本信息</span>
                </div>
                <div class="field-content">
                    <van-field
                        class="field-form-item"
                        v-for="(item,index) in baseInfo"
                        :key="index"
                        :label="item.label"
                        v-model="item.value"
                        :placeholder="item.pla"
                        :border="item.border"
                        readonly
                        />

                    <!-- <div class="field-calendar">
                        <van-cell class="field-form-item" title="观看时间" :value="date" @click="onDisplay"  :icon="cellIcon"/>
                        <van-calendar v-model="show" @close="onClose" @confirm="onConfirm" />
                    </div> -->
                </div>
                 <div class="field-title">
                    <span>我有话对党说</span>
                </div>
                <div class="field-content">
                    <van-field
                           class="field-textarea"
                           type="textarea"
                           v-model="fieldInfo"
                           placeholder="我有话要对党说..."
                           maxlength="500"
                          show-word-limit
                    />
                </div>
                <div class="add-btn">
                    <van-button type="default" @click="showView=!showView">附加视频</van-button>
                </div>
                <div class="field-content" v-show="showView">
                    <div class="upload-content">
                        <div class="uplaod-video" style="min-height: 60px">
                            <van-uploader
                                    :max-count="3"
                                    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>最多支持上传3段视频,每段时长20s。</span>
                        </div>
                    </div>
                </div>
                <div class="add-btn">
                    <van-button type="default" @click="showImg=!showImg">附加照片</van-button>
                </div>
                <div class="field-content" v-show="showImg">
                    <div class="upload-content">
                        <div class="uplaod-video" style="min-height: 60px">
                            <van-uploader
                                 :max-count="10"
                                 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>最多支持上传6张照片</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="commit-page-button">
                <van-button type="default" @click="onSubmit">提交</van-button>
            </div>
        </div>
    </div>

</template>
<script>
  export default {
    data(){
      return {
          showView:false,
          showImg:false,
        baseInfo:[
          {
            label:'展板名称',
            pla:'请输入展板名称',
            value:'',
            border:false,
          },
          {
            label:'姓名',
            pla:'请输入姓名',
            value:'',
            border:false,
          },
          {
            label:'单位名称',
            pla:'请输入所属组织单位',
            value:'',
            border:false,
          }
        ],
        date: '',
        show: false,
        cellIcon:'/images/applets/date.png',
        fileList: [],
        imgFileList:[],
        fieldInfo:''
      }
    },
    methods:{
      onDisplay() {
        this.show = true
      },
      onClose() {
        this.show = false
      },
      formatDate(date) {
        date = new Date(date);
        return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
      },
      onConfirm(event) {
        this.show = false
        this.date = this.formatDate(event)

      },
      onSubmit(){
       this.$toast.success('提交成功');
      }
    }
  }
</script>
<style lang="scss">
 .commit-container{
     width: 100%;
     height: 100%;
     max-width: 1024px;
     .commit-bg{
         width: 100%;
         height: 100%;
         margin: 0 auto;
         background: #a4171d;
         &:before{
             display: inline-block;
             content: "";
             width: 100%;
             height: 100%;
             background: url('/images/applets/bg02.png') no-repeat;
             background-size: 100% 100%;
         }
         &:after{
             display: inline-block;
             content: "";
             width: 100%;
             height: 328px;
             background: url('/images/applets/bg_top.png') no-repeat;
             background-size: 100% 100%;
             position: absolute;
             top: 0;
             left: 0;
         }
         .page-title{
             font-size: 18px;
             color: #fff;
         }
     }
     .commit-page{
         width: 100vw;
         height: 100vh;
         position: absolute;
         left: 0;
         top: 0;
         .commit-page-title{
             font-size: 18px;
             color: #fff;
             text-align: center;
             margin: 20px 0 20px 0;
         }
     }
     .commit-page-content{
         padding: 0 40px;
         height: calc(100% - 200px);
         overflow-y: auto;
         .field-title{
             margin: 40px 0 34px 0;
             position: relative;
             span{
                 color: #FFECB1;
                 font-size: 18px;
                 line-height: 20px;
                 &:before{
                     content: "";
                     width: 20px;
                     height: 2px;
                     border-radius: 1px;
                     display: inline-block;
                     background-image: linear-gradient(135deg, #FFF7E1 0%, #C4913E 100%);
                     position: absolute;
                     left: 0;
                     bottom: -10px;
                 }
             }
             .icon-upload{
                 width: 24px;
                 vertical-align: middle;
                 float: right;
             }
         }
         .add-btn {
            margin: 40px 0 34px 0;
            .van-button--normal{
             background-image: linear-gradient(135deg, #FFF7E1 0%, #C4913E 100%);
             border-radius: 4px;
             height: 40px;
             width: 100%;
             color: #250002;
             border: none;
             font-size: 16px;
         }
         }
     }
     .commit-page-button{
         padding: 0 40px;
         position: absolute;
         bottom: 83px;
         left: 0px;
         box-sizing: border-box;
         width: 100%;
         .van-button--normal{
             background-image: linear-gradient(135deg, #FFF7E1 0%, #C4913E 100%);
             border-radius: 4px;
             height: 40px;
             width: 100%;
             color: #250002;
             border: none;
             font-size: 16px;
         }
     }
     .field-form-item.van-cell{
         display: block;
         padding: 10px 0 16px 0;
         background-color: transparent;
         border-bottom: 1px solid rgba(172,147,116,0.40);;
         .van-field__label{
             color: #fff;
             font-size: 14px;
             font-weight: normal;
             margin-bottom: 14px;
         }
         .van-field__control{
             color: #fff;
             font-size: 14px;
             font-weight: normal;
         }
     }
     .field-textarea{
         .van-field__control{
             color: #fff;
             font-size: 16px;
             font-weight: normal;
         }
     }
     .field-calendar{
         position: relative;
         margin-bottom: -20px;
         .van-icon{
             position: absolute;
             width: 20px;
             height: 20px;
             right: 10px;
             bottom: 29px;
             z-index: 2;
         }
         .field-form-item{
             border-bottom: none;
         }
         .van-cell:after{
             display: none;
         }
         .van-cell__title{
             font-size: 14px;
             color: #fff;
         }
        .van-cell__value{
            width: 100%;
            height: 40px;
            background: #8B0008;
            margin-top: 16px;
            font-size: 14px;
            text-align: left;
            color: #fff;
            line-height: 40px;
            padding: 0 20px;
            box-sizing: border-box;
        }
     }
     .upload-content{
         .avatar-plus{
             width: 48px;
             height: 48px;
             line-height: 48px;
             text-align: center;
             background-color: #8B0008;
             border-radius: 1px;
             font-size: 25px;
             color: #FFECB1;
             margin-bottom: 12px;
         }
         .tips{
             img{
                 width: 12px;
                 height: 12px;
                 vertical-align: middle;
             }
             span{
                 margin-left: 4px;
                 color: #fff;
                 font-size: 12px;
                 vertical-align: middle;
             }
         }
     }
     .field-textarea{
         margin-bottom: 30px;
         background: #8B0008;
         min-height: 80px
     }
 }

</style>

