<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>

            </template>
            <template #menu="scope">
                <!--    是否展示 -->
                <el-button type="text" v-if="scope.row.special" @click="setCrew(scope.row.ppsId)"> 设置班组</el-button>
            </template>
            <template #menu-right="{ size }">
                <span style="display: inline-flex;margin-right: 12px;">
                    <el-button type="primary">导入</el-button>
                </span>
            </template>

            <template #assist="scope">
                <el-tag v-if="scope.row.assist" type="success">是</el-tag>
                <el-tag v-else type="danger">否</el-tag>
            </template>
            <template #special="scope">
                <el-tag v-if="scope.row.special" type="success">是</el-tag>
                <el-tag v-else type="danger">否</el-tag>
            </template>
            <template #mainProcess="scope">
                <el-tag v-if="scope.row.mainProcess" type="success">是</el-tag>
                <el-tag v-else type="danger">否</el-tag>
            </template>
            <template #assist-form="{ type, disabled }">
                <el-checkbox v-model="form.assist">不分派</el-checkbox>
            </template>
            <template #assist-label="{ type, disabled }">
                <span></span>
            </template>
            <template #special-form="{ type, disabled }">
                <el-checkbox v-model="form.special">特殊</el-checkbox>
            </template>
            <template #special-label="{ type, disabled }">
                <span></span>
            </template>
            <template #mainProcess-form="{ type, disabled }">
                <el-checkbox v-model="form.mainProcess">主工序</el-checkbox>
            </template>
            <template #mainProcess-label="{ type, disabled }">
                <span></span>
            </template>
            <template #eleStream-form="{ type, disabled }">
                <el-checkbox v-model="form.eleStream">电流(A)</el-checkbox>
            </template>
            <template #eleStream-label="{ type, disabled }">
                <span></span>
            </template>
            <template #eleRate-form="{ type, disabled }">
                <el-checkbox v-model="form.eleRate">电导率</el-checkbox>
            </template>
            <template #eleRate-label="{ type, disabled }">
                <span></span>
            </template>
            <template #phValue-form="{ type, disabled }">
                <el-checkbox v-model="form.phValue">PH</el-checkbox>
            </template>
            <template #phValue-label="{ type, disabled }">
                <span></span>
            </template>
            <template #niValue-form="{ type, disabled }">
                <el-checkbox v-model="form.niValue">Ni+</el-checkbox>
            </template>
            <template #niValue-label="{ type, disabled }">
                <span></span>
            </template>
            <template #vSpeed-form="{ type, disabled }">
                <el-checkbox v-model="form.vSpeed">转速/振频</el-checkbox>
            </template>
            <template #vSpeed-label="{ type, disabled }">
                <span></span>
            </template>
            <template #cyropactorControl-form="{ type, disabled }">
                <el-checkbox v-model="form.cyropactorControl">整流机控制模式</el-checkbox>
            </template>
            <template #cyropactorControl-label="{ type, disabled }">
                <span></span>
            </template>

            <template #name="{ row }">
                <i :class="row.source" style="margin-right: 5px" />
                <span>{{ row.name }}</span>
            </template>
            <template #source="{ row }">
                <div style="text-align: center">
                    <i :class="row.source" />
                </div>
            </template>
        </avue-crud>

        <setCrew :id="ppsId" :set-crew-open="setCrewOpen" v-if="setCrewOpen" type="abnormalConfig"
            @setCrewOpeSancel="setCrewOpeSancel" />
    </basic-container>
</template>
<script>
import { getLazyList, remove, update, add, getMenu } from '@/api/system/menu';

import { mapGetters } from 'vuex';
import { getQueryAllCaList, getQueryAllCaDeatils, getQueryAllCaSave, getQueryAllCaDel } from '@/api/processManagement/processCapability';
import { getDictionary } from '@/api/system/dict';
import setCrew from "@/components/dialogCom/setCrew.vue"

export default {
    components: {
        setCrew
    },
    data() {
        return {
            ppsId: null,
            setCrewOpen: false,
            form: {},
            query: {},
            loading: true,
            selectionList: [],
            parentId: '',
            page: {
                pageSize: 10,
                currentPage: 1,
                total: 0,
            },
            option: {
                height: 'auto',
                calcHeight: 32,
                tip: false,
                simplePage: true,
                searchShow: true,
                searchMenuSpan: 6,
                searchIcon: true,
                searchIndex:3,
                tree: false,
                border: true,
                index: true,
                selection: false,
                viewBtn: true,
                delBtn: false,
                editBtn: false,
                editBtnText: '修改',
                addBtnIcon: ' ',
                viewBtnIcon: ' ',
                delBtnIcon: ' ',
                editBtnIcon: ' ',
                viewBtnText: '详情',
                // labelWidth: 120,
                menuWidth: 140,
                dialogWidth: 1200,
                dialogClickModal: false,
                searchEnter: true,
                excelBtn: false,
                filterBtn: true,
                searchShowBtn: false,
                columnSort: true,
                excelBtn: true,
                columnSort: true,
                showOverflowTooltip: true,
                menuAlign: 'left',
               searchLabelPosition:'left',
searchLabelPosition:'left',
 searchGutter:24,
  searchSpan:6,
menuAlign: 'left',
gridBtn:false,
searchMenuPosition:'right',

                column: [
                    {
                        label: '编码',
                        prop: 'ppsCode',
                        search: true,
                        sortable: true,
                        overHidden: true,
                        order: 9,
                        headerAlign: 'center',
                        align: 'center',
                        searchLabelWidth:45,
                        rules: [
                            {
                                required: true,
                                message: '请输入配置码',
                                trigger: 'blur',
                            },
                        ],
                    },
                    {
                        label: '名称',
                        prop: 'ppsName',
                        sortable: true,
                        search: true,
                        overHidden: true,
                        order: 8,
                        width: 200,
                        headerAlign: 'center',
                        align: 'left',
                        searchLabelWidth:45,
                        rules: [
                            {
                                required: true,
                                message: '请选择镀种分类',
                                trigger: 'click',
                            },
                        ],
                    },
                    {
                        label: '不分派',
                        prop: 'assist',
                        sortable: true,
                        search: true,
                        overHidden: true,
                        span: 8,
                        headerAlign: 'center',
                        align: 'center',
                        searchLabelWidth:60,
                        rules: [
                            {
                                required: false,
                                message: '请输入镀种',
                                trigger: 'click',
                            },
                        ],
                    },
                    {
                        label: '特殊',
                        prop: 'special',
                        sortable: true,
                        search: true,
                        overHidden: true,
                        span: 8,
                        headerAlign: 'center',
                        align: 'center',
                        searchLabelWidth:45,
                        rules: [
                            {
                                required: false,
                                message: '请输入镀层编码',
                                trigger: 'click',
                            },
                        ],
                    },
                    {
                        label: '主工序',
                        prop: 'mainProcess',
                        sortable: true,
                        search: false,
                        span: 8,
                        headerAlign: 'center',
                        align: 'center',
                        rules: [
                            {
                                required: false,
                                message: '请输入镀种小类',
                                trigger: 'click',
                            },
                        ],
                    },
                    {
                        label: '班组',
                        prop: 'team',
                        sortable: true,
                        search: false,
                        overHidden: true,
                        display: false,
                        headerAlign: 'center',
                        align: 'left',
                        rules: [
                            {
                                required: false,
                                message: '请输入材料',
                                trigger: 'click',
                            },
                        ],
                    },
                    {
                        label: '标准周期',
                        prop: 'cycle',
                        sortable: true,
                        search: false,
                        order: 7,
                        span: 24,
                        headerAlign: 'center',
                        align: 'center',
                        rules: [
                            {
                                required: true,
                                message: '请输入标准周期',
                                trigger: 'click',
                            },
                        ],
                    },
                    {
                        label: '电流(A)',
                        prop: 'eleStream',
                        display: true,
                        hide: true,
                        span: 8,
                    },
                    {
                        label: '电导率',
                        prop: 'eleRate',
                        display: true,
                        hide: true,
                        span: 8,
                    },
                    {
                        label: 'PH',
                        prop: 'phValue',
                        display: true,
                        hide: true,
                        span: 8,
                    },
                    {
                        label: 'Ni+',
                        prop: 'niValue',
                        display: true,
                        hide: true,
                        span: 8,
                    },
                    {
                        label: '转速/振频',
                        prop: 'vSpeed',
                        display: true,
                        hide: true,
                        span: 6,
                    },
                    {
                        label: '整流机控制模式',
                        prop: 'cyropactorControl',
                        display: true,
                        hide: true,
                        span: 10,
                    },
                ],
            },
            data: [],


        }
    },
    computed: {
        ...mapGetters(['userInfo', 'permission']),
        permissionList() {
            return {
                addBtn: this.validData(this.permission.menu_add, false),
                viewBtn: this.validData(this.permission.menu_view, false),
                delBtn: this.validData(this.permission.menu_delete, false),
                editBtn: this.validData(this.permission.menu_edit, false),
            };
        },
        ids() {
            let ids = [];
            this.selectionList.forEach(ele => {
                ids.push(ele.id);
            });
            return ids.join(',');
        },
    },
    methods: {
        // 设置班组人员
        setCrew(ppsId) {
            console.log(9999, ppsId)
            this.ppsId = ppsId;
            this.setCrewOpen = true;
        },
        // 设置班组人员弹框关闭
        setCrewOpeSancel(isRefresh) {
            if (isRefresh) {
                this.$refs.myTable.load();
            }
            this.setCrewOpen = false;
        },
        initData() {
            // getMenuTree().then(res => {
            //     const column = this.findObject(this.option.column, 'parentId');
            //     column.dicData = res.data.data;
            // });
        },
        handleAdd(row) {
            this.parentId = row.id;
            const column = this.findObject(this.option.column, 'parentId');
            column.value = row.id;
            column.addDisabled = true;
            this.$refs.crud.rowAdd();
        },
        // 保存
        rowSave(row, done, loading) {
            // add(row).then(
            //     res => {
            //         // 获取新增数据的相关字段
            //         const data = res.data.data;
            //         row.id = data.id;
            //         this.$message({
            //             type: 'success',
            //             message: '操作成功!',
            //         });
            //         // 数据回调进行刷新
            //         done(row);
            //     },
            //     error => {
            //         window.console.log(error);
            //         loading();
            //     }
            // );
        },
        // 修改
        rowUpdate(row, index, done, loading) {
            // update(row).then(
            //     () => {
            //         this.$message({
            //             type: 'success',
            //             message: '操作成功!',
            //         });
            //         // 数据回调进行刷新
            //         done(row);
            //     },
            //     error => {
            //         window.console.log(error);
            //         loading();
            //     }
            // );
        },
        rowDel(row, index, done) {
            this.$confirm('确定将选择数据删除?', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(() => {
                    return remove(row.id);
                })
                .then(() => {
                    this.$message({
                        type: 'success',
                        message: '操作成功!',
                    });
                    // 数据回调进行刷新
                    done(row);
                });
        },
        // 重置
        searchReset() {
            this.query = {};
            this.parentId = 0;
            this.onLoad(this.page);
        },
        // 搜索
        searchChange(params, done) {
            this.query = params;
            this.parentId = '';
            this.page.currentPage = 1;
            this.onLoad(this.page, params);
            done();
        },
        // 选中表格数据
        selectionChange(list) {
            this.selectionList = list;
        },
        // 
        selectionClear() {
            this.selectionList = [];
            this.$refs.crud.toggleSelection();
        },
        // 打开弹框 前操作  打开表单前会执行beforeOpen方法
        beforeOpen(done, type) {
            if (['add', 'edit'].includes(type)) {
                this.initData();
            }
            if (['edit', 'view'].includes(type)) {
                getMenu(this.form.id).then(res => {
                    this.form = Object.assign(res.data.data, {
                        hasChildren: this.form.hasChildren,
                    });
                    if (this.form.parentId === '0') {
                        this.form.parentId = '';
                    }
                });
            }
            done();
        },
        // 关闭 弹框  关闭表单前会执行beforeClose方法，
        beforeClose(done) {
            this.parentId = '';
            const column = this.findObject(this.option.column, 'parentId');
            column.value = '';
            column.addDisabled = false;
            done();
        },
        // 切换 页码
        currentChange(currentPage) {
            this.page.currentPage = currentPage;
        },
        // 切换页面 数量
        sizeChange(pageSize) {
            this.page.pageSize = pageSize;
        },

        refreshChange() {
            this.onLoad(this.page, this.query);
        },
        // 加载页面数据
        onLoad(page, params = {}) {
            this.loading = true;

            // getLazyList(this.parentId, Object.assign(params, this.query)).then(res => {
            // this.data = res.data.data;
            this.data = [{
                "assist": false,
                "assistTitle": "否",
                "createMan": {
                    "userId": 541,
                    "userName": "崔殿龙"
                },
                "cycle": 0.0,
                "cyropactorControl": false,
                "deleted": false,
                "eleRate": false,
                "eleStream": false,
                "keyValue": 425,
                "mainProcess": false,
                "mainProcessTitle": "否",
                "niValue": false,
                "phValue": false,
                "ppsCode": "362",
                "ppsId": 425,
                "ppsName": "烧结包装防护",
                "special": false,
                "specialTitle": "否",
                "team": null,
                "vSpeed": false
            },
            {
                "assist": false,
                "assistTitle": "否",
                "createMan": {
                    "userId": 541,
                    "userName": "崔殿龙"
                },
                "cycle": 0.0,
                "cyropactorControl": false,
                "deleted": false,
                "eleRate": false,
                "eleStream": false,
                "keyValue": 424,
                "mainProcess": false,
                "mainProcessTitle": "否",
                "niValue": false,
                "phValue": false,
                "ppsCode": "361",
                "ppsId": 424,
                "ppsName": "玻璃饼印字",
                "special": true,
                "specialTitle": "是",
                "team": null,
                "vSpeed": false
            },
            {
                "assist": false,
                "assistTitle": "否",
                "createMan": {
                    "userId": 541,
                    "userName": "崔殿龙"
                },
                "cycle": 0.0,
                "cyropactorControl": false,
                "deleted": false,
                "eleRate": false,
                "eleStream": false,
                "keyValue": 423,
                "mainProcess": false,
                "mainProcessTitle": "否",
                "niValue": false,
                "phValue": false,
                "ppsCode": "360",
                "ppsId": 423,
                "ppsName": "玻璃饼振光",
                "special": false,
                "specialTitle": "否",
                "team": null,
                "vSpeed": false
            },
            {
                "assist": false,
                "assistTitle": "否",
                "createMan": {
                    "userId": 541,
                    "userName": "崔殿龙"
                },
                "cycle": 0.0,
                "cyropactorControl": false,
                "deleted": false,
                "eleRate": false,
                "eleStream": false,
                "keyValue": 422,
                "mainProcess": false,
                "mainProcessTitle": "否",
                "niValue": false,
                "phValue": false,
                "ppsCode": "359",
                "ppsId": 422,
                "ppsName": "玻璃饼排蜡玻化（箱式炉）",
                "special": false,
                "specialTitle": "否",
                "team": null,
                "vSpeed": false
            },
            {
                "assist": false,
                "assistTitle": "否",
                "createMan": {
                    "userId": 541,
                    "userName": "崔殿龙"
                },
                "cycle": 0.0,
                "cyropactorControl": false,
                "deleted": false,
                "eleRate": false,
                "eleStream": false,
                "keyValue": 421,
                "mainProcess": false,
                "mainProcessTitle": "否",
                "niValue": false,
                "phValue": false,
                "ppsCode": "358",
                "ppsId": 421,
                "ppsName": "玻璃饼排蜡玻化（链式炉）",
                "special": false,
                "specialTitle": "否",
                "team": null,
                "vSpeed": false
            }]
            this.loading = false;
            this.page.total = this.data.length
            this.selectionClear();
            // });
        },
    },
}
</script>