<template>
    <basic-container>
        <avue-crud :option="option" :table-loading="loading" :data="data" v-model="form" v-model:page="page" ref="crud"
            @row-del="rowDel" @search-change="searchChange" @search-reset="searchReset"
            @selection-change="selectionChange" @current-change="currentChange" @size-change="sizeChange"
            @refresh-change="refreshChange" @on-load="onLoad">
            <template #menu-left>
                <el-button type="danger" icon="el-icon-delete" @click="handleDelete">删 除
                </el-button>
                <el-button type="success" icon="el-icon-upload" @click="handleImport">导入
                </el-button>
                <el-button type="primary" icon="el-icon-setting" @click="handleSetting">批量设置
                </el-button>
            </template>
            <template #menu="{ row }">
                <el-button type="primary" text plain style="border: 0; background-color: transparent !important"
                    size="medium" @click.stop="handleIssue(row)">下发</el-button>
            </template>
            <template #targetLimit-form="{ type }">
                <div style="width: 100%;display: flex;justify-content: space-between;"
                    v-show="type == 'add' || type == 'edit'">
                    <el-input style="width: 47%;" placeholder="请输入"></el-input>~<el-input style="width: 47%;"
                        placeholder="请输入"></el-input>
                </div>
                <div v-show="type == 'view'">5 ~ 10</div>
            </template>
            <template #proContent-form="{ type }">
                <div style="width: 100%;display: flex;justify-content: space-between;"
                    v-show="type == 'add' || type == 'edit'">
                    <el-input style="width: 47%;" placeholder="请输入"></el-input>~<el-input style="width: 47%;"
                        placeholder="请输入"></el-input>
                </div>
                <div v-show="type == 'view'">5 ~ 10</div>
            </template>
            <template #assayCycle1-form="{ type }">
                <div style="width: 100%;" v-show="type == 'add' || type == 'edit'">
                    <el-select style="width: 200px;margin-bottom: 10px;" v-model="form.assayCycle1">
                        <el-option label="每天" :value="0"></el-option>
                        <el-option label="每周" :value="1"></el-option>
                        <el-option label="每月" :value="2"></el-option>
                        <el-option label="每年" :value="3"></el-option>
                    </el-select>
                    <div class="check_box" v-if="form.assayCycle1 == 1">
                        <el-checkbox-group v-model="checkList1">
                            <el-checkbox :label="getName(item)" :value="item" v-for="item in 7" :key="item" />
                        </el-checkbox-group>
                    </div>
                    <div class="check_box" v-if="form.assayCycle1 == 2">
                        时间: 每月<el-select multiple clearable style="width: 200px;margin-bottom: 10px;"
                            v-model="form.assayCycle13">
                            <el-option v-for="(dayItem, index) in daysDatas" :value="index + 1" :key="index"
                                :label="dayItem">
                            </el-option>
                        </el-select>
                    </div>
                    <div class="check_box" v-if="form.assayCycle1 == 3">
                        时间: <el-select multiple clearable style="width: 200px;margin-bottom: 10px;"
                            v-model="form.assayCycle14">
                            <el-option v-for="(monthsItem, index) in months" :value="index + 1" :key="monthsItem"
                                :label="monthsItem">
                            </el-option>
                        </el-select>
                        月
                        <el-select multiple clearable style="width: 200px;margin-bottom: 10px;"
                            v-model="form.assayCycle15">
                            <el-option v-for="(dayItem, index) in daysDatas" :value="index + 1" :key="dayItem"
                                :label="dayItem">
                            </el-option>
                        </el-select>日
                    </div>

                </div>
                <div v-show="type == 'view'">
                    <div>每周</div>
                    <div class="check_box">
                        <el-checkbox-group v-model="checkList">
                            <el-checkbox :label="getName(item)" :value="item" v-for="item in 7" :key="item" />
                        </el-checkbox-group>
                    </div>
                </div>
                <div>任务若遇周末或当月无该日期，顺延至下周一</div>
            </template>
            <!-- 温度 -->
            <template #radio-form="{ type }">
                <el-radio-group v-model="form.radio">
                    <el-radio :label="1">无温度</el-radio>
                    <el-radio :label="2">室内温度</el-radio>
                    <el-radio :label="3">环境温度</el-radio>
                    <el-radio :label="5">温度范围</el-radio>
                </el-radio-group>
                <el-input v-if="form.radio == 2 || form.radio == 3" v-model="form.huanjingwendu"></el-input>
                <div v-if="form.radio == 5" style="display: flex;">
                    <el-input v-model="form.input" placeholder=""></el-input>
                    <el-select v-model="form.value" placeholder="" style="width: 200px;">
                        <el-option :label="大于" value=">">
                        </el-option>
                        <el-option :label="小于" value=">">
                        </el-option>
                        <el-option :label="大于等于" value=">">
                        </el-option>
                        <el-option :label="小于等于" value=">">
                        </el-option>
                        <el-option :label="等于" value=">">
                        </el-option>
                    </el-select>
                    <el-input v-model="form.input" placeholder=""></el-input>
                </div>
            </template>

            <template #phfanwei-form="{ type }">
                <el-radio-group v-model="form.phfanwei">
                    <el-radio :label="4">无PH</el-radio>
                    <el-radio :label="3">PH范围</el-radio>
                </el-radio-group>
                <div v-if="form.phfanwei == 3" style="display: flex;">
                    <el-input v-model="form.input" placeholder=""></el-input>
                    <el-select v-model="form.value" placeholder="" style="width: 200px;">
                        <el-option :label="大于" value=">">
                        </el-option>
                        <el-option :label="小于" value=">">
                        </el-option>
                        <el-option :label="大于等于" value=">">
                        </el-option>
                        <el-option :label="小于等于" value=">">
                        </el-option>
                        <el-option :label="等于" value=">">
                        </el-option>
                    </el-select>
                    <el-input v-model="form.input" placeholder=""></el-input>
                </div>
            </template>
        </avue-crud>
        <el-dialog title="导入" append-to-body v-model="excelBox" width="555px">
            <avue-form :option="excelOption" v-model="excelForm" :upload-after="uploadAfter">
                <template #excelTemplate>
                    <el-button type="primary" @click="handleTemplate">
                        点击下载<i class="el-icon-download el-icon--right"></i>
                    </el-button>
                </template>
            </avue-form>
        </el-dialog>
        <el-dialog title="批量设置" append-to-body v-model="setBox" width="555px">
            <el-form v-model="settingForm" label-width="80px">
                <el-form-item label="有效期">
                    <el-date-picker v-model="settingForm.reallyDate" type="date" style="width: 100%;"
                        placeholder="请选择有效期" />
                </el-form-item>
                <el-form-item label="主管工艺">
                    <el-select v-model="settingForm.chargeCraft"></el-select>
                </el-form-item>
                <el-form-item label="化验人">
                    <el-select v-model="settingForm.chargeCraft"></el-select>
                </el-form-item>
                <el-form-item label="班组">
                    <el-select v-model="settingForm.chargeCraft"></el-select>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="setBox = false">取 消</el-button>
                    <el-button type="primary" @click="setBox = false">确 定</el-button>
                </span>
            </template>
        </el-dialog>
    </basic-container>
</template>

<script>
export default {
    data() {
        return {
            months: [
                '一月', '二月', '三月', '四月', '五月', '六月',
                '七月', '八月', '九月', '十月', '十一月', '十二月'
            ],
            daysDatas: [
                '1', '2', '3', '4', '5', '6',
                '7', '8', '9', '10', '11', '12', , '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31'
            ],
            excelBox: false,
            loading: false,
            setBox: false,
            data: [],
            settingForm: {},
            checkList: [1, 2, 3, 4, 5, 6, 7],
            option: {
                height: 'auto',
                calcHeight: 32,
                tip: false,
                size: 'medium',
                simplePage: true,
                searchShow: true,
                searchMenuSpan: 6,
                searchIcon: true,
                searchIndex: 3,
                tree: false,
                border: true,
                index: true,
                selection: true,
                viewBtn: true,
                delBtn: true,
                editBtnText: '修改',
                addBtnIcon: ' ',
        viewBtnIcon: ' ',
        delBtnIcon: ' ',
        editBtnIcon: ' ',
                viewBtnText: '详情',
                labelWidth: 120,
                menuWidth: 220,
                dialogWidth: 1200,
                dialogClickModal: false,
                searchEnter: true,
                excelBtn: false,
                filterBtn: true,
                searchShowBtn: false,
                columnSort: true,
                excelBtn: true,
                columnSort: true,
                index: false,
                showOverflowTooltip: true,
                searchLabelPosition:'left',
searchLabelPosition:'left',
 searchGutter:24,
  searchSpan:6,
menuAlign: 'left',
gridBtn:false,
searchMenuPosition:'right',
                column: [
                    {
                        label: '作业中心',
                        prop: 'wcName',
                        type: 'select',
                        sortable: true,
                        width: 150,
                        filter: true,
                        span: 8,
                        search: true,
                        rules: [
                            {
                                required: true,
                                message: '请输入作业中心',
                                trigger: 'blur',
                            },
                        ],
                        dicData: [
                            {
                                label: '化学镀镍作业中心',
                                value: 0
                            },
                            {
                                label: '镀后库作业中心',
                                value: 1
                            }
                        ]
                    },
                    {
                        label: '作业槽',
                        prop: 'slotNo',
                        search: true,
                        type: 'select',
                        sortable: true,
                        width: 120,
                        filter: true,
                        span: 8,
                        dicData: [
                            {
                                label: '#22',
                                value: 0
                            },
                            {
                                label: '#21',
                                value: 1
                            }
                        ],
                        rules: [
                            {
                                required: true,
                                message: '请输入槽号',
                                trigger: 'blur',
                            },
                        ],
                    },
                    {
                        label: '分析项目',
                        prop: 'testEle',
                        search: false,
                        sortable: true,
                        width: 120,
                        filter: true,
                        span: 8,
                        rules: [
                            {
                                required: true,
                                message: '请输入分析项目',
                                trigger: 'blur',
                            },
                        ],
                    },
                    {
                        label: '规范上下限',
                        prop: 'proContent',
                        search: false,
                        sortable: true,
                        width: 120,
                        filter: true,
                        hide: true,
                        span: 8,
                        rules: [
                            {
                                required: true,
                                message: '请输入规范上下限',
                                trigger: 'blur',
                            },
                        ],
                    },
                    {
                        label: '规范上限',
                        prop: 'targetLimit1',
                        search: false,
                        sortable: true,
                        width: 120,
                        filter: true,
                        display: false,
                        // hide:true,
                        span: 8,
                        rules: [
                            {
                                required: true,
                                message: '请输入目标上限',
                                trigger: 'blur',
                            },
                        ],
                    },
                    {
                        label: '规范下限',
                        prop: 'targetLimit2',
                        search: false,
                        sortable: true,
                        width: 120,
                        filter: true,
                        display: false,
                        // hide:true,
                        span: 8,
                        rules: [
                            {
                                required: true,
                                message: '请输入目标上限',
                                trigger: 'blur',
                            },
                        ],
                    },
                    {
                        label: '目标上下限',
                        prop: 'targetLimit',
                        search: false,
                        sortable: true,
                        width: 120,
                        filter: true,
                        hide: true,
                        span: 8,
                        rules: [
                            {
                                required: true,
                                message: '请输入目标上限',
                                trigger: 'blur',
                            },
                        ],
                    },
                    {
                        label: '目标上限',
                        prop: 'targetUpperLimit',
                        search: false,
                        sortable: true,
                        width: 120,
                        filter: true,
                        addDisplay: false,
                        viewDisplay: false,
                        editDisplay: false,
                        span: 8,
                        rules: [
                            {
                                required: true,
                                message: '请输入目标上限',
                                trigger: 'blur',
                            },
                        ],
                    },
                    {
                        label: '目标下限',
                        prop: 'targetLowerLimit',
                        search: false,
                        sortable: true,
                        addDisplay: false,
                        viewDisplay: false,
                        editDisplay: false,
                        width: 120,
                        filter: true,
                        span: 8,
                        rules: [
                            {
                                required: true,
                                message: '请输入目标下限',
                                trigger: 'blur',
                            },
                        ],
                    },
                    {
                        label: '目标值',
                        prop: 'targetValue',
                        search: false,
                        sortable: true,
                        width: 120,
                        filter: true,
                        span: 8,
                        rules: [
                            {
                                required: true,
                                message: '请输入目标值',
                                trigger: 'blur',
                            },
                        ],
                    },
                    {
                        label: '体积',
                        prop: 'drugName',
                        search: false,
                        sortable: true,
                        width: 120,
                        filter: true,
                        span: 8,

                    },
                    {
                        label: '添加点',
                        prop: 'addPoints',
                        search: false,
                        sortable: true,
                        width: 120,
                        filter: true,
                        span: 8,

                    },
                    {
                        label: '计算公式',
                        prop: '计算gongshi',
                        search: false,
                        type: 'select',
                        sortable: true,
                        width: 120,
                        filter: true,
                        span: 8,
                        rules: [
                            {
                                required: true,
                                message: '请选择计算公式',
                                trigger: 'blur',
                            },
                        ],
                        dicData: [
                            {
                                label: '公式一',
                                value: 0
                            },
                            {
                                label: '公式二',
                                value: 1
                            }
                        ],
                    },
                    {
                        label: '温度',
                        prop: 'radio',
                        span: 13,

                    },

                    {
                        label: 'PH值',
                        prop: 'phfanwei',
                        span: 8,
                        width: 120,
                    },

                    {
                        label: '药品名称',
                        prop: 'drugName',
                        search: false,
                        type: 'select',
                        sortable: true,
                        width: 120,
                        filter: true,
                        span: 8,
                        dicData: [
                            {
                                label: '药品一',
                                value: 0
                            },
                            {
                                label: '药品二',
                                value: 1
                            }
                        ],
                    },
                    {
                        label: '药品物料号',
                        prop: 'drugNo',
                        search: false,
                        type: 'select',
                        sortable: true,
                        width: 120,
                        filter: true,
                        hide: true,
                        span: 8,
                        rules: [
                            {
                                required: true,
                                message: '请输入药品物料号',
                                trigger: 'blur',
                            },
                        ],
                        dicData: [
                            {
                                label: '物料一',
                                value: 0
                            },
                            {
                                label: '物料二',
                                value: 1
                            }
                        ],
                    },
                    {
                        label: '药品物料名称',
                        prop: 'drugNoName',
                        disabled: true,
                        search: false,
                        sortable: true,
                        width: 120,
                        filter: true,
                        hide: true,
                        span: 8,
                        rules: [
                            {
                                required: true,
                                message: '请输入药品物料号',
                                trigger: 'blur',
                            },
                        ],
                    },
                    {
                        label: '辅助药品名称',
                        prop: 'drugName2',
                        search: false,
                        type: 'select',
                        sortable: true,
                        width: 140,
                        filter: true,
                        span: 8,
                        dicData: [
                            {
                                label: '药品一',
                                value: 0
                            },
                            {
                                label: '药品二',
                                value: 1
                            }
                        ],
                    },
                    {
                        label: '辅助药品物料号',
                        prop: 'drugNo2',
                        search: false,
                        type: 'select',
                        sortable: true,
                        width: 120,
                        filter: true,
                        hide: true,
                        span: 8,
                        rules: [
                            {
                                required: true,
                                message: '请输入药品物料号',
                                trigger: 'blur',
                            },
                        ],
                        dicData: [
                            {
                                label: '物料一',
                                value: 0
                            },
                            {
                                label: '物料二',
                                value: 1
                            }
                        ],
                    },
                    {
                        label: '辅助药品物料名称',
                        prop: 'drugNoName2',
                        disabled: true,
                        search: false,
                        sortable: true,
                        width: 120,
                        filter: true,
                        hide: true,
                        span: 8,
                        rules: [
                            {
                                required: true,
                                message: '请输入药品物料号',
                                trigger: 'blur',
                            },
                        ],
                    },
                    {
                        label: '辅助药品计算公式',
                        prop: '计算gongshi',
                        search: false,
                        type: 'select',
                        sortable: true,
                        width: 120,
                        filter: true,
                        span: 8,
                        rules: [
                            {
                                required: true,
                                message: '请选择计算公式',
                                trigger: 'blur',
                            },
                        ],
                        dicData: [
                            {
                                label: '公式一',
                                value: 0
                            },
                            {
                                label: '公式二',
                                value: 1
                            }
                        ],
                    },

                    {
                        label: '分析周期',
                        prop: 'assayCycle',
                        search: false,
                        sortable: true,
                        addDisplay: false,
                        viewDisplay: false,
                        editDisplay: false,
                        width: 120,
                        filter: true,
                        span: 8,
                        rules: [
                            {
                                required: true,
                                message: '请输入分析周期',
                                trigger: 'blur',
                            },
                        ],
                    },
                    {
                        label: '测试周期(天)',
                        prop: 'reallyDate',
                        search: false,
                        sortable: true,
                        type: 'date',
                        width: 120,
                        filter: true,
                        span: 8,
                        rules: [
                            {
                                required: true,
                                message: '请输入有效期',
                                trigger: 'blur',
                            },
                        ],
                    },
                    {
                        label: '有效期',
                        prop: 'reallyDate',
                        search: false,
                        sortable: true,
                        type: 'date',
                        width: 120,
                        filter: true,
                        span: 8,
                        display:false,
                        rules: [
                            {
                                required: true,
                                message: '请输入有效期',
                                trigger: 'blur',
                            },
                        ],
                    },
                    {
                        label: '上次化验日期',
                        prop: 'lastTest',
                        search: false,
                        sortable: true,
                        addDisplay: false,
                        viewDisplay: false,
                        editDisplay: false,
                        width: 150,
                        filter: true,
                        span: 8,
                        rules: [
                            {
                                required: true,
                                message: '请输入上次化验日期',
                                trigger: 'blur',
                            },
                        ],
                    },
                    {
                        label: '化验人',
                        prop: 'userName',
                        type: 'select',
                        search: false,
                        sortable: true,
                        width: 120,
                        filter: true,
                        span: 8,
                        rules: [
                            {
                                required: true,
                                message: '请输入化验人',
                                trigger: 'blur',
                            },
                        ],
                    },
                    {
                        label: '主管工艺',
                        prop: 'chargeCraft',
                        type: 'select',
                        search: false,
                        sortable: true,
                        width: 120,
                        filter: true,
                        span: 8,
                        rules: [
                            {
                                required: true,
                                message: '请输入主管工艺',
                                trigger: 'blur',
                            },
                        ],
                    },
                    {
                        label: '班组',
                        prop: 'userName',
                        type: 'select',
                        search: false,
                        sortable: true,
                        width: 120,
                        filter: true,
                        span: 8,
                        rules: [
                            {
                                required: true,
                                message: '请输入班组',
                                trigger: 'blur',
                            },
                        ],
                    },
                    {
                        label: '更新时间',
                        prop: 'updateTime',
                        search: false,
                        sortable: true,
                        width: 120,
                        addDisplay: false,
                        viewDisplay: false,
                        editDisplay: false,
                        filter: true,
                        span: 8,
                        rules: [
                            {
                                required: true,
                                message: '请输入更新时间',
                                trigger: 'blur',
                            },
                        ],
                    },
                    {
                        label: '分析周期',
                        prop: 'assayCycle1',
                        search: false,
                        sortable: true,
                        hide: true,
                        width: 120,
                        filter: true,
                        span: 24,
                        rules: [
                            {
                                required: true,
                                message: '请输入分析周期',
                                trigger: 'blur',
                            },
                        ],
                    },
                ]
            },
            form: {

            },
            page: {
                pageSize: 10,
                currentPage: 1,
                total: 0,
            },
            excelOption: {
                submitBtn: false,
                emptyBtn: false,
                column: [
                    {
                        label: '模板上传',
                        prop: 'excelFile',
                        type: 'upload',
                        drag: true,
                        loadText: '模板上传中，请稍等',
                        span: 24,
                        propsHttp: {
                            res: 'data',
                        },
                        tip: '请上传 .xls,.xlsx 标准格式文件',
                        action: '/blade-system/user/import-user',
                    },
                    {
                        label: '模板下载',
                        prop: 'excelTemplate',
                        formslot: true,
                        span: 24,
                    },
                ],
            },
        }
    },
    mounted() {

    },
    methods: {
        getName(val) {
            return val == 1 ? '周一' : val == 2 ? '周二' : val == 3 ? '周三' : val == 4 ? '周四' : val == 5 ? '周五' : val == 6 ? '周六' : '周日'
        },
        handleImport() {
            this.excelBox = true;
        },
        // 多选
        selectionChange(list) {
            this.selectionList = list;
        },
        selectionClear() {
            this.selectionList = [];
            this.$refs.crud.toggleSelection();
        },
        rowUpdate(row, index, done, loading) {

        },
        rowSave(row, done, loading) {

        },
        searchReset() {
            this.query = {};
            this.onLoad(this.page);
        },
        searchChange(params, done) {
            this.query = params;
            this.page.currentPage = 1;
            this.onLoad(this.page, params);
            done();
        },
        rowDel(row, index, done) {
            this.$confirm('确定将选择数据删除?', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }).then(() => {

            })
        },
        currentChange(currentPage) {
            this.page.currentPage = currentPage;
        },
        sizeChange(pageSize) {
            this.page.pageSize = pageSize;
        },
        refreshChange() {
            this.onLoad(this.page, this.query);
        },
        handleDelete() {
            if (this.selectionList.length === 0) {
                this.$message.warning('请选择至少一条数据');
                return;
            }
            this.$confirm('确定将选择数据删除?', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }).then(() => {
            })
        },
        handleSetting() {
            if (this.selectionList.length === 0) {
                this.$message.warning('请选择至少一条数据');
                return;
            }
            this.setBox = true
        },
        handleIssue(row) {
            this.$confirm('此操作将产生新的任务, 是否继续?', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }).then(() => {
            })
        },
        onLoad() {
            this.loading = true
            this.data = [
                {
                    id: '1',
                    wcName: '化学镀镍作业中心',
                    slotNo: '11#氰化镀铜槽',
                    testEle: '碳酸钠',
                    proContent: '0',
                    targetUpperLimit: '10',
                    targetLowerLimit: '5',
                    targetValue: '3',
                    drugName: '111',
                    addPoints: '0',
                    assayCycle: '7',
                    reallyDate: '2025-10-09',
                    lastTest: '2023-06-13',
                    dueDate: '2023-06-20',
                    userName: '崔殿龙',
                    chargeCraft: '崔殿龙',
                    updateTime: '2024-01-12'
                },
                {
                    id: '2',
                    wcName: '化学镀镍作业中心',
                    slotNo: '22#氰化镀铜槽',
                    testEle: '碳酸钠',
                    proContent: '0',
                    targetUpperLimit: '10',
                    targetLowerLimit: '5',
                    targetValue: '3',
                    drugName: '111',
                    addPoints: '0',
                    assayCycle: '7',
                    reallyDate: '2025-10-09',
                    lastTest: '2023-06-13',
                    dueDate: '2023-06-20',
                    userName: '崔殿龙',
                    chargeCraft: '崔殿龙',
                    updateTime: '2024-01-12'
                }
            ]
            this.page.total = this.data.length
            this.loading = false
            setTimeout(() => {
                this.selectionClear()
            }, 500)
        }
    }
}
</script>

<style lang="scss" scoped></style>
