<template>
  <div class="div_page_bg">
    <div class="div_input">
      <div style="padding: 10px">
        <span class="span_detail">{{data.content}}</span>
      </div>
      <div style="display: flex;margin: 10px 0 0 10px">
        <van-image
          width="60"
          height="60"
          radius="5"
          lazy-load
          v-for="(item,index) in showFileList" :key="index"
          :src="item.resPath"
          @click="onClickImage(index)"
          style="margin:0 10px 10px 0"
        />
      </div>

    </div>
    <van-image-preview v-model="showPreview" :images="previewFileList" :start-position="startPosition">
    </van-image-preview>
  </div>
</template>

<script>
  export default {
    name: "breakRulesDetail",
    data(){
      return{
        type:'', //0-驳回 1-通过 2-新增
        placeholder:'',
        showReason:false,
        detail:'',
        showFileList:[],
        previewFileList:[],
        data:{},
        showPreview:false,
        startPosition:0,
      }
    },
    created() {
      this.data = this.$route.query.value;
      this.showFileList = this.data.attachementIllegalk;
      this.showFileList.forEach(data => {
        this.previewFileList.push(data.resPath);
      })
      // this.showFileList = this.generateFiles(this.data.filePath);
      // this.previewFileList = this.data.filePath.split(',');
    },
    methods:{
      generateFiles(value){
        let filesJson = [];
        let files = value.split(',');
        files.forEach((data,index) => {
          let jsonItem = {}
          jsonItem.fileUrl = data;
          jsonItem.name = this.data.fileName.split(',')[index];
          let params = data.split('?')[1].split('&');

          params.forEach((item) => {
            if (item.indexOf('fileId')!=-1){
              jsonItem.fileId = item.split('=')[1];
            }

          })
          filesJson.push(jsonItem);
        })
        return filesJson;
      },
      onClickImage(index){
        console.log(index)
        this.startPosition = index;
        this.showPreview = true;
      },
    }
  }
</script>

<style scoped>
  .div_page_bg{
    width: 100%;
    height: 100vh;
    background-color: rgba(252,252,252,1);
  }
  .div_input{
    display: flex;
    flex-direction: column;
    background-color: white;

  }
  .span_detail{
    font-size: 15px;
    color: #333333;
  }
</style>
