<template>
    <div class="custom-table">
        <el-table
            :data="tableData"
            border
            style="width: 100%"
            v-loading="loading">
            <el-table-column prop="task_month" label="月份" align="center" />
            <el-table-column prop="risk_num" label="火灾高危单位">
                <template slot-scope="scope">{{scope.row.risk_num}}</template>
            </el-table-column>
            <el-table-column prop="focus_num" label="消防安全重点单位">
                <template slot-scope="scope">{{scope.row.focus_num}}</template>
            </el-table-column>
            <el-table-column prop="police_num" label="一般单位" align="center">
                <template slot-scope="scope">{{scope.row.police_num}}</template>
            </el-table-column>
            <el-table-column prop="other_num" label="其他单位" align="center" />
            <el-table-column prop="create_time" label="任务产生时间" align="center">
                <template slot-scope="scope">{{ formatDate(scope.row.task_execute_time, true) }}</template>
            </el-table-column>
            <el-table-column prop="action" label="操作" align="center">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="handleDetail(scope.row.task_id)">详情</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="custom-pagination">
            <div class="info">
                <span>共 {{ total }} 条记录</span>
                <span>第 {{ query.page }} / {{ pageTotal }} 页</span>
            </div>
            <el-pagination
                background
                class="custom-page"
                layout="prev, pager, next, sizes"
                :page-sizes="[10, 20, 50, 100]"
                :current-page="query.page"
                :page-size="query.size"
                :total="total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import {jobMixin} from '@/mixin/job'
import {resourceMixin} from '@/mixin/resource'
import {formatDate} from '@/utils/tool'
import {exportRuleList, queryRuleList} from "@/api/random";

export default {
    computed: {
        pageTotal() {
            const page = Math.ceil(this.total / this.query.size)
            return page > 0 ? page : 1
        }
    },
    mixins: [jobMixin, resourceMixin],
    data () {
        return {
            loading: false,
            formData: {
                job_status: '',
                org: '',
                account: '',
                checkDate: '',
                company: '',
                limit: '',
                createDate: '',
                result: '',
            },
            query: {
                page: 1,
                size: 10,
                sort: "task_execute_time desc"
            },
            total: 0,
            tableData: []
        }
    },
    mounted () {
        this.handleQuery()
    },
    methods: {
        formatDate,
        resetForm(data) {
            this.query.query = data
            if (data && data.length > 0) {
                this.query.page = 1;
            }
            this.handleQuery()
        },
        export(data) {
          this.query.query = data
          if (data && data.length > 0) {
            this.query.page = 1;
          }
          let query = this.query.query || '';
          if (query.indexOf('task_type') < 0) {
            if (query.length > 0) {
              query += ';';
            }
            query += 'task_type==0';
          }
          this.query.query = query;
          this.query.export = true
          let params = []
          params.push(`query=${encodeURIComponent(query)}`)
          params.push(`page=${this.query.page}`)
          params.push(`size=${this.query.size}`)
          params.push(`export=true`)
          let para = params.join('&')
          document.location.href = process.env.VUE_APP_API + '/v2/api/random_task_view?' + para
          // exportRuleList('').then(res => {
          //   this.excelUrl = window.URL.createObjectURL(new Blob([res],
          //       {type: `application/vnd.ms-excel`}));
          //   const fname = '日常规则.xlsx';
          //   const link = document.createElement('a');
          //   link.href = this.excelUrl;
          //   link.setAttribute('download', fname);
          //   document.body.appendChild(link);
          //   link.click();
          //   this.$message.success('导出成功');
          // })
        },
        handleSizeChange(val) {
            this.query.size = val
            this.handleQuery()
        },
        handleCurrentChange(val) {
            this.query.page = val
            this.handleQuery()
        },
        handleQuery() {
            this.loading = true
            let query = this.query.query || '';
            if (query.indexOf('task_type') < 0) {
                if (query.length > 0) {
                    query += ';';
                }
                query += 'task_type==0';
            }
            this.query.query = query;
            queryRuleList(this.query).then(res => {
              if (res) {
                this.total = res.total || 0
                const list = res.data || []
                list.map(item => {
                  item.start_time = formatDate(item.start_time, true)
                })
                this.tableData = list
              }
              this.loading = false
            })
        },
        handleDetail(id) {
            this.$router.push({
                path: '/random/random/rule/detail',
                query: {
                    id
                }
            })
        }
    }
}
</script>
