<template>
    <el-dialog title="新增" append-to-body :modelValue="openShow" width="70%" @close="closeDialog">
        <el-form ref="form" :model="form" label-width="100px" :rules="rules">
            <el-row :gutter="24">
                <el-col :span="8">
                    <el-form-item label="作业中心:" prop="wcName">
                        <el-select v-model="value" placeholder="请选择">
                            <el-option label="作业中心一" value="1" />
                            <el-option label="作业中心2" value="2" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="作业槽:" prop="slotNo">
                        <el-select v-model="value" placeholder="请选择">
                            <el-option label="作业槽一" value="1" />
                            <el-option label="作业槽2" value="2" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="待测成分:" prop="daicechengfen">
                        <el-input v-model="input" placeholder="请输入" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="工艺含量:" prop="gongyihanliang">
                        <el-input v-model="input" placeholder="请输入" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="目标上下限:" label-width="100px">
                        <div style="display: flex;">
                            <el-input v-model="input" placeholder="请输入" />
                            ~<el-input v-model="input" placeholder="请输入" />
                        </div>

                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="目标值:" prop="mubiaozhi">
                        <el-input v-model="input" placeholder="请输入" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="添加点:">
                        <el-input v-model="input" placeholder="请输入" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="体积:">
                        <el-input v-model="input" placeholder="请输入" />
                    </el-form-item>
                </el-col>
                 <el-col :span="8">
                    <el-form-item label="测量值单位:" prop="celiangdanwei">
                        <el-input v-model="input" placeholder="请输入" />
                    </el-form-item>
                </el-col>
                 <el-col :span="8">
                    <el-form-item label="添加值单位:" prop="tianjialiangdanwei">
                        <el-input v-model="input" placeholder="请输入" />
                    </el-form-item>
                </el-col>


                <el-col :span="8">
                    <el-form-item label="加药量计算公式:" prop="jisuangongshi" label-width="140px">
                        <el-select v-model="value" placeholder="请选择">
                            <el-option label="计算公式一" value="1" />
                            <el-option label="计算公式2" value="2" />
                        </el-select>
                    </el-form-item>
                </el-col>
                   <el-col :span="8">
                    <el-form-item label="添加后理论值公式:" prop="jisuangongshi" label-width="140px">
                        <el-select v-model="value" placeholder="请选择">
                            <el-option label="计算公式一" value="1" />
                            <el-option label="计算公式2" value="2" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="温度范围:">
                        <div style="display: flex;">
                            <el-radio-group v-model="form.radio">
                                <el-radio :value="1">无温度</el-radio>
                                <el-radio :value="2">室内温度</el-radio>
                                <el-radio :value="3">环境温度</el-radio>
                                <el-radio :value="4">温度范围</el-radio>
                            </el-radio-group>
                        </div>
                        <div style="margin-left: 32px;display: flex;" v-if="form.radio == 3||form.radio == 2">
                            <el-input v-model="input" placeholder="请输入" />
                           
                        </div>
                        <div style="margin-left: 32px;display: flex;" v-if="form.radio == 4">
                            <el-input v-model="input" placeholder="请输入" />
                            ~<el-input v-model="input" placeholder="请输入" />
                        </div>




                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="PH值范围:">
                        <div style="display: flex;">
                            <el-radio-group v-model="form.PHradio">
                                <el-radio :value="1">无温度</el-radio>
                                <el-radio :value="2">PH值范围</el-radio>
                            </el-radio-group>
                            <div style="margin-left: 32px;display: flex;" v-if="form.PHradio == 2">
                                <el-input v-model="input" placeholder="请输入" />
                                ~<el-input v-model="input" placeholder="请输入" />
                            </div>
                        </div>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="药品名称:">
                        <el-input v-model="input" placeholder="请输入" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="药品物料号:" label-width="100px" prop="yaopinwuliaohao">
                        <el-select v-model="value" placeholder="请选择">
                            <el-option label="物料一" value="1" />
                            <el-option label="物料2" value="2" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="药品物料名称:" label-width="110px" prop="yaopinwuliaomingcheng">
                        <el-input v-model="input" placeholder="请输入" disabled />
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="测试周期(天):" prop="cesuanzhouqi" label-width="110px">
                        <el-input-number v-model="num" :min="1" controls-position="right" @change="handleChange" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="化验人:" prop="hauyanren">
                        <el-select v-model="value" placeholder="请选择">
                            <el-option label="化验人一" value="1" />
                            <el-option label="化验人2" value="2" />
                        </el-select>
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="主管工艺:" prop="zhuguangongyi">
                        <el-select v-model="value" placeholder="请选择">
                            <el-option label="工艺一" value="1" />
                            <el-option label="工艺2" value="2" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="班组:" prop="banzu">
                        <el-select v-model="value" placeholder="请选择">
                            <el-option label="班组一" value="1" />
                            <el-option label="班组2" value="2" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="分析周期:" prop="textCycle">
                        <el-select placeholder="请选择试验周期" v-model="form.textCycle" @change="changeCycle">
                            <el-option label="每周" :value="1"></el-option>
                            <el-option label="每月" :value="2"></el-option>
                            <el-option label="每年" :value="3"></el-option>
                        </el-select>
                    </el-form-item>
                    <div style="margin-left: 100px;" v-if="form.textCycle == 1">
                        <el-checkbox-group v-model="form.weekList">
                            <el-checkbox label="周一" value="周一" />
                            <el-checkbox label="周二" value="周二"></el-checkbox>
                            <el-checkbox label="周三" value="周三"></el-checkbox>
                            <el-checkbox label="周四" value="周四"></el-checkbox>
                            <el-checkbox label="周五" value="周五"></el-checkbox>
                            <el-checkbox label="周六" value="周六"></el-checkbox>
                            <el-checkbox label="周日" value="周日"></el-checkbox>
                        </el-checkbox-group>
                    </div>
                    <div style="margin-left: 100px;" v-if="form.textCycle == 2">
                        <div style="display: flex;align-items: center;">
                            <span>时间：每月</span>
                            <el-select v-model="form.monthValue" style="width: 100px;margin: 0 5px;">
                                <el-option v-for="item in 31" :key="item" :label="item" :value="item"></el-option>
                            </el-select>
                            <span>日</span>
                            <el-button style="margin-left: 10px;" type="primary" circle @click="addMonth"><el-icon>
                                    <Plus />
                                </el-icon></el-button>
                        </div>
                        <div style="display: flex;flex-wrap: wrap;margin-top: 10px;">
                            <el-tag v-for="tag in monthTags" :key="tag" closable type="info"
                                style="width: 62px;margin-right: 5px;margin-top: 10px;"
                                @close="closeMonthTag(tag, index)">
                                {{ tag }}
                            </el-tag>
                        </div>
                        <div>
                            <el-checkbox v-model="form.monthChecked" label="任务若遇周末或当月无该日期，顺延至下周一" />
                        </div>
                    </div>
                    <div style="margin-left: 85px;" v-if="form.textCycle == 3">
                        <div style="display: flex;align-items: center;">
                            <span>时间</span>
                            <el-select v-model="form.yearMonth" style="width: 90px;margin: 0 5px;">
                                <el-option v-for="item in 12" :key="item" :label="item" :value="item"></el-option>
                            </el-select>
                            <span>月</span>
                            <el-select v-model="form.yearDays" style="width: 90px;margin: 0 5px;">
                                <el-option v-for="item in 31" :key="item" :label="item" :value="item"></el-option>
                            </el-select>
                            <span>日</span>
                            <el-button style="margin-left: 10px;" type="primary" circle @click="addYears"><el-icon>
                                    <Plus />
                                </el-icon></el-button>
                        </div>
                        <div style="display: flex;flex-wrap: wrap;margin-top: 10px;">
                            <el-tag v-for="(tag, index) in yearTags" :key="tag" closable type="info"
                                style="width: 86px;margin-right: 5px;margin-top: 10px;"
                                @close="closeYearsTag(tag, index)">
                                {{ tag }}
                            </el-tag>
                        </div>
                        <div>
                            <el-checkbox v-model="form.yearChecked" label="任务若遇周末或当月无该日期，顺延至下周一" />
                        </div>
                    </div>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="有效期:" prop="youxiaoqi">
                        <el-date-picker v-model="value1" type="date" placeholder="请选择" style="width: 100%;" />
                    </el-form-item>
                </el-col>


            </el-row>
        </el-form>

        <template #footer>
            <span class="dialog-footer">
                <el-button @click="closeDialog">取 消</el-button>
                <el-button type="primary" @click="submit">确 定</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script>
export default {
    props: {
        showDialog: {
            type: Boolean,
            default: false
        },
    },
    data() {
        return {
            openShow: false,
            form: {},
            rules: {
                wcName: [
                    { required: true, message: '请选择', trigger: 'blur' },
                ],
                slotNo: [
                    { required: true, message: '请选择', trigger: 'blur' },
                ],
                daicechengfen: [
                    { required: true, message: '请输入', trigger: 'blur' },
                ],
                gongyihanliang: [
                    { required: true, message: '请选择', trigger: 'blur' },
                ],
                mubiaozhi: [
                    { required: true, message: '请输入', trigger: 'blur' },
                ],
                jisuangongshi: [
                    { required: true, message: '请选择', trigger: 'blur' },
                ],
                hauyanren: [
                    { required: true, message: '请选择', trigger: 'blur' },
                ],
                zhuguangongyi: [
                    { required: true, message: '请选择', trigger: 'blur' },
                ],
                youxiaoqi: [
                    { required: true, message: '请选择', trigger: 'blur' },
                ],
                textCycle: [
                    { required: true, message: '请选择', trigger: 'blur' },
                ],
                cesuanzhouqi: [
                    { required: true, message: '请输入', trigger: 'blur' },
                ],
                yaopinwuliaohao: [
                    { required: true, message: '请选择', trigger: 'blur' },
                ],
                yaopinwuliaomingcheng: [
                    { required: true, message: '请输入', trigger: 'blur' },
                ],
                banzu: [
                    { required: true, message: '请输入', trigger: 'blur' },
                ],
                celiangdanwei:[
                    { required: true, message: '请输入', trigger: 'blur' },
                ],
                tianjialiangdanwei:[
                    { required: true, message: '请输入', trigger: 'blur' },
                ],
            },
            monthTags: [],
            yearTags: [],
        }
    },
    mounted() {
        this.openShow = this.showDialog
    },
    methods: {
        // 切换周期
        changeCycle() {
            this.form.monthValue = ''
            this.form.weekList = []
            this.monthTags = []
            this.form.yearMonth = ''
            this.form.yearDays = ''
            this.yearTags = []
        },
        // 添加月份日期
        addMonth() {
            let value = this.form.monthValue + '日'
            if (this.monthTags.find(item => item == value)) return
            this.monthTags.push(this.form.monthValue + '日')
        },
        // 添加年份日期
        addYears() {
            let value = this.form.yearMonth + '月' + this.form.yearDays + '日'
            if (this.yearTags.find(item => item == value)) return
            if (this.form.yearMonth == '' || this.form.yearDays == '') return
            this.yearTags.push(this.form.yearMonth + '月' + this.form.yearDays + '日')
        },
        // 删除月份日期
        closeMonthTag(item, index) {
            this.monthTags = this.monthTags.filter(tags => tags != item)
        },
        // 删除年份日期
        closeYearsTag(item, index) {
            this.yearTags = this.yearTags.filter(tags => tags != item)
        },
        closeDialog() {
            this.openShow = false
            this.$emit('closeDialog');
        }
    }
}
</script>
<style lang="scss" scoped></style>