<template>
  <div>
    <h3 class="see-title">{{ ruleForm.title }}</h3>
    <div class="res_tit">
      <span>知识库分类：{{ ruleForm.typeName }}</span>
      <span>知识库标题：{{ ruleForm.title }}</span>
      <span>备注：{{ ruleForm.remark }}</span>

    </div>
    <ul v-show="flag">
      <li v-for="(item,index) in ruleForm.picArr" :key="index">
        <!-- <a :href="item.url" download=''>
          <i class="el-icon-download"></i>
        </a> -->
        <img :src="item.url" alt="" srcset="" v-if="item.type=='png' || item.type == 'jpg'">
        <div class="noThumb" v-else>
          <i class="el-icon-picture-outline"></i>
          <p>无法预览</p>
        </div>
        <span>{{item.name}}</span>
      </li>
    </ul>
    <div class="res_con">{{ ruleForm.content }}</div>
  </div>
</template>
<script>
import {
  getTreeList,
  getScoreDetail
} from '@/api/repositoryManage/repositoryManage'
export default {
  name: 'RepositoryManage',
  props: {
    scoreid: {
      type: String,
      default: ''
    },
    parentidArr: {
      type: Array,
      default: () => [''] // 父级ID,无父级ID为''
    }
  },
  data() {
    return {
      loading: false,
      flag: false,
      ruleForm: {
        typeName: '',
        typeid: '', // 父节点id
        id: '', // 当前节点id
        title: '', // 分类名称
        content: '', // 分类内容
        remark: '', // 备注
        picArr:[],//图片文件路径
      },
      rules: {
        title: [{
          required: true,
          message: '指标标题不能为空'
        }],
        content: [{
          required: true,
          message: '指标内容不能为空'
        }]

      },
      typeDropDatas: [], // 下拉分类
      // 自定义菜单下拉数据的key值
      props: {
        value: 'id',
        label: 'name'
      }
    }
  },
  created() {
    this.getTypeDrop().then(() => {
      if (this.scoreid) {
        this.ruleForm.id = this.scoreid
        // console.log(this.scoreid)
        this.getScoreDetails(this.scoreid)
      }
    })
  },
  methods: {
    // 获取分类下拉
    getTypeDrop() {
      return new Promise(resolve => {
        getTreeList().then(response => {
          if (response.state.toLowerCase() === 'success') {
            this.typeDropDatas = response.data
            // alert(JSON.stringify(response.data));
          }
        })
        resolve()
      })
    },
    // 获取菜单详情
    getScoreDetails(rid) {
      getScoreDetail(rid).then(response => {
        if (response.state.toLowerCase() === 'success') {
          const res = response.data
          this.ruleForm.typeName = res.ParentName.reverse().join('/') // 分类
          this.ruleForm.title = res.F_Title // 标题
          this.ruleForm.content = res.F_Content // 内容
          this.ruleForm.remark = res.F_Description // 备注
          if(res.FileUrl.length!=0){
            this.flag=true
            res.FileUrl.map(item=>{
              this.ruleForm.picArr.push({
                url:item.F_Url,
                type:item.F_Type,
                name:item.F_Name,
              })
            })
          }
        }
      })
    },
  }

}
</script>
<style lang="scss" scoped>
	.see-title {
		text-align: center;
	}

	ul,
	li {
    list-style: none;
	}

	.res_tit {
		border-bottom: 1px solid #dfdfdf;
		text-align: center;
	}
  ul{
    width: 100%;
    height: 60px;
    display: flex;
    li{
      position: relative;
      width: 15%;
      a{
        position: absolute;
        top: -2px;
        right: 12px;
        width: 20px;
        height: 20px;
        cursor: pointer;
      }
      img{
        width: 100%;
        height: 60px;
        text-align: center;
      }
      span{
        display: block;
        font-size: 12px;
        text-align: center;
      }
    }
  }
	.res_tit span {
		margin-right: 20px;
		line-height: 40px;
		font-size: 12px;
	}

	.res_con {
		font-size: 16px;
		text-indent: 2em;
		margin-top: 20px;
	}
  .noThumb {
      height: 60px;
      text-align: center;
      color: #1aaad0;
  }
</style>
