<template>
    <div class="contrl">
        <el-divider content-position="left"><span style="color:#ff6154;">生成测算表</span></el-divider>
        <el-form ref="generateInfo" :model="generateInfo" label-width="auto" style="margin-top: 10px;"
            :rules="generateInfoRules">
            <el-row :gutter="10">
                <el-col :span="12">
                    <el-form-item label="工期:" class="form-item" prop="constructionPeriod">
                        <el-input-number v-model="generateInfo.constructionPeriod" clearable style="width: 95%;"
                            :precision="2" :step="0.1" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="10">
                <el-col :span="12">
                    <el-form-item label="利息:" class="form-item" prop="interest">
                        <el-input-number v-model="generateInfo.interest" clearable style="width: 95%;" :precision="2"
                            :step="0.1" />%
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="10">
                <el-col :span="12">
                    <el-form-item label="前期费用率:" class="form-item" prop="preConstructionCostRatio">
                        <el-input-number v-model="generateInfo.preConstructionCostRatio" clearable style="width: 95%;"
                            :precision="2" :step="0.1" />%
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="10">
                <el-col :span="12">
                    <el-form-item label="建设单位管理费率:" class="form-item" prop="managementExpenseRatio">
                        <el-input-number v-model="generateInfo.managementExpenseRatio" clearable style="width: 95%;"
                            :precision="2" :step="0.1" />%
                    </el-form-item>
                </el-col>
            </el-row>
            <el-divider v-if="hasImportedEquipment" content-position="left"><span
                    style="color:#ff6154;">进口设备信息</span></el-divider>
            <el-row v-if="hasImportedEquipment" :gutter="10">
                <el-col :span="12">
                    <el-form-item label="关税:" class="form-item" prop="tariff">
                        <el-input-number v-model="generateInfo.tariff" clearable style="width: 95%;" :precision="2"
                            :step="0.1" />%
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row v-if="hasImportedEquipment" :gutter="10">
                <el-col :span="12">
                    <el-form-item label="进口增值税:" class="form-item" prop="importVAT">
                        <el-input-number v-model="generateInfo.importVAT" clearable style="width: 95%;" :precision="2"
                            :step="0.1" />%
                    </el-form-item>
                </el-col>
            </el-row>
            <el-button plain type="danger" style="float: right;" @click="updateBaseInfo()">
                下一步
                <el-icon style="vertical-align: -20%;">
                    <ArrowRightBold />
                </el-icon>
            </el-button>
            <el-button plain type="danger" style="float: right;" @click="generate()">
                生成测算表
            </el-button>
        </el-form>
    </div>
</template>

<script>
import { mapStores } from 'pinia'
import { assetsProjectInfo } from '@/stores/assetsProjectStore';
import { hasImportedEquipment } from '@/api/assetsCalculateEqptData';
import { updateCalculateBaseInfo, generateEquipmentCalculate } from '@/api/assetsCalculate';

export default {
    data() {
        return {
            hasImportedEquipment: false,
            generateInfo: {},
            generateInfoRules: {
                constructionPeriod: [
                    { required: true, message: '请输入工期', trigger: 'blur' }
                ],
                interest: [
                    { required: true, message: '请输入利息', trigger: 'blur' }
                ],
                preConstructionCostRatio: [
                    { required: true, message: '请输入前期费用率', trigger: 'blur' }
                ],
                managementExpenseRatio: [
                    { required: true, message: '请输入建设单位管理费率', trigger: 'blur' }
                ],
                tariff: [
                    { required: true, message: '请输入关税', trigger: 'blur' }
                ],
                importVAT: [
                    { required: true, message: '请输入进口增值税', trigger: 'blur' }
                ]
            }
        }
    },
    created() {
        this.getHasImportedEquipment();
    },
    computed: {
        ...mapStores(assetsProjectInfo),
    },
    methods: {
        getHasImportedEquipment() {
            // 获取是否有进口设备
            hasImportedEquipment(this.projectStore.calculateProgress.id).then(res => {
                this.hasImportedEquipment = res.data;
            })
        },
        // 更新测算表基础测算信息
        updateBaseInfo() {
            this.$refs.generateInfo.validate((valid) => {
                if (valid) {
                    let params = {};
                    params.calculateId = this.projectStore.calculateProgress.id;
                    params.baseInfo = JSON.stringify(this.generateInfo);
                    updateCalculateBaseInfo(params).then(res => {
                        if (res.code == 200) {
                            ElMessage({
                                showClose: true,
                                message: res.message,
                                type: 'success'
                            })
                        }
                    })
                }
            })
        },
        generate() {
            generateEquipmentCalculate(this.projectStore.calculateProgress.id).then(res => {
                if (res.code == 200) {
                    ElMessage({
                        showClose: true,
                        message: res.message,
                        type: 'success'
                    })
                }
            })
        }
    }
}
</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;
}

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

:deep(*) {
    color-scheme: light;
    --el-color-primary: #ff6154;
    --el-color-primary-light-3: #ff7154;
    --el-color-primary-light-5: #ff8154;
    --el-color-primary-light-7: #ff9154;
    --el-color-primary-light-8: #ffa999;
    --el-color-primary-light-9: #ffa854;
    --el-color-primary-dark-2: #ff8154;
}</style>