<template>
  <div>
    <el-drawer
      size="44%"
      title="详情"
      :visible.sync="visible"
      direction="rtl">
      <el-descriptions :column="2" border direction="vertical" style="margin: 20px;">
        <el-descriptions-item v-for="(value,key) in showRow" :label="value">
          <template v-if="descriptionItem(key)">
            <template v-if="isHTML(descriptionItem(key))">
              <div v-html="descriptionItem(key)"></div>
            </template>
            <template v-else>
              <div>{{ descriptionItem(key) }}</div>
            </template>
          </template>
         <template v-else>
           <div v-for="(i) in row[key]">
             <a :download="i.url" :href="i.url" target="_blank">{{ i.original_name }}</a>
           </div>
         </template>
        </el-descriptions-item>
      </el-descriptions>
    </el-drawer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      type: 1,//1通知2制度文档
      visible: false,
      row: {},

      t1: {
        name: '名称',
        shijian: '时间',
        neirong: '内容',
      },
      t2: {
        name: '名称',
        created_at: '发布时间',
        'system_catalogue_id_system_catalogues_id_relation.name': '目录',
        'id_system_file_files_system_id_relation': '附件'
      }
    }
  },
  methods: {
    show () {
      this.visible = true;
    },
    hide () {
      this.visible = false;
    },
    setRow (row) {
      this.row = row;
    },
    setType (type) {
      this.type = type
    },

    isHTML (str) {
      const htmlRegex = /<([A-Za-z][A-Za-z0-9]*)\b[^>]*>(.*?)<\/\1>/;
      return htmlRegex.test(str);
    }
  },
  computed: {
    showRow () {
      return this.type === 1 ? this.t1 : this.t2;
    },
    descriptionItem () {
      return function (key) {
        if (key.includes('files')) return false;

        let splits = key.split('.');
        let value = this.row;
        for (let i = 0;i < splits.length;i++) {
          value = value[splits[i]]
        }

        return value;
      }
    }
  }
}
</script>

<style scoped lang="scss">
a {
  color: red;
  text-decoration: none;
  transition: all 0.2s;
}

a:hover {
  color: red;
  text-decoration: underline;
}
</style>
