<template>
     <div class="home_wrapper">
         <div class="header_main"
              :style="`background-image:url(${require('@/assets/images/sunVillage_info/list_head_red.png')})`"
         >
             留言板
             <div class="return_btn" @click="onClickLeft"></div>
             <div class="add_btn"></div>
         </div>
         <div class="list_main">

           <van-field readonly required label="留言内容" :border="false" />
           <div class="input_field">
             <van-field
               readonly
               v-model="form.messageContent"
               :rules="[{ required: true , message:'具体描述留言内容' }]"
               rows="4"
               autosize
               type="textarea"
               maxlength="1000"
               placeholder="具体描述留言内容"
               show-word-limit
               :border="false"
               style="padding: 5PX 0;"
             />
           </div>

           <van-field readonly label="图片内容" :border="false" />
           <van-uploader
             v-model="openPic"
             style="margin-top: 10PX;"
             :upload-icon="uploadIcon1"
             multiple
             :show-upload="false"
             :deletable="false"
           />

           <van-field readonly label="留言人" :border="false" />
           <div class="input_field">
             <van-field readonly placeholder="请输入姓名" v-model="form.releaseBy" :border="false" />
           </div>

           <van-field readonly label="联系电话" :border="false" />
           <div class="input_field">
             <van-field readonly placeholder="请输入电话" v-model="form.releasePhone" :border="false" />
           </div>

         </div>
    </div>
</template>

<script>
  import { getMessage } from "@/api/sunVillage_info/fixedAssets";
  import Cookies from "js-cookie";
  import uploadIcon1 from '@/assets/images/sunVillage_info/message_add_icon_03.png'
  import request from '@/utils/request'
  export default {
    name: "certificateList",
    data() {
      return {
        uploadIcon1:uploadIcon1,
        showBuildTime:false,
        form:{
          messageTime:this.format(new Date(),'yyyy-MM-dd'),
          imgUrl:'',
        },
        openPic:[],
        fileList:[],
        fileList1:[],
        openNy:new Date(),
        type:'',
        openFile:[],
        openFileList:[],
        queryParams:{

        },
        openFile2:[],
        openPic2:[],
      };
    },
    created() {
      this.getDetail();
    },
    methods: {
      getDetail(){
        getMessage(this.$route.query.id).then((res) => {
          var that = this ;
          if (res.data.imgUrl!='' && res.data.imgUrl != null && res.data.imgUrl != undefined){
            this.openPic = res.data.imgUrl.split(',')
            this.openPic.map((rrr,i)=>{
              this.openPic[i] = {url:'/api'+rrr}
            })
          }
          that.form = res.data;
        })
      },

    },
  }
</script>

<style scoped lang="scss">
  /deep/ .van-button--primary{
    background-image: linear-gradient(to right , #f97d5a ,#f45341);
    background-size: 100% 100%;
    border: none;
  }
.input_field{
  border: 1px solid #d8d8d8;
  padding: 8PX 15PX;
  border-radius: 8PX;
  margin: 10PX 0;
}
/deep/ .van-field__label{
  padding-left: 10PX;
  width: auto;
  display: flex;
  align-items: center;
  border-left: 4PX solid #fd684a;
}
/deep/ .van-cell{
  padding-left: 0!important;
  padding-right: 0!important;
  padding-bottom: 0!important;
  line-height: 1;
  &:nth-child(1){
    padding-top: 0;
  }
}
.home_wrapper{
    background: #e9e9e9;
    min-height: 100vh;
    width: 100vw;
    .header_main {
        height: 116px;
        background: url('../../assets/images/sunVillage_info/list_head.png') no-repeat;
        background-size: 100% 100%;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        font-size: 36px;
        line-height: 116px;
        text-align: center;
        color: #fff;
        position: relative;

        .return_btn {
            width: 24px;
            height: 43.2px;
            background: url('../../assets/images/sunVillage_info/list_icon_5.png') center center no-repeat;
            background-size: 20px 36px;
            position: absolute;
            left: 38px;
            top: 36px;
        }
    }
    .release_head{
        height: 90px;
        padding:0 23px;
        display: flex;
        align-items: center;
        font-size: 26px;
        color: #929292;
        .people{
            flex: 1;
            display: flex;
            align-items: center;
            .icon{
                width: 24px;
                height: 21px;
                background: url('../../assets/images/sunVillage_info/details_icon_1.png') no-repeat;
                background-size: 100% 100%;
                display: block;
                margin-right: 8px;
            }
        }
        .time{
            flex: 1;
            display: flex;
            align-items: center;
            justify-content:flex-end;
            .icon{
                width: 25px;
                height: 25px;
                background: url('../../assets/images/sunVillage_info/details_icon_2.png') no-repeat;
                background-size: 100% 100%;
                display: block;
                margin-right: 8px;
            }
        }
    }
    .release_conetnt{
        padding:0 22px;
        font-size: 32px;
        color: #252525;
        line-height: 44px;
        img{
            max-width: 100%;
            margin-bottom: 16px;
        }
        p{
            margin-bottom: 16px;
        }
    }
  .list_main{
    padding:25px;
    background: #ffffff;
    width: 94%;
    margin: 25px auto 0;
    border-radius: 15PX;
    box-shadow: 4px 6px 5px rgba(63, 68, 75, 0.1);
  }
  .titBox{
    display: flex;
    align-items: center;
  }
  .tit{
    font-size: 36px;
    font-weight: bold;
  }
  /deep/ .van-cell{
    padding-left: 0!important;
    padding-right: 0!important;
    padding-bottom: 0!important;
  }
  /deep/ .van-field__label{
    /*padding-left: 10PX;*/
    width: auto;
    display: flex;
    align-items: center;
  }
  /deep/ .van-cell--required::before{
    left: 22%;
  }
  /deep/ .van-field__error-message{
    display: none;
  }
}
</style>
