<template>
    <div>
        <!-- <table-form :formList="formList" :tableConfig="tableConfig" :data="tableData" :pagination="queryFrom"
            @getList="getList" :btnGroup="btnGroup" @handleSearchList="getList"></table-form> -->
            <el-form :inline="true" :model="dataForm"  ref="dataForm">
                <el-form-item prop="name" label="分类名称">
                    <el-input v-model="dataForm.name" placeholder="分类名称" size="medium" class="input" clearable="clearable" />
                </el-form-item>
                <el-form-item>
                    <el-button size="small" type="primary" @click="getList()">查询</el-button>
                    <el-button size="small" type="primary"  @click="add()">新增</el-button>
                </el-form-item>
            </el-form>
       
            <el-table  :data="tableData" border v-loading="loading"
            :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
            row-key="id"
            default-expand-all
             cell-style="padding: 4px 0" size="medium" >
                <el-table-column prop="name"  label="分类名称" />
                <el-table-column prop="level" header-align="center" align="center"  label="分类级别" />
                <!-- <el-table-column prop="parentId" header-align="center" align="center" label="上级编号" /> -->
                <el-table-column prop="sort" header-align="center" align="center" label="排序" />
                <el-table-column prop="showStatus" header-align="center" align="center"  label="状态" :formatter="formatter" />
                <el-table-column header-align="center" align="center" width="150" label="操作">
                    <template #default="scope">
                    <el-button type="text" size="medium"  @click="update(scope.row)">修改</el-button>
                    <el-button type="text" size="medium"  @click="deleteRow(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        <el-dialog :title="dialogTitle" :close-on-click-modal="false" v-model="dialogVisible" width="50%"
            :before-close="handleClose">
            <el-form :model="ruleForm" size="small" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="分类名称" prop="name">
                    <el-input v-model="ruleForm.name"></el-input>
                </el-form-item>
                <el-form-item label="上级编号" prop="parentName">
                    <!-- <popupTree
                    ref="popupTree"
                    :data="tableData" :props="popupTreeProps" 
                    :nodeKey="''+ruleForm.parentId" :currentChangeHandle="handleTreeSelectChange">
                    </popupTree> -->
                    <popupTree
                        v-model="ruleForm.parentName"
                        filterable
                        :tree-options="tableData"
                        :default-props="{  
                                    children: 'children',
                                    label: 'name',
                                    value: 'id'}"
                                @onNodeSelectEvent="handleNodeSelectEvent($event)"
                        />

                </el-form-item>
                <el-form-item label="显示状态" prop="showStatus">
                    <el-select v-model="ruleForm.showStatus" placeholder="请选择显示状态" clearable="clearable">
                        <el-option label="不显示" value="0" />
                        <el-option label="显示" value="1" />
                    </el-select>
                </el-form-item>
                <el-form-item label="排序" prop="sort">
                    <el-input-number v-model="ruleForm.sort" controls-position="right" :min="0"></el-input-number>
                </el-form-item>
                <!-- <el-form-item label="商户图片" prop="icon">
                    <el-upload class="avatar-uploader"  list-type="picture-card" action="#" :auto-upload="false" accept=".png, .jpg, .jpeg"
                    :show-file-list="false" :on-change="handleUpload">
                    <img v-if="ruleForm.icon" :src="ruleForm.icon" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item> -->
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="dialogVisible = false">取 消</el-button>
                <el-button size="small" type="primary" @click="submitForm('ruleForm')">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import popupTree from "../../components/PopupTreeInput.vue"
// import tableForm from '../../components/tableForm.vue'
export default {
    name: 'serviceClassification',
    components: {
        // tableForm,
        popupTree
    },
    data() {
        return {
            popupTreeProps: {
                label: "name",
                children: "children"
            },
            dataForm:{},
            ruleForm: {},
            rules: {
                name: [
                    { required: true, message: '请输入分类名称', trigger: 'blur' },
                ],
                showStatus: [
                    { required: true, message: '请选择显示状态', trigger: 'change' },
                ],
            },
            dialogTitle: '新增',
            dialogVisible: false,
            tableData: [],
            loading:false
        }
    },
    mounted: function() {
        this.getList();
    },
    methods: {
        formatter(row){
            return row.showStatus=='1'?'显示':'不显示'
        },
        handleUpload: function (file) {
            let that = this;
            let fileRaw = file.raw;
            let fd = new FormData();
            fd.append("file", fileRaw);
            // 这里是请求上传接口
            this.$httpData('hxds-wash-car/oss/upload', 'POST', fd, function (resp) {
                that.ruleForm.icon = resp.url;
            });
        },
        add() {
            let that = this;
            that.dialogTitle = '新增'
            that.ruleForm = {}
            that.dialogVisible = true
        },  
        update(row) {
            let that = this;
            that.$http('hxds-wash-car/category/searchById', 'POST', { id: row.id }, true, function (res) {
                if (res.code == 200) {
                    that.dialogTitle = '修改'
                    that.ruleForm = res.data
                    that.dialogVisible = true
                }
                else {
                    this.$message.error(res.msg)
                }
            });
        },
        deleteRow(row) {
            let that = this;
            that.$confirm(`确定要删除选中的记录？`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                that.$http('hxds-wash-car/category/deleteServeByIds', 'POST', { ids: [row.id] }, true, function (resp) {
                    if (resp.code == 200) {
                        that.$message({
                            message: '操作成功',
                            type: 'success',
                            duration: 1200,
                            onClose: () => {
                                that.getList();
                            }
                        });
                    }
                });
            })
        },
        submitForm(formName) {
            let that = this;
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    if(!this.ruleForm.parentId){
                        this.ruleForm.parentId='0'
                        this.ruleForm.level=1
                    }
                    if (this.dialogTitle == '新增') {
                        this.$http('hxds-wash-car/category/insert', 'POST', this.ruleForm, true, function (res) {
                            if (res.code == 200) {
                                that.$message({
                                    message: res.msg || '操作成功',
                                    type: 'success'
                                });
                                that.dialogVisible = false
                                that.getList();
                            }
                            else {
                                that.$message.error(res.msg)
                            }
                        });
                    }
                    else {
                        this.$http('hxds-wash-car/category/update', 'POST', this.ruleForm, true, function (res) {
                            if (res.code == 200) {
                                that.$message({
                                    message: res.msg || '操作成功',
                                    type: 'success'
                                });
                                that.getList();
                                that.dialogVisible = false
                            }
                            else {
                                that.$message.error(res.msg)
                            }
                        });
                    }

                } else {
                    return false;
                }
            });
        },
        handleClose(done) {
            this.dialogVisible = false
        },
        handleNodeSelectEvent(data) {
            console.log(data,8888);
            this.ruleForm.parentId = data.node;
            this.ruleForm.parentName = data.data.label;
            this.ruleForm.level=data.meta.level+1
        },
        getList() {
            let that = this;
            that.loading = true;
            that.$http('hxds-wash-car/category/searchAllCategory', 'POST',  that.dataForm , true, function (resp) {

                if (resp.code == 200) {
                    
                    resp.data.forEach(val=>{
                        val.showStatus=val.showStatus=='1'?'显示':'不显示'
                    })
                    that.tableData = resp.data;
                    // that.queryFrom = Number(page.totalCount);
                    that.loading = false;
                }
                else {
                    that.loading = false;
                }
            });
        },
    }
}
</script>