<template>
    <div class="random" style="margin-top: -10px;">
        <el-form :inline="true" :model="formData" ref="form" label-width="120px" style="text-align: right;">
            <el-form-item label="发布状态:" prop="status">
                <el-select v-model="formData.status" clearable placeholder="选择发布状态">
                    <el-option value="" label="全部" />
                    <el-option v-for="item in task_status" :key="item.k" :value="item.k" :label="item.v" />
                </el-select>
            </el-form-item>
            <el-form-item label="专项检查名称:" prop="task_name">
                <el-input v-model="formData.task_name" placeholder="请输入专项检查名称"></el-input>
            </el-form-item>
            <el-button type="default" icon="el-icon-reset" @click="resetForm">重置</el-button>
            <el-button type="default" icon="el-icon-search" @click="handleQuery">搜索</el-button>
        </el-form>
        <div class="custom-table" style="padding: 0; margin: 0;">
            <el-table
                :data="tableData"
                border
                style="width: 100%"
                :row-class-name="tableRowClassName"
                v-loading="loading">
                <el-table-column prop="task_name" show-overflow-tooltip label="专项检查名称" align="left" />
                <el-table-column show-overflow-tooltip label="持续时间">
                    <template slot-scope="scope">{{ dateFormat('YYYY-mm-dd', new Date(scope.row.start_time)) }}~{{ dateFormat('YYYY-mm-dd', new Date(scope.row.end_time)) }}</template>
                </el-table-column>
                <el-table-column prop="enforce_org_name" show-overflow-tooltip label="发布机构" />
                <el-table-column show-overflow-tooltip label="发布时间" align="center" width="200">
                    <template slot-scope="scope">{{ formatDate(scope.row.create_time, true) }}</template>
                </el-table-column>
                <el-table-column prop="executor_names" show-overflow-tooltip label="发布状态" align="center">
                    <template slot-scope="scope">{{buildStatus(new Date(scope.row.start_time), new Date(scope.row.end_time))}}</template>
                </el-table-column>
                <el-table-column prop="action" label="操作" align="center" width="100">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="handleSelect(scope.row)">选择</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>
    </div>
</template>

<script>
import {queryRuleList, querySpecialNoticeList} from "@/api/random";
import {dateFormat, formatDate} from "@/utils/tool";
import FormOption from '@/component/FormOption'
import ChooseResource from '@/component/ChooseResource'

import { getOrg, getUserByOrg } from '@/api/base'
import { jobMixin } from '@/mixin/job'
import { resourceMixin } from '@/mixin/resource'
import {DateTime} from "luxon";

export default {
    components: {
    },
    mixins: [jobMixin, resourceMixin],
    computed: {
        pageTotal() {
            const page = Math.ceil(this.total / this.query.size)
            return page > 0 ? page : 1
        }
    },
    props: {
      notice_id: {
        type: Number
      }
    },
    data() {
        return {
            formData: {
                status: '',
                task_name: '',
            },
            loading: false,
            query: {
                page: 1,
                size: 10,
                sort: "create_time desc"
            },
            total: 0,
            tableData: []
        }
    },
    mounted() {
        this.loadSpecialNotice()
    },
    methods: {
        formatDate,
        dateFormat,
        loadSpecialNotice() {
            this.loading = true
            let query = this.query.query || "";
            if (query.length > 0) {
              query += ";"
            }
            query += "end_time" + "=ge=" + "'" + dateFormat("YYYY-mm-ddTHH:MM:SS", new Date()) + "'"
            this.query.query = query;

            querySpecialNoticeList(this.query).then(res => {
                if (res) {
                    this.total = res.total || 0
                    const list = res.data || []
                    this.tableData = list
                }
                this.loading = false
            })
        },
        resetForm() {
          this.query.page = 1
          this.formData.status = ''
          this.formData.task_name = ''
          this.handleQuery()
        },
        handleSelect(row) {
          queryRuleList({page: 1, size: 1000, query: 'notify_id==' + row.id}).then(res => {
            if (res && res.data && res.data.length > 0) {
              this.$message.error('该机构已经选过该通知，请重新选择')
            } else {
              this.$emit('handleSelect', row)
            }
          })

        },
        handleSizeChange(val) {
            this.query.size = val
            this.loadSpecialNotice()
        },
        handleCurrentChange(val) {
            this.query.page = val
            this.loadSpecialNotice()
        },
        tableRowClassName({row, rowIndex}) {
          if (row.id == this.notice_id) {
            return 'success-row';
          }
          return '';
        },
        buildStatus(beginTime, endTime) {
            if (beginTime.getTime() > new Date().getTime()) {
                return '未开始'
            } else if (beginTime.getTime() <= new Date().getTime() && endTime.getTime() >= new Date().getTime()) {
                return '进行中'
            } else {
                return '已结束'
            }
        },
        handleQuery() {
          let queryString = ""
          let expressions = []
          if (this.formData.status) {
            if (this.formData.status === 'TODO') {
              expressions.push('start_time' + "=gt=" + "'" + dateFormat("YYYY-mm-ddTHH:MM:SS", new Date()) + "'")
            } else if (this.formData.status === 'DOING') {
              expressions.push('start_time' + "=le=" + "'" + dateFormat("YYYY-mm-ddTHH:MM:SS", new Date()) + "'")
              expressions.push('end_time' + "=ge=" + "'" + dateFormat("YYYY-mm-ddTHH:MM:SS", new Date()) + "'")
            } else if (this.formData.status === 'FINISHED') {
              expressions.push('end_time' + "=lt=" + "'" + dateFormat("YYYY-mm-ddTHH:MM:SS", new Date()) + "'")
            }
          }
          if (this.formData.task_name) {
            expressions.push("task_name" + "==" + "'*" + this.formData.task_name + "*'")
          }
          if (expressions.length !== 0) {
            queryString = expressions.reduce(function(previousValue, currentValue, index, array) {
              return previousValue + ";" + currentValue
            })
          }
          this.query.query = queryString
          this.loadSpecialNotice()
        }
    }
}
</script>

<style>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>
