<template>
     <div class="home_wrapper">
         <div class="header_main">
             新增财务公开
             <div class="return_btn" @click="onClickLeft"></div>
             <div class="add_btn"></div>
         </div>
       <van-form @submit="onSubmit">
         <div class="list_main">

           <van-field
             readonly
             clickable
             placeholder="请选择"
             v-model="form.openNy"
             @click="showBuildTime = true"
             input-align="right"
             right-icon="arrow-down"
             label-width="auto"
             required
             :border="false"
             :rules="[{ required: true , message:'请选择购建时间' }]"
           >
             <template #label>
               <img src="../../assets/images/sunVillage_info/add_tit_icon_01.png" width="18">
               <p style="margin-left: 5px;">公开年月</p>
             </template>
           </van-field>
           <van-popup v-model="showBuildTime" position="bottom">
             <van-datetime-picker
               v-model="openNy"
               type="year-month"
               title="选择年月日"
               @confirm="onConfirmOpenNy"
               @cancel="showBuildTime = false"
             />
           </van-popup>

           <van-field required v-model="form.openName" placeholder="请输入名称" :rules="[{ required: true , message:'请输入名称' }]" input-align="right" :border="false" >
             <template #label>
               <img src="../../assets/images/sunVillage_info/add_tit_icon_02.png" width="18">
               <p style="margin-left: 5px;">公开名称</p>
             </template>
           </van-field>

           <van-field readonly input-align="right" :border="false" >
             <template #label>
               <img src="../../assets/images/sunVillage_info/add_tit_icon_03.png" width="18">
               <p style="margin-left: 5px;">公开图片</p>
             </template>
           </van-field>
<!--           @delete="deleteFile1"-->
           <van-uploader v-model="openPic" multiple :after-read="afterRead" @delete="deleteFile1" style="margin-top: 10PX" />

           <div style="border-top: 1px solid #ededed;margin-top: 10PX;">
             <van-field readonly input-align="right" :border="false" >
               <template #label>
                 <img src="../../assets/images/sunVillage_info/add_tit_icon_04.png" width="18">
                 <p style="margin-left: 5px;">附件</p>
               </template>
             </van-field>

             <div>
               <div v-for="(item,index) in openFile" :key="index" style="display: flex;align-items: center;margin-top: 10px;">
                 <img src="../../assets/images/sunVillage_info/WORD.png" width="30" v-if="item.type == 'word'"/>
                 <img src="../../assets/images/sunVillage_info/ECEL.png" width="30" v-if="item.type == 'excel'" />
                 <p style="margin-left: 10px;">{{item.name}}</p>
                 <img src="../../assets/images/sunVillage_info/delete.png" width="16" style="margin-left: auto;" @click="deleteWord(index)" />
               </div>
             </div>
             <van-uploader accept="*" :after-read="afterReadOpenFile" style="margin-top: 10PX">
               <img src="../../assets/images/sunVillage_info/addFile.png" width="120" />
             </van-uploader>
           </div>

           <van-field v-model="form.content" type="textarea" autosize placeholder="请输入内容" input-align="right" :border="false" >
             <template #label>
               <img src="../../assets/images/sunVillage_info/add_tit_icon_05.png" width="18">
               <p style="margin-left: 5px;">内容</p>
             </template>
           </van-field>

            <van-field v-model="form.remark" placeholder="请输入备注" input-align="right" :border="false" >
              <template #label>
                <img src="../../assets/images/sunVillage_info/add_tit_icon_05.png" width="18">
                <p style="margin-left: 5px;">备注</p>
              </template>
            </van-field>

         </div>

         <div style="margin: 16px auto;width: 50%;">
           <van-button round block type="primary" native-type="submit">
             保存
           </van-button>
         </div>
       </van-form>
    </div>
</template>

<script>
  import { commonUpload , majorEventOpenEdit , majorEventPublicDetail } from "@/api/sunVillage_info/fixedAssets";
  import Cookies from "js-cookie";
  import request from '@/utils/request'
  export default {
    name: "certificateList",
    data() {
      return {
        showBuildTime:false,
        form:{
          openNy:this.format(new Date(),'yyyy-MM'),
          openPic:'',
          openFile:'',
        },
        openPic:[],
        fileList:[],
        fileList1:[],
        openNy:new Date(),
        type:'',
        openFile:[],
        openFileList:[],
        openPicList:[],
        queryParams:{
          bookId:'',
          deptId:''
        },
        openPic2:[],
        openFile2:[]
      };
    },
    created() {
      this.houseGetDicts("asset_status").then((response) => {
        this.assetStatusOptions = response.data;
      });
      this.houseGetDicts("asset_type").then((response) => {
        this.assetTypeOptions = response.data;
      });
      this.houseGetDicts("use_type").then((response) => {
        this.useTypeOptions = response.data;
      });
      this.type = this.$route.query.type;
      this.queryParams.bookId = Cookies.get('bookId');
      this.queryParams.deptId = Cookies.get('deptId');
      this.queryParams.id = this.$route.query.id;
      this.getDetail();
    },
    methods: {
      getDetail(id){
        majorEventPublicDetail(this.queryParams).then((res) => {
          var that = this ;
          if (res.data.openFile!='' && res.data.openFile != null && res.data.openFile != undefined){
            this.openFile = res.data.openFile.split(',')
            this.openFile2 = res.data.openFile.split(',')
            this.openFile.map((rr,i)=>{
              let name = rr.substr(27,rr.length);
              let type = '';
              if (name.indexOf('.doc') > -1){
                type = 'word';
              }else if(name.indexOf('.xls') > -1){
                type = 'excel';
              }
              this.openFile[i] = {name:name,type:type}
            })
          }
          if (res.data.openPic!='' && res.data.openPic != null && res.data.openPic != undefined){
            this.openPic = res.data.openPic.split(',')
            this.openPic2 = res.data.openPic.split(',')
            this.openPic.map((rrr,i)=>{
              this.openPic[i] = {url:'/api'+rrr}
            })
          }
          that.form = res.data;
        })
      },
      onSubmit(){
        var that = this;
        that.form.openFile = that.openFile2.join(',')
        that.form.openPic = that.openPic2.join(',')
        majorEventOpenEdit(that.form).then((r1) => {
          if (r1.code == 200){
            that.$notify({ type: 'success', message: '修改成功' });
            setTimeout(function(){
              history.back(-1);
            },2000)
          }
        })
      },
      onConfirmOpenNy(data){
        this.form.openNy = this.format(data,'yyyy-MM');
        this.openNy = data;
        this.showBuildTime = false;
      },
      deleteFile1(file,detail){
        console.log(detail)
        this.openPic2.splice(detail.index,1)
      },
      deleteWord(index){
        this.openFile.splice(index,1);
        this.openFile2.splice(index,1);
      },
      afterRead(file) {
        this.$toast.loading({
          message: "上传中...",
          forbidClick: true,
          duration: 0,
        });
        // 此时可以自行将文件上传至服务器
        if (file instanceof Array){//判断是否为数组，单张图片为array，多张为数组，数组返回true否则为false
          file.map(res=>{
            let params1 = new FormData();
            params1.append("file", res.file);
            commonUpload(params1).then((r1) => {
              this.openPic2.push(r1.fileName);
            })
          })
        }else{
          let params1 = new FormData();
          params1.append("file", file.file);
          commonUpload(params1).then((r1) => {
            this.openPic2.push(r1.fileName);
          })
        }
      },
      afterReadOpenFile(file){
        this.$toast.loading({
          message: "上传中...",
          forbidClick: true,
          duration: 0,
        });
        let params1 = new FormData();
        params1.append("file", file.file);
        commonUpload(params1).then((r1) => {
          this.openFile2.push(r1.fileName);
        })
        let name = file.file.name;
        let type = '';
        if (name.indexOf('.doc') > -1){
          type = 'word';
        }else if(name.indexOf('.xls') > -1){
          type = 'excel';
        }
        this.openFile.push({name:file.file.name,type:type})
        this.openFileList.push(file.file);
      }
    },
  }
</script>

<style scoped lang="scss">
  /deep/ .van-button--primary{
    background: url("../../assets/images/sunVillage_info/btn_bg.png") no-repeat;
    background-size: 100% 100%;
    border: none;
  }
.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: 85PX;
  }
  /deep/ .van-field__error-message{
    display: none;
  }
}
</style>
