<template>
    <div class="fullheight">
        <el-scrollbar class="editScroll">
            <el-form
                v-if="paramsList.length"
                v-form
                data-vv-scope="windFieldParam"
                class="wind-field-form"
            >
                <el-row
                    :gutter="10"
                    type="flex"
                    style="flex-wrap: wrap; flex-direction: row"
                >
                    <template v-for="param in paramsList">
                        <el-col :span="12" :key="param.name">
                            <ht-form-item
                                :label="param.name"
                                prop="name"
                                label-width="160px"
                                :key="param.name"
                            >
                                <el-date-picker
                                    v-model="windFieldParam[param.code]"
                                    type="datetime"
                                    placeholder="选择日期时间"
                                    v-if="param.ctlType === 'date'"
                                ></el-date-picker>
                                <ht-input
                                    v-model="windFieldParam[param.code]"
                                    v-if="param.ctlType === 'input'"
                                    :maxlength="50"
                                    :showWordLimit="true"
                                />
                                <ht-input
                                    type="number"
                                    v-model="windFieldParam[param.code]"
                                    v-if="param.ctlType === 'number'"
                                    :maxlength="50"
                                    :showWordLimit="true"
                                />
                                <ht-select
                                    v-model="windFieldParam[param.code]"
                                    v-if="param.ctlType === 'select'"
                                    :options="JSON.parse(param.json)"
                                />
                                <ht-radio
                                    v-model="windFieldParam[param.code]"
                                    v-if="param.ctlType === 'radio'"
                                    :options="JSON.parse(param.json)"
                                />
                                <ht-checkbox
                                    v-model="windFieldParam[param.code]"
                                    v-if="param.ctlType === 'checkbox'"
                                    :options="JSON.parse(param.json)"
                                />
                            </ht-form-item>
                        </el-col>
                    </template>
                </el-row>
            </el-form>
            <div style="text-align: center;margin:40px 0;" v-else>暂无扩展参数</div>
            <div style="text-align: center; margin-bottom: 20px">
                <el-button type="primary" @click="paramSubmit" :disabled="!paramsList.length"
                    >保存扩展信息</el-button
                >
            </div>
        </el-scrollbar>
    </div>
</template>
<script>
import basicData from '@/api/biz/basicData'
export default {
    data() {
        return {
            paramsList: [],
            windFieldParam: {},
            saveMethod: 'POST',
            currentWindFactory: {},
        }
    },
    mounted() {
        this.$validator = this.$root.$validator
        this.getExtendParams()
    },
    created() {
        this.loadData()
    },
    methods: {
        loadData() {
            this.$http.post('${cssc}/biz/base/windFactory/v1/list', {}).then(
                (resp) => {
                    let response = resp.data
                    if (response.length) {
                        this.currentWindFactory = response[0]
                    }
                },
                (error) => {
                    reject(error)
                }
            )
        },
        getExtendParams() {
            basicData.getWindfieldExtend().then((res) => {
                this.paramsList = res
                this.initParams()
            })
        },
        initParams() {
            if (this.currentWindFactory.id) {
                this.$http
                    .get(
                        '${cssc}/biz/base/wfParams/v1/getWfParamsValue?wfId=' +
                            this.currentWindFactory.id
                    )
                    .then((response) => {
                        if (
                            response.data &&
                            response.data.constructor == Array
                        ) {
                            response.data.forEach((r) => {
                                this.$set(
                                    this.windFieldParam,
                                    r['code'],
                                    r['value']
                                )
                            })
                        }
                    })
            }
        },
        paramSubmit() {
            if (!this.currentWindFactory.id) {
                this.$message({
                    type: 'warning',
                    message: '请先配置风场基础信息',
                })
                return
            }
            let data = []
            let windFieldParam = this.windFieldParam
            for (let _param in windFieldParam) {
                if (windFieldParam.hasOwnProperty(_param)) {
                    data.push({
                        alias: _param,
                        value: this.windFieldParam[_param],
                    })
                }
            }
            let _this = this
            if (data.length > 0) {
                this.$http
                    .post(
                        '${cssc}/biz/base/wfParams/v1/saveWfParams?wfId=' +
                            this.currentWindFactory.id,
                        data
                    )
                    .then(
                        (resp) => {
                            let response = resp.data
                            if (!response.state) {
                                _this.$message.error(response.message)
                            } else {
                                _this.$message.success(response.message)
                            }
                        },
                        (error) => {
                            reject(error)
                        }
                    )
            }
        },
    },
}
</script>

<style lang="scss" scoped>
.editScroll {
    height: 100% !important;
    overflow-x: hidden;
    /deep/ .el-scrollbar__wrap {
        overflow-x: hidden;
    }
}

.wind-field-form {
    width: 98%;
    margin: 10px auto 60px;
    .inputs {
        width: 90%;
        /deep/ .el-input-number {
            width: 100%;
        }
    }
    .el-input-number {
        width: 90%;
    }
    .el-date-editor {
        width: 90%;
    }
}
</style>
