<template>
    <div class="custom-table">
        <el-table
            :data="tableData"
            border
            style="width: 100%"
            v-loading="loading">
            <el-table-column type="index" align="center" label="序号" width="80" />
            <el-table-column prop="enforce_obj_name" show-overflow-tooltip label="抽查单位" align="left" />
            <el-table-column prop="enforce_obj.charge_person" show-overflow-tooltip label="消防安全责任人" />
            <el-table-column prop="enforce_obj.charge_person_phone" show-overflow-tooltip label="责任人电话" />
            <el-table-column prop="enforce_org_name" show-overflow-tooltip label="所属检查机构信息" />
            <el-table-column prop="executor_names" show-overflow-tooltip label="检查人(主协)" />
            <el-table-column prop="create_time" show-overflow-tooltip label="检查时间" align="center">
                <template slot-scope="scope">{{ formatDate(scope.row.start_time, true) }}</template>
            </el-table-column>
            <el-table-column prop="is_effect" show-overflow-tooltip label="任务状态" align="center">
                <template slot-scope="scope">{{ scope.row.is_effect === '1' ? '已生效' : '未生效' }}</template>
            </el-table-column>
            <el-table-column prop="last_enforce_status" show-overflow-tooltip label="检查结果" align="center">
                <template slot-scope="scope">{{parseJobStatus2(scope.row.job_status)}}</template>
            </el-table-column>
            <el-table-column prop="job_no" show-overflow-tooltip label="任务编号" />
            <el-table-column prop="action" label="操作" align="center" width="100">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="handleDetail(scope.row.id)">详情</el-button>
                    <el-button type="text" size="small" @click="handleAssign(scope.row)" :disabled="scope.row.job_status !== 'TODO'">指派</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>
        <AssignDialog ref="assign-dialog-box" :dialogInfo="dialogInfo" :excutorList="excutorList" @confirm="handleQuery" />
    </div>
</template>

<script>
import { jobMixin } from '@/mixin/job'
import { resourceMixin } from '@/mixin/resource'
import { formatDate, dateFormat } from '@/utils/tool'
import {queryCheckList, querySpecialNoticeList, getExcutorList} from "@/api/random";
import AssignDialog from '@/component/Assign-Dialog'

export default {
  components: {AssignDialog},
    computed: {
        pageTotal() {
            const page = Math.ceil(this.total / this.query.size)
            return page > 0 ? page : 1
        }
    },
    mixins: [jobMixin, resourceMixin],
    props: {
        task_id: {
            type: String
        },
    },
    data () {
        return {
            loading: false,
            formData: {
                job_status: '',
                org: '',
                account: '',
                checkDate: '',
                company: '',
                limit: '',
                createDate: '',
                result: '',
            },
            query: {
                page: 1,
                size: 10,
                showNotEffect: true
            },
            total: 0,
            tableData: [],
          dialogInfo: {},
          excutorList: null
        }
    },
    mounted () {
        this.handleQuery()
      this.getExcutorListApi()
    },
    methods: {
        formatDate,
        dateFormat,
        resetForm(data) {
            this.query.query = data
            if (data && data.length > 0) {
                this.query.page = 1;
            }
            this.handleQuery()
        },
        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('job_type') < 0) {
                if (query.length > 0) {
                    query += ';';
                }
                // query += 'job_type==NORMAL';
            }
            query += ('random_task_id==' + this.task_id)
            this.query.query = query;

            queryCheckList(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: '/monitor/special/detail',
                query: {
                    id
                }
            })
        },
      handleAssign(row) {
        this.dialogInfo = row
        this.$refs['assign-dialog-box'].dialogVisible = true
      },
        buildStatus(beginTime, endTime) {
            if (beginTime.getTime() > new Date().getTime()) {
                return '未开始'
            } else if (endTime.getTime() < new Date().getTime()) {
                return '进行中'
            } else {
                return '已结束'
            }
        },
      getExcutorListApi() {
        getExcutorList({
          page: 1,
          size: 100
        }).then(res => {
          if (res.data && res.data.length) {
            this.excutorList = res.data
          }
        })
      }
    }
}
</script>
