<template>
    <common-dialog
        width="800px"
        title="扩展信息"
        class="sp-manager__dialog"
        :visible="dialogVisible"
        :before-close="beforeCloseDialog"
    >
        <el-scrollbar class="editScroll" v-if="paramsList.length">
            <el-form v-form data-vv-scope="crewParam" class="crew-form">
                <template v-for="param in paramsList">
                    <ht-form-item
                        :label="param.name"
                        prop="name"
                        label-width="160px"
                        :key="param.name"
                    >
                        <el-date-picker
                            v-model="crewParam[param.code]"
                            type="datetime"
                            placeholder="选择日期时间"
                            v-if="param.ctlType === 'date'"
                        ></el-date-picker>
                        <ht-input
                            v-model="crewParam[param.code]"
                            v-if="param.ctlType === 'input'"
                            :maxlength="50"
                            :showWordLimit="true"
                        />
                        <ht-input
                            type="number"
                            v-model="crewParam[param.code]"
                            v-if="param.ctlType === 'number'"
                            :maxlength="50"
                            :showWordLimit="true"
                        />
                        <ht-select
                            v-model="crewParam[param.code]"
                            v-if="param.ctlType === 'select'"
                            :options="JSON.parse(param.json)"
                        />
                        <ht-radio
                            v-model="crewParam[param.code]"
                            v-if="param.ctlType === 'radio'"
                            :options="JSON.parse(param.json)"
                        />
                        <ht-checkbox
                            v-model="crewParam[param.code]"
                            v-if="param.ctlType === 'checkbox'"
                            :options="JSON.parse(param.json)"
                        />
                    </ht-form-item>
                </template>
            </el-form>
        </el-scrollbar>
        <div style="text-align: center;margin:40px 0;" v-else>暂无扩展信息</div>
        <div slot="footer" style="text-align: center">
            <el-button
                type="primary"
                @click="paramSubmit"
                :disabled="!paramsList.length"
                >保存扩展信息</el-button
            >
            <el-button @click="beforeCloseDialog">取消</el-button>
        </div>
    </common-dialog>
</template>

<script>
import basicData from '@/api/biz/basicData'
import CommonDialog from '@/components/dialog/CommonDialog.vue'
export default {
    name: 'CrewExtendParamsModel',
    components: {CommonDialog},
    data() {
        return {
            currentCrew: {},
            dialogVisible: false,
            crewParam: {},
            paramsList: [],
        }
    },
    created() {
        this.getExtendParams()
    },
    methods: {
        open(row) {
            this.getExtendParams()
            this.currentCrew = row
            this.dialogVisible = true
        },
        getExtendParams() {
            basicData.getCrewExtend().then((res) => {
                this.paramsList = res
                this.initParams()
            })
        },
        beforeCloseDialog() {
            this.paramsList = []
            this.currentCrew = {}
            this.crewParam = {}
            this.dialogVisible = false
        },
        initParams() {
            if (this.currentCrew.id) {
                this.$http
                    .get(
                        '${cssc}/biz/base/fanParams/v1/getFanParamsValue?fanId=' +
                            this.currentCrew.id
                    )
                    .then((response) => {
                        if (
                            response.data &&
                            response.data.constructor == Array
                        ) {
                            response.data.forEach((r) => {
                                this.$set(this.crewParam, r['code'], r['value'])
                            })
                        }
                    })
            }
        },
        paramSubmit() {
            let data = []
            let crewParam = this.crewParam
            for (let _param in crewParam) {
                if (crewParam.hasOwnProperty(_param)) {
                    data.push({
                        alias: _param,
                        value: this.crewParam[_param],
                    })
                }
            }
            let _this = this
            if (data.length) {
                this.$http
                    .post(
                        '${cssc}/biz/base/fanParams/v1/saveFanParams?fanId=' +
                            this.currentCrew.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;
    }
}

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