<template>
    <div>
        <el-form :inline="true" class="demo-form-inline form">
            <el-form-item>
                <Area @click="handleNodeClick" ref="area"></Area>
            </el-form-item>

            <el-form-item>
                <Timeinterval :interval="3" ref="interval" :timeOptions="timeOptions"></Timeinterval>
            </el-form-item>

            <el-form-item label="是否上传:" class="box">
                <el-select v-model="ruleForm.isFileUpload" clearable placeholder="请选择">
                    <el-option
                        v-for="item in uploadData"
                        :key="item.id"
                        :label="item.label"
                        :value="item.id"
                    ></el-option>
                </el-select>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" class="ml10" icon="el-icon-search" @click="onsubmit">查询</el-button>
                <el-button type="primary" icon="el-icon-refresh" @click="Reset">重置</el-button>
            </el-form-item>
        </el-form>

        <el-row>
            <el-col :span="24">
                <div class="button mb10">
                    <el-button type="primary" icon="el-icon-upload" @click="uploadFn">文件上传</el-button>
                    <!-- <File></File> -->
                    <el-button type="primary" icon="el-icon-share" @click="exportFn">文件导出</el-button>
                </div>
                <el-table
                    stripe
                    :data="resultsmanagementData"
                    :height="height"
                    border
                    style="width: 100%"
                    v-loading="isLoading"
                    header-cell-class-name="table_header"
                    @selection-change="handleSelectionChange"
                    :cell-style="cellStyle"
                >
                    <el-table-column type="selection" width="55"></el-table-column>
                    <el-table-column prop="orgName" label="责任单位" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="planNo" label="普测计划编号" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column
                        prop="planName"
                        label="普测计划名称"
                        :show-overflow-tooltip="true"
                    ></el-table-column>
                    <el-table-column
                        prop="planStartTime"
                        label="开始时间"
                        :show-overflow-tooltip="true"
                    ></el-table-column>
                    <el-table-column
                        prop="planEndTime"
                        label="结束时间"
                        :show-overflow-tooltip="true"
                    ></el-table-column>
                    <el-table-column
                        prop="subCount"
                        label="普测变电站数量"
                        :show-overflow-tooltip="true"
                    ></el-table-column>
                    <!-- <el-table-column
            prop="busCount"
            label="普测母线数量"
            :show-overflow-tooltip="true"
          ></el-table-column> -->
                    <el-table-column prop="isFileUpload" label="是否上传" :show-overflow-tooltip="true">
                        <template slot-scope="scope">
                            <span v-if="scope.row.isFileUpload == 1" type="primary" size="small" style="color: blue">
                                已上传
                            </span>
                            <span v-if="scope.row.isFileUpload == 0" type="primary" size="small" style="color: red">
                                未上传
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="fileCount"
                        label="上传文件数量"
                        :show-overflow-tooltip="true"
                    ></el-table-column>
                    <el-table-column prop="uploadTime" label="上传时间" :show-overflow-tooltip="true"></el-table-column>
                </el-table>
                <el-pagination
                    background
                    align="right"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="ruleForm.pageNum"
                    :page-sizes="[20, 30, 40, 50, 100]"
                    :page-size="ruleForm.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="resultsmanagementData.length"
                    class="mt10"
                ></el-pagination>
            </el-col>
        </el-row>
        <!-- 上传弹窗 -->
        <el-dialog :close-on-click-modal="false" title="上传" :visible.sync="dialogVisible" width="25%">
            <el-form
                ref="dataForm"
                v-loading="formLoading"
                :model="temp"
                style="height: 200px"
                :inline="true"
                size="mini"
                label-position="right"
                label-width="80px"
            >
                <!-- <el-form-item label="文件名称">
                <el-input v-model="fileName"></el-input>
              </el-form-item> -->
                <el-form-item label="文件上传">
                    <el-upload
                        ref="upload"
                        class="upload-files"
                        action=""
                        :headers="headers"
                        name="file"
                        accept=".doc,.docx,.xls,.xlsx,.pdf,.txt"
                        multiple
                        :auto-upload="false"
                        :file-list="fileList"
                        :on-change="handleChange"
                        style="display: inline; float: right"
                    >
                        <el-button slot="trigger" size="mini" type="primary">选取文件</el-button>
                    </el-upload>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitUpload">保存</el-button>
                <el-button style="margin-right: 50px" @click="dialogVisible = false">取消</el-button>
            </div>
        </el-dialog>
        <!-- 导出弹窗 -->
        <el-dialog :close-on-click-modal="false" title="文件导出" :visible.sync="downLoad" width="30%">
            <el-table
                stripe
                :data="Downloaddata"
                :height="300"
                border
                style="width: 100%"
                v-loading="isLoading1"
                header-cell-class-name="table_header"
                :row-class-name="rowClassName"
            >
                <el-table-column label="序号" width="60" prop="number"></el-table-column>
                <el-table-column label="文件名称" prop="minFileName" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="minFileUrl" label="文件" :show-overflow-tooltip="true">
                    <template>
                        <i class="el-icon-document"></i>
                    </template>
                </el-table-column>
                <el-table-column prop="achieveMonitoring" label="操作">
                    <template slot-scope="scope">
                        <el-button type="primary" @click="downLownFn(scope.row)">文件下载</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- <div slot="footer" class="dialog-footer">
            <el-button type="primary" >
                确定
            </el-button>
            <el-button style="margin-right: 50px" @click="downLoad = false"> 取消</el-button>
        </div> -->
        </el-dialog>
    </div>
</template>

<script>
import Area from '@/views/components/Area/Area.vue'
import Timeinterval from '../../../components/Timeinterval.vue'
import File from './File.vue'
import {
    queryPlanResult,
    MultipartFile,
    surveyResultDownload
} from '@/api/Process-supervision/tiaoHarmonicmanagement/harmonicmanagement'
export default {
    components: { Area, Timeinterval, File },
    data() {
        return {
            vh: '',
            height: null,
            isLoading: false,
            isLoading1: false,
            dialogVisible: false,
            downLoad: false,
            item: ['', ''],
            // 查询数据
            ruleForm: {
                currentPage: 1,
                pageSize: 20,
                isFileUpload: '',
                planStartTime: '',
                planEndTime: '',
                orgNo: ''
            },
            //是否上传
            uploadData: [
                // {
                //     id:2,
                //     value:'选项1',
                //     label:'全部',
                // },
                {
                    id: 0,

                    label: '未上传'
                },
                {
                    id: 1,

                    label: '已上传'
                }
            ],
            resultsmanagementData: [],
            Downloaddata: [],
            multipleSelection: [],
            headers: {
                Authorization: window.sessionStorage.getItem('cntoken')
            },
            uploading: false,
            formLoading: false,
            dialogVisible: false,
            fileList: [],
            temp: {
                id: void 0,
                fileName: '',
                fileType: void 0
            },
            fileName: '',
            exportData: '',
            planNo: '',
            device: '',
            Documentname: '',
            timeOptions: [
                { label: '年份', value: 1 },
                { label: '季度', value: 2 },
                { label: '月份', value: 3 }
            ]
        }
    },
    created() {},
    mounted() {
        this.setHeight()
        window.addEventListener('resize', this.setHeight)
        this.device = window.devicePixelRatio

        this.ruleForm.orgNo = JSON.parse(window.sessionStorage.getItem('Info')).deptId
        this.onsubmit()
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.height = window.sessionStorage.getItem('appheight') - 215
        },
        handleChange(file, fileList) {
            // console.log(file, fileList);
            this.fileList = fileList
        },
        submitUpload() {
            const formData = new FormData()
            formData.append('planId', this.planNo)
            this.fileList.forEach(item => {
                formData.append('file', item.raw)
                // console.log(item.raw, item)
            })

            // console.log(this.fileList,'===============');
            // console.log(formData,'111111111111');
            MultipartFile(formData) //后端上传接口
                .then(res => {
                    //  console.log(res);
                    // this.$emit('added')
                    this.dialogVisible = false
                    this.onsubmit()
                })
                .catch(err => {
                    /// console.log(err);
                })
        },
        //查询
        onsubmit() {
            this.isLoading = true

            this.item = this.$refs.interval.timeValue
            this.ruleForm.planStartTime = this.item[0]
            this.ruleForm.planEndTime = this.item[1]
            queryPlanResult(this.ruleForm).then(res => {
                this.isLoading = false
                this.resultsmanagementData = res.data.records
            })
        },
        //上传
        uploadFn() {
            if (this.multipleSelection.length == 0 || this.multipleSelection.length > 1) {
                this.$message({
                    showClose: true,
                    message: '请选择1条数据!!!',
                    type: 'warning'
                })
                return
            } else {
                this.dialogVisible = true
                this.fileList = []
            }
            // this.$message({
            //     showClose: true,
            //     message: '上传成功！！！',
            //     type: 'success'
            //   });
        },
        // 切换选项
        handleNodeClick(data) {
            // console.log(data);
            this.ruleForm.orgNo = data.id
        },
        //勾选
        handleSelectionChange(val) {
            this.multipleSelection = val
            if (val != []) {
                this.planNo = this.multipleSelection[0].planNo
            }
            // this.multipleSelection.forEach(item=>{
            //   this.exportData.push(item.planNo)
            // })
        },
        //导出
        exportFn() {
            if (this.multipleSelection.length == 0 || this.multipleSelection.length > 1) {
                this.$message({
                    showClose: true,
                    message: '请选择1条数据!!!',
                    type: 'warning'
                })
                return
            } else {
                this.downLoad = true
                this.isLoading1 = true
                let form = {
                    planNo: this.planNo
                }
                surveyResultDownload(form).then(res => {
                    // debugger
                    // console.log(res);
                    this.isLoading1 = false
                    this.Downloaddata = res.data
                    //     let blob = new Blob([res], {
                    //       type: "application/vnd.ms-excel",
                    //     });
                    //     const url = window.URL.createObjectURL(blob);
                    //     const link = document.createElement("a"); // 创建a标签
                    //     link.href = url; // link.download = "电压暂降事件分析报告"; // 设置下载的文件名
                    //     link.download = "普测计划信息.xls"; // 设置下载的文件名
                    //     document.body.appendChild(link);
                    //     link.click(); //执行下载
                    //     document.body.removeChild(link);
                })
            }
        },
        //下载
        downLownFn(row) {
            this.downLoad = false
            const downloadRes = async () => {
                let response = await fetch(row.minFileUrl)
                let blob = await response.blob()
                let objectUrl = window.URL.createObjectURL(blob)
                let a = document.createElement('a')
                a.href = objectUrl
                a.download = ''
                a.click()
                a.remove()
            }
            downloadRes()
        },
        //重置
        Reset() {
            this.$refs.area.form.valueTitle = JSON.parse(window.sessionStorage.getItem('Info')).deptName
            this.ruleForm.orgNo = JSON.parse(window.sessionStorage.getItem('Info')).deptId
            this.$refs.interval.intervald = 3
            this.ruleForm.isFileUpload = 0
        },
        //每页条数改变时触发 选择一页显示多少行
        handleSizeChange(val) {
            this.ruleForm.pageSize = val
            this.onSubmit()
        },
        //当前页改变时触发 跳转其他页
        handleCurrentChange(val) {
            this.ruleForm.currentPage = val
            this.onSubmit()
        },
        //序号
        rowClassName({ row, rowIndex }) {
            row.number = rowIndex + 1
        },
        //判断颜色
        cellStyle(row) {
            if (row.row.isFileUpload == 0) {
                if (row.columnIndex == 9 || row.columnIndex == 10) {
                    return 'color:blue;'
                }
            }
            if (row.row.isFileUpload == 1) {
                if (row.columnIndex == 9 || row.columnIndex == 10) {
                    return 'color:red;'
                }
            }
        }
    }
}
</script>
<style lang="less" scoped>
@import url('../../../../styles/comStyle.less');
::v-deep .el-table .cell {
    text-align: center;
}
::v-deep .el-tabs--border-card > .el-tabs__content {
    padding: 10px;
}
::v-deep .form {
    .el-form-item {
        margin-bottom: 0;
    }
}
.button {
    float: right;
    margin-right: 5px;
}
</style>
