<template>
    <el-dialog
        title="更新失败指标详情"
        :visible.sync="show"
        :close-on-click-modal="false"
        :append-to-body="true"
        :center="true"
        v-dialogDrag
        width="645px"
        @close="handleClose"
    >
        <div class="gl-refresh-fail-detail-wrap">
            <div style="margin-bottom:20px">
                <span>终端名称：{{info.Name}}</span>
                <span style="display:inline-block;margin-left:20px">文件夹路径：{{info.DirPath}}</span>
            </div>
            <div style="display:flex;justify-content: space-between;">
                <div>
                    <span>已成功刷新指标数：{{info.UpdateSuccessNum}}</span>
                    <span>更新失败指标数：{{info.UpdateFailedNum}}</span>
                </div>
                <div style="display:flex;align-items:center;color:#409EFF;cursor: pointer;" @click="showBZ=true">
                    <img src="~@/assets/img/data_m/icon01.png" alt="">
                    <span>排查步骤</span>
                </div>
            </div>
            <el-table
                :data="info.List"
                border
                height="500"
            >
                <el-table-column
                    label="频度"
                    prop="Frequency"
                    align="center"
                >
                </el-table-column>
                <el-table-column
                    label="数量"
                    prop="Num"
                    align="center"
                >
                </el-table-column>
                <el-table-column
                    label="原因"
                    prop="SourceUpdateFailedReason"
                    align="center"
                >
                </el-table-column>
                <div slot="empty">
                    <tableNoData text="暂无数据"/>
                </div>
            </el-table>
        </div>

        <!-- 排查步骤说明 -->
        <el-dialog
            title="排查步骤"
            :visible.sync="showBZ"
            :close-on-click-modal="false"
            :center="true"
            v-dialogDrag
            :append-to-body="true"
            width="500px"
        > 
            <div style="padding-bottom:30px;line-height:2;color:#333">
                <div>1、在钢联终端上，用指标编码查询下是否存在该指标，避免因为指标编码变更的原因导致刷新失败。</div>
                <div>2、核实钢联终端账号处于登录状态。</div>
                <div>3、打开Excel，如果“钢联数据2.0”插件不存在，则需要先退出所有Excel和WPS，在钢联终端:最上面的导航栏选择工具->Excel插件修复->点击一键修复，完成钢联数据2.0插件安装。</div>
                <div>4、打开Excel，选中“钢联数据2.0”插件，查看登录状态是否正常。</div>
                <div>5、打开文件目录下的一个Excel，选中“钢联数据2.0”插件，点击“更新所有页”按钮后，等待十几秒，查看Excel左下角是否提示额度超限。</div>
            </div>
        </el-dialog>
    </el-dialog>
    
</template>

<script>
import {apiDataSource} from '@/api/modules/dataSource.js'
export default {
    model:{
        prop:"show",
        event:'close'
    },
    props:{
        show:{
            type:Boolean,
            default:false
        },
        TerminalCode:{
            type:String,
            default:''
        },
        date:{
            type:String,
            default:''
        }
    },
    watch: {
      show(n){
          if(n){
              this.getDetail()
          }
      }  
    },
    data() {
        return {
            info:{},
            showBZ:false
        }
    },
    methods: {
        handleClose(){
            this.$emit('close', false)
        },

        getDetail(){
            apiDataSource.GLRefreshFailDetail({
                TerminalCode:this.TerminalCode,
                CreateTime:this.date
            }).then(res=>{
                if(res.Ret===200){
                    this.info=res.Data
                }
            })
        }
    },
}
</script>

<style lang='scss'>
.gl-refresh-fail-detail-wrap{
    color: #333;
    padding-bottom: 30px;
}

</style>