<template>
    <!-- 协议管理 新增、编辑 表单组件 -->
    <div>
        <el-form
            label-width="100px"
            size="medium"
            ref="protocolParamsRef"
            :model="protocolParams"
            :rules="protocolParamsRules"
        >
            <el-row type="flex" justify="space-between" :gutter="24">
                <el-col :span="12">
                    <el-form-item label="租赁单位" prop="customer">
                      <el-select
                        v-model="protocolParams.customer"
                      >
                        <el-option
                          v-for="item in unitSelRange"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        >
                        </el-option>
                      </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="授权人" prop="authorizingPerson">
                        <el-input v-model="protocolParams.authorizingPerson" />
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="24">
                <el-col :span="12">
                    <el-form-item label="租赁工程" prop="project">
                        <el-select
                            v-model="protocolParams.project"
                        >
                          <el-option
                            v-for="item in projSelRange"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                          >
                          </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="联系电话" prop="authorizingPhone">
                      <el-input v-model="protocolParams.authorizingPhone" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="24">
                <el-col :span="12">
                    <el-form-item label="合同编号" prop="contractNumber">
                      <el-input v-model="protocolParams.contractNumber" />
                    </el-form-item>
                </el-col>
<!--                <el-col :span="12">
                    <el-form-item label="租赁期限" prop="pro_nature">
                        <el-select
                            v-model="protocolParams.pro_nature"
                        ></el-select>
                    </el-form-item>
                </el-col>-->
                <el-col :span="12">
                  <el-form-item label="开始日期" prop="startTime">
                    <el-input v-model="protocolParams.startTime" />
                  </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="24">
                <el-col :span="12">
                    <el-form-item label="备注" prop="remark">
                        <el-input v-model="protocolParams.remark" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="合同附件" prop="url">
                    <el-input v-model="protocolParams.url" />
                  </el-form-item>
                </el-col>
            </el-row>
<!--            <el-row :gutter="24">
                <el-col :span="12"> </el-col>
            </el-row>-->

            <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 {
  addProtocolApi,
  editProtocolApi
} from '@/api/base/agreement'
import {
  queryContactUnitsSelApi
} from '@/api/base/customer'
import {
  queryProjectSelApi
} from '@/api/base/project'
import { addProjectApi, editProjectApi } from '@/api/base/project'
export default {
    name: 'FormProtocol',
    props: {
        editParams: {
            type: Object,
            default: () => null,
        },
    },
    created() {
      this.queryUnitSel()
      this.queryProjSel()
    },
    mounted() {
        if (this.editParams) {
            Object.assign(this.protocolParams, this.editParams)
            this.subSort = 2
        } else {
            this.subSort = 1
        }
    },
    data() {
        return {
            subSort: '', // 提交类型：新增 1 / 修改 2
            protocolParams: {
                customer: '', // 租赁单位
                authorizingPerson: '', // 授权人
                project: '', // 租赁工程
                authorizingPhone: '', // 联系电话
                contractNumber: '', // 合同编号
                startTime: '', // 开始日期
                remark: '', // 备注
                url: '', // 合同附件
            },
            // 租赁单位下拉框
            unitSelRange: [],
            // 租赁工程下拉框
            projSelRange: [],
            // 校验规则
            protocolParamsRules: {
                /* scrapNum: [
                    {
                        required: true,
                        message: '请选择租赁单位',
                        trigger: 'blur',
                    },
                ],
                pro_unit: [
                    {
                        required: true,
                        message: '请输入授权人',
                        trigger: 'blur',
                    },
                ],
                pro_type_of: [
                    {
                        required: true,
                        message: '请选择租赁工程',
                        trigger: 'blur',
                    },
                ],
                pro_type: [
                    {
                        required: true,
                        message: '请输入联系电话',
                        trigger: 'blur',
                    },
                ], */
            },
        }
    },
    methods: {
        /** 查询往来单位下拉框  */
        queryUnitSel() {
          queryContactUnitsSelApi().then(res => {
            console.log(res)
            this.unitSelRange = res.data.map(item => {
              return {
                label: item.name,
                value: item.id
              }
            })
          }).catch(err => {})
        },
        /** 查询租赁工程下拉框  */
        queryProjSel() {
          queryProjectSelApi().then(res => {
            console.log(res)
            this.projSelRange = res.data.map(item => {
              return {
                label: item.name,
                value: item.id
              }
            })
          }).catch(err => {})
        },
        /** 确认按钮 */
        onSubmit() {
            this.$refs.protocolParamsRef.validate((valid) => {
                if (valid) {
                    console.log('校验通过', this.protocolParams, this.subSort)
                    // 1. 表单校验通过后调后台 Api
                    if(this.subSort === 1) {
                      addProtocolApi(this.protocolParams).then(res => {
                        console.log(res)
                        // 2. 成功之后通知父组件关闭弹框
                        this.$emit('closeDialog')
                        history.go(0)
                      }).catch(err => {
                        console.log(err)
                      })
                    } else if(this.subSort === 2) {
                      editProtocolApi(this.protocolParams).then(res => {
                        console.log(res)
                        // 2. 成功之后通知父组件关闭弹框
                        this.$emit('closeDialog')
                        history.go(0)
                      }).catch(err => {
                        console.log(err)
                      })
                    }
                    // 2. 成功之后通知父组件关闭弹框
                    this.$emit('closeDialog')
                }
            })
        },
    },
}
</script>

<style scoped>
::v-deep .el-select {
    width: 100%;
}
</style>
