<template>
  <div>
    <el-dialog
      title="证据清单"
      :visible="evidenceListD"
      :caseAttachListR = "caseAttachListR"
      @close="cancel"
      center
      :distroy-on-close="true"
    >
      <div class="loading" v-if ="flagLoading">
        <i class="el-icon-loading"></i>
      </div>
      <div>申请人证据清单:</div>
      <div v-for="item in this.caseAttachListR" style="margin-top:10px;">
          <el-link target="_blank" type="primary" v-if="item.annexType == 2" :href="fileURL+item.annexPath">{{item.annexName}}</el-link>
      </div>
      <div style="margin-top:30px;;">被申请人证据清单:</div>
       <div v-for="item in this.caseAttachListR" style="margin-top:10px;">
          <el-link target="_blank" type="primary" v-if="item.annexType == 6" :href="fileURL+item.annexPath">{{item.annexName}}</el-link>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel" class="endbutton1"
          ><span>取 消</span></el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: ["evidenceListD", "flagLoading", "caseAttachListR"],
  data() {
    return {
      fileURL: window.location.origin + "/API",
      myData:[]
    };
  },
  created(){
    // 获取组件传值监听
    // this.$watch('caseAttachListR',(newVal)=>{
    //   this.myData = newVal;
    //   console.log(this.myData)
    // })
  },
  methods: {
  
    cancel() {
      this.$emit("cancelevidenceList");
    } 
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__body {
  height: 500px !important;
  overflow: auto !important;
}
::v-deep .el-dialog {
  width: 800px;
  background: #ffffff;
  border-radius: 20px;
}
.endbutton1 {
  width: 154px;
  height: 37px;
  background: #ffffff;
  border: 1px solid #d0d0d0;
  border-radius: 19px;
  span {
    width: 31px;
    height: 13px;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #959595;
  }
}
.loading {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .el-icon-loading {
    font-size: 50px;
  }
}
.noData {
  width: 100%;
  height: 400px;
  font-size: 30px;
  font-weight: 700;
  color: #959595;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>