<template>
    <!-- 往来单位 新增、编辑 表单组件 -->
    <div>
        <el-form
            label-width="100px"
            size="medium"
            ref="userConfigParamsRef"
            :model="userConfigParams"
            :rules="userConfigParamsRules"
        >
            <el-form-item label="人员名称" prop="userId">
              <treeselect
                v-model="userConfigParams.userId"
                :options="userConfigRange"
                noChildrenText="没有数据了"
                noOptionsText="没有数据"
                noResultsText="没有搜索结果"
                placeholder="请选择所属上级"
              />
            </el-form-item>
            <el-form-item label="物资名称" prop="typeId">
              <treeselect
                v-model="userConfigParams.typeId"
                :options="typeRange"
                noChildrenText="没有数据了"
                noOptionsText="没有数据"
                noResultsText="没有搜索结果"
                placeholder="请选择所属上级"
              />
            </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 {
  addUserConfigListApi,
  updateUserConfigListApi,
  getUserSelApi
} from '@/api/material/userConfig'
import {
  queryMaTypeTreeListApi
} from '@/api/material/type'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
export default {
    name: 'FormStorage',
    props: {
        editParams: {
            type: Object,
            default: () => null,
        },
    },
    components: { Treeselect },
    created() {
      this.getRanges()
    },
    mounted() {
        if (this.editParams) {
            Object.assign(this.userConfigParams, this.editParams)
            this.subSort = 2
        } else {
            this.subSort = 1
        }
    },
    data() {
        return {
            subSort: '', // 提交类型：新增 1 / 修改 2
            userConfigParams: {
                userId: undefined, // 人员名称
                typeId: undefined, // 物资名称
            },
            // 人员下拉选项
            userConfigRange: [],
            // 类型下拉选项
            typeRange: [],
            // 校验规则
            userConfigParamsRules: {
                userId: [
                    {
                        required: true,
                        message: '请选择人员名称',
                        trigger: 'blur',
                    },
                ],
                typeId: [
                    {
                        required: true,
                        message: '请选择物资名称',
                        trigger: 'blur',
                    },
                ],
            },
        }
    },
    methods: {
        /** 获取各类下拉 */
        async getRanges() {
          // 获取物资类型下拉
          let typeRes = await queryMaTypeTreeListApi()
          this.typeRange = typeRes.data
          // 获取人员下拉
          let userRes = await getUserSelApi()
          this.userConfigRange = userRes.data
        },
        /** 树禁选父级 */
        changeData(data)  { // 存在子集就不让禁止，父级让禁止
          data.map(item => {
            if (!item.children) {
              item.isDisabled = false
            } else if (item.children && item.children.length > 0){
              item.isDisabled = true
            }
            item.children && item.children.length > 0 && this.changeData(item.children);
          })
          return data;
        },
        /** 确认按钮 */
        onSubmit() {
            this.$refs.userConfigParamsRef.validate((valid) => {
                if (valid) {
                    console.log('校验通过', this.userConfigParams, this.subSort)
                    // 1. 表单校验通过后调后台 Api
                    if(this.subSort === 1) {
                      addUserConfigListApi(this.userConfigParams).then(res => {
                        console.log(res)
                        this.$modal.msgSuccess('新增成功')
                      }).catch(err => {})
                    } else if(this.subSort === 2) {
                      updateUserConfigListApi(this.userConfigParams).then(res => {
                        console.log(res)
                        this.$modal.msgSuccess('修改成功')
                      }).catch(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>
