<template>
    <!-- 往来单位 新增、编辑 表单组件 -->
    <div>
        <el-form
            label-width="100px"
            size="medium"
            ref="contactUnitsParamsRef"
            :model="storageConfigParams"
            :rules="storageConfigParamsRules"
        >
            <el-form-item label="仓库名称" prop="houseId">
                <el-select v-model="storageConfigParams.houseId">
                  <el-option
                    v-for="item in storageConfigRange"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="物资名称" prop="typeId">
              <treeselect
                v-model="storageConfigParams.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 {
  addStorageConfigListApi,
  updateStorageConfigListApi
} from '@/api/material/storageConfig'
import {
  queryStorageListApi
} from '@/api/material/storage'
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.getHouseRange()
      this.getTypeRange()
    },
    mounted() {
        if (this.editParams) {
            Object.assign(this.storageConfigParams, this.editParams)
            this.subSort = 2
        } else {
            this.subSort = 1
        }
    },
    data() {
        return {
            subSort: '', // 提交类型：新增 1 / 修改 2
            storageConfigParams: {
                houseId: undefined, // 仓库名称
                typeId: undefined, // 物资名称
            },
            // 仓库下拉选项
            storageConfigRange: [],
            // 类型下拉选项
            typeRange: [],
            // 校验规则
            storageConfigParamsRules: {
                houseId: [
                    {
                        required: true,
                        message: '请输入仓库名称',
                        trigger: 'blur',
                    },
                ],
                typeId: [
                    {
                        required: true,
                        message: '请选择物资名称',
                        trigger: 'blur',
                    },
                ],
            },
        }
    },
    methods: {
        /** 初始化获取仓库下拉 */
        getHouseRange() {
          queryStorageListApi().then(res => {
            console.log(res)
            this.storageConfigRange = res.rows.map(item => {
              return {
                value: item.id,
                label: item.name,
              }
            })
          }).catch(err => {})
        },
        /** 初始化获取类型下拉 */
        getTypeRange() {
          queryMaTypeTreeListApi().then(res => {
            this.typeRange = res.data
          }).catch(err => {})
        },
        /** 确认按钮 */
        onSubmit() {
            this.$refs.contactUnitsParamsRef.validate((valid) => {
                if (valid) {
                    console.log('校验通过', this.storageConfigParams, this.subSort)
                    // 1. 表单校验通过后调后台 Api
                    if(this.subSort === 1) {
                      addStorageConfigListApi(this.storageConfigParams).then(res => {
                        console.log(res)
                        this.$modal.msgSuccess('新增成功')
                      }).catch(err => {})
                    } else if(this.subSort === 2) {
                      updateStorageConfigListApi(this.storageConfigParams).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>
