<template>
    <a-modal :title="title" :width="600" :visible="visible" @ok="handleOk" @cancel="handleCancel" cancelText="关闭">
        <a-form-model ref="ruleForm" :model="form" :rules="rules" class="form-descriptions-word">
            <a-descriptions size="small" bordered>
                <a-descriptions-item label="场站名称" :span="3">
                    <i class="triangle-top-left" />
                    <a-form-model-item prop="factoryName">
                        <a-input v-model="form.factoryName" placeholder="请输入场站名称" />
                    </a-form-model-item>
                </a-descriptions-item>
                <a-descriptions-item label="经度" :span="3">
                    <i class="triangle-top-left" />
                    <a-form-model-item prop="longitude">
                        <a-input v-model="form.longitude" placeholder="请输入经度" />
                    </a-form-model-item>
                </a-descriptions-item>
                <a-descriptions-item label="纬度" :span="3">
                    <i class="triangle-top-left" />
                    <a-form-model-item prop="latitude">
                        <a-input v-model="form.latitude" placeholder="请输入纬度" />
                    </a-form-model-item>
                </a-descriptions-item>
                <a-descriptions-item label="项目名称" :span="3">
                    <a-form-model-item prop="projectName">
                        <a-input v-model="form.projectName" placeholder="请输入项目名称" />
                    </a-form-model-item>
                </a-descriptions-item>
                <a-descriptions-item label="合同编码" :span="3">
                    <a-form-model-item prop="contractCode">
                        <a-input v-model="form.contractCode" placeholder="请输入合同编码" />
                    </a-form-model-item>
                </a-descriptions-item>
                <a-descriptions-item label="销售负责人" :span="3">
                    <a-form-model-item prop="saleDirector">
                        <a-input v-model="form.saleDirector" placeholder="请输入销售负责人" />
                    </a-form-model-item>
                </a-descriptions-item>
                <a-descriptions-item label="到货时间" :span="3">
                    <a-form-model-item prop="arrivalTime">
                        <a-date-picker show-time format="YYYY-MM-DD HH:mm:ss" v-model="form.arrivalTime"
                            placeholder="请选择到货时间" @change="arrivalTimeChange" style="width: 100%" />
                    </a-form-model-item>
                </a-descriptions-item>
                <a-descriptions-item label="工程人员" :span="3">
                    <a-form-model-item prop="engineer">
                        <a-input v-model="form.engineer" placeholder="请输入工程人员" />
                    </a-form-model-item>
                </a-descriptions-item>
                <a-descriptions-item label="工程到场时间" :span="3">
                    <a-form-model-item prop="engineerAttendanceTime">
                        <a-date-picker show-time format="YYYY-MM-DD HH:mm:ss" v-model="form.engineerAttendanceTime"
                            placeholder="请选择工程到场时间" @change="engineerAttendanceTimeChange" style="width: 100%" />
                    </a-form-model-item>
                </a-descriptions-item>
                <a-descriptions-item label="工程完成时间" :span="3">
                    <a-form-model-item prop="engineerCompletionTime">
                        <a-date-picker show-time format="YYYY-MM-DD HH:mm:ss" v-model="form.engineerCompletionTime"
                            placeholder="请选择工程完成时间" @change="engineerCompletionTimeChange" style="width: 100%" />
                    </a-form-model-item>
                </a-descriptions-item>
                <a-descriptions-item label="项目详情" :span="3">
                    <a-form-model-item prop="projectContent">
                        <a-textarea v-model="form.projectContent" placeholder="请输入项目详情"
                            :auto-size="{ minRows: 3, maxRows: 5 }" />
                    </a-form-model-item>
                </a-descriptions-item>
            </a-descriptions>
        </a-form-model>
    </a-modal>
</template>
  
<script>
import { pick } from 'lodash'
import { insertRecord, updateRecord } from '@/api/services/hrproject.js'
export default {
    name: 'DictModal',
    data() {
        return {
            form: {
            },
            title: '操作',
            visible: false,
            model: {},
            rules: {
                factoryName: [{ required: true, message: '请填写场站！', trigger: 'blur' }],
                longitude: [{ required: true, message: '请填写经度！', trigger: 'blur' }],
                latitude: [{ required: true, message: '请填写纬度！', trigger: 'blur' }]
            },

        }
    },
    created() { },
    methods: {
        add() {
            this.edit({})
        },
        edit(record = {}) {
            this.model = Object.assign({}, record)
            this.form = pick(
                record,
                'id',
                'factoryName',
                'longitude',
                'latitude',
                'projectName',
                'contractCode',
                'saleDirector',
                'arrivalTime',
                'engineer',
                'engineerAttendanceTime',
                'engineerCompletionTime',
                'projectContent'
            )
            this.visible = true
        },
        arrivalTimeChange(date, dateString) {
            this.$set(this.form, 'arrivalTime', dateString)
        },
        engineerAttendanceTimeChange(date, dateString) {
            this.$set(this.form, 'engineerAttendanceTime', dateString)
        },
        engineerCompletionTimeChange(date, dateString) {
            this.$set(this.form, 'engineerCompletionTime', dateString)
        },
        // 确定
        handleOk() {
            this.$refs.ruleForm.validate(valid => {
                if (valid) {
                    let api = this.model.id ? updateRecord : insertRecord;
                    api(this.form).then(res => {
                        if (res.code === '200') {
                            this.$message.success(this.model.id ? '编辑成功！' : '保存成功！')
                            this.handleCancel()
                        }
                    })
                }
            })
        },
        // 关闭
        handleCancel() {
            this.close()
        },
        close() {
            this.$emit('ok')
            this.form = {}
            this.visible = false
        }
    }
}
</script>
<style scoped>
@import '../../../assets/less/word-old.css';
</style>
  