<template>
    <!-- 往来单位 新增、编辑 表单组件 -->
    <div>
        <el-form
            label-width="100px"
            size="medium"
            ref="contactUnitsParamsRef"
            :model="contactUnitsParams"
            :rules="contactUnitsParamsRules"
        >
            <el-form-item label="单位名称" prop="name">
                <el-input v-model="contactUnitsParams.name" />
            </el-form-item>
            <el-form-item label="单位类型" prop="typeId">
                <el-select v-model="contactUnitsParams.typeId">
                  <el-option
                    v-for="item in customerRange"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="所属分公司" prop="companyId">
              <treeselect
                v-model="contactUnitsParams.companyId"
                :options="companyRange"
                noChildrenText="没有数据了"
                noOptionsText="没有数据"
                noResultsText="没有搜索结果"
                placeholder="请选择所属上级"
              />
            </el-form-item>
            <el-form-item label="材料员" prop="materialClerk">
                <el-input v-model="contactUnitsParams.materialClerk" />
            </el-form-item>
            <el-form-item label="联系电话" prop="phone">
                <el-input v-model="contactUnitsParams.phone" :maxlength="11" />
            </el-form-item>
            <el-form-item label="启用状态" prop="isActive">
                <el-switch
                    active-value="1"
                    inactive-value="0"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    v-model="contactUnitsParams.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 {
  addContactUnitsApi,
  editContactUnitsApi,
  queryCompanyTreeApi
} from '@/api/base/customer'
import {
  queryUnitTypeListApi
} from '@/api/base/unitType'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
export default {
    name: 'FormContactUnits',
    props: {
        editParams: {
            type: Object,
            default: () => null,
        },
    },
    components: { Treeselect },
    created() {
      this.getRanges()
    },
    mounted() {
        if (this.editParams) {
            Object.assign(this.contactUnitsParams, this.editParams)
            this.subSort = 2
        } else {
            this.subSort = 1
        }
    },
    data() {
        return {
            subSort: '', // 提交类型：新增 1 / 修改 2
            contactUnitsParams: {
                name: undefined, // 单位名称
                typeId: undefined, // 单位类型
                companyId: undefined, // 所属分公司
                materialClerk: undefined, // 材料员
                phone: undefined, // 联系电话
                isActive: '1', // 启用状态
            },
            // 往来单位下拉选
            customerRange: [],
            // 所属分公司树下拉选
            companyRange: [],
            // 校验规则
            contactUnitsParamsRules: {
                name: [
                    {
                        required: true,
                        message: '请输入单位名称',
                        trigger: 'blur',
                    },
                ],
                typeId: [
                    {
                        required: true,
                        message: '请选择单位类型',
                        trigger: 'blur',
                    },
                ],
                companyId: [
                    {
                        required: true,
                        message: '请选择所属分公司',
                        trigger: 'blur',
                    },
                ],
            },
        }
    },
    methods: {
        /** 获取各类下拉选 */
        async getRanges() {
          // 获取单位下拉选
          let unitRes = await queryUnitTypeListApi()
          this.customerRange = unitRes.rows.map(item => {
            return {
              label: item.name,
              value: item.id
            }
          })
          // 获取所属分公司树
          let companyRes = await queryCompanyTreeApi()
          this.companyRange = companyRes.data
        },
        /** 确认按钮 */
        onSubmit() {
            this.$refs.contactUnitsParamsRef.validate((valid) => {
                if (valid) {
                    console.log('校验通过', this.contactUnitsParams, this.subSort)
                    // 1. 表单校验通过后调后台 Api
                    if(this.subSort === 1) {
                      addContactUnitsApi(this.contactUnitsParams).then(res => {
                        console.log(res)
                      }).catch(err => {})
                    } else if(this.subSort === 2) {
                      editContactUnitsApi(this.contactUnitsParams).then(res => {
                        console.log(res)
                      }).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>
