<template>
    <div class="smart-report-list">
        <el-card class="box-card">
            <div slot="header" class="header">
                <el-form :inline="true" :model="searchform" @submit.native.prevent style="display:flex;">
                <el-form-item label="">
                    <el-button
                        v-permission="permissionBtn.smartReportManageBtn.reportManage_reportAdd"
                        type="primary"
                        size="medium"
                        @click="showAddReport=true"
                    >添加研报</el-button>
                </el-form-item>
                <!-- 整合的筛选项 -->
                <el-form-item label="">
                    <el-popover 
                        placement="bottom" 
                        trigger="click" 
                        :visible-arrow="false"
                        popper-class="report-select-popover"
                        width="320" style="display: inline-block;">
                        <div class="select-wrap">
                            <p>筛选项</p>
                            <div class="select-item">
                                <el-select
                                    v-model="searchform.timeType"
                                    placeholder="选择时间类型"
                                    size="medium"
                                    style="width:100%"
                                    @change="search"
                                    >
                                    <el-option label="发布时间" value="publish_time"></el-option>
                                    <el-option label="审批时间" value="approve_time"></el-option>
                                    <el-option label="更新时间" value="modify_time"></el-option>
                                </el-select>
                            </div>
                            <div class="select-item">
                                <el-select
                                    @change="search"
                                    v-model="searchform.frequency"
                                    placeholder="更新频度筛选"
                                    size="medium"
                                    clearable
                                    style="width:100%"
                                >
                                    <el-option label="年度" value="年度"></el-option>
                                    <el-option label="半年度" value="半年度"></el-option>
                                    <el-option label="季度" value="季度"></el-option>
                                    <el-option label="月度" value="月度"></el-option>
                                    <el-option label="双周度" value="双周度"></el-option>
                                    <el-option label="周度" value="周度"></el-option>
                                    <el-option label="日度" value="日度"></el-option>
                                    <el-option label="不定时" value="不定时"></el-option>
                                </el-select>
                            </div>
                            <div class="select-item">
                                <el-cascader
                                    @change="search"
                                    :options="optionsArr"
                                    v-model="searchform.classifynameArr"
                                    clearable
                                    placeholder="类型筛选"
                                    style="width:100%;"
                                />
                            </div>
                            <div class="select-item">
                                <el-select
                                    v-model.number="searchform.publishState"
                                    placeholder="状态筛选"
                                    size="medium"
                                    clearable
                                    style="width:100%;"
                                    @change="search"
                                >
                                    <el-option label="未发布" :value="1" v-if="!isOtherApprove"></el-option>
                                    <el-option label="已发布" :value="2"></el-option>
                                    <el-option label="待提交" :value="3" v-if="isApprove"></el-option>
                                    <el-option label="待审批" :value="4" v-if="isApprove"></el-option>
                                    <el-option label="已驳回" :value="5"></el-option>
                                    <el-option label="已通过" :value="6"></el-option>
                                </el-select>
                            </div>
                        </div>
                        <div class="select-btn" slot="reference">
                            <img src="~@/assets/icons/filter.svg">
                            <span>筛选条件</span>
                            <span class="select-num">+{{selectNum}}</span>
                        </div>
                    </el-popover>
                </el-form-item>
                <el-form-item label="">
                    <el-date-picker
                        @change="search"
                        v-model="searchform.dateValue"
                        type="daterange"
                        unlink-panels
                        value-format="yyyy-MM-dd"
                        range-separator="至"
                        start-placeholder="起始日期"
                        end-placeholder="结束日期"
                        size="medium"
                        style="width: 280px"
                    />
                </el-form-item>
                <el-form-item style="flex:1;text-align:right;">
                    <el-input
                        @input="search"
                        placeholder="标题 / 创建人 / 更新人"
                        v-model="searchform.key_word"
                        clearable
                        size="medium"
                    >
                        <i class="el-icon-search" slot="prefix" @click="search"></i>
                    </el-input>
                </el-form-item>
                </el-form>
            </div>
            <template>
                <el-table
                    ref="table"
                    :key="tableKey"
                    :data="tableData"
                    v-loading="listLoading"
                    @sort-change="sortChange"
                    element-loading-text="数据加载中..."
                    border
                    style="width: 100%"
                >
                <el-table-column
                    prop="Title"
                    label="报告标题"
                    align="center"
                    min-width="140"
                    fixed
                >
                    <template slot-scope="scope">
                    <div @click="lookreportdtl(scope.row)">
                        <span style="cursor: pointer; color: #4099ef" >{{ scope.row.Title }}</span>
                        <span
                            style="cursor: pointer; color: #4099ef"
                            v-if="scope.row.MsgSendTime"
                        >({{ scope.row.MsgSendTime.substring(5, 7)}}{{ scope.row.MsgSendTime.substring(8, 10) }})</span>
                        <span
                        style="cursor: pointer; color: #4099ef"
                        v-else-if="scope.row.PublishTime"
                        >({{ scope.row.PublishTime.substring(5, 7)
                        }}{{ scope.row.PublishTime.substring(8, 10) }})</span
                        >
                        <span
                        style="cursor: pointer; color: #4099ef"
                        v-else-if="scope.row.CreateTime"
                        >({{ scope.row.CreateTime.substring(5, 7)
                        }}{{ scope.row.CreateTime.substring(8, 10) }})</span
                        >

                    </div>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="Abstract"
                    label="摘要"
                    align="center"
                    min-width="140"
                    fixed
                ></el-table-column>
                <el-table-column label="报告类型" align="center" min-width="140">
                    <template slot-scope="scope"
                    >{{ scope.row.ClassifyNameFirst }}
                    <span v-if="scope.row.ClassifyNameSecond"
                        >/ {{ scope.row.ClassifyNameSecond }}</span
                    ></template
                    >
                </el-table-column>
                <el-table-column
                    prop="AdminRealName"
                    label="创建人"
                    align="center"
                    min-width="100"
                ></el-table-column>
                <el-table-column
                    prop="LastModifyAdminName"
                    label="更新人"
                    align="center"
                    min-width="100"
                ></el-table-column>
                <el-table-column label="状态" align="center">
                    <template slot-scope="scope">
                        <span v-if="scope.row.State == '1'">未发布</span>
                        <span v-if="scope.row.State == '2'">已发布</span>
                        <span v-if="scope.row.State == '3'">待提交</span>
                        <span v-if="scope.row.State == '4'">待审批</span>
                        <span v-if="scope.row.State == '5'">已驳回</span>
                        <span v-if="scope.row.State == '6'">已通过</span>
                    </template>
                </el-table-column>
                <!-- <el-table-column v-if="!isApprove"
                    prop="PublishTime"
                    label="发布时间"
                    min-width="124"
                    align="center"
                    :formatter="formatterColumn"
                >
                    <template slot-scope="scope">
                    <span>{{scope.row.PrePublishTime?scope.row.PrePublishTime:scope.row.PublishTime|formatTime}}</span>
                    <svg style="position: relative;top:2px" v-if="scope.row.PrePublishTime&&scope.row.State == '1'" width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M15.2002 8C15.2002 4.13401 12.0662 1 8.20019 1C4.3342 1 1.20019 4.13401 1.2002 8C1.2002 11.866 4.3342 15 8.2002 15C12.0662 15 15.2002 11.866 15.2002 8ZM5.2002 10L5.2002 9L8.17491 9L11.2002 4.5L11.9073 5.20711L8.58912 10L5.2002 10Z" fill="#0052D9"/>
                    </svg>
                    </template>
                </el-table-column>
                <el-table-column
                    v-if="isApprove"
                    prop="ApproveTime"
                    label="审批时间"
                    min-width="124"
                    align="center"
                    :formatter="formatterColumn"
                >
                    <template slot-scope="scope">
                        <span>{{scope.row.ApproveTime|formatTime}}</span>
                    </template>
                </el-table-column> -->
                <el-table-column prop="PublishTime" label="发布/审批时间" min-width="124" align="center">
                <template slot-scope="scope">
                    <template v-if="[1,2].includes(scope.row.State)">
                        <span>{{scope.row.PrePublishTime?scope.row.PrePublishTime:scope.row.PublishTime|formatTime}}</span>
                        <svg style="position: relative;top:2px" v-if="scope.row.PrePublishTime&&scope.row.State == '1'" width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M15.2002 8C15.2002 4.13401 12.0662 1 8.20019 1C4.3342 1 1.20019 4.13401 1.2002 8C1.2002 11.866 4.3342 15 8.2002 15C12.0662 15 15.2002 11.866 15.2002 8ZM5.2002 10L5.2002 9L8.17491 9L11.2002 4.5L11.9073 5.20711L8.58912 10L5.2002 10Z" fill="#0052D9"/>
                        </svg>
                    </template>
                    <template v-else>
                        <span>{{scope.row.ApproveTime|formatTime}}</span>
                    </template>
                </template>
            </el-table-column>
                <el-table-column
                    prop="ContentModifyTime"
                    label="更新时间"
                    min-width="124"
                    align="center"
                    :formatter="formatterColumn"
                ></el-table-column>
                <el-table-column label="期数" align="center">
                    <template slot-scope="scope">第{{ scope.row.Stage }}期</template>
                </el-table-column>
                <el-table-column label="频度" align="center">
                    <template slot-scope="scope">{{ scope.row.Frequency }}</template>
                </el-table-column>
                <el-table-column
                    :label="hasUV?'PV / UV':'PV'"
                    align="center"
                    :render-header="renderHeader"
                    width="140"
                >
                    <template slot-scope="scope"
                    >{{ hasUV? scope.row.Pv+'/'+scope.row.Uv:scope.row.Pv }}</template
                    >
                </el-table-column>
                <el-table-column label="操作" align="center" min-width="130" fixed="right">
                    <template slot-scope="scope">
                    <div class="opt-btns">
                        <!-- 操作：
                            已发布——取消发布、下载图片
                            未发布——发布、编辑、删除
                            待提交——提交、编辑、删除
                            待审批——撤销
                            已通过——撤销、下载图片、
                            已驳回——撤销 -->
                        <!-- 未发布,待提交 -->
                        <template v-if="[1,3].includes(scope.row.State)">
                            <span v-permission="permissionBtn.smartReportManageBtn.reportManage_publish"
                                class="editsty" @click="handlePublishReportOpt(scope.row)"
                                v-if="scope.row.CanEdit&&scope.row.State===1">发布</span>
                            <span v-permission="permissionBtn.smartReportManageBtn.reportManage_publish"
                                class="editsty" @click="handleSubmitReport(scope.row)"
                                v-if="scope.row.CanEdit&&scope.row.State===3">提交</span>
                            <span v-permission="permissionBtn.smartReportManageBtn.reportManage_reportEdit"
                                class="editsty" @click="editreport(scope.row, 'edit')"
                                v-if="scope.row.CanEdit">编辑</span>
                            <span v-permission="permissionBtn.smartReportManageBtn.reportManage_reportEdit"
                                class="editsty" @click="editreport(scope.row, 'editing')"
                                v-else>{{ scope.row.Editor || "" }}编辑中...</span>
                            <span v-permission="permissionBtn.smartReportManageBtn.reportManage_reportDel"
                                class="deletesty" @click="handleDelReport(scope.row)"
                                v-if="scope.row.CanEdit">删除</span>
                        </template>
                        <!-- 已发布,已通过 -->
                        <template v-if="[2,6].includes(scope.row.State)">
                            <span v-if="permissionBtn.isShowBtn('smartReportManageBtn','reportManage_cancelPublish')&&scope.row.State===2"
                                @click="handleReportPublishCancel(scope.row)"
                                style="color: red; cursor: pointer">撤销</span><!-- 取消发布 -->
                            <span v-if="permissionBtn.isShowBtn('smartReportManageBtn','reportManage_cancelPublish')&&scope.row.State===6"
                                @click="cancelReport(scope.row)"
                                style="color: red; cursor: pointer">撤销</span>
                            <span v-if="scope.row.DetailImgUrl"
                                v-permission="permissionBtn.smartReportManageBtn.reportManage_reportView_exportImg"
                                @click="handleDownReportImg(scope.row.DetailImgUrl,scope.row.Title)"
                                style="cursor: pointer; color: #4099ef;display:inline-block">图片下载</span>
                        </template>
                        <!-- 待审批,已驳回 -->
                        <template v-if="[4,5].includes(scope.row.State)">
                            <span v-if="permissionBtn.isShowBtn('smartReportManageBtn','reportManage_cancelPublish')"
                                @click="cancelReport(scope.row)"
                                style="color: red; cursor: pointer">撤销</span>
                        </template>
                        <!-- 音频上传、下载，与状态无关 -->
                        <span style="color: #46c371; cursor: pointer;display:inline-block"
                            v-if="permissionBtn.checkPermissionBtn(permissionBtn.smartReportManageBtn.reportManage_audioUpload)"
                            @click="openupload(scope.row.SmartReportId)">音频上传</span>
                        <span style="cursor: pointer; color: #4099ef;display:inline-block"
                            v-permission="permissionBtn.smartReportManageBtn.reportManage_audioDownload"
                            v-if="scope.row.VideoUrl" @click="handleDownloadVoice(scope.row)">
                            音频下载
                        </span>
                    </div>
                    </template>
                </el-table-column>
                </el-table>
            </template>
            <el-col :span="24" class="toolbar">
                <el-pagination
                    v-if="ispage"
                    layout="total,prev,pager,next,jumper"
                    background
                    @current-change="handleCurrentChange"
                    :page-size="pageSize"
                    @size-change="handleSizeChange"
                    :total="total"
                    style="float: right"
                />
            </el-col>
        </el-card>
        <!-- 上传音频弹框 -->
        <el-dialog
            title="上传音频"
            :visible.sync="uploadDialog"
            :modal-append-to-body="false"
            :close-on-click-modal="false"
            :center="true"
            v-dialogDrag
            custom-class="dialogclass"
            width="510px"
        >
            <div slot="title" style="display: flex; align-items: center">
                <img
                :src="$icons.up"
                style="color: #fff; width: 16px; height: 16px; margin-right: 5px"
                />
                <span style="font-size: 16px">上传音频</span>
            </div>
            <el-form
                :model="uploadForm"
                ref="uploadForm"
                label-position="right"
                label-width="0px"
                @submit.native.prevent
            >
                <el-form-item label="">
                <input
                    type="file"
                    name="file"
                    @change="fileSelected()"
                    id="file"
                    class="true-file"
                    style="display: none"
                />
                <el-input
                    type="text"
                    v-model="uploadForm.audioname"
                    readonly
                    placeholder="上传报告录音"
                    size="medium"
                    style="width: 350px"
                ></el-input>
                <el-button type="primary" size="medium" @click.native="clickinput"
                    >选择文件</el-button
                >
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer" style="text-align: center">
                <el-button
                type="primary"
                plain
                size="medium"
                @click.native="uploadDialog = false"
                >取 消</el-button
                >
                <el-button
                type="primary"
                size="medium"
                :loading="uploadloading"
                @click.native="uploadaudio"
                >{{ uploadloading ? "上传中" : "上 传" }}</el-button
                >
            </div>
        </el-dialog>

        <!-- 新增报告基础信息 -->
        <BaseInfo v-model="showAddReport" :id="0" />

        <!-- 发布弹窗（改掉了不用这个弹窗了但是先留着吧） -->
        <el-dialog
            title="发布提示"
            :visible.sync="showPublish"
            :modal-append-to-body="false"
            :close-on-click-modal="false"
            :center="true"
            v-dialogDrag
            custom-class="dialogclass"
            width="510px"
            @close="handleClosePublish"
        >
            <div>
                <div style="height: 100px; padding-top: 40px">
                    <i
                        class="el-icon-warning"
                        style="font-size: 24px; color: #e6a23c; vertical-align: middle"
                    ></i>
                    {{isDSFB?'该报告已设置定时发布，是否立即发布报告？':'是否立即发布报告？'}}
                </div>
                <div style="margin-bottom: 20px; text-align: center">
                    <el-button
                        type="primary"
                        plain
                        style="width: 100px"
                        @click="handleClosePublish"
                        >取消</el-button
                    >
                    <el-button
                        type="primary"
                        style="width: 100px; margin: 0 20px"
                        @click="handleConfirmPublishReport"
                        >发布</el-button
                    >
                </div>
            </div>
        </el-dialog>

        <!-- 报告图片 -->
        <div class="report-img-box" v-if="showReportImg&&reportImgUrl" @click="showReportImg=false">
            <img :src="reportImgUrl" alt="" @click.stop="">
        </div>
    </div>
</template>

<script>
import { voiceupload } from "api/api.js";
import {apiSmartReport}  from '@/api/modules/smartReport'
import {approveInterence} from '@/api/modules/approve.js';
import reportApproveConfig from "@/mixins/reportApproveConfig.js"
import BaseInfo from './components/BaseInfo.vue'
export default {
    mixins:[reportApproveConfig],
    components:{BaseInfo},
    computed:{
        Role() {
            let role = localStorage.getItem("Role") || "";
            return role;
        },
        //是否有UV
        hasUV(){
            return this.permissionBtn.checkPermissionBtn(this.permissionBtn.smartReportManageBtn.reportManage_reportList_uv)
        },
    },
    data() {
        return {
            hostapi: process.env.VUE_APP_API_ROOT + "/voice/download",
            searchform: {
                timeType:'publish_time',
                dateValue: "",
                frequency: "",
                classifynameArr: "",
                state: "",
                key_word: "",
                publish_sort: "desc",
                msgIsSend: "",
                publishState:'',
            },
            tableKey:0,
            tableData:[],
            PageIndex: 1,
            total: 0,
            pageSize: 15,
            ispage: true,
            listLoading: false,
            optionsArr: [],//分类数据

            uploadDialog: false,
            uploadForm: {
                id: "",
                formdata: null,
                audioname: "",
            },
            uploadloading: false,

            showAddReport:false,

            showPublish:false,
            activeReportId:0,
            isDSFB:false,

            reportImgUrl:'',
            showReportImg:false,
            selectNum:1
        }
    },
    methods:{
        // 下载报告图片
        handleDownReportImg(imgUrl,title){
            let img=new Image()
            img.setAttribute('crossOrigin', 'anonymous');
            img.src=imgUrl
            img.onload=()=>{
                let canvas = document.createElement("canvas");
                canvas.width = img.width;
                canvas.height = img.height;
                let context = canvas.getContext('2d');
                context.drawImage(img, 0, 0, img.width, img.height);
                let dataURL = canvas.toDataURL("image/png", 1);
                const a=document.createElement('a')
                a.setAttribute("download",title)
                a.style.display = "none"
                a.href=dataURL
                document.body.appendChild(a);
                a.click()
            }
            img.onerror=(e)=>{
                console.log(e);
                this.$message.warning("自动下载图片失败，请手动保存")
                if(imgUrl){
                    this.reportImgUrl=imgUrl
                    this.showReportImg=true
                }
            }
        },

        // 删除某个报告
        handleDelReport(item){
            //删除
            this.$confirm("确认删除吗?", "提示", {
                type: "warning",
            }).then(() => {
                apiSmartReport.delReport({ SmartReportId: item.SmartReportId }).then((res) => {
                    if (res.Ret === 200) {
                        this.$message.success(res.Msg);
                        this.getReportList();
                    }
                });
            }).catch(() => {});
        },

        //取消发布
        handleReportPublishCancel(item){
            apiSmartReport.publishReport({ SmartReportId: item.SmartReportId,PublishState:1 }).then((res) => {
                if (res.Ret === 200) {
                    this.$message.success(res.Msg);
                    this.getReportList();
                }
            });
        },

        // 发布报告
        handlePublishReportOpt(item){
            this.activeReportId=item.SmartReportId
            // this.isDSFB=item.PrePublishTime?true:false
            // this.showPublish=true
            if(this.isApprove){
                this.handleConfirmPublishReport()
                return
            }
            this.$confirm(
                item.PrePublishTime?'该报告已设置定时发布，是否立即发布报告？':'是否立即发布报告？', 
                '发布提示', 
                {
                    confirmButtonText: '发布',
                    cancelButtonText: '取消',
                    type: 'warning',
                    distinguishCancelAndClose:true,
                    beforeClose:(action, instance,done)=>{
                        if(action==='close') {
                            //右上角
                        } else if(action==='cancel') {
                            //cancelButton
                                
                        }else {
                            //confirmButton
                            this.handleConfirmPublishReport()
                        }
                        done()
                    }
                }
            )
        },
        handleConfirmPublishReport(){
            apiSmartReport.publishReport({ SmartReportId: this.activeReportId,PublishState:2 }).then((res) => {
                if (res.Ret === 200) {
                    this.$message.success(res.Msg);
                    this.getReportList();
                    this.handleClosePublish()
                }
            });
        },
        handleClosePublish(){
            this.activeReportId=0
            this.isDSFB=false
            this.showPublish=false
        },
        //提交报告
        handleSubmitReport(item){
            this.$confirm("是否确认提交该报告进入审批流程?","提示",{
                confirmButtonText:'确定',
                cancelButtonText:'取消',
                type:'warning',
            }).then(()=>{
                approveInterence.reportSmartSubmit({
                    ReportId:Number(item.SmartReportId)
                }).then(res=>{
                    if(res.Ret!==200) return 
                    this.$message.success("提交成功")
                    this.getReportList()
                })
            })
        },
        cancelReport(item){
            this.$confirm("确定要撤销审批吗?","提示",{
                confirmButtonText:'确定',
                cancelButtonText:'取消',
                type:'warning',
            }).then(()=>{
                approveInterence.reportSmartCancel({
                    ReportId:Number(item.SmartReportId)
                }).then(res=>{
                    if(res.Ret!==200) return 
                    this.$message.success("撤销成功")
                    this.getReportList()
                })
            })
        },

        //编辑报告
        async editreport(item, type){
            //编辑前标记一下
            const res = await apiSmartReport.markReport({
                Status: 1,
                SmartReportId: item.SmartReportId,
            });
            if (res.Ret === 200) {
                if (res.Data.Status == 1) {
                    this.$message.warning(res.Data.Msg || "该研报正在编辑，不可重复编辑");
                    item.CanEdit = false;
                    item.Editor = res.Data.Editor || "";
                    return;
                } else if (res.Data.Status == 0) {
                    item.CanEdit = true;
                    item.Editor = res.Data.Editor || "";
                }
            } else {
                this.$message.error(res.ErrMsg || "未知错误，请稍后重试");
                return;
            }
            let { href } = this.$router.resolve({
                path: "/smartReportEdit",
                query: { id: item.SmartReportId },
            });
            window.open(href, "_blank");
        },

        // 推送消息
        // async handleSendMsg(item){
        //     const res = await apiSmartReport.reportMsgSend({
        //         SmartReportId: [item.Id],
        //     });
        //     if (res.Ret == 200) {
        //         item.ThsMsgIsSend = 1;
        //         this.$message.success("发送成功");
        //     }
        // },

        // 跳转报告详情
        lookreportdtl(item){
            //如果没有预览权限，就不跳转
            if(!this.permissionBtn.checkPermissionBtn(this.permissionBtn.smartReportManageBtn.reportManage_reportView)) return
            
            let { href } = this.$router.resolve({ 
                path: '/smartReportDetail',
                query:{
                    id:item.SmartReportId,
                    code:item.ReportCode
                }
            });
            window.open(href, "_blank");
        },

        // 报告列表
        async getReportList(){
            let params = {
                CurrentIndex: this.PageIndex,
                PageSize: this.pageSize,
                Frequency: this.searchform.frequency,
                ClassifyIdFirst: this.searchform.classifynameArr[0]?this.searchform.classifynameArr[0]:'',
                ClassifyIdSecond:this.searchform.classifynameArr[1]?this.searchform.classifynameArr[1]:'',
                Keyword: this.searchform.key_word,
                State:this.searchform.publishState,
                TimeType:this.searchform.timeType,
            };
            if (this.searchform.dateValue) {
                params.StartDate = this.searchform.dateValue[0];
                params.EndDate = this.searchform.dateValue[1];
            }
            this.listLoading = true;
            const res=await apiSmartReport.reportList(params)
            if (res.Ret === 200) {
                this.tableData = res.Data.List || [];
                this.tableKey++
                this.total = parseInt(res.Data.Paging.Totals);
            }
            this.listLoading = false;
        },

        //分页页码跳转
        handleCurrentChange(current) {
            this.PageIndex = current;
            this.getReportList();
        },

        //搜索
        search() {
            this.ispage = false;
            this.selectNum = 1;
            //检测筛选项的值,更新selectNum;
            //frequency:string;classifynameArr:array;publishState:number;
            ['frequency','classifynameArr','publishState'].forEach(key=>{
                const keyType = typeof(this.searchform[key])
                if(this.searchform[key]&&keyType!=='object')
                    this.selectNum++;
                if(keyType==='object'&&this.searchform[key].length>0)
                    this.selectNum++;
            })

            this.$nextTick(() => {
                this.PageIndex = 1;
                this.getReportList();
                this.ispage = true;
            });
        },

        //分页页码改变
        handleSizeChange(val) {
            this.pageSize = val;
            this.getlist();
        },

        renderHeader(h, { column, $index }) {
            //table表头自定义
            return h("div", { attrs: { style: "padding:0;" } }, [
                h("span", column.label),
                h("el-tooltip", { props: { placement: "top" } }, [
                h(
                    "p",
                    {
                    slot: "content",
                    attrs: { style: "display:block;padding:5px 0;width:420px;" },
                    },
                    "pv：报告被打开的次数，每次打开都计算一次（只统计有权限用户）"
                ),
                this.hasUV?h(
                    "p",
                    {
                    slot: "content",
                    attrs: { style: "display:block;padding:5px 0;width:420px;" },
                    },
                    "uv：访问报告的人数，每篇报告同一个人访问只计算一次（只统计有权限用户）"
                ):h(''),
                h(
                    "el-button",
                    {
                    props: { icon: "el-icon-info" },
                    attrs: { style: "border:none;background:none" },
                    },
                    ""
                ),
                ]),
            ]);
        },

        //报告类型
        getclassifylist() {
            //获取分类列表
            let params = { CurrentIndex: 0, PageSize: 1000, KeyWord: "",HideDayWeek:1,/*不显示晨报/周报*/ };
            apiSmartReport.classifyList(params).then((res) => {
                if (res.Ret == 200 && Array.isArray(res.Data.List)) {
                    this.optionsArr = [];
                    res.Data.List.forEach((item, index) => {
                        let newitem = {
                            label: item.ClassifyName,
                            value: item.Id,
                        };
                        if (item.Child) {
                            let childnode = [];
                            item.Child.forEach((itemchild, i) => {
                                childnode.push({
                                    label: itemchild.ClassifyName,
                                    value: itemchild.Id,
                                });
                            });
                            newitem.children = childnode;
                        }
                        this.optionsArr.push(newitem);
                    });
                }
            });
        },

        //唤醒上传弹窗
        openupload(id) {
            this.uploadForm = { id: id, formdata: null, audioname: "" };
            this.uploadDialog = true;
        },
        //上传模拟点击
        clickinput() {
            $("#file").click();
        },
        //选择文件上传
        fileSelected() {
            const that = this;
            if (document.getElementById("file").files[0]) {
                let hostfile = document.getElementById("file").files[0];
                let size = Math.floor(hostfile.size / 1024 / 1024);
                if (size > 200) {
                    that.$message.error("上传文件大小不能大于200M！");
                    hostfile = {};
                    return false;
                }
                if (
                    hostfile.name.includes(".mp3") ||
                    hostfile.name.includes(".wav") ||
                    hostfile.name.includes(".wma")
                ) {
                let form = new FormData();
                form.append("file", hostfile); //hostfile.name
                form.append("SmartReportId", this.uploadForm.id);
                    this.uploadForm.formdata = form;
                    this.uploadForm.audioname = hostfile.name;
                } else {
                    that.$message.error("上传文件格式不正确！");
                }
            }
        },
        uploadaudio() {
            if (this.uploadForm.formdata == null) {
                this.$message.error("请选择文件");
                return false;
            }
            this.uploadloading = true;
            apiSmartReport.voiceupload(this.uploadForm.formdata).then((res) => {
                if (res.Ret === 200) {
                    this.$message.success("上传成功");
                    this.getReportList();
                }
                this.uploadloading = false;
                $("#file").val("");
                this.uploadDialog = false;
            });
        },
        // 下载音频
        handleDownloadVoice(e){
            const x = new window.XMLHttpRequest();
            x.open('GET', e.VideoUrl, true);
            x.responseType = 'blob';
            x.onload = () => {
                const url = window.URL.createObjectURL(x.response);
                const a = document.createElement('a');
                a.download = e.VideoName+'.mp3';
                a.style.display = 'none'

                let blob=new Blob([x.response])
                a.href = URL.createObjectURL(blob);
                a.target = '_blank'
                document.body.append(a)
                a.click();
            };
            x.send();
        }
    },

    created() {
        this.getclassifylist()
        this.getReportList()
    },
}
</script>

<style lang="scss">
.report-select-popover{
    .select-wrap{
          padding:8px;
          margin:0 20px;
          .select-item{
              margin-top:20px;
          }
      }
}
</style>
<style lang="scss" scoped>
.smart-report-list{
    .select-btn{
        cursor: pointer;
        width:120px;
        height: 36px;
        text-align: center;
        background-color: #ECF2FE;
        border-radius: 4px;
        box-sizing: border-box;
        line-height:36px;
        img,span{
            display: inline-block;
            vertical-align: middle;
        }
        .select-num{
            width:20px;
            height:20px;
            line-height: 20px;
            border-radius: 50%;
            background-color:#0052D9;
            color:white;
            font-size: 12px;
        }
    }
    .header{
        .el-form-item{
            margin-bottom: 0;
        }
    }
    .report-img-box{
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        overflow-y: auto;
        background: rgba($color: #000000, $alpha: 0.6);
        text-align: center;
        img{
            max-width: 800px;
        }
    }
}

</style>