<template>
  <div class="layout-no-flex">
    <el-toolbar>
      <el-button @click="$router.back()" type="primary" size="medium" round class="shadow-primary">
        <i class="fa fa-chevron-left"></i> 返回上页
      </el-button>
    </el-toolbar>
    <div v-loading="dataLoading" class="panel-fieldset">
      <el-row type="flex" justify="center" align="middle">
        <el-col :span="3">
          <b style="float:right">URL：</b>
        </el-col>
        <el-col :span="18">
          <el-input auto-complete="off" size="mini" v-model="formData.URL"></el-input>
        </el-col>
        <el-col :span="3">
          &nbsp;<a :href="formData.URL" target="_blank" v-if="formData.URL"> 打开</a>
        </el-col>
      </el-row>
      <div style="padding:3px"></div>
      <el-row type="flex" justify="center" align="middle">
        <el-col :span="3">
          <b style="float:right">来源：</b>
        </el-col>
        <el-col :span="18">
          <el-input auto-complete="off" size="mini" v-model="formData.referer"></el-input>
        </el-col>
        <el-col :span="3">
          &nbsp;<a :href="formData.referer" target="_blank" v-if="formData.referer"> 打开</a>
        </el-col>
      </el-row>

      <el-row type="flex" justify="center" align="middle" v-if="formData.errorMessage">
        <el-col :span="3">
          <b style="float:right">错误消息：</b>
        </el-col>
        <el-col :span="21">
          <span style="color:red">{{this.formData.errorMessage}}</span>
        </el-col>
      </el-row>

      <el-row type="flex" justify="center" align="middle">
        <el-col :span="3">
          <b style="float:right">备注：</b>
        </el-col>
        <el-col :span="21">
          <span>编码={{this.formData.charset}}</span>&nbsp;&nbsp;
          <span>级别={{this.formData.level}}</span>&nbsp;&nbsp;
          <span>上次下载时间={{this.formData.lastDownloadTime}}</span>
        </el-col>
      </el-row>

      <el-row type="flex" justify="center" align="middle" v-if="formData.imageflag">
        <el-col :span="24" style="text-align:center">
          <img src=''/>
        </el-col>
      </el-row>

      <el-row type="flex" justify="center" align="middle" v-if="formData.attachflag">
        <el-col :span="24" style="text-align:center">
          <a href="" target="_blank">查看附件</a>
        </el-col>
      </el-row>

      <el-input type="textarea" :autosize="{ minRows: 15, maxRows: 50}" placeholder="" v-model="formData.content">
      </el-input>

    </div>
  </div>
</template>

<script>
export default {
  props: {
    ID: {
      type: [String, Number],
      default: 0
    }
  },
  data() {
    return {
      url: '',
      visible: false,
      dataLoading: false,
      formData: {
        URl: '', // url
        referer: '', // 来源
        errorMessage: '', // 错误信息
        charset: '', // 编码
        level: '', // 级别
        lastDownloadTime: '', // 上次下载时间
        imageFlag: '', // 图片标识
        attachFlag: '', // 附件标识
        content: '' // 内容
      }
    }
  },
  created() {
    this.url = this.$route.query.url
    this.loadData()
  },
  methods: {
    // 加载数据
    loadData() {
      this.visible = true
      this.dataLoading = true
      let params = {
        ID: this.ID,
        URL: this.url
      }
      // console.log(params)
      try {
        axios.get(`/ui/fromweb/${params.ID}/ui/result/article/detail`, { params }).then(res => {
          let data = res.data
          this.formData = data.status === 1 ? Object.assign(this.formData, data.data) : {}
          this.dataLoading = false
        })
      } catch (e) {
        this.dataLoading = false
      }
    }
  }
}
</script>

<style scoped>
.tabs-wrap {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
}

.info-form-wrap {
  margin-top: 10px;
  padding: 10px 0;
  width: 560px;
}

.tag-item,
.title {
  line-height: 1.5;
  margin: 0.2em 0 0.3em 0;
}

.tag-item .tag-label {
  display: inline-block;
  text-align: right;
  width: 100%;
}

.title {
  margin-top: 1em;
  font-size: 20px !important;
}
</style>
