<template>
    <el-dialog
        :title="$t('DataReportManage.GlStatisticTable.update_fail_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>{{$t('DataReportManage.GlStatisticTable.terminal_name')}}：{{info.Name}}</span>
                <span style="display:inline-block;margin-left:20px">{{$t('DataReportManage.GlStatisticTable.dir_path')}}：{{info.DirPath}}</span>
            </div>
            <div style="display:flex;justify-content: space-between;">
                <div>
                    <span>{{$t('DataReportManage.GlStatisticTable.update_success_num')}}：{{info.UpdateSuccessNum}}</span>
                    <span>{{$t('DataReportManage.GlStatisticTable.update_fail_num')}}：{{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>{{$t('DataReportManage.GlStatisticTable.inspection_step')}}</span>
                </div>
            </div>
            <el-table
                :data="info.List"
                border
                height="500"
            >
                <el-table-column
                    :label="$t('DataReportManage.GlStatisticTable.frequency')"
                    prop="Frequency"
                    align="center"
                >
                </el-table-column>
                <el-table-column
                    :label="$t('DataReportManage.GlStatisticTable.num')"
                    prop="Num"
                    align="center"
                >
                    <template slot-scope="scope">
                        <span style="color:#409EFF;cursor: pointer;" @click="handleShowFailDetail(scope.row)">{{scope.row.Num}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    :label="$t('DataReportManage.GlStatisticTable.reason')"
                    prop="SourceUpdateFailedReason"
                    align="center"
                >
                </el-table-column>
                <div slot="empty">
                    <tableNoData :text="$t('Confirm.prompt_slogan')"/>
                </div>
            </el-table>
        </div>

        <!-- 排查步骤说明 -->
        <el-dialog
            :title="$t('DataReportManage.GlStatisticTable.inspection_step')"
            :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" :v-html="$t('DataReportManage.GlStatisticTable.reason_html')">
               
            </div>
        </el-dialog>

        <!-- 失败详情 -->
        <el-dialog
            :title="$t('DataReportManage.GlStatisticTable.edb_detail_title')"
            :visible.sync="showEDBList"
            :close-on-click-modal="false"
            :center="true"
            v-dialogDrag
            :append-to-body="true"
            width="80vw"
        >
            <div class="gl-refresh-fail-edb-list-wrap">
                <p class="info"> 
                    <span>{{$t('DataReportManage.GlStatisticTable.terminal_name')}}：{{info.Name}} </span>
                    <span>{{$t('DataReportManage.GlStatisticTable.dir_path')}}：{{info.DirPath}} </span>
                    <span>{{$t('DataReportManage.GlStatisticTable.frequency')}}：{{activeFrequency}} </span>
                    <span>{{$t('DataReportManage.GlStatisticTable.reason')}}：{{activeReason}} </span>
                </p>
                <el-table
                    :data="edbList"
                    border
                    height="700"
                >
                    <el-table-column
                        v-for="col in edbListTableCol"
                        :key="col.key"
                        :label="col.label"
                        :prop="col.key"
                        align="center"
                    />
                    <div slot="empty">
                        <tableNoData :text="$t('Confirm.prompt_slogan')"/>
                    </div>
                </el-table>
                <el-pagination
                    layout="total,prev,pager,next,jumper"
                    background
                    @current-change="handleCurrentChange"
                    :page-size="pageSize"
                    :total="total"
                    style="float: right;margin-top:20px"
                />
            </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()
          }
      }  
    },
    computed:{
        edbListTableCol(){
            return [
                {
                    label:this.$t('Edb.Detail.e_name')||'指标全称',
                    key:'EdbName'
                },
                {
                    label:this.$t('Edb.Detail.e_code')||'指标编码',
                    key:'EdbCode'
                },
                {
                    label:this.$t('Edb.Detail.e_start_time')||'起始时间',
                    key:'StartDate'
                },
                {
                    label:this.$t('Edb.Detail.e_latest_date')||'最新日期',
                    key:'LatestDate'
                },
                {
                    label:this.$t('Edb.Detail.e_latest_value')||'最新值',
                    key:'LatestValue'
                },
                {
                    label:this.$t('DataReportManage.GlStatisticTable.placeholder01')||'终端编码',
                    key:'TerminalCode'
                },
                {
                    label:this.$t('DataReportManage.GlStatisticTable.placeholder02')||'创建人',
                    key:'SysUserRealName'
                },
                {
                    label:this.$t('Edb.Detail.e_fre')||'频度',
                    key:'Frequency'
                },
                {
                    label:this.$t('Edb.Detail.e_unit')||'单位',
                    key:'Unit'
                },
            ]
        }
    },
    data() {
        return {
            info:{},
            showBZ:false,

            showEDBList:false,
            edbList:[],
    
            activeFrequency:'',
            activeReason:'',
            page:1,
            pageSize:10,
            total:0
        }
    },
    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
                }
            })
        },

        handleShowFailDetail(e){
            this.page=1
            this.edbList=[]
            this.activeFrequency=e.Frequency
            this.activeReason=e.SourceUpdateFailedReason
            this.getFailDetailList()
            this.showEDBList=true
        },

        async getFailDetailList(){
            const res=await apiDataSource.updateFailDetailList({
                CreateTime:this.date,
                TerminalCode:this.TerminalCode,
                Frequency:this.activeFrequency,
                SourceUpdateFailedReason:this.activeReason,
                CurrentIndex:this.page,
                PageSize:this.pageSize,
            })
            if(res.Ret===200){
                const arr=res.Data.List||[]
                this.edbList=arr
                this.total=res.Data.Paging.Totals
            }
        },

        handleCurrentChange(e){
            this.page=e
            this.getFailDetailList()
        },
    },
}
</script>

<style lang='scss'>
.gl-refresh-fail-detail-wrap{
    color: #333;
    padding-bottom: 30px;
}
.gl-refresh-fail-edb-list-wrap{
    padding-bottom: 80px;
    .info{
        color: #000;
        margin-bottom: 20px;
        span{
            display: inline-block;
            margin-right: 20px;
        }
    }
}
</style>