<template>
    <div class="note-info-index">
        <div class="note-hear">
            <h3>我的笔记</h3>
            <div>
            <el-dropdown style="margin-left:15px" @command="exportCommand">
                    <el-button>导出<i class="el-icon-arrow-down el-icon--right"></i></el-button>
                    <el-dropdown-menu slot="dropdown">
                        <!--  
                        <el-dropdown-item command="1">PDF</el-dropdown-item>
                        -->
                        <el-dropdown-item command="2">Excel</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <el-dropdown style="margin-left:15px" @command="importCommand">
                    <el-button>导入<i class="el-icon-arrow-down el-icon--right"></i>
                    </el-button>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="3">图片</el-dropdown-item>
                        <el-dropdown-item command="1">Txt</el-dropdown-item>
                        <el-dropdown-item command="2">Word</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>

            </div>
        </div>
        <div class="note-sift">
                 <el-date-picker
                 style="width:250px"
                 @change="Time()"
                  value-format="yyyy-MM-dd HH:mm:ss"
                v-model="Filtertime"
                type="daterange"
                start-placeholder="开始"
                end-placeholder="结束">
                </el-date-picker>
            <el-dropdown  @command="handleCommand">
                    <el-button>全部课程<i class="el-icon-arrow-down el-icon--right"></i></el-button>
                    <el-dropdown-menu slot="dropdown" style="height: 150px;overflow-y: auto !important;">
                        <el-dropdown-item command="">全部</el-dropdown-item>
                        <el-dropdown-item v-for="(cou,couidx) in couresna" :key="couidx" :command="cou.courseId">{{cou.courseName}}</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            <el-button @click="publish" class="el-buttons">
                修改时间
                <i  v-if="ordertime" class="el-icon-bottom"></i>
                <i v-else class="el-icon-upload2"></i>
                </el-button>
            <el-button @click="thumbs" class="el-buttons">
                点赞次数
                 <i v-if="orderpiss" class="el-icon-bottom"></i>
                 <i v-else class="el-icon-upload2"></i>
                </el-button>
        </div>
        <div class="note-tab">
            <div class="tabcontent">
                <span @click="noteData(null)" :class=" num == null ? 'tab-textactive':''" >全部</span>
                <span @click="noteData(1)" :class=" num == 1 ? 'tab-textactive':''" >线上笔记</span>
                <span @click="noteData(2)" :class=" num == 2 ? 'tab-textactive':''" >导入笔记</span>
            </div>
        </div>
        <div class="note-all">
           <div class="note-all-info"  v-for="(item,idx) in datalist" :key="idx">
              <div class="all-title">
                 <h3 :class="item.courseId != ''?'pointer':''" @click="routerTo(item)"> {{ item.courseName }} </h3>
                  <div v-if="item.type==2">导入</div>
                  <div v-if="item.playTime != ''"><img :src="`${webBaseUrl}/images/coteplay.png`" alt=""> {{  getHMS(item.playTime) }} </div>
                  <span style="margin-left:14px">{{item.openType == 9?'公开':'私密'}}</span>
                  <h6>{{ item.sysUpdateTime }}</h6>
              </div>
              <div class="all-content">
                 <span v-if="item.contentType != 3">{{ item.content }}</span>
                 <div v-else>
                    <template v-for="img in item.content">
                        <img  :src="fileBaseUrl + img" alt=""/>
                    </template>
                 </div>
              </div>
              <div class="all-footer">
                  <div>
                    <div class="textbut-box">
                    <interactBar v-if="item.type == 1" nodeWidth="60px" :readonly="true"  :type="6" :data="item"  :shares="false" :comments="false" :answers="true" :clickAnswer="true" :views="false"></interactBar>
                      <el-button @click="deleteNote(item)" style=" margin-right: 10px;" class="textbut" type="text"><svg-icon icon-class="notedel" ></svg-icon>删除</el-button>
                      <el-button @click="edit(item)" class="textbut" type="text"><svg-icon icon-class="noteedit" ></svg-icon> 编辑</el-button>
                    </div>
                  </div>
              </div>
           </div>
           <div style="margin-top:50px;text-align: center">
            <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageIndex"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="paegSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="count">
            </el-pagination>
           </div>
        </div>
        <!-- 导入 -->
        <el-dialog
        :visible.sync="importDialogVisible"
        width="785px"
        :close-on-click-modal="false">
        <div class="import-info">
            <p class="import-info-tip">导入笔记</p>
            <div class="import-info-enclosure">
                <label class="label"><svg-icon style="font-size:12px;margin-right:5px" icon-class="red-start"></svg-icon>标题</label>
                <el-input
                    type="text"
                    placeholder="请输入内容"
                    v-model="noteFile.courseName"
                    maxlength="20"
                    show-word-limit/>
            </div>
            <div class="import-info-enclosure">
                <label class="label" style="width:66px"><svg-icon style="font-size:16px;margin-right:5px" icon-class="enclisure"></svg-icon>附件</label>
                    <file-upload dir="files" ref="myUpload" :isClear="importDialogVisible" :fileType="upNoteFile.fileType" :showList="true" :value="imageShowUrl" :limit="upNoteFile.limit" @success="handleUploadSuccess" @remove="handleRemoveSuccess"></file-upload>
                </div>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="importDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="noteSave()">确 定</el-button>
        </span>
        </el-dialog>
     <el-dialog  width="700px"  class="export-dialog" :close-on-click-modal="false" :visible.sync="dialogVisible">
        <div class="Exportbox" id="idPdfDom">
            <div class="export-dialog-top">
                <div class="export-dialog-left">
                    <!--生成pdf有问题，这里需要单独的处理图片-->
                    <author-img :avatar="userData.avatar" :aid="userData.aid" :sex="userData.sex"></author-img>
                    <div class="userInfo-info">
                        <p><span style="font-weight: 500;font-size: 22px;">{{userData.name}}</span><span style="font-size: 12px;margin-left:10px">{{userInfo.departFullName}}</span></p>
                        <p>{{userData.sign}}</p>
                    </div>
                </div>
                <div class="export-dialog-right">
                    <p>累计导出{{exportPreData.length}}条</p>
                    <p style="margin-top:10px">导出时间：{{formatDate(new Date())}}</p>
                </div>

            </div>
            <div class="export-dialog-body">
                <div class="Export-info" style="" v-for="(item,idx) in exportPreData" :key="idx">
                <div class="all-title">
                    <h3> {{item.courseName}}</h3>
                    <div v-if="item.playTime != ''"><img :src="`${webBaseUrl}/images/coteplay.png`" alt="">{{item.playTime}}</div>
                    <h6>{{item.sysCreateTime}}</h6>
                </div>
                <div class="all-content">
                    <span v-if="item.contentType != 3">{{ item.content }}</span>
                    <div v-else>
                        <template v-for="img in item.imgList">
                            <img style="max-height:145px;max-width:140px" crossOrigin="anonymous" :src="fileBaseUrl + img" alt=""/>
                        </template>
                    </div>
                </div>
                </div>
            </div>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button class="footer-btn" style="color: #387DF7;" plain @click="dialogVisible = false">取 消</el-button>
            <!-- <el-button @click="dialogVisible = false">打 印</el-button> -->
            <el-button class="footer-btn" style="margin-right:36px" type="primary" @click="exportStart()">确 定</el-button>
        </span>
     </el-dialog>

    </div>
</template>

<script>
import apiNote from '@/api/phase2/note.js';
import interactBar from '@/components/Portal/interactBar.vue';
import FileUpload from '@/components/NoteUpload/index.vue';
import AuthorImg from '@/components/Portal/authorImg.vue';
import { mapGetters } from 'vuex';
import {formatDate} from '@/utils/tools.js';
import apiUser from "@/api/system/user.js";
import htmlToPdf from '@/utils/htmlToPdf'
export default {
    components:{interactBar,FileUpload,AuthorImg},
    computed: {
    ...mapGetters(['userInfo'])
  },
  data(){
      return{
        userData:{},
        formatDate,
        noteFile:{
            contentType:null,
            type:2,
            courseName:'',
            filePath:'',
            fileName:'',
            openType:1,
        },
        upNoteFile:{
            content:[],
            fileType:[],//文件上传格式
            contentType:null,
            limit:1,
        },

        uploadFileUrl: process.env.VUE_APP_BASE_API + '/xboe/sys/xuploader/file/upload',
        text:'',
        importDialogVisible:false,
        imageShowUrl:'',
        count:0,
          fileBaseUrl: process.env.VUE_APP_FILE_BASE_URL,
          options: [
            {
              value: '选项1',
              label: 'PDF'
            },
            {
              value: '选项2',
              label: 'Excel'
            }
          ],
           value1: '起止时间',
           num :null,
           dialogVisible: false,
           pageIndex:1,
           paegSize:10,
           orderType:true,
           orderField:'',
           courseId:'',
           startTime:'',
           endTime:'',
           datalist:[ ],
           exportPreData:[],
           thu:true,
           couresna:[],
           courseName:'',
           ordertime:true,
           orderpiss:true,
           Filtertime:[],
      }


  },
  mounted(){
    this.noteData(null);
    this.allcoures();
    apiUser.getByIds([this.userInfo.aid]).then(res => {
        if (res.status == 200) {
           this.userData = res.result[0];
        } else {
          this.$message.error(res.message);
        }
    });
  },
  methods: {
    routerTo(item) {
        // console.log(item.courseId)
        if(item.courseId) {
            this.$router.push('/course/studyindex?id='+item.courseId);
        }
    },
    exportCommand(e) {
        this.exportType = e;
        this.dialogVisible = false;
        let data = {
            orderType:this.orderType,
            orderField:this.orderField,
            courseId:this.courseId,
            type:this.num,
            startTime:this.startTime,
            endTime:this.endTime,
        }
        // 获取导出文件前的预览数据
        apiNote.exportExcelPre(data).then(res=>{
          if(res.status != 200){return;}
          if(res.result.data.length == 0){
            this.$message.warning('未查询到满足条件的数据')
            return;
          }

          if(res.result.isImage && e == 2){
            this.$message.warning('当前筛选条件下含图片类内容，无法导出Excel！')
            return;
          }
          res.result.data.forEach((item)=>{
             if(item.contentType==3){
               item.imgList=item.content.split(',');
             }else{
               item.imgList=[];
             }
          })
          this.exportPreData = res.result.data;
          this.dialogVisible = true;
        })
    },
    exportStart(){

        let ids = this.datalist.map(item=>{
            if(item.contentType !=3) {
              return item.id;
            }
        })
        let data = {
            name:this.userData.name,
            sign:this.userData.sign,
            orderType:this.orderType,
            orderField:this.orderField,
            courseId:this.courseId,
            type:this.num,
            startTime:this.startTime,
            endTime:this.endTime,
            author:this.userData.avatar,//this.userInfo.avatar,
        }
        if(this.exportType == '1') {
          window.scrollTo(0, 0);
          htmlToPdf.getPdf('我的笔记');

          //apiNote.exportPdf(data);
            // apiNote.exportPdf(data).then(res=>{
            //     if(res.status) {
            //        this.$message.error('导出失败');
            //     } else {
            //       const link = document.createElement('a');// 创建a标签
            //         // let blob = new Blob([res],{type: 'application/vnd.ms-pdf;charset=UTF-8'}); // 设置文件类型
            //       let blob = new Blob([res],{type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'}); // 设置文件类型
            //         link.style.display = "none";
            //         link.href = URL.createObjectURL(blob); // 创建URL
            //         link.setAttribute("download", "我的笔记.pdf");
            //         document.body.appendChild(link);
            //         link.click();
            //         document.body.removeChild(link);
            //         this.dialogVisible = false;
            //     }

            // })
        } else {
            let data = {
                orderType:this.orderType,
                orderField:this.orderField,
                courseId:this.courseId,
                type:this.num,
                startTime:this.startTime,
                endTime:this.endTime,
            }
            // apiNote.exportExcel(ids).then(res=>{
              apiNote.exportExcel(data).then(res=>{
                if(res.status) {
                    this.$message.error('导出失败');
                } else {
                    const link = document.createElement('a');// 创建a标签
                    let blob = new Blob([res],{type: 'application/vnd.;charset=UTF-8'}); // 设置文件类型
                    link.style.display = "none";
                    link.href = URL.createObjectURL(blob); // 创建URL
                    link.setAttribute("download", "我的笔记.xls");
                    document.body.appendChild(link);
                    link.click();
                    document.body.removeChild(link);
                    this.dialogVisible = false;
                }

            })
        }
    },
    noteSave() {
        if(this.noteFile.courseName == '') {
           this.$message.warning('请填写标题！');
           return
        }
        this.noteFile.contentType = this.upNoteFile.contentType;
        if(this.upNoteFile.content.length > 0) {
            this.noteFile.filePath = this.upNoteFile.content.join();
        }
        if(this.noteFile.filePath == '') {
           this.$message.warning('您还没有上传文件！');
           return
        }
        apiNote.save(this.noteFile).then(res=>{
            if(res.status == 200) {
                this.$message.success('导入笔记成功');
                this.importDialogVisible = false;
                this.noteFile.courseName = '';
                this.noteData(this.num);
            }
        })
    },
    handleBeforeUpload() {

    },
    importCommand(e){
      this.importDialogVisible = true;
      this.upNoteFile.contentType = e;
      this.noteFile.filePath = '';
      this.noteFile.fileName = '';
      this.upNoteFile.content = [];
      if(e == '3') {
         this.upNoteFile.limit = 9;
         this.upNoteFile.fileType = ["png","jpg","jpeg","bmp"];
      } else if(e == '1'){
        this.upNoteFile.fileType = ["txt"];
      } else {
        this.upNoteFile.fileType = ["doc","docx"];
      }
    },
    handleRemoveSuccess(file) {
        if(this.upNoteFile.contentType == 1) {
            // this.upNoteFile.content.push()
            // this.noteFile.filePath.replace(file.response.result.filePath+',','');
            this.upNoteFile.content.forEach((item,index) => {
                if(item == file.response.result.filePath) {
                    this.upNoteFile.content.splice(index,1);
                }
            });
        } else {
            this.noteFile.filePath ='';
            this.noteFile.fileName = '';
        }
    },
    handleUploadSuccess(file) {
        if(this.upNoteFile.contentType == 3) {
            this.noteFile.fileName = '图片';
            this.upNoteFile.content.push(file.result.filePath);
            // this.noteFile.filePath += file.result.filePath;
        } else {
            this.noteFile.filePath = file.result.filePath;
            this.noteFile.fileName = file.result.displayName;
        }
    },
    handleCommand(e) {
      this.courseId = e;
      this.noteData(this.num);
    },
      Time(val){
        if(this.Filtertime && this.Filtertime.length > 0) {
            this.startTime = this.Filtertime[0];
            this.endTime =  this.Filtertime[1];
        } else {
            this.startTime ='';
            this.endTime =  '';
        }
        this.noteData(this.num);
      },
      deleteNote(item) {
          let $this=this;
          this.$confirm('移除后将不在笔记列表中展示', '确定要删除您的笔记吗？', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
              apiNote.del(item.id).then(res=>{
                if(res.status==200){
                  this.noteData(this.num);
                  this.$message({type:'success', message: '删除成功!'});
                  //删除事件
                  let event = {
                    key: "DeleteNote",//
                    title: "删除笔记",//
                    parameters:"author",//
                    content: "删除了笔记",//
                    source:'page',
                    objId: item.id,//关联的id
                    objType: "6",//关联的类型
                    objInfo: "",
                    aid: this.userInfo.aid, //当前登录人的id
                    aname: this.userInfo.name,//当前人的姓名
                    status: 1 //状态，直接写1
                  }
                  this.$store.dispatch("userTrigger", event);
                }else{
                  this.$message({type:'success', message: '删除失败!'+res.message});
                }

              });
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除',
            });
          });
      },
      couresitem(item){
        this.courseId = item.courseId;
        this.noteData(this.num)
      },

      allcoures(){
        apiNote.course().then(res=>{
            this.couresna = res.result
        })
      },
      publish(){
         this.ordertime = !this.ordertime;
          this.orderType = !this.orderType;
          this.orderField = 'sysUpdateTime';
          this.noteData(this.num)
      },
      thumbs(){
        this.orderpiss = !this.orderpiss;
         this.orderField = 'praises';
         this.orderType = !this.orderType;
         this.noteData(this.num)
      },
      edit(item){
      this.$router.push({ path: `/user/Noteedit?id=${item.id}` });
      },
      noteData(tab){
        this.num = tab
        let data = {
            pageIndex:this.pageIndex,
            paegsize:this.paegSize,
            orderType:this.orderType,
            orderField:this.orderField,
            courseId:this.courseId,
            type:this.num,
            startTime:this.startTime,
            endTime:this.endTime,
        }
        apiNote.query(data).then(res=>{
            if(res.status == 200) {
                res.result.list.forEach((item,index)=>{
                  if(item.contentType == 3) {
                    item.content = item.content.split(',');
                  }
                });
                this.datalist = res.result.list;
                this.count = res.result.count;
            }

        })
      },

// 根据秒数转换成对应的时分秒
    getHMS(time) {
        const hour = parseInt(time / 3600) < 10 ? '0' + parseInt(time / 3600) : parseInt(time / 3600)
        const min = parseInt(time % 3600 / 60) < 10 ? '0' + parseInt(time % 3600 / 60) : parseInt(time % 3600 / 60)
        const sec = parseInt(time % 3600 % 60) < 10 ? '0' + parseInt(time % 3600 % 60) : parseInt(time % 3600 % 60)
        return hour + ':' + min + ':' + sec
    },
    handleSizeChange(val) {
        this.paegSize = val;
        this.pageIndex = 1;
        this.noteData(this.num);
    },
    handleCurrentChange(val) {
        this.pageIndex = val;
        this.noteData(this.num);
    }

    }
}
</script>

<style lang="scss" scoped>
    ::v-deep .el-dropdown-menu__item:not(.is-disabled):hover{
   background-color: #fff !important;
   color: #0059FF !important;
}
::v-deep.el-dropdown-menu {
   border: none !important;
}
    .footer-btn{
        width: 140px;
        height: 40px;
        border-radius: 4px;
        border: 1px solid #387DF7;
    }
    ::v-deep  .note-sift{
       .el-dropdown-menu{

        }
    }
   ::v-deep .export-dialog{
        .el-dialog__header{
            display: none;
        }
        .el-dialog__body{
            padding: 0;
        }
        .export-dialog-top{
            height: 90px;
            background: linear-gradient(128deg, #70B0FF 0%, #4B7CFF 15%, #4678FF 39%, #7599FF 76%, rgba(1,72,228,0.85) 100%);
            box-shadow: 14px 12px 14px 2px rgba(0,0,0,0.03);
            padding: 16px 46px 16px 56px;
            color: #fff;
            display: flex;
            justify-content: space-between;
          .export-dialog-left{
                display: flex;
                // ::v-deep  .item-author .el-avatar{
                //     width: 60px !important;
                //     height: 60px !important;
                // }
                .el-avatar{
                    width: 60px;
                    height: 60px;
                 img{
                    width: 100% !important;
                    }
                }
                .userInfo-info{
                    margin-left: 40px;
                }
            }
            .export-dialog-right{
                text-align: right;
            }
        }
        .export-dialog-body{
            margin: 40px 13px 0 53px;
            padding-right: 36px;
            height: 500px;
            overflow-y: auto;
        }
    }
    .note-info-index{
        padding: 15px 18px;
       ::v-deep .el-upload-dragger{
            width: 500px;
            height: 168px;
        }
        .import-info{
            padding: 0 74px;
        }
        .import-info-tip{
            font-size: 18px;
            font-weight: 600;
            color: #333333;
            margin-bottom: 34px;
        }
        .import-info-enclosure{
            display: flex;
            margin-bottom: 27px;
            .label{
                width: 72px;
                font-size: 16px;
                color: #666666;
                font-weight: 400;

            }
        }
    }
.el-select-dropdown__item{
    width: 140px !important;
}
.el-input--medium .el-input__inner{
    height: 40px;
    line-height: 40px;
}
.el-dropdown-menu--medium .el-dropdown-menu__item{
    width: 100% !important;
    // height: 30px !important;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
  display: block;
  word-break:break-all;
}
.el-dropdown-menu{
    width: 140px !important;
    padding: 12px  10px;
    overflow: hidden;
    li{
        text-align: center;
    }

}
.el-popper{
    margin-top: 5px;
}
.Export-info{
    border-bottom: 1px solid #ddd;
    padding-bottom:30px;
    margin-bottom:35px
}
.Export-info:last-child{
    border: none;

}
::v-deep.dr-dialog{
    max-width: 870px !important;
}
 .all-title{
           height: 50px;
           display: flex;
           .daoru{
                width: 80px;
                height: 30px;
                border-radius: 4px;
                border: 1px solid #3379FB;
           }
           h6{
               margin: 0;
               margin-left: auto;
               float: right;
               font-size: 14px;
               color: #999999;
               font-weight: 400;
           }
           h3{
              font-size: 18px;
              font-weight: 600;
              color: #333333;
              margin: 0;
              float: left;
           }
           span{
               width: 53px;
               height: 22px;
               border-radius: 10px;
               border: 1px solid #3379FB;
               font-size: 14px;
               font-weight: 400;
               color: #3379FB;
               text-align:center;
               margin-top: 2px;
               display: inline-block;
           }
           div{
                width: 120px;
                height: 30px;
                border-radius: 4px;
                border: 1px solid #3379FB;
                font-size: 14px;
                font-weight: 400;
                color: #387DF7;
                line-height: 30px;
                text-align: center;
                float: left;
                margin: 0 20px;
                img{
                    width: 10px;
                    // height: 16px;
                    padding-top: 6px;
                    vertical-align: top;
                    margin-right: 12px;
                }
           }
       }


::v-deep.el-dialog__header{
    background: url('../../../public/images/daochubg.png') 100% / 100% !important;
}
.textbut-box{
    // position: absolute;
    // right: 0;
    display: flex;
}
.textbut{
        font-size: 12px;
        font-weight: 400;
        color: #6E7B84 !important;

}
.note-all{
    width: 100%;
    .note-all-info{
       border-bottom: 1px solid #ddd;
       padding-top: 35px;
       .all-footer{
           height: 10px;
           padding-bottom: 45px;
           width: 100%;
           div{
               float: right;
           }
       }
       .all-content{
           font-size: 14px;
           font-weight: 400;
           white-space: pre-line;
           color: #333333;
           img{
               width: 140px;
               height: 175px;
               margin-right: 23px;
           }
       }

    }
}
.tabcontent{
    span{
         margin-right: 45px;
        padding: 0 7px;
        text-align: center;
        padding-bottom: 14px;
        display: inline-block;
    }
}

.tab-textactive{
    border-bottom: 4px solid #3379FB;
    transform: all 0.3s;
    font-weight: 600;
}
.note-tab{
    height: 40px;
    margin-top: 40px;
    border-bottom: 1px solid #ddd;
}
.el-buttons{
    width: 160px !important;
    height: 40px;
    border-radius: 4px;
    // margin-left: 20px;
}
.el-buttons:hover{
    background-color: #fff !important;
    border: 1px solid #ddd !important;
    color: #0059FF !important;
}
.el-buttons:focus{
    background-color: #fff !important;
    color: #0059FF !important;
    border: 1px solid #ddd !important;
}
.note-sift{
    button{
        width: 160px;
        height: 40px;
        border-radius: 4px;
        margin-left: 20px;
    }
   ::v-deep .el-input__inner{
        height: 40px;
    }
}
.note-hear{
    width: 100%;
    height: 50px;
    div button{
        width: 140px;
        height: 40px;
    }
    h3{
        margin: 0;
        float: left;
        font-size: 18px;
        font-weight: 600;
        color: #333333;
        line-height: 30px;
    }
    div{
        float: right;
        button{
            width: 140px;
            font-size: 14px;
            height: 40px;
            border-radius: 4px;
            border: 1px solid rgba(153,153,153,0.2);
        }
    }
}
</style>
