<template>
  <div>

    <div class="i-layout-page-header">
      <i-page-header title="栏目分类"></i-page-header>
    </div>
    <Card :bordered="false" dis-hover class="ivu-mt">
      <Form ref="formValidate" :model="formValidate">
        <Row type="flex" :gutter="24">
          <Col v-bind="grid">
            <FormItem label="是否显示：">
              <Select v-model="formValidate.status" placeholder="请选择" clearable @on-change="userSearchs">
                <Option value="1">显示</Option>
                <Option value="0">不显示</Option>
              </Select>
            </FormItem>
          </Col>
          <Col v-bind="grid">
            <FormItem label="分类昵称：" label-for="status2">
              <Input search enter-button placeholder="请输入分类昵称" v-model="formValidate.title" @on-search="userSearchs"/>
            </FormItem>
          </Col>
        </Row>
        <Row type="flex">
          <Col v-bind="grid">
            <Button type="primary" v-if="$utils.checkPermissions(paths,'sysmenu/save')" icon="md-add" @click="classAdd" class="mr20">添加菜单栏目</Button>
          </Col>
        </Row>
      </Form>
      <vxe-table
        :border="false"
        class="vxeTable mt25"
        highlight-hover-row
        highlight-current-row
        :loading="loading" ref="xTable"
        header-row-class-name="false"
        :tree-config="{children: 'children',expandAll:true}"
        :data="classList">
        <vxe-table-column field="id" title="ID"  tooltip min-width="20"></vxe-table-column>
        <vxe-table-column field="title" tree-node title="分类昵称" min-width="150"></vxe-table-column>
        <vxe-table-column field="path" title="目录位置"  min-width="150"></vxe-table-column>
        <vxe-table-column field="icon" title="图标"  min-width="80">
          <template v-slot="{ row }">
              <Icon custom="i-icon" :custom="'ivu-icon-' + row.icon"  size="24"></Icon>
          </template>
        </vxe-table-column>
        <vxe-table-column field="seq" title="排序"  min-width="150"></vxe-table-column>
        <vxe-table-column field="is_show" title="状态" min-width="50">
          <template v-slot="{ row }">
            <i-switch v-model="row.is_show" :value="row.is_show" :true-value="1" :false-value="0" @on-change="onchangeIsShow(row)" size="large">
              <span slot="open">显示</span>
              <span slot="close">隐藏</span>
            </i-switch>
          </template>
        </vxe-table-column>
        <vxe-table-column field="action" title="操作"  min-width="150" fixed="right">
          <template v-slot="{ row,index }">
            <a @click="edit(row)" v-if="$utils.checkPermissions(paths,'sysmenu/save')">编辑</a>
            <Divider v-if="$utils.checkPermissions(paths,'sysmenu/save')" type="vertical"/>
            <a @click="del(row,'删除分类',index)" v-if="$utils.checkPermissions(paths,'sysmenu/del')">删除</a>
          </template>
        </vxe-table-column>
      </vxe-table>
    </Card>


      <Modal
        v-model="dialogVisible"
        :title="title"
        @on-cancel="editClose">

      <el-form ref="menu" :model="menu" label-width="80px">
        <el-form-item label="菜单名称" prop="title"
                      :rules="[{ required: true, message: '请输入菜单名称'}]">
          <el-input placeholder="请输入菜单名称" autocomplete="off" v-model="menu.title"></el-input>
        </el-form-item>

        <el-form-item label="栏目地址" prop="path"
                      :rules="[{ required: true, message: '请输入栏目地址'}]"
        >
          <el-input  placeholder="请输入栏目地址" v-model="menu.path"></el-input>
        </el-form-item>

        <el-form-item label="栏目" prop="code"
                      :rules="[{ required: true, message: '请输入栏目code'}]"
        >
          <el-input  placeholder="请输入栏目code" v-model="menu.code"></el-input>
        </el-form-item>


        <el-form-item label="图标">
          <el-input  placeholder="请输入图标" v-model="menu.icon"></el-input>
        </el-form-item>

        <el-form-item label="归属分类"
        >
          <el-select v-model="menu.pid"  placeholder="归属分类" style=" width: 100%">
            <el-option :label="item.html + item.title" :value="item.id" :key="item.id" v-for="item in menuAr"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="排序">
          <el-input  placeholder="排序越高越前面" v-model="menu.seq"></el-input>
        </el-form-item>

        <el-form-item label="是否禁用" style="margin-bottom: 0;">
          <el-radio-group v-model="menu.is_show">
            <el-radio :label="1">正常</el-radio>
            <el-radio :label="0">禁用</el-radio>
          </el-radio-group>
        </el-form-item>

      </el-form>

      <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="subAdmin">确 定</el-button>
        </span>
    </Modal>

  </div>
</template>


<script>
    import { mapState, mapMutations } from 'vuex';
    import IPageHeader from "../../../../layouts/system/page-header/index";
    import {SystemMenuList, SystemMenuSave,SystemMenuGet, SystemMenuStatusSet, SystemMenuTreeList,SystemMenuDel} from "../../../../api/system/menu";
    export default {
        name: "index",
        components: {IPageHeader},
        computed: {
          ...mapState('system/user',['paths']),
        },
        data() {
            return {
                grid: {
                    xl: 7,
                    lg: 7,
                    md: 12,
                    sm: 24,
                    xs: 24
                },
                loading: false,
                formValidate: {
                    status: '',
                    page: 1,
                    limit: 100,
                    title: ''
                },
                menu:{
                    id : 0,
                    title:"",
                    path:"",
                    pid:"0",
                    icon:"",
                    is_show:0,
                    code:"",
                    seq:0
                },
                menuAr:[],
                title : "添加菜单",
                dialogVisible:false,
                total: 0,
                FromData: null,
                classId: 0,
                classList: []
            }
        },

        created() {
            this.initView();
        },
        methods: {

            initView:function(){
              this.getList();
            },

            // 添加配置分类
            classAdd () {
               let loading = this.$loading("加载中...");

              SystemMenuTreeList()
                  .then(res=>{
                      loading.close();
                      this.$refs['menu'].resetFields();
                      this.menu = this.$utils.resetFields(this.menu,{is_show:1});
                      this.title="添加菜单";
                      this.menuAr = ([{"id":0,'title':"顶级栏目","html":""}]).concat(res.data);
                      this.dialogVisible = true;
                  })
                  .catch(err=>{
                      loading.close();
                      this.$alert("网络繁忙，加载失败，请稍等片刻在尝试!", '系统提示');
                  });
            },
            // 编辑
            edit (row) {
                console.log(row);
                let loading = this.$loading("加载中...");
                var promiseAll = [];
                promiseAll.push(SystemMenuTreeList());
                promiseAll.push(SystemMenuGet({id:row.id}));
                Promise.all(promiseAll)
                    .then(res => {
                        loading.close();
                        this.$refs['menu'].resetFields();
                        this.menuAr = ([{"id":0,'title':"顶级栏目","html":""}]).concat(res[0].data);
                        if(res[1].code == 200) {
                            this.title="修改栏目";
                            this.menu = res[1].data;
                            this.dialogVisible = true;
                        } else {
                            this.$alert(res.msg, '系统提示');
                        }
                    }).catch(res => {
                    loading.close();
                    this.$alert("网络繁忙，加载失败，请稍等片刻在尝试!", '系统提示');
                })
            },
            // 删除
            del (row, tit, num) {
                this.$confirm('此操作将永久删除该栏目分类, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$utils.loading(this, "删除数据中...");
                    SystemMenuDel({id: row.id})
                        .then(res => {
                            this.$utils.loadingClose();
                            this.loading = true;
                            if (res.code == 200) {
                                this.getList();
                            } else {
                                this.$alert(res.msg);
                            }
                        })
                        .catch(err => {
                            this.$utils.loadingClose();
                            this.$alert("网络繁忙，加载失败，请稍等片刻在尝试!", '系统提示');
                        });
                });
            },
            // 列表
            getList () {
                this.loading = true;
                this.formValidate.status = this.formValidate.status || '';
                SystemMenuList(this.formValidate).then(res => {
                    if(res.code == 200 ) {
                        this.classList = res.data;
                        this.loading = false;
                    } else {
                        this.loading = false;
                        this.$alert(res.msg);
                    }

                }).catch(res => {
                    console.log(res);
                    this.loading = false;
                    this.$alert("网络繁忙，加载失败，请稍等片刻在尝试!", '系统提示');
                })
            },
            /**
             * 关闭
             */
            editClose:function(){
              this.dialogVisible = false;
            },
            /**
             * 修改数据
             */
            subAdmin:function(){
                this.$refs['menu'].validate((valid) => {
                    if (valid) {
                        let loading = this.$loading("提交数据中...");
                        SystemMenuSave(this.menu)
                            .then(res => {
                                loading.close();
                                if (res.code == 200) {
                                    this.dialogVisible = false;
                                    this.$Message.success("操作成功");
                                    this.getList();
                                } else {
                                    this.$alert(res.msg, '系统提示');
                                }
                            })
                            .catch(err => {
                                loading.close();
                                this.$alert("网络繁忙，加载失败，请稍等片刻在尝试!", '系统提示');
                            });
                    }
                });
            },

            // 表格搜索
            userSearchs () {
                this.getList();
            },
            // 修改是否显示
            onchangeIsShow (row) {
                let data = {
                    id: row.id,
                    is_show: row.is_show
                };
                SystemMenuStatusSet(data).then(async res => {
                    if(res.code == 200) {
                      this.$Message.success(res.msg);
                    } else {
                      this.$Message.error(res.msg);
                    }
                }).catch(res => {
                    this.$Message.error(res.msg);
                })
            }
        }
    }
</script>
<style scoped>

</style>
