<template>
    <div>
        <el-card style="margin-top: 20px;">
            <!-- 查询类别 -->
            <el-form :inline="true" :model="goodsQueryForm">
                <el-form-item label="分类名称" prop="categoryName">
                    <el-input v-model="goodsQueryForm.categoryName" placeholder="请输入分类名称" clearable  @keyup.enter.native="onQuery"></el-input>
                </el-form-item>
                <el-form-item label="状态">
                    <el-select v-model="goodsQueryForm.status" placeholder="请选择商品状态" clearable >
                        <el-option
                        v-for="dict in dict.type.zhzt"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"/>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="onQuery">搜索</el-button>
                    <el-button @click="resetForm" icon="el-icon-refresh" >重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>

        <el-card style="margin-top: 15px;">
            <div class="tTop">分类列表
                <el-button  type="primary" @click="insertGoods" >添加分类</el-button>
            </div>
            <!-- default-expand-all二级菜单默认展开 -->
            <!-- 分类列表 -->
            <el-table
                :data="tableData"
                style="width: 100%;margin-bottom: 20px;"
                row-key="id"
                border
                :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
                <!-- <el-table-column
                prop="id"
                label="序号"
                width="180">
                </el-table-column> -->
                <el-table-column prop="categoryName" label="分类名称" width="180" />
                <el-table-column prop="sorted" label="排序"/>
                <el-table-column prop="status" label="状态" width="180">
                    <template slot-scope="scope">
                        <dict-tag :options="dict.type.zhzt" :value="scope.row.status"/>
                    </template>
                </el-table-column>
                <el-table-column prop="createTime" label="创建时间" width="180" />
                <el-table-column prop="createBy" label="创建人" width="180" />
                <el-table-column label="操作" width="180">
                    <template slot-scope="scope">
                        <el-button type="primary" @click="editeCategory(scope.row)" size="mini">编辑</el-button>
                        <el-button type="danger" @click="delCategory(scope.row.id)" size="mini">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 添加类别对话框 -->
            <el-dialog title="添加分类"  :visible.sync="dialogFormVisible" width="500px">
                <el-form :model="form" :inline="true" :rules="rules" ref="form" >
                    <el-form-item label="上级分类" >
                        <el-select v-model="form.pid" placeholder="请选择上级分类">
                        <el-option
                        v-for="item in goodsOptions"
                        :label="item.categoryName"
                        :value="item.id">
                        </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="分类名称" prop="categoryName" style="margin-left: -8px;">
                        <el-input v-model="form.categoryName" style="width: 300px;"></el-input>
                    </el-form-item>
                    <el-form-item label="排序规则">
                        <el-input-number v-model="form.sorted" @change="handleChange" :min="0" :max="10" style="width: 300px;"></el-input-number>
                    </el-form-item>
                    <el-form-item >
                        <el-radio-group v-model="form.status">
                        <el-radio  v-for="dict in dict.type.zhzt"  :label="dict.value">{{ dict.label }}</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="cancelSubmit">取 消</el-button>
                    <el-button type="primary" @click="dooSubmit">确 定</el-button>
                </div>
            </el-dialog>

            <!-- 修改类别对话框 -->
            <el-dialog title="修改分类"  :visible.sync="editDialogFormVisible" width="500px">
                <el-form :model="editForm" :inline="true" :rules="rules" ref="editForm" >
                    <el-form-item label="上级分类" v-if="isShow">
                        <el-select v-model="editForm.pid" placeholder="请选择上级分类">
                        <el-option
                        v-for="item in goodsOptions"
                        :label="item.categoryName"
                        :value="item.id">
                        </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="分类名称" prop="categoryName" style="margin-left: -8px;">
                        <el-input v-model="editForm.categoryName" style="width: 300px;"></el-input>
                    </el-form-item>
                    <el-form-item label="排序规则">
                        <el-input-number v-model="editForm.sorted" @change="handleChange" :min="0" :max="10" style="width: 300px;"></el-input-number>
                    </el-form-item>
                    <el-form-item >
                        <el-radio-group v-model="editForm.status">
                        <el-radio   v-for="dict in dict.type.zhzt"  :label="dict.value">{{ dict.label }}</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="cancelEdite">取 消</el-button>
                    <el-button type="primary" @click="saveEdite">确 定</el-button>
                </div>
            </el-dialog>

            <div  class="pageSty">
                <pagination
                    v-show="total>0"
                    :total="total"
                    :page.sync="queryParams.pageNum"
                    :limit.sync="queryParams.pageSize"
                    @pagination="getList"/>
            </div>

        </el-card>
    </div>
</template>

<script>
import { selectTree, list,insertCvsGoods,deleteBYId} from "@/api/convenienceStore/goods.js";
import { runInThisContext } from "vm";
export default {
    dicts:['zhzt'],
    data() {
        return {
            //是否修改一二级菜单
            isShow:false,
            //编辑表单
            editForm:{
                pid:'',
                categoryName:'',
                status:'qy',
                sorted:0,
            },
            //父级菜单列表
            goodsOptions:[],
            //查询表单
            goodsQueryForm: {
                categoryName: '',
                status: '',
                pid:"",
                pageNum:'1',
                pageSize:'5'
            },
            // 添加对话框
            dialogFormVisible:false,
            //修改对话框
            editDialogFormVisible:false,
            //对话框表单
            form:{
                pid:'',
                categoryName:'',
                status:'qy',
                sorted:0,
            },
            tableData: [{
                id: '',
                pid:'',
                categoryName: '',
                sorted: '',
                status:'',
                createdTime:'',
                children: []
            }],
            // 总条数
            total: 0,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 5,
                categoryName:'',
                status: undefined,
            },
            aa:[],
            //校验规则
            rules: {
                categoryName: [
                    { required: true, message: '请输入分类名称', trigger: 'blur' },
                ],
            },


        };
    },
    created(){
        this.getList()
    },
    methods: {
        // 编辑类别
        editeCategory(val){
            // this.editForm .categoryName = ''
            // this.editForm.pid = ''
            // this.editForm.status = 'qy'
            // this.editForm.sorted = 0
            if(val.pid !== 0){
                this.isShow = true
            }
            this.editDialogFormVisible = true
            // selectParentById(val).then(response=>{
            //     this.editForm.categoryName = response.data
            //  })

        },
        // 取消编辑
        cancelEdite(){
            this.editDialogFormVisible = false
        },
        // 保存编辑
        saveEdite(){
            this.editDialogFormVisible = false
        },
        // 删除类别
        delCategory(id){
          deleteBYId(id).then(res=>{
            console.log(res)
          })
        },
        //新增商品类别
        insertGoods(){
            this.resetForm('form')
            this.form.categoryName = ''
            this.form.pid = ''
            this.form.status = 'qy'
            this.form.sorted = 0
            this.dialogFormVisible = true
            this.getFirstMenu();
        },
        //获取父类
        getFirstMenu(){
            list(this.form).then(response=>{
                this.goodsOptions = response.data
            })
        },
        //查询商品类别
        onQuery(){
            selectTree(this.goodsQueryForm).then(response=>{
                if (response.code === 200) {
                    if(response.data == null){
                        this.tableData = []
                        console.log(response.data);
                        this.total = 0;
                        this.$message('查询成功');
                    }else{
                        this.tableData = response.data.records
                        this.total = response.data.total;
                        this.$message('查询成功');
                    }
              } else {
                this.$message('查询失败，请联系管理员');
              }
            })
        },
        handleChange(){
        },
        //提交商品类别
        dooSubmit(){
            this.$refs['form'].validate(valid => {
                if (valid) {
                    //新增一级分类
                    if(this.form.pid == '' || this.form.pid == undefined ){
                        this.form.pid = 0
                    }
                    //新增二级
                    insertCvsGoods(this.form).then(response=>{
                        if (response.code === 200) {
                           this.rest()
                            this.$message('新增成功');
                        }else{
                            this.$message('新增失败 请联系管理员');
                        }

                    })


                }
            })
        },
        rest(){
            this.dialogFormVisible = false
            this.resetForm();
            this.goodsOptions = []
        },
        // 取消提交
        cancelSubmit(){
            this.$refs.form.resetFields();//清空
            this.form.categoryName = ''
            this.form.pid = ''
            this.form.status = ''
            this.form.sorted = 0
            this.dialogFormVisible = false
        },
        // 分页查询
        getList(){
            selectTree(this.queryParams).then(response => {
                if(response.code == 200){
                    if(response.data == null){
                        this.tableData = [];
                        this.total = 0;
                    }else{
                        this.tableData = response.data.records;
                        this.total = response.data.total;
                    }
                }else{
                    this.$message('查询失败 请联系管理员')
                }
            });
        },
        // 取消查询
        resetForm(){
            this.goodsQueryForm.categoryName = ''
            this.goodsQueryForm.status = ''
            this.getList()
        },

    },
};
</script>

<style lang="scss" scoped>
.tTop{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.pageSty{
    display: flex;
    justify-content: center;
    margin-left: 250px;
}

</style>
