<template>
    <div>
        <van-form @submit="onSubmit">
            <van-field
                    v-model="formObj.name"
                    name="name"
                    label="计划名称"
                    placeholder="计划名称"
                    :rules="[{ required: true, message: '请填写计划名称'}]"
            ></van-field>
            <van-field
                    v-model="formObj.planDate"
                    name="monitorDate"
                    label="计划日期"
                    placeholder="计划日期"
                    @click="_selectDate('formObj.planDate')"
            ></van-field>
            <van-field
                    v-model="formObj.issuingUnit"
                    name="issuingUnit"
                    label="任务下达单位"
                    placeholder="任务下达单位"
            ></van-field>
            <van-field
                    v-model="formObj.taskSource"
                    name="taskSource"
                    label="任务来源"
                    placeholder="任务来源"
            ></van-field>
            <van-field
                    type="textarea"
                    v-model="formObj.product"
                    name="product"
                    label="产品"
                    placeholder="产品"
            ></van-field>
            <van-field
                    v-model="formObj.standard"
                    name="standard"
                    label="抽查依据标准"
                    placeholder="抽查依据标准"
            ></van-field>
            <van-field
                    v-model="formObj.finishDate"
                    name="finishDate"
                    label="完成时间"
                    placeholder="完成时间"
                    @click="_selectDate('formObj.finishDate')"
            ></van-field>
            <van-field
                    type="number"
                    v-model="formObj.samplingQuantity"
                    name="samplingQuantity"
                    label="抽样数量"
                    placeholder="抽样数量"
            ></van-field>
            <van-field
                    type="number"
                    v-model="formObj.testCost"
                    name="testCost"
                    label="检测费用"
                    placeholder="检测费用"
            ></van-field>
            <van-field
                    v-model="formObj.announcementNo"
                    name="announcementNo"
                    label="公告号"
                    placeholder="公告号"
            ></van-field>
            <van-field
                    v-model="formObj.announcementDate"
                    name="announcementDate"
                    label="公告日期"
                    placeholder="公告日期"
                    @click="_selectDate('formObj.announcementDate')"
            ></van-field>
            <van-field
                    type="textarea"
                    v-model="formObj.remark"
                    name="remark"
                    label="备注"
                    placeholder="备注"
            ></van-field>
            <div style="margin: 16px;">
                <van-button round block type="info" native-type="submit">
                    保存
                </van-button>
            </div>
        </van-form>
        <van-popup v-model="showDatePicker" position="bottom"
                   :safe-area-inset-bottom="true"
                   :close-on-popstate="true">
            <van-datetime-picker
                    type="date"
                    v-model="currentDate"
                    @confirm="_dateConfirm"
                    @cancel="showDatePicker = false"
            ></van-datetime-picker>
        </van-popup>
    </div>
</template>

<script>
    import {samplingPlan} from '../../api'

    export default {
        name: "SamplingPlanAdd",
        data() {
            return {
                showDatePicker: false,
                currentDate: new Date(),
                selectDateType: '',

                id: '',
                formObj: {
                    name: '',
                    planDate: '',
                    issuingUnit: '',
                    taskSource: '',
                    product: '',
                    standard: '',
                    finishDate: '',
                    samplingQuantity: '',
                    testCost: 0,
                    announcementNo: '',
                    announcementDate: '',
                    remark: ''
                }
            }
        },
        mounted() {
            this._open()
        },
        methods: {
            _open() {
                if (this.$route.query.id) {//编辑
                    this.id = this.$route.query.id
                    this._getData()
                } else {
                    this.id = ''
                }
            },
            _getData: async function () {
                let result = await samplingPlan.getById(this.id)
                if (result) {
                    for (let key in this.formObj) {
                        if (result[key]) {
                            if (key === 'planDate'||key === 'finishDate'||key === 'announcementDate') {
                                this.formObj[key] = this.$dateformat(result[key], 'yyyy-mm-dd')
                            } else {
                                this.formObj[key] = result[key]
                            }
                        }
                    }
                }
            },
            onSubmit(res) {
                if (this.id) {
                    this._editSave(this.$serializeForm(res))
                } else {
                    this._addSave(this.$serializeForm(res))
                }
            },
            _editSave: async function (res) {
                let result = await samplingPlan.edit({id: this.id, obj: res})
                if (result) {
                    this.$toast('编辑成功！')
                    this.$router.go(-1)
                }
            },
            _addSave: async function (res) {
                let result = await samplingPlan.add(res)
                if (result) {
                    this.$toast('添加成功！')
                    this.$router.go(-1)
                }
            },
            _selectDate(type) {
                this.selectDateType = type
                this.showDatePicker = true
            },
            _dateConfirm(date) {
                switch (this.selectDateType) {
                    case 'formObj.planDate':
                        this.formObj.planDate = this.$dateformat(date, 'yyyy-mm-dd')
                        break
                    case 'formObj.finishDate':
                        this.formObj.finishDate = this.$dateformat(date, 'yyyy-mm-dd')
                        break
                    case 'formObj.announcementDate':
                        this.formObj.announcementDate = this.$dateformat(date, 'yyyy-mm-dd')
                        break
                }
                this.showDatePicker = false
            },
        }
    }
</script>

<style scoped>

</style>
