<template>
    <!-- <el-button link type="primary" @click="testprint()">测试打印</el-button> -->

    <iframe style="display: none;" :src="ifrmSrc" width="0" height="0"></iframe>
    
    <div class="table-container" v-loading="listLoading" >
        <el-card class="box-card" >
            <template #header>
            <div class="card-header">
                <div style="display: flex; align-items: center;">
                    <el-button type="primary"  @click="downloadFile()">下载打印控件</el-button>
                </div>
                <div>
                    <el-input v-model="tableKeyword" placeholder="表内搜索" clearable suffix-icon="Search" />
                </div>
            </div>
            </template>
            <el-table :data="showData" style="width: 100%;margin-top: 20px; ">
                <el-table-column prop="id"  label="模板名称"  />
                <el-table-column prop="sysName" label="子系统"  />
                <el-table-column label="数据源" >
                    <template #default="scope">
                        <el-button link type="primary" size="small" @click="dialogFormShow(scope.row)">编辑</el-button>
                    </template>
                </el-table-column>
                <el-table-column label="样式" >
                    <template #default="scope">
                        <el-button v-loading="designLoading" link type="primary" size="small" @click="skipPrintDesign(scope.row)">设计模板</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <Pagination v-if="total > 0" v-model:total="total" v-model:page="paging.page" v-model:limit="paging.pageSize"  />
        </el-card>
        
    </div>

    <el-dialog v-model="dialogForm.visible"  width="800" center title="数据源编辑">
        <div v-loading="savePrintModelLoading">
            <div style="text-align: right;">
            <el-button type="primary" icon="Plus" @click="dialogForm.sqlArray.push({'sql':''})">数据源</el-button>
        </div>
        <div v-for="(sql,index) in dialogForm.sqlArray" :key="index" class="text item" style="margin-top: 20px;">
            <el-row :gutter="20" align="middle">
                <el-col :span="20"><div class="grid-content ep-bg-purple" /><el-input :autosize="{ minRows: 1, maxRows: 4 }" type="textarea" placeholder="请输入执行SQL" v-model="sql.sql" /></el-col>
                <el-col :span="4"><div class="grid-content ep-bg-purple-light"  />
                    <el-button type="primary" @click="useCopy(sql.sql)" icon="DocumentCopy"></el-button>
                    <el-button type="primary" icon="Delete" @click="dialogForm.sqlArray.splice(index,1)" />
                </el-col>
            </el-row>
        </div>
        </div>
        <template #footer>
            <el-button @click="dialogForm.visible = false">取消</el-button>
            <el-button type="primary" @click="savePrintModel()" >保存</el-button>
        </template>
    </el-dialog>

</template>
  

<script lang="ts">
export default { name: "printmodel" }
</script>
<script setup lang="ts">
import Pagination from '@/framework/components/Pagination/index.vue'
// import { useInTableSearch } from '@/framework/hooks/useInTableSearch'
import { useCopy } from '@/framework/hooks/useCopy'

import { queryPrintSet,mergePrintSet,printDesign,printsetPrint } from '@/subsystem/api/sms/index'
// 下载打印控件
const downloadFile = () => {
  let dom = document.createElement("a");
  dom.style.display = 'none'
  dom.target = '_blank'
  dom.href = './templete/打印控件.zip'
  document.body.appendChild(dom);
  dom.click();
  document.body.removeChild(dom);
}

/**调用打印测试 */
const testprint = () => {
    ifrmSrc.value=''
    printsetPrint({'fileName':'001','params':'{}'}).then((data: any) => {
        ifrmSrc.value='ChuLinPrint:'+data.data
    }).finally(() => {
    });
}

/**跳转打印模板设计功能 */
const ifrmSrc=ref('')
const skipPrintDesign = (params) => {
    ifrmSrc.value=''
    listLoading.value=true
    printDesign({fileName:params.id}).then((data: any) => {
        ifrmSrc.value='ChuLinPrint:'+data.data
    }).finally(() => {
        listLoading.value=false
    })
}

/**数据源编辑 */
const dialogForm = reactive({
    visible:false,
    obj: {},
    sqlArray:[]
});
const dialogFormShow = (row) => {
    dialogForm.visible=true
    dialogForm.obj=row
    dialogForm.sqlArray=JSON.parse(row.sqlArray)
}
/**数据源保存 */
const savePrintModelLoading = ref(false)
const savePrintModel = () => {
    savePrintModelLoading.value=true
    
    for (let i = 0; i < dialogForm.sqlArray.length; i++) {
        if(""===dialogForm.sqlArray[i].sql){
            dialogForm.sqlArray.splice(i,1)
        }
    }
    mergePrintSet({id:dialogForm.obj.id,sqlArray:JSON.stringify(dialogForm.sqlArray)}).then((data: any) => {
        for (let obj of allList.value) {
            if(obj.id===dialogForm.obj.id){
                obj.sqlArray=JSON.stringify(dialogForm.sqlArray)
            }
        }
        dialogForm.visible=false
        ElMessage({type: 'success',message: '操作成功' })
    }).finally(() => {
        savePrintModelLoading.value=false;
    })
}


/**表内搜索、分页查询 */
const allList=ref([])
// const {tableKeyword, showData, total, paging}=useInTableSearch(allList,['id','sysName'])
const listLoading = ref(false)
// const loadPrintModels = () => {
//     listLoading.value=true;
//     queryPrintSet().then((data: any) => {
//         allList.value=data.data;
//     }).finally(() => {
//         listLoading.value=false;
//     })
// }

// onMounted(() => {
//     loadPrintModels()
// });

// defineExpose({ handleQuery })



</script>

<style lang="scss" scoped>
::v-deep .el-table .danger-row {
  --el-table-tr-bg-color: var(--el-color-danger-light-9);
}
::v-deep .el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}
.el-button--text {
  margin-right: 15px;
}
.el-select {
  width: 300px;
}
.el-input {
  width: 300px;
}
.dialog-footer button:first-child {
  margin-right: 10px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

</style>
