<template>
  <basic-container>
    <avue-crud
      :option="option"
      :table-loading="loading"
      :data="data"
      v-model:page="page"
      v-model="form"
      ref="crud"
      @row-update="rowUpdate"
      @row-save="rowSave"
      @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>
        </template>
        <template #status="{ row }">
            <div style="display: flex;align-items: center;">
                <span :style="{marginRight:'5px',backgroundColor:row.status == 1 ? '#00A854' : '#F04134',width:'12px',height:'12px',borderRadius:'50%',display:'inline-block'}"></span><span>{{ row.status == 0 ? '暂停使用' : '使用中' }}</span>
            </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>
  </basic-container>
</template>

<script>
export default {
    data(){
        return{
            data:[],
            page: {
                pageSize: 10,
                currentPage: 1,
                total: 0,
            },
            form:{},
            query:{},
            loading:true,
            excelBox:false,
            option:{
                tip: false,
                height: 'auto',
                calcHeight: 32,
                simplePage: false,
                searchShow: true,
                searchMenuSpan: 6,
                searchIcon: true,
                searchIndex: 3,
                tree: false,
                border: true,
                index: true,
                selection: true,
                viewBtn: false,
                delBtn: true,
                editBtnText: '修改',
                viewBtnText:'详情',
                labelWidth: 120,
                menuWidth: 330,
                dialogWidth: 600,
                dialogClickModal: false,
                searchEnter: true,
                filterBtn: true,
                searchShowBtn: false,
                excelBtn: true,
                showOverflowTooltip: true,
                column:[
                    {
                        label: '槽号',
                        prop: 'tsCode',
                        search: true,
                        sortable: true,
                        filter: true,
                        addDisplay:false,
                        editDisplay:false,
                        viewDisplay:false,
                        span: 24,
                        rules: [
                            {
                                required: true,
                                message: '请输入槽号',
                                trigger: 'blur',
                            },
                        ],
                    },
                    {
                        label: '作业中心',
                        prop: 'wcName',
                        type: 'select',
                        sortable: true,
                        filter: true,
                        span: 24,
                        search:true,
                        rules: [
                            {
                                required: true,
                                message: '请输入作业中心',
                                trigger: 'blur',
                            },
                        ],
                        dicData: [
                            {
                                label: '化学镀镍作业中心',
                                value: 0
                            }, 
                            {
                                label: '镀后库作业中心',
                                value: 1
                            }
                        ]
                    },
                    {
                        label: '槽号',
                        prop: 'tsCode1',
                        search: false,
                        sortable: true,
                        filter: true,
                        hide:true,
                        span: 24,
                        rules: [
                            {
                                required: true,
                                message: '请输入槽号',
                                trigger: 'blur',
                            },
                        ],
                    },
                    {
                        label: '作业槽描述',
                        prop: 'wcDescribe',
                        type:'textarea',
                        search: false,
                        sortable: true,
                        filter: true,
                        span: 24,
                        rules: [
                            {
                                required: true,
                                message: '请输入作业槽描述',
                                trigger: 'blur',
                            },
                        ],
                    },
                    {
                        label: '状态',
                        prop: 'status',
                        type:'switch',
                        search: true,
                        sortable: true,
                        filter: true,
                        span: 24,
                        dicData: [
                            { label: '关', value: 0 },
                            { label: '开', value: 1 }
                        ]
                    },
                    {
                        label: '操作人',
                        prop: 'createUser',
                        search: false,
                        sortable: true,
                        filter: true,
                        editDisplay:false,
                        addDisplay:false,
                        span: 24,
                        rules: [
                            {
                                required: true,
                                message: '请输入作业槽描述',
                                trigger: 'blur',
                            },
                        ],
                    },
                    {
                        label: '更新时间',
                        prop: 'updateTime',
                        search: false,
                        sortable: true,
                        editDisplay:false,
                        filter: true,
                        addDisplay:false,
                        span: 24,
                        rules: [
                            {
                                required: true,
                                message: '请输入作业槽描述',
                                trigger: 'blur',
                            },
                        ],
                    },
                ]
            },
            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,
                    },
                ],
            },
            selectionList:[]
        }
    },
    mounted(){},
    methods:{
        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);
        },
        onLoad(){
            this.loading = true
            this.data = [
                {id:'1',tsCode:'045',tsName:'玻璃烧结班组',wcDescribe:'低应力镍槽',status:1,createUser:'张三',updateTime:'2025-01-22 12:23:35'},
                {id:'2',tsCode:'044',tsName:'玻璃烧结班组',wcDescribe:'氰化镀铜槽',status:1,createUser:'张三',updateTime:'2025-01-22 12:23:35'},
                {id:'3',tsCode:'023',tsName:'玻璃烧结班组',wcDescribe:'氰化镀铜槽',status:1,createUser:'张三',updateTime:'2025-01-22 12:23:35'},
                {id:'4',tsCode:'024',tsName:'玻璃烧结班组',wcDescribe:'氰化镀铜槽',status:0,createUser:'张三',updateTime:'2025-01-22 12:23:35'},
                {id:'5',tsCode:'025',tsName:'玻璃烧结班组',wcDescribe:'氰化镀铜槽',status:1,createUser:'张三',updateTime:'2025-01-22 12:23:35'},
            ]
            this.page.total = this.data.length
            this.loading = false
            setTimeout(() =>{
                this.selectionClear();
            },500)
        }
    }
}
</script>

<style>

</style>