<template>
  <div class="outlist">
    <div v-for="(item, index) in list_arr" :key="index + 1100" class="list">
      <p :class="item.prop && item.prop == 'title' ? 'service_title' : ''">
        <span class="line" v-if="item.prop && item.prop == 'title'"></span>
        {{ item.title }}
      </p>
      <p v-if="!(item.prop && item.prop == 'title')">
        <span v-if="item.type == 'url'" style="white-space:pre-wrap;">
          访问地址:
          <a :href="item.info" target="_blank">{{ item.info }}</a>
        </span>
        <span v-else v-html="helper.downloadFileFormat(item.info)" style="white-space:pre-wrap;"></span>
        <span
          v-if="item.type && item.type == 'down'"
          class="filebtn"
          @click="download(item.url)"
        >下载文件</span>
      </p>
      <slot v-if="item.type && item.type == 'solt'" :name="item.solt_name"></slot>
    </div>
  </div>
</template>
<script>
import helper from "@/services/helper";
export default {
  data() {
    return {
      helper: helper
    };
  },
  props: ["list_arr"],
  mounted() {
    console.log(this.$slots);
  },
  methods: {
    download(val) {
      // this.$emit('download',val)
      console.log(val);
      const a = document.createElement("a"); // 创建a标签
      a.setAttribute("download", ""); // download属性
      a.setAttribute("href", val); // href链接
      a.click(); // 自执行点击事件
    }
  }
};
</script>

<style scoped>
a {
  text-decoration: none;
}
.list p {
  line-height: 32px;
  color: #8890a7;
}
.list {
  margin-bottom: 20px;
}
.list p:nth-of-type(2) {
  color: #242c43;
}
.outlist .list:nth-last-of-type(1) {
  margin: 0;
}
.list .service_title {
  font-size: 16px;
  font-weight: bold;
  color: #58617a;
  text-align: left;
  height: 40px;
  line-height: 34px;
  margin-top: -10px;
  margin-bottom: 20px;
  margin-left: -10px;
}
.service_title span {
  display: inline-block;
  width: 4px;
  height: 16px;
  background-color: #515fe7;
  border-radius: 2px;
  float: left;
  margin-top: 9px;
  margin-right: 15px;
}
.filebtn {
  width: 76px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  color: #e6ebfe;
  background-color: #515fe7;
  border-radius: 8px;
  display: inline-block;
  font-size: 14px;
  margin-left: 20px;
  cursor: pointer;
}
</style>
