<template>
  <div>
      <!--选择要处理的文章 Dialog-->
      <el-dialog title="选择要处理的文章" :visible.sync="dialogVisible">
        <el-table v-show="!showDetail" ref="articleTable" :data-read-url="dataReadFunc" :page-size="10" @selection-change="selectionChange">
          <el-table-column type="index" label="序号" width="100"></el-table-column>
          <el-table-column type="selection" align="center"></el-table-column>
          <el-table-column property="title" label="标题"></el-table-column>
          <el-table-column property="URL" label="URL"></el-table-column>
          <el-table-column property="view" label="查看" width="100">
            <template slot-scope="scope">
              <a href="javascript:void(0)" @click="openGatherResultDialog(scope.row)">查看</a>
            </template>
          </el-table-column>
        </el-table>
        <div slot="footer" class="dialog-footer">
          <el-button v-if="showDetail" @click="showDetail=false" type="primary" size="medium" round class="shadow-primary">
            <i class="fa fa-chevron-left"></i> 返回上页
          </el-button>
          <el-button v-else type="primary" @click="emitData">确 定</el-button>
        </div>

        <div v-show="showDetail">
          <el-toolbar v-if="false">
            <el-button @click="showDetail=false" 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>

      </el-dialog>
    </div>
</template>

<script>
export default {
  data() {
    return {
      dataLoading: false,
      showDetail: false,
      selfID: 0,
      dialogVisible: false,
      selectedRows: [],
      formData: {
        URl: '', // url
        referer: '', // 来源
        errorMessage: '', // 错误信息
        charset: '', // 编码
        level: '', // 级别
        lastDownloadTime: '', // 上次下载时间
        imageFlag: '', // 图片标识
        attachFlag: '', // 附件标识
        content: '' // 内容
      }
    }
  },
  methods: {
    initDialog(id) {
      if (id) {
        this.selfID = id
      }
      this.dialogVisible = true
      this.loadTableData()
    },
    loadData(url) {
      this.visible = true
      this.dataLoading = true
      let params = {
        ID: this.selfID,
        URL: url
      }
      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
      })
    },
    dataReadFunc() {
      return [`/ui/fromweb/${this.selfID}/result/article`, {}]
    },

    loadTableData() {
      !!this.$refs.articleTable && this.$refs.articleTable.getData()
    },

    openGatherResultDialog(row) {
      this.showDetail = true
      this.loadData(row.URL)
    },
    emitData() {
      if (!this.selectedRows.length) {
        this.Dialog('请选择一条数据 ！')
        return
      }
      this.$emit('ok', this.selectedRows)
      this.dialogVisible = false
    },

    // 处理数据选择文章表格数据选中事件
    selectionChange(selection) {
      this.selectedRows = selection
    },

    // 消息Dialog封装
    Dialog(msg) {
      this.$confirm(msg, '系统提示', {
        confirmButtonText: '确定',
        showCancelButton: false,
        type: 'warning'
      })
    }
  },
  created() {
    if (this.id) {
      this.selfID = this.id
    }
  },
  props: {
    id: {
      type: [String, Number],
      default: 0
    }
  }
}
</script>
