<template>
    <div>
        <avue-crud :option="option" v-model:search="search" :table-loading="loading" :data="data" v-model:page="page" :before-open="beforeOpen"
            v-model="form" ref="crud" @row-update="rowUpdate" 
            @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="primary" @click="handleAdd">新 增</el-button>
                <!-- <el-button type="primary"    @click="handleSet">批量设置分类</el-button> -->
            </template>
            <template #menu="scope">
                <el-button type="text" @click="handleEdit(scope.row,scope.$index)">修改</el-button>
                <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
            </template>
        </avue-crud>
        <el-dialog title="项目" append-to-body v-model="showDialog" width="60%">
            <div>
                <el-button type="primary" @click="insertEvent()">插入一行</el-button>
                <el-button plain type="danger" @click="remove">删除选择行</el-button>
                <!--  <el-button type="primary" @click="handleSave">保存</el-button> -->
            </div>
            <div style="margin-top: 20px;">
                <el-table :data="tidList" @selection-change="selectionChangeProject" @select="selectChange">
                    <el-table-column type="selection" width="55px"></el-table-column>
                    <el-table-column label="编码" prop="code">
                        <template #default="scope">
                            <el-input v-model="scope.row.code"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column label="名称" prop="name">
                        <template #default="scope">
                            <el-input v-model="scope.row.name"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column label="类型" prop="itemType">
                        <template #default="scope">
                            <el-select v-model="scope.row.itemType" placeholder="请选择" style="width: 240px">
                                <el-option
                                    v-for="item in typeList"
                                    :key="item.id"
                                    :label="item.dictValue"
                                    :value="item.dictKey"
                                />
                            </el-select>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <template #footer>
            <span class="dialog-footer">
                <el-button @click="showDialog = false">取 消</el-button>
                <el-button type="primary" @click="handleSave">确 定</el-button>
            </span>
        </template>
        </el-dialog>
    </div>
</template>

<script>
import {getList,getType,addItem,getDetail,deleteItem,editItem} from '@/api/productionInspection/trialItem'
export default {
    data() {
        return {
            loading: false,
            data: [],
            form: {},
            showDialog: false,
            tidList: [],
            rowId: null,     //选中的id
            projectArr: [],
            deleteTidArr: [],    //删除的数据
            page: {
                pageSize: 10,
                currentPage: 1,
                total: 0,
            },
            search:{},
            option: {
                tip: false,
                align: 'center',
                height: 'auto',
                searchLabelWidth: 120,
                simplePage: true,
                searchShow: true,
                searchMenuSpan: 6,
                searchIcon: true,
                searchIndex: 3,
                tree: false,
                border: true,
                selection: false,
                viewBtn: false,
                editBtn: false,
                addBtn: false,
                delBtn: false,
                editBtnText: '修改',
                viewBtnText: '详情',
                labelWidth: 120,
                menuWidth: 120,
                dialogWidth: 800,
                dialogClickModal: false,
                searchEnter: true,
                excelBtn: false,
                filterBtn: true,
                searchShowBtn: false,
                excelBtn: true,
                index: true,
                showOverflowTooltip: true,
                searchLabelPosition: 'left',
                searchGutter: 24,
                searchSpan: 6,
                menuAlign: 'left',
                gridBtn: false,
                searchMenuPosition: 'right',
                addBtnIcon: ' ',
                viewBtnIcon: ' ',
                delBtnIcon: ' ',
                editBtnIcon: ' ',
                column: [
                    {
                        label: '编码',
                        prop: 'code',
                        addDisplay: false,
                        // editDisplay: false,
                        span: 24,
                        search: true,
                        searchLabelWidth:50,
                        rules: [
                            {
                                required: true,
                                message: '请输入编码',
                                trigger: 'click',
                            },
                        ],
                    },
                    
                    {
                        label: '名称',
                        prop: 'name',
                        addDisplay: false,
                        // editDisplay: false,
                        span: 24,
                        search: true,
                        searchLabelWidth:50,
                        rules: [
                            {
                                required: true,
                                message: '请输入名称',
                                trigger: 'click',
                            },
                        ],
                    },
                    {
                        label: '类型',
                        prop: 'itemType',
                        span: 24,
                        search: true,
                        searchLabelWidth:50,
                        type:"select",
                        dicUrl:'/blade-system/dict/dictionary?code=InspectionItem-ItemType',
                        props: { label: 'dictValue', value: 'dictKey' },
                        // dicData:[
                        //     {
                        //         label:'性能检测',
                        //         value:1
                        //     },
                        //     {
                        //         label:'尺寸检测',
                        //         value:2
                        //     },
                        // ],
                        rules: [
                            {
                                required: true,
                                message: '请输入名称',
                                trigger: 'click',
                            },
                        ],
                    },
                ]
            },
            typeList:[]
        }
    },
    mounted() {
        this.getTypeList()
    },
    methods: {
        getTypeList(){
            getType().then(res =>{
                this.typeList = res.data.data
            })
        },
        handleAdd() {
            this.showDialog = true
            this.tidList = []
        },
        insertEvent() {
            const record = { _select: false };
            this.tidList.push(record)
        },
        searchChange(params, done){
            this.page.currentPage = 1;
            this.onLoad();
            done();
        },
        searchReset(){
            this.page.currentPage = 1
            this.search = {}
            this.onLoad()
        },
        currentChange(currentPage) {
            this.page.currentPage = currentPage;
        },
        sizeChange(pageSize) {
            this.page.pageSize = pageSize;
        },
        refreshChange() {
            this.onLoad();
        },
        remove() {
            let arr = this.tidList.filter(item => item._select)
            if (arr.length != 0) {
                this.$confirm('确定将选择数据删除?', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }).then(() => {
                    if (this.rowId) {
                        let deleteData = this.tidList.filter(item => item._select)
                        this.deleteTidArr = deleteData.filter(item => item.tidId)
                    }
                    let deleteArr = this.tidList.filter(item => !item._select)
                    this.tidList = deleteArr
                })
            } else {
                this.$message.error('请至少选择一条数据进行操作！')
            }
        },
        selectChange(list, row) {
            row._select = !row._select
        },
        handleEdit(row,index) {
            getDetail({id:row.id}).then(res =>{
                res.data.data.itemType = res.data.data.itemType + ''
                this.$refs.crud.rowEdit(res.data.data, index)
            })
        },
        rowUpdate(form, index, done, loading){
            editItem(form).then(res =>{
                if(res.data.code == 200){
                    this.$message.success('修改成功')
                    this.onLoad()
                    done()
                }
            })
        },
        handleSave() {
            if (this.tidList.length == 0) {
                this.$message.error('请至少填写一条数据')
            } else {
                let tmp = this.tidList.find(item => !item.code || !item.name || !item.itemType)
                if (tmp) {
                    this.$message.error('数据请填写完整!')
                }else{
                    addItem(this.tidList).then(res =>{
                        if(res.data.code == 200){
                            this.$message.success('新增成功')
                            this.showDialog = false
                            this.onLoad()
                        }
                    })
                }
            }
        },
        handleDelete(row){
            this.$confirm('确定将选择数据删除?', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }).then(() => {
                deleteItem({ids:row.id}).then(res =>{
                    if(res.data.code == 200){
                        this.$message.success('删除成功')
                        this.onLoad()
                    }
                })
            })
            
        },
        onLoad() {
            this.loading = true
            getList({current:this.page.currentPage,size:this.page.pageSize,...this.search}).then(res =>{
                this.data = res.data.data.records
                this.page.total = res.data.data.total
                this.loading = false
            })
            // this.data = [
            //     { amId: 3, code: '003', name: '泄漏率检测' },
            //     { amId: 4, code: '002', name: '外观检测' },
            //     { amId: 5, code: '001', name: '厚度检测' },
            // ]
            // this.loading = false
        },
    }
}
</script>

<style></style>