<template>
    <!-- 单位类型 新增、编辑 表单组件 -->
    <div>
        <el-form
            label-width="120px"
            size="medium"
            ref="unitsTypeParamsRef"
            :model="unitsTypeParams"
            :rules="unitsTypeParamsRules"
        >
            <el-form-item label="单位类型名称" prop="name">
                <el-input v-model="unitsTypeParams.name" />
            </el-form-item>

            <el-form-item label="启用状态" prop="isActive" v-if="subSort !== 1">
                <el-switch
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    active-value="1"
                    inactive-value="0"
                    v-model="unitsTypeParams.isActive"
                ></el-switch>
            </el-form-item>
            <el-form-item>
                <el-button type="success" @click="onSubmit">确定</el-button>
                <el-button
                    @click="
                        () => {
                            this.$emit('closeDialog')
                        }
                    "
                    >取消</el-button
                >
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import {
  addUnitTypeApi,
  editUnitTypeApi,
} from '@/api/base/unitType'
export default {
    name: 'FormUnitsType',
    props: {
        editParams: {
            type: Object,
            default: () => null,
        },
    },
    mounted() {
        console.log(this.editParams)
        if (this.editParams) {
            Object.assign(this.unitsTypeParams, this.editParams)
            this.subSort = 2
        } else {
            this.subSort = 1
        }
    },
    data() {
        return {
            subSort: '', // 提交类型：新增 1 / 修改 2
            unitsTypeParams: {
                name: '', // 单位类型
                isActive: '1', // 状态
            },
            // 校验规则
            unitsTypeParamsRules: {
                name: [
                    {
                        required: true,
                        message: '请输入单位类型名称',
                        trigger: 'blur',
                    },
                ],
            },
        }
    },
    methods: {
        /** 确认按钮 */
        onSubmit() {
            this.$refs.unitsTypeParamsRef.validate((valid) => {
                if (valid) {
                    console.log('校验通过', this.unitsTypeParams, this.subSort)
                    // 1. 表单校验通过后调后台 Api
                    if(this.subSort === 1) {
                      addUnitTypeApi(this.unitsTypeParams).then(res => {
                        console.log(res)
                      }).catch(err => {
                        console.log(err)
                      })
                    } else if(this.subSort === 2) {
                      editUnitTypeApi(this.unitsTypeParams).then(res => {
                        console.log(res)
                      }).catch(err => {
                        console.log(err)
                      })
                    }
                    // 2. 成功之后通知父组件关闭弹框
                    this.$emit('closeDialog', true)
                }
            })
        },
    },
}
</script>

<style scoped>
::v-deep .el-select {
  width: 100%;
}
::v-deep .el-form-item__label{
  font-weight: normal;
}
</style>
