<template>
    <div>
        <el-form :model="form" :inline="true" class="demo-form-inline">
            <el-form-item label="筛选数据:">
                <el-input v-model="form.searchValue" placeholder="请输入关键字" clearable></el-input>
            </el-form-item>
            <el-form-item label="事务类型:">
                <el-select v-model="form.type" clearable placeholder="请选择事务类型">
                    <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="所属流程:">
                <el-select v-model="form.searchState" placeholder="请选择所属流程">
                    <el-option v-for="item in options1" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <Timeinterval :timeOptions="optionsw" :interval="3" ref="Timeinterval"></Timeinterval>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" size="small" icon="el-icon-search" @click="onSubmit">查询</el-button>
                <!-- <el-button type="primary" icon="el-icon-download">导出</el-button> -->
            </el-form-item>
        </el-form>
        <div>
            <!-- <el-button type="primary" size="mini" icon="el-icon-caret-right"
        >开始</el-button
      > -->
            <el-button
                @click="
                    flagSupervision = true
                    title = '新增技术监督事务'
                "
                type="primary"
                size="mini"
                icon="el-icon-plus"
            >
                新建
            </el-button>
            <el-button type="primary" size="mini" icon="el-icon-top" @click="showBatchUpload = true">
                上传模板
            </el-button>
        </div>
        <el-table
            stripe
            :data="tableList"
            highlight-current-row
            header-cell-class-name="table_header"
            :height="vh"
            v-loading="loading"
            style="width: 100%"
            class="mt10"
            border
            @selection-change="handleSelectionChange"
        >
            <el-table-column type="selection" width="55"></el-table-column>

            <el-table-column
                v-for="(item, index) in warningList"
                :prop="item.prop"
                show-overflow-tooltip
                :label="item.label"
                :min-width="item.width"
                :key="index"
                :formatter="formatter"
            ></el-table-column>

            <el-table-column label="操作" width="200">
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        type="primary"
                        icon="el-icon-edit"
                        :disabled="scope.row.progress != 0"
                        @click="update(scope.row)"
                    >
                        修改
                    </el-button>
                    <el-button
                        size="mini"
                        type="primary"
                        icon="el-icon-delete"
                        :disabled="scope.row.progress != 0"
                        @click="delSupervise(scope.row)"
                    >
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            background
            align="right"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="form.pageNum"
            :page-sizes="[20, 30, 40, 50, 100]"
            :page-size="form.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            class="mt10"
        ></el-pagination>
        <!-- 详情 -->
        <lookOver v-if="flagLook" :title="title" :rowList="rowList" @handleClose="flagLook = false" />
        <!-- 上传 -->
        <uploadFrame
            :title="title"
            :rowList="rowList"
            v-if="flag"
            @handleClose="
                flag = false
                onSubmit()
            "
        />
        <!-- 新增 修改 -->
        <Supervision
            v-if="flagSupervision"
            :title="title"
            :rowList="rowList"
            @handleClose="flagSupervision = false"
            @success="
                flagSupervision = false
                onSubmit()
            "
        />
        <!-- 上传模板 -->
        <el-dialog
            :close-on-click-modal="false"
            title="上传模板"
            :visible.sync="showBatchUpload"
            width="30%"
            :before-close="handleCloseP"
        >
            <el-form :model="formInline" :inline="true">
                <el-form-item label="模板:">
                    <el-select v-model="formInline.formworkType" placeholder="选择模板">
                        <el-option label="预/告警单模板" value="0"></el-option>
                        <el-option label="整改通知反馈单模板" value="1"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="类型:">
                    <el-select v-model="formInline.type" placeholder="选择类型">
                        <el-option label="预警" value="0"></el-option>
                        <el-option label="告警" value="1"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <el-upload
                multiple
                action="#"
                :http-request="TerminalUpload"
                :limit="limit"
                accept="doc"
                :before-remove="beforeRemove"
                :on-error="handleUploadError"
                :file-list="fileList"
                :headers="headers"
                :on-exceed="handleExceed"
                class="upload-file-uploader"
                ref="upload"
            >
                <el-button type="primary" icon="el-icon-upload2">选择文件</el-button>
            </el-upload>
            <span slot="footer" class="dialog-footer">
                <el-button @click="handleCloseP">取 消</el-button>
                <el-button type="primary" @click="BatchUpload">上 传</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import Timeinterval from '@/views/components/Timeinterval.vue'
import lookOver from './lookOver'
import uploadFrame from './uploadFrame'
import Supervision from './Supervision'
import {
    querySuperviseList,
    dowloadAlarmFormwork,
    deleteSupervise,
    uploadAlarmFormwork
} from '@/api/Processsupervision/technology.js'
export default {
    components: { Timeinterval, lookOver, Supervision, uploadFrame },
    props: {},
    data() {
        return {
            formInline: {
                formworkType: '0',
                type: '0'
            },
            optionsw: [
                { label: '年份', value: 1 },
                { label: '季度', value: 2 },
                { label: '月份', value: 3 },
                { label: '周', value: 4 }
            ],
            limit: 1,
            fileList: [],
            headers: {
                Authorization: window.sessionStorage.getItem('cntoken')
            }, // 设置上传的请求头部
            showBatchUpload: false,
            loading: false,
            flagLook: false,
            flagSupervision: false,
            form: {
                pageNum: 1,
                pageSize: 20,
                searchBeginTime: '',
                searchEndTime: '',
                searchState: '',
                type: '',
                searchValue: ''
            },
            rowList: {},
            title: '新增技术监督事务',
            vh: null,

            total: 0,
            tableList: [],
            flag: false,
            warningList: [
                { prop: 'name', label: '监督名称', width: 180 },
                { prop: 'type', label: '事务类型', width: 100 },
                { prop: 'createUser', label: '创建用户', width: 100 },
                { prop: 'companyName', label: '创建部门', width: 160 },
                { prop: 'createTime', label: '创建时间', width: 160 },
                //{ prop: 'modifyTime', label: '修改时间', width: 160 },
                { prop: 'haveAlarmticket', label: '预/告警单', width: 100 },
                { prop: 'haveFeedback', label: '反馈单', width: 100 },
                { prop: 'haveTestReport', label: '报告', width: 100 },
                { prop: 'haveReviseNotice', label: '通知单', width: 100 },
                { prop: 'haveReviseFeedback', label: '通知反馈单', width: 120 },
                { prop: 'progress', label: '流程状态', width: 140 }
            ],
            options: [
                {
                    name: '预警单',
                    id: '0'
                },
                {
                    name: '告警单',
                    id: '1'
                }
            ],
            options1: [
                {
                    name: '开始',
                    id: '0'
                },
                {
                    name: '预/告警单下发',
                    id: '1'
                },
                {
                    name: '反馈单上传',
                    id: '2'
                },
                {
                    name: '现场测试',
                    id: '3'
                },
                {
                    name: '整改通知单下发',
                    id: '4'
                },
                {
                    name: '整改通知单反馈',
                    id: '5'
                },
                {
                    name: '完结',
                    id: '6'
                }
            ],

            multipleSelection: []
        }
    },
    created() {},
    mounted() {
        this.setHeight()
        window.addEventListener('resize', this.setHeight)
        this.onSubmit()
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.vh = window.sessionStorage.getItem('appheight') - 203 + 'px'
        },
        // 查询
        async onSubmit() {
            this.loading = true
            this.form.searchBeginTime = this.$refs.Timeinterval.timeValue[0]
            this.form.searchEndTime = this.$refs.Timeinterval.timeValue[1]
            await querySuperviseList(this.form).then(res => {
                this.tableList = res.data.records
                this.total = res.data.total
            })
            this.loading = false
        },
        // 修改
        update(row) {
            this.flagSupervision = true
            this.rowList = row
            this.title = '修改技术监督事务'
        },
        // 删除
        delSupervise(row) {
            deleteSupervise({
                deleteIds: [row.supIndex]
            }).then(res => {
                if (res.code == 'A0000') {
                    this.$message({
                        message: '删除成功!',
                        type: 'success'
                    })
                    this.onSubmit()
                }
            })
        },
        // 下发
        Issued(data, formworkType) {
            dowloadAlarmFormwork({
                type: data.type,
                supIndex: data.supIndex,
                formworkType: formworkType
            }).then(res => {
                this.onSubmit()
                let link = document.createElement('a')
                link.href = res.data //url文件地址
                link.click()
                link.remove()
            })
        },
        // 流程状态
        ProcessStatus() {
            // console.log(123);
        },
        // 数据过滤
        formatter(row, column) {
            if (column.property == 'type') {
                return row.type == 0 ? '预警单' : '告警单'
            } else if (column.property == 'progress') {
                return row.progress == 0 ? (
                    <el-button type="text" class="formatterButton" on-click={() => this.ProcessStatus()}>
                        开始
                    </el-button>
                ) : row.progress == 1 ? (
                    <el-button type="text" class="formatterButton" on-click={() => this.ProcessStatus()}>
                        预/告警单下发
                    </el-button>
                ) : row.progress == 2 ? (
                    <el-button type="text" class="formatterButton" on-click={() => this.ProcessStatus()}>
                        反馈单上传
                    </el-button>
                ) : row.progress == 3 ? (
                    <el-button type="text" class="formatterButton" on-click={() => this.ProcessStatus()}>
                        现场测试
                    </el-button>
                ) : row.progress == 4 ? (
                    <el-button type="text" class="formatterButton" on-click={() => this.ProcessStatus()}>
                        整改通知单下发
                    </el-button>
                ) : row.progress == 5 ? (
                    <el-button type="text" class="formatterButton" on-click={() => this.ProcessStatus()}>
                        整改通知反馈单
                    </el-button>
                ) : row.progress == 6 ? (
                    <el-button type="text" class="formatterButton" on-click={() => this.ProcessStatus()}>
                        完结
                    </el-button>
                ) : (
                    ''
                )
            } else if (column.property == 'haveAlarmticket') {
                // 预/告警单
                if (row.progress == 0) {
                    return (
                        <el-button type="text" class="formatterButton" on-click={() => this.Issued(row, 0)}>
                            下发
                        </el-button>
                    )
                } else {
                    return (
                        <el-button
                            type="text"
                            class="formatterButton"
                            on-click={() => {
                                ;(this.flagLook = true), (this.title = '预/告警单详情'), (this.rowList = row)
                            }}
                        >
                            详情
                        </el-button>
                    )
                }
            } else if (column.property == 'haveFeedback') {
                // 反馈单
                if (row.progress == 2) {
                    return (
                        <el-button
                            type="text"
                            class="formatterButton"
                            on-click={() => {
                                ;(this.title = '反馈单上传'), (this.flag = true), (this.rowList = row)
                            }}
                        >
                            上传
                        </el-button>
                    )
                } else {
                    if (!row.haveFeedback) {
                        return '-'
                    } else {
                        return (
                            <el-button
                                type="text"
                                class="formatterButton"
                                on-click={() => {
                                    ;(this.flagLook = true), (this.title = '反馈单详情'), (this.rowList = row)
                                }}
                            >
                                详情
                            </el-button>
                        )
                    }
                }
            } else if (column.property == 'haveTestReport') {
                // 报告
                if (row.progress == 3) {
                    return (
                        <el-button
                            type="text"
                            class="formatterButton"
                            on-click={() => {
                                ;(this.title = '报告上传'), (this.flag = true), (this.rowList = row)
                            }}
                        >
                            上传
                        </el-button>
                    )
                } else {
                    if (!row.haveTestReport) {
                        return '-'
                    } else {
                        return (
                            <el-button
                                type="text"
                                class="formatterButton"
                                on-click={() => {
                                    ;(this.flagLook = true), (this.title = '报告详情'), (this.rowList = row)
                                }}
                            >
                                详情
                            </el-button>
                        )
                    }
                }
            } else if (column.property == 'haveReviseNotice') {
                // 通知单
                if (row.progress == 4) {
                    return (
                        <el-button type="text" class="formatterButton" on-click={() => this.Issued(row, 1)}>
                            下发
                        </el-button>
                    )
                } else {
                    if (!row.haveReviseNotice) {
                        return '-'
                    } else {
                        return (
                            <el-button
                                type="text"
                                class="formatterButton"
                                on-click={() => {
                                    ;(this.flagLook = true), (this.title = '通知单详情'), (this.rowList = row)
                                }}
                            >
                                详情
                            </el-button>
                        )
                    }
                }
            } else if (column.property == 'haveReviseFeedback') {
                // 通知反馈单
                if (row.progress == 5) {
                    return (
                        <el-button
                            type="text"
                            class="formatterButton"
                            on-click={() => {
                                ;(this.title = '通知反馈单上传'), (this.flag = true), (this.rowList = row)
                            }}
                        >
                            上传
                        </el-button>
                    )
                } else {
                    if (!row.haveReviseFeedback) {
                        return '-'
                    } else {
                        return (
                            <el-button
                                type="text"
                                class="formatterButton"
                                on-click={() => {
                                    ;(this.flagLook = true), (this.title = '通知反馈单详情'), (this.rowList = row)
                                }}
                            >
                                详情
                            </el-button>
                        )
                    }
                }
            } else {
                return row[column.property]
            }
        },
        // 关闭上传弹框
        handleCloseP() {
            this.fileList = []
            this.showBatchUpload = false
        },
        // 批量上传报告
        TerminalUpload(params) {
            this.fileList.push(params.file)

            // form.append("files", params.file);
        },
        beforeRemove(file, fileList) {
            this.fileList = fileList
        },
        // 上传失败
        handleUploadError(err) {
            this.$message.error(err)
        },
        // 批量上传
        BatchUpload() {
            this.$message('上传中...')
            let form = new FormData()
            form.append('formworkType', this.formInline.formworkType)
            form.append('type', this.formInline.type)
            this.fileList.forEach(item => {
                form.append('file', item)
            })
            uploadAlarmFormwork(form)
                .then(res => {
                    if (res.type == 'application/json') {
                        this.$message({
                            message: '上传成功!',
                            type: 'success'
                        })
                        this.handleCloseP()
                        this.onSubmit()
                    } else {
                        this.$message({
                            message: '上传失败!',
                            type: 'error'
                        })
                    }
                })
                .catch(response => {
                    // console.log(response);
                })
        },
        handleSelectionChange(val) {
            this.multipleSelection = val
        },
        handleNodeClick(data) {
            // this.id = data.id;
        },
        handleExceed(files, fileList) {
            this.$message.warning('不是批量上传只能上传1个文件!')
        },
        handleSizeChange(e) {
            this.form.pageSize = e
        },
        handleCurrentChange(e) {
            this.form.pageNum = e
        }
    },

    computed: {},

    watch: {}
}
</script>
<style lang="less" scoped>
@import url('../../../../styles/comStyle.less');
.boxDiv {
    display: flex;
    justify-content: space-between;
    line-height: 28px;
}
.formatterButton {
    color: #0cf;

    text-decoration: underline;
}
</style>
