<template>
    <div v-loading="fullLoading" class="content">
        <div class="top">
            <div class="engineering-title">
                <div>{{ $t('engineering.view') }}</div>
            </div>
            <div class="button-group">
                <el-button icon="el-icon-remove-outline" plain @click="cancel">
                    {{ $t('common.back') }}</el-button>
            </div>
        </div>

        <div class="card">
            <el-form class="plot-form" ref="form" :model="form" label-position="top">
                <el-row :gutter="20">
                    <el-col :span="12">
                        <Select disabled prop="projectId" :data="projectList" :label="$t('follow.relatedProject')"
                            :styleObj="{ width: '100%' }"></Select>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="8">
                        <Select disabled prop="quotationId" :data="quotationList" :label="$t('engineering.quotation')"
                            :styleObj="{ width: '100%' }"></Select>
                    </el-col>
                    <el-col :span="4">
                        <Select disabled prop="version" :data="versionList" :clearable="false"
                            :label="$t('quotation.version')" :styleObj="{ width: '100%' }"></Select>
                    </el-col>
                </el-row>

                <el-table class="elevator-table" :data="elevatorTableList" max-height="400px" border
                    :header-cell-style="{ background: '#F4F6F8', color: '#92A2B5' }">
                    <el-table-column label="No." type="index" width="50" align="center"
                        min-width="200px"></el-table-column>
                    <el-table-column prop="elevatorModel" :label="$t('elevatorModel.elevatorModel')"
                        min-width="200px"></el-table-column>
                    <el-table-column prop="elevatorCode" :label="$t('engineering.elevatorNo')"
                        min-width="200px"></el-table-column>
                    <el-table-column prop="addType" :label="$t('engineering.addType')" min-width="200px">
                        <template slot-scope="scope">
                            <span>{{ formatDict(scope.row.addType, dict.type.plot_add_type) }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="specification" :label="$t('engineering.specification')" min-width="600px"
                        show-overflow-tooltip></el-table-column>
                    <el-table-column prop="createTime" :label="$t('common.createTime')"
                        min-width="200px"></el-table-column>
                    <el-table-column :label="$t('common.operate')" width="150px" fixed="right" align="center">
                        <template slot-scope="scope">
                            <el-button size="mini" type="text" icon="el-icon-view"
                                @click="handleViewElevator(scope.row)">{{ $t('common.view') }}
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <el-row :gutter="20">
                    <el-col :span="6">
                        <Select disabled prop="templateId" :data="templateList"
                            :label="$t('engineering.templateSelect')" :styleObj="{ width: '100%' }"></Select>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="6">
                        <Select disabled prop="commonShaftMaterial" :data="dict.type.shaft_material"
                            :label="$t('engineering.commonShaftMaterial')" :styleObj="{ width: '100%' }"></Select>
                    </el-col>
                </el-row>
            </el-form>
        </div>
    </div>
</template>

<script>
import { getEngineering } from "@/api/business/civil/engineering";
import { listAllTemplates } from "@/api/business/civil/templates";
import { listAllProject } from "@/api/business/crm/project";
import { listByProjectId } from "@/api/business/quotation/quotation";
import { listByQuotationId } from "@/api/business/quotation/specification";
import store from '@/store/index'

export default {
    name: "Plot-view",
    dicts: ['shaft_material', 'plot_add_type'],
    data() {
        return {
            id: null,
            language: this.$i18n.locale,
            fullLoading: false,
            form: {},
            projectList: [],
            quotationList: [],
            versionList: [],
            modelList: [],
            elevatorModelList: [],
            templateList: [],
            elevatorTableList: [],
        }
    },
    created() {
        this.id = this.$route.query && this.$route.query.id;
        this.getEngineering();
        this.getTemplateList();
    },
    methods: {
        async getEngineering() {
            this.fullLoading = true;
            await getEngineering(this.id).then(res => {
                this.form = res.data;
                this.elevatorTableList = this.form.elevatorList;
                let countryName = '';
                switch (this.language) {
                    case 'chinese':
                        countryName = this.form.countryName
                        break;
                    case 'english':
                        countryName = this.form.countryNameUS
                        break;
                    case 'russia':
                        countryName = this.form.countryNameRU
                        break;
                    case 'spanish':
                        countryName = this.form.countryNameES
                        break;
                }
                this.projectList = [{ value: this.form.projectId, label: this.form.projectNo + ':  ' + this.form.projectName + ' - ' + countryName + ' - ' + this.form.city }]
                if (this.form.quotationId) {
                    this.quotationList = [{ value: this.form.quotationId, label: this.form.quotationNo + ':  ' + this.form.projectName }]
                }
                if (this.form.version) {
                    this.versionList = [{ value: this.form.version, label: this.form.version }]
                }
            })
            this.fullLoading = false;
        },
        formatDict(value, dictData) {
            return dictData.find(dict => dict.value == value)?.label;
        },
        getProjectList() {
            listAllProject().then(res => {
                this.projectList = res.rows.map(item => {
                    return {
                        value: item.projectId,
                        label: item.projectNo + ':  ' + item.projectName + ' - ' + item.countryName + ' - ' + item.city
                        // + ' - ' + item.developer
                    }
                })
            })
        },
        getQuotationList() {
            listByProjectId(this.form.projectId).then(res => {
                this.quotationList = res.data.map(item => {
                    return {
                        value: item.id,
                        label: item.quotationNo + ':  ' + item.projectName,
                        version: item.version
                    }
                })
            })
        },
        getModelList() {
            listByQuotationId(this.form.quotationId).then(res => {
                this.modelList = res.data;
                this.elevatorModelList = res.data.map(item => {
                    return {
                        value: item.elevatorModelId,
                        label: item.elevatorModel
                        // label: item.elevatorCode + ':  ' + item.elevatorModel
                    }
                })
            })
        },
        getTemplateList() {
            listAllTemplates().then(res => {
                this.templateList = res.rows.map(item => {
                    return {
                        value: item.id,
                        label: item.templateName + ' (' + item.elevatorPosition + ')'
                    }
                })
            })
        },
        handleViewElevator(row) {
            store.commit('PUT_ELEVATOR', row)
            let query = { type: 'view', elevatorId: row.id, plotId: this.id }
            this.$tab.openPage(this.$t('elevator.view'), '/civil/elevator', query);
        },
        cancel() {
            this.$tab.closePage();
        },
    }
}
</script>

<style lang="scss" scoped>
::v-deep .plot-form .el-form-item--medium .el-form-item__label {
    line-height: 15px;
}

.content {
    padding: 24px;

    .top {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .engineering-title {
            font-size: 24px;
            color: #000000;
            line-height: 26px;
        }

        .button-group {
            display: flex;
        }
    }

    .card {
        margin-top: 24px;
        background-color: white;
        padding: 24px;
        box-shadow: 0px 2px 10px 0px #CED6DD;
        border-radius: 6px;

        .elevator-table {
            margin: 24px 0 40px 0;
        }
    }
}
</style>