<template>
  <div id="result">
    <el-row>
      <el-col :span="24" class="main">
        <el-col :span="24" class="top">
          <el-button type="primary" size="mini" @click="$router.push('/jg/patent/index')">返回</el-button>
        </el-col>
        <el-col :span="24" class="down">
          <data-table :fields="fields" :opera="opera" :data="list" :total="total" @query="search" @download="toDownload"></data-table>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: mission } = createNamespacedHelpers('mission');

export default {
  name: 'result',
  props: {},
  components: {},
  data: function () {
    return {
      list: [],
      total: 0,
      opera: [
        {
          label: '下载',
          method: 'download',
          display: (i) => i.status === '2',
        },
      ],
      fields: [
        { label: '标题', model: 'title' },
        { label: '导出数据时间', model: 'create_time' },
        {
          label: '状态',
          model: 'status',
          format: (i) => (i == '0' ? '未开始' : i == '1' ? '进行中' : i == '2' ? '导出完成' : i == '3' ? '导出失败' : '未知状态'),
        },
        { label: '进度', model: 'progress' },
        { label: '备注', model: 'remark' },
      ],
    };
  },
  created() {
    this.search();
  },
  methods: {
    ...mission(['query']),
    async search({ skip = 0, limit = 10 } = {}) {
      const res = await this.query({ skip, limit, user: this.user._id });
      if (this.$checkRes(res)) {
        this.$set(this, 'list', res.data);
        this.$set(this, 'total', res.total);
      }
    },
    toDownload({ data }) {
      window.open(`http://broadcast.waityou24.cn/${data.uri}`);
    },
  },
  computed: {
    ...mapState(['user']),
    pageTitle() {
      return `${this.$route.meta.title}`;
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
};
</script>

<style lang="less" scoped>
.main {
  .top {
    text-align: right;
    margin: 0 0 10px 0;
  }
}
</style>
