<template>
    <div class="contrl">
        <div style="width: 95%;">
            <div class="title-div">
                <span>上传估价结果一览表-表单</span>
            </div>
        </div>
        <div class="download-btn">
            <img src="../../../assets/icons/form.png"
                style="width: 26px; height: 26px; float: left; margin-top: 27px;" />
                <el-tooltip content="点击下载" effect="light" placement="top">
                    <span class="form-name" @click="downloadCollect1">估价结果一览表-表单.xlsx</span>
                </el-tooltip>
        </div>

        <div class="target-windows">
            <SheetView :uploadUrl="'/api/file/house/guaranty/target'" @getExcelDate="excelDate"
                @getUploadReture="uploadReture" v-model:targetsHtml="process.targetsHtml"></SheetView>
        </div>
        <SwitchButton :nextPath="nextPath" :nextDo="genarate"></SwitchButton>
        <Steps :stepArray="stepArray" ref="steps" :stepsDialogVisible="stepDialog"></Steps>
    </div>
</template>

<script>
import SwitchButton from '../../../components/SwichButton/index.vue'
import SheetView from '../../../components/SheetView/index.vue'
import houseGuaranty from '@/api/houseGuaranty';
import { downloadCollect1 } from '@/api/fileUpload'
import fileUtil from '@/utils/file'
import Steps from '../../../components/Steps/index.vue'

export default {
    components: {
        SwitchButton,
        SheetView,
        Steps,
    },

    data() {
        return {
            nextPath: '/home/houseWorkbench/certificate',
            excelHtml: null,
            upload: null,
            processId: null,
            docId: null,
            process:{
                id:null,
                home:null,
                targetsHtml:null,
                createdTime:null,
                updateTime:null
            },
            stepDialog:false,
            stepArray:[
                {name:'上传表单'},
                {name:'解析估价对象一览表'},
                {name:'生成致委托人函'},
                {name:'完成'}
          ]
        }
    },

    created() {
        this.docId = this.$route.query.id;
        this.getProcess();
    },

    methods: {
        genConsignorLetter(id) {
            houseGuaranty.genConsignorLetter(id).then(res => {
                ElMessage({
                    message: '致委托人函已生成',
                    type: 'success',
                    plain: true
                })
            })
        },

        excelDate(data) {
            this.excelHtml = data;
        },

        uploadReture(data) {
            this.upload = data;
            //this.genTargetTableWord(this.excelHtml,data.filePath);
        },

        genTargetTableWord(excelData, homePath) {
            if (excelData && homePath) {
                const param = new Object();
                param.html = excelData;
                param.homePath = homePath;
                houseGuaranty.genTargetsTableWord(param).then(res => {
                    if (res.code === 200) {
                        this.processId = res.data;
                    }
                })

            }
        },

        analysisExcel(id) {
            houseGuaranty.analysisCollect1(id).then(res => {
                if (res.code === 200) {
                    this.genConsignorLetter(id);
                }
            })
        },

        async genarate() {
            this.stepDialog = true;
            if (this.excelHtml && this.upload) {
                const param = new Object();
                param.html = this.excelHtml;
                param.homePath = this.upload.filePath;
                await houseGuaranty.genTargetsTableWord(param).then(res => {
                    if (res.code === 200) {
                        this.processId = res.data;
                        this.$refs.steps.next()
                    }
                    
                })
                await houseGuaranty.analysisCollect1(this.processId).then(res => {
                    if (res.code === 200) {
                        this.$refs.steps.next()
                    }
                })
                await houseGuaranty.genConsignorLetter(this.processId).then(res => {
                    if (res.code === 200) {
                        ElMessage({
                            message: '致委托人函已生成',
                            type: 'success',
                            plain: true
                        })
                        this.$emit('getProcessParentId',this.processId);
                        this.$refs.steps.next();
                    }

                })
            }
            setTimeout(()=>{
                this.$refs.steps.next();
            },500)
            
        },

        getProcess(){
            if (this.docId){
                houseGuaranty.getProcessByDocId(this.docId).then(res=>{
                    if (res.code === 200){
                        this.process = res.data;
                        this.$emit('getProcessParentId',this.process.id)
                    }
                })
            }
        },

        downloadCollect1(){
            fileUtil.download("/file/download/house/guaranty/collect1");
        },
     
    }
}


</script>

<style scoped>
.contrl {
    font-size: 20px;
    width: 70.9%;
    border-right: 1.5px #dae1eb solid;
    padding: 0px 20px 20px 0px;
    float: left;

}

:deep(.el-input__wrapper.is-focus) {
    --el-input-focus-border: #ff6154;
    --el-input-focus-border-color: #ff6154;
}

.target-windows {
    margin-top: 80px;
    overflow-y: scroll;
    padding: 5px;
    border: 1.5px #dae1eb solid;
    border-radius: 0.3em;
}

.download-btn {
    height: 80px;
    line-height: 80px;
    float: right;
    margin-left: 20px;
}

.form-name {
    margin-left: 5px;
    font-size: 16px;
    text-decoration: underline;
}

.form-name:hover {
    cursor: pointer;
    color: #ff6154;
}

.title-div {
    height: 80px;
    line-height: 80px;
    width: 300px;
    float: left;
    font-size: 20px;
    font-weight: 900;
}
</style>