<template>
     <div class="home_wrapper">
       <div
         class="header_main"
         :style="`background-image:url(${require(showBtn?'@/assets/images/sunVillage_info/list_head.png':'@/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
             clickable
             placeholder="请选择"
             v-model="form.openNy"
             input-align="right"
             label-width="auto"
             :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-field readonly  v-model="form.openName"  :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" :show-upload="false" :deletable="false" multiple 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 openFileList" :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'" />
                 <a :href="item.url" style="margin-left: 10px;color: #333333">{{item.name}}</a>
               </div>
             </div>
           </div>
           <van-field readonly v-model="form.remark"  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>
</template>

<script>
  import { tempWorkerPublicDetail , openAdd } 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:[],
        queryParams:{
          bookId:'',
          deptId:''
        },
        showBtn:true,
      };
    },
    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.showBtn = this.$route.query.showBtn=='false'?false:true;
      this.getDetail();
    },
    methods: {
      getDetail(id){
        tempWorkerPublicDetail(this.queryParams).then((res) => {
          if (res.data.openFile !='' && res.data.openFile != null && res.data.openFile != undefined){
            res.data.openFile = res.data.openFile.split(',')
            res.data.openFile.map(rr=>{
              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.openFileList.push({name:name,type:type,url:'/api'+rr})
            })
          }
          if (res.data.openPic !='' && res.data.openPic != null && res.data.openPic != undefined){
            res.data.openPic = res.data.openPic.split(',')
            res.data.openPic.map((rrr,i)=>{
              this.openPic.push({url:'/api'+rrr})
            })
          }

          this.form = res.data;
        })
      },

    },
  }
</script>

<style scoped lang="scss">
.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;
  }
}
</style>
