<template>
    <div>
        <!-- 上传 -->
        <el-dialog
            :close-on-click-modal="false"
            :title="title"
            :visible.sync="dialogVisible"
            :before-close="handleClose"
            width="70%"
        >
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="监督单详情" name="first">
                    <el-button
                        style="margin-bottom: 10px"
                        type="primary"
                        size="mini"
                        icon="el-icon-download"
                        @click="exportEvent"
                    >
                        导出
                    </el-button>
                    <el-button
                        style="margin-bottom: 10px"
                        type="primary"
                        size="mini"
                        icon="el-icon-download"
                        v-if="!(title == '预/告警单详情' || title == '通知单详情')"
                        @click="download"
                    >
                        批量下载文件
                    </el-button>
                    <span :style="`color:#f58003`">　　(*默认全部,可勾选自己需要的监测点进行导出或下载!)</span>

                    <div :style="`color:${WordColor}`">
                        事务名称:{{ thsSupervise.name }}　　　　 创建时间:{{ thsSupervise.createTime }}
                    </div>

                    <!-- <el-form :model="form" :inline="true" class="demo-form-inline">
            <el-form-item>
              <Area @click="handleNodeClick"></Area>
            </el-form-item>
            <el-form-item>
              <Timeinterval :interval="3" ref="interval"></Timeinterval>
            </el-form-item>
            <el-form-item label="筛选数据:">
              <el-input
                v-model="form.value"
                placeholder="请输入需要筛选的数据"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item label="反馈类型:">
              <el-select v-model="form.region" placeholder="请选择反馈类型">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="small" icon="el-icon-search"
                >查询</el-button
              >
            </el-form-item>
          </el-form> -->
                    <vxe-table
                        :data="tableList"
                        border
                        :row-config="{ isCurrent: true, isHover: true }"
                        size="mini"
                        ref="Monitoringpoint"
                        header-cell-class-name="table_header"
                        height="500px"
                        style="width: 100%"
                    >
                        <vxe-table-column align="center" type="checkbox" width="55" />
                        <template v-for="(item, index) in warningList">
                            <vxe-table-column
                                align="center"
                                :show-overflow="true"
                                :field="item.prop"
                                :title="item.label"
                                :min-width="item.width"
                                :key="index"
                            ></vxe-table-column>
                        </template>
                        <vxe-table-column
                            v-if="!(title == '预/告警单详情' || title == '通知单详情')"
                            title="文件"
                            align="center"
                            min-width="180"
                            :show-overflow="true"
                        >
                            <template #default="{ row }">
                                <a
                                    class="formatterButton"
                                    :href="
                                        title == '反馈单详情'
                                            ? row.feedback
                                            : title == '报告详情'
                                            ? row.testReport
                                            : title == '通知反馈单详情'
                                            ? row.reviseFeedback
                                            : ''
                                    "
                                >
                                    {{
                                        title == '反馈单详情'
                                            ? row.feedback
                                            : title == '报告详情'
                                            ? row.testReport
                                            : title == '通知反馈单详情'
                                            ? row.reviseFeedback
                                            : ''
                                    }}
                                </a>
                            </template>
                        </vxe-table-column>
                        <vxe-column
                            v-if="title == '预/告警单详情' || title == '通知单详情'"
                            title="操作"
                            align="center"
                            width="210"
                        >
                            <template #default="{ row }">
                                <el-button size="mini" type="primary" icon="el-icon-view" @click="ViewReport(row, 1)">
                                    趋势图
                                </el-button>
                                <el-button size="mini" @click="ViewReport(row, 0)" type="primary" icon="el-icon-view">
                                    日报
                                </el-button>
                            </template>
                        </vxe-column>
                    </vxe-table>
                </el-tab-pane>
                <el-tab-pane label="流程图详情" name="second">
                    <div>
                        <flow-view ref="flow" :flowData="flowData" />
                    </div>
                </el-tab-pane>
            </el-tabs>
            <!-- <el-pagination
          background
          align="right"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[20, 30, 40, 50, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          class="mt10"
        >
        </el-pagination> -->
            <!-- <span slot="footer" class="dialog-footer">
          <el-button @click="handleClose">取 消</el-button>
          <el-button type="primary" @click="handleClose">确 定</el-button>
        </span> -->
        </el-dialog>
    </div>
</template>
<script>
import Timeinterval from '@/views/components/Timeinterval.vue'
import Area from '@/views/components/Area/Area.vue'
import { superviseDetail, downloadFeedBackFile } from '@/api/Processsupervision/technology.js'
import FlowView from '@/views/flowable/flowview.vue'
import { flowXmlAndNode } from '@/api/flowable/definition'
export default {
    components: { Timeinterval, Area, FlowView },
    props: {
        title: {
            type: String
        },
        rowList: {
            type: [Array, Object]
        }
    },
    data() {
        return {
            activeName: 'first',
            // 模型xml数据
            flowData: {},
            titles: '',
            form: {},
            WordColor: JSON.parse(window.localStorage.echartsColor).WordColor,
            dialogVisible: true,
            pageNum: 1,
            pageSize: 20,
            total: 1,
            tableList: [],
            warningList: [
                { prop: 'companyName', label: '供电公司', width: 100 },
                { prop: 'name', label: '变电站', width: 100 },
                { prop: 'lineIndexName', label: '监测点', width: 100 },
                { prop: 'overTime', label: '越限次数', width: 100 },

                { prop: 'description', label: '描述', width: 200 }
            ],
            options: [],
            thsSupervise: {}
        }
    },
    created() {},
    mounted() {
        this.titles = this.title
        this.onSubmit()
    },
    methods: {
        handleClick(tab, event) {
            if (this.activeName == 'second') {
                flowXmlAndNode({
                    procInsId: this.rowList.execId,
                    deployId: this.rowList.deploymentId
                }).then(res => {
                    this.flowData = res.data
                })
            }
        },
        onSubmit() {
            superviseDetail({ supIndex: this.rowList.supIndex }).then(res => {
                this.tableList = res.data.overRunLog
                this.thsSupervise = res.data.thsSupervise
            })
        },
        // handleNodeClick(data) {
        //   // this.id = data.id;
        // },
        handleClose() {
            this.$emit('handleClose')
        },
        handleSizeChange(e) {
            this.pageSize = e
        },
        handleCurrentChange(e) {
            this.pageNum = e
        },

        //导出
        exportEvent() {
            this.$refs.Monitoringpoint.exportData({
                filename: 'export', // 文件名字
                sheetName: 'Sheet1',
                type: 'xlsx', //导出文件类型 xlsx 和 csv
                useStyle: true,
                data:
                    this.$refs.Monitoringpoint.getCheckboxRecords().length == 0
                        ? this.tableList
                        : this.$refs.Monitoringpoint.getCheckboxRecords(), // 数据源 // 过滤那个字段导出 //
                columnFilterMethod: function (column, $columnIndex) {
                    return !(column.$columnIndex === 6 || column.$columnIndex === 0)
                }
            })
        },
        // 批量下载文件
        download() {
            let data = {
                ids: [],
                ticketType:
                    this.title == '反馈单详情'
                        ? 1
                        : this.title == '报告详情'
                        ? 2
                        : this.title == '通知反馈单详情'
                        ? 3
                        : ''
            }
            if (this.$refs.Monitoringpoint.getCheckboxRecords().length == 0) {
                this.tableList.forEach(item => {
                    data.ids.push(item.id)
                })
            } else {
                this.$refs.Monitoringpoint.getCheckboxRecords().forEach(item => {
                    data.ids.push(item.id)
                })
            }
            downloadFeedBackFile(data).then(response => {
                //console.log(res)
                let blob = new Blob([response], { type: 'application/zip' }) // console.log(blob) // var href = window.URL.createObjectURL(blob); //创建下载的链接
                const url = window.URL.createObjectURL(blob)
                const link = document.createElement('a') // 创建a标签
                link.href = url
                link.download = '监测点文件' // 设置下载的文件名
                document.body.appendChild(link)
                link.click() //执行下载
                document.body.removeChild(link) //释放标签
            })
        },
        // 查看趋势图
        ViewReport(row, val) {
            this.$emit('ViewReport', row.id, val)
        }
    },

    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>
