<template>
    <el-dialog  title="报告生成" :model-value='visible' @close="handleCancel" width="832px" draggable>
        <div class="report-dialog">
            <div class="report-title form-two">

                        <el-form-item label="检测脚本"  label-width="100px">
                            <el-input v-model='testScriptName' :disabled="true"/>
                        </el-form-item>              

                        <el-form-item label="误差体系"  label-width="100px">
                            <el-input v-model='errorSysName' :disabled="true"/>
                        </el-form-item>              

                        <el-form-item label="数据原则"  label-width="100px">
                            <el-input v-model='dataRule' :disabled="true"/>
                        </el-form-item>              

                        <el-form-item label="报告模板"  label-width="100px">
                            <el-input v-model='reportTemplate' :disabled="true"/>
                        </el-form-item>           
            </div>
            <div class="report-content">
                <div>
                    <el-tabs type="border-card">
                        <el-tab-pane label="报告生成进度">
                            <div class="form-grid">
                                <div class="tabs-title ">
                                    <el-button type="primary" :icon="Download"  >报告下载</el-button>     
                                    <span style="  font-size: 18px;font-weight: 600;">
                                        已生成 <span style="color: #67C23A">2</span> 台/共 <span style="color: green">3</span> 台
                                    </span>
                                    
                                    </div> 
                                <div class="table-main">
                                    <el-table :data="reportData" :header-cell-style="{ textAlign: 'center' } " :cell-style="{ textAlign: 'center' }" style="width: 100%" border class="custom-table">
                                    <el-table-column type="selection" width="55" />
                                    <el-table-column prop="id" width="70" label="序号" />
                                    <el-table-column prop="deviceName" width="150" label="设备名称" />
                                    <el-table-column label="生成进度">
                                        <template #default="scope">
                                            <el-progress :color="customColors" :percentage="scope.row.processValue" />
                                         </template>
                                    </el-table-column>
                                    <el-table-column prop="action" label="操作" width="100">
                                        <template #default="scope">
                                            <el-button type='primary' link :icon='Download' :disabled="scope.row.processValue < 100">下载</el-button>
                                         </template>
                                    </el-table-column>
                                </el-table>
                                </div>
                                
                            </div>
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </div>
        </div>
    </el-dialog>

</template>
<script setup lang='ts'>

import IPAddress from '@/components/IpAddress/index.vue'
import { dialogBig } from '@/utils/elementBind'
import { type Device } from '@/api/device/interface/device'
import { ElMessage, type FormItemRule } from 'element-plus'
import { addPqDev, updatePqDev } from '@/api/device/device'
import { computed, reactive, type Ref, ref } from 'vue'
import { useDictStore } from '@/stores/modules/dict'
import { CirclePlus, Delete, Download,View } from '@element-plus/icons-vue'



  const reportTemplate = ref('国网检测模板V1.0');
  const testScriptName = ref('Q/GDW 10650.4-2021 模拟式');
  const errorSysName = ref('Q/GDW 10650.2-2021');
  const dataRule = ref('所有值');
  const scriptSwitch = ref(true);
  const currentScriptDsc = ref('电压准确度检测：频率：42.5Hz Ua=46.192V 0° Ub=46.192V -120° Uc=46.192V 120° Ia=1A 0° Ib=1A -120° Ic=1A 120°');

const reportData = ref([
  { id: '1', deviceName: '240001', processValue: '100' , action:'查看' },
  { id: '2', deviceName: '240002', processValue: '100' , action:'查看' },
  { id: '3', deviceName: '240003', processValue: '10', action:'查看' },
])
const customColors = [
  { color: "red", percentage: 0 },
  { color: "red", percentage: 10 },
  { color: "red", percentage: 20 },
  { color: "red", percentage: 30 }, //红
  { color: "red", percentage: 40 },
  { color: "#e6a23c", percentage: 50 },
  { color: "#e6a23c", percentage: 60 },
  { color: "#e6a23c", percentage: 70 }, //黄
  { color: "#e6a23c", percentage: 80 }, //1989fa
  { color: "#e6a23c", percentage: 90 }, //1989fa
  { color: "#5cb87a", percentage: 100 }, //绿
];
const handleNodeClick = (data) => {
  console.log(data);
};
const MonIsShow = ref(false)
const DevIsShow = ref(false)
const IsPasswordShow = ref(false)
const dictStore = useDictStore()
// 定义弹出组件元信息
const dialogFormRef = ref()
const disabledDate = (time: Date) => {
  return time.getTime() > Date.now()
}

const props = defineProps<{
    visible: boolean;
  }>();

  const emit = defineEmits<{
    (e: 'update:visible', value: boolean): void;
    (e: 'submit', data: any): void;
  }>();

  const handleCancel = () => {
    emit('update:visible', false); // 关闭对话框
  };
</script>
<style scoped>

.report-dialog{
    display: flex;
    flex-direction: column;
}

.report-title{
    margin-left: 15px;

    /* display: flex; */
    /* flex-direction: row;

    margin-top: 10px; */
}

.report-content{
    display: flex;
    flex-direction: column;
}
.tabs-title{
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.el-tabs__content{
    padding-top: 5px !important;
}
</style>