<template>
  <div class="content">
    <div class="topSearch">
      <div class="left"></div>
      <div class="right">
        <Button
          type="primary"
          @click="
            add = true;
            modal1 = true;
          "
          >新增</Button
        >
      </div>
    </div>
    <Table
      :loading="$store.state.app.isLoading"
      border
      ref="selection"
      :columns="columns"
      :data="data"
    >
      <template slot-scope="{ row }" slot="action">
        <a
          @click="
            modal1 = true;
            add = false;
            uuid = row.uuid;
            name = row.name;
          "
          >编辑</a
        >
        <a style="margin-left:10px" @click="del(row.uuid)">删除</a>
      </template>
    </Table>
    <Modal
      v-model="modal1"
      title="新增/编辑角色"
      @on-ok="ok"
      @on-cancel="modal1 = false"
    >
      <Form ref="formValidate" :label-width="100">
        <FormItem label="管理员名称" prop="name">
          <Input v-model="name" style="width:60%" placeholder="请输入"></Input>
        </FormItem>
        <FormItem prop="name">
          <Tree
            :data="menu"
            show-checkbox
            multiple
            @on-check-change="onselectchange"
          ></Tree>
        </FormItem>
      </Form>
    </Modal>
    <Pager
      class="margin-top-10"
      :config="config"
      @on-change="handlePager"
    ></Pager>
  </div>
</template>

<script>
import {
  groups,
  groupsDe,
  menus,
  addGroups,
  updateGroups,
  delGroups
} from "@/api/clock/activityClocks";
import { formatDate } from "@/libs/util";
import Pager from "@/view/common/Pager.vue";
export default {
  name: "categories",
  components: {
    Pager
  },
  filters: {
    format(value) {
      return formatDate(value);
    }
  },
  data() {
    return {
      uuid: "",
      modal1: false,
      add: true,
      name: "",
      config: { total: 0, size: 10, current: 1 },
      date: [],
      menu: [],
      second_menu_uuid: [],
      status: null,
      pageIndex: 1,
      pageSize: 10,
      data: [],
      columns: [
        {
          title: "角色名称",
          key: "name"
        },
        {
          title: "操作",
          slot: "action"
        }
      ]
    };
  },
  methods: {
    search() {
      let params = {
        language: "cn",
        page_index: this.pageIndex,
        page_size: this.pageSize
      };
      groups(params).then(res => {
        this.config.total = res.total;
        this.data = res.data;
      });
    },
    onselectchange(p) {
      console.log(p);
      this.second_menu_uuid = p.map(p => {
        if (p.children.length) {
          p.children = p.children.map(i => {
            if (i.children.length) {
              i.children = i.children(l => {
                return l.uuid;
              });
            }
            return i.uuid;
          });
        }
        return p.uuid;
      });
    },
    del(id) {
      delGroups(id).then(res => {
        this.$Message.success("删除成功");
        this.search();
      });
    },
    ok() {
      if (this.add) {
        let params = {
          name: this.name,
          menu_uuid: this.second_menu_uuid
        };
        addGroups(params).then(res => {
          this.$Message.success("增加成功");
          this.search();
        });
      } else {
        let params = {
          name: this.name,
          menu_uuid: this.second_menu_uuid
        };
        updateGroups(this.uuid, params).then(res => {
          this.$Message.success("修改成功");
          this.search();
        });
      }
    },
    getMenus() {
      menus().then(res => {
        this.menu = res.root.map(p => {
          p.title = p.name;
          p.checked = this.second_menu_uuid.includes(p.uuid);
          if (p.children.length) {
            p.children = p.children.map(i => {
              i.title = i.name;
              i.checked = this.second_menu_uuid.includes(i.uuid);
              if (i.children.length) {
                i.children = i.children.map(l => {
                  l.title = l.name;
                  l.checked = this.second_menu_uuid.includes(l.uuid);
                  return l;
                });
              }
              return i;
            });
          }
          return p;
        });
      });
    },
    handlePager(pager) {
      this.pageIndex = pager.current;
      this.pageSize = pager.size;
      this.search();
    },
    edit(p) {
      this.modal1 = true;
      groupsDe(p.uuid).then(res => {
        this.second_menu_uuid = res.second_menu_uuid;
        this.getMenus();
      });
    }
  },
  mounted() {
    this.search();
    this.getMenus();
  }
};
</script>

<style lang="less"></style>
