<template>
  <div class="table">
    <!-- 高级搜索 -->
    <!-- <TableSearch @searchTable="searchTable" /> -->
    <PopForm
      v-if="isShow"
      @closePopForm="closePopForm"
      :data="FormData"
      :roleList="data"
      :that="this"
      @getRoleList="getList"
      :site="site"
    />

    <AddMember
      @getList="getList"
      :data="FormData2"
      v-if="isShow2"
      @closePopForm="closePopForm2"
      :that="this"
      :site="site"
    />
    <AddMenu
      @getList="getList"
      :data="FormData3"
      v-if="isShow3"
      @closePopForm="closePopForm3"
      :that="this"
      :site="site"
    />
    <!-- <MenuSetting
      @getList="getList"
      :data="FormData3"
      v-if="isShow3"
      @closePopForm="closePopForm3"
      :that="this"
      :site="site"
    /> -->
    <div class="columns-action">
      <a-button
        v-show="isDrag"
        @click="dragSubmit"
        type="primary"
        :style="{ margin: '0px 15px 0 0', height: '20px', fontSize: '12px' }"
        >{{ $t("保存") }}</a-button
      >
      <div class="drag" :style="{ marginRight: '15px' }" v-action:Drag>
        <a-tooltip :title="$t('拖拽')">
          <a-dropdown placement="bottomCenter" :trigger="['hover']">
            <a-icon class="action" type="pull-request" />
            <div slot="overlay">
              <a-switch
                :checked-children="$t('开')"
                :un-checked-children="$t('关')"
                v-model="isDrag"
              />
            </div>
          </a-dropdown>
        </a-tooltip>
      </div>
      <a-popconfirm title="确认导出?" @confirm="() => exoprtList()" v-action:Export>
        <div class="add" :style="{ marginRight: '15px' }">
          <a-tooltip title="导出">
            <a-icon class="action" type="download" />
          </a-tooltip>
        </div>
      </a-popconfirm>

      <div
        class="add"
        :style="{ marginRight: '15px' }"
        @click="edit('', that)"
        v-action:Add
      >
        <a-tooltip title="新增">
          <a-icon class="action" type="plus" />
        </a-tooltip>
      </div>

      <!-- 表格大小设置 -->
      <TableSize class="action-size" @changeTableSize="changeTableSize" :that="this" />

      <!-- 表格列设置 -->
      <ActionColumns
        class="action-column"
        @columns="getcolumns"
        :columns-keys="columnsKeys"
        @getTableFixed="getTableFixed"
        @resetTableFixed="resetTableFixed"
        :columns-fixed="columnsFixed"
        :that="this"
      />

      <div class="add" :style="{ marginRight: '15px' }" @click="getList">
        <a-tooltip title="刷新">
          <a-icon class="action" type="reload" />
        </a-tooltip>
      </div>
    </div>
    <a-spin :spinning="isSpinning">
      <a-table
        :defaultExpandAllRows="true"
        v-if="data.length"
        :columns="columns"
        :data-source="data"
        :childrenColumnName="'children'"
        :scroll="{ y: fullHeight - 310 }"
        :size="tableSize"
        row-key="id"
        :pagination="false"
        :customRow="drag"
        :rowClassName="
          (record) => {
            if (record.id == passRow) return 'table-color-dust';
          }
        "
      >
        <!-- name -->
        <span slot="name" slot-scope="name, x">
          <span v-if="!x.isEditName">{{ name }}</span>
          <a-input v-else v-model="x.name" :style="{ width: '150px' }" />
          <div
            v-if="isDrag"
            class="edit"
            :style="{ margin: '0px 5px 0', display: 'inline-block' }"
            @click="
              () => {
                x.isEditName = !x.isEditName;
              }
            "
            v-action:Modify
          >
            <a-tooltip>
              <a-icon v-if="!x.isEditName" class="action" type="edit" />
              <a-icon v-else class="action" type="close" />
            </a-tooltip>
          </div>
          <div
            class="up"
            v-if="isDrag && x.parentId != 0"
            :style="{ marginRight: '0px', display: 'inline-block' }"
            @click="upFristLevel(x, thethis)"
            v-action:Modify
          >
            <a-tooltip :title="$t('menu.table.content.升至第一级')">
              <a-icon class="action" type="vertical-align-top" />
            </a-tooltip>
          </div>
        </span>
        <!-- <a-table
          :columns="columns"
          :data-source="innerData"
          :size="tableSize"
          row-key="id"
          :pagination="false"
          :showHeader="false"
        >
          <template slot="operation" slot-scope="x, y">
            <div>
              <a-button
                type="primary"
                @click="edit(y, that)"
                :style="{ marginRight: '5px' }"
                v-action:Modify
              >
                编辑
              </a-button>

              <a-popconfirm title="确认删除?" @confirm="() => deletedADInfo(y.id)">
                <a-button
                  type="danger"
                  :style="{ background: '#FD572B', marginRight: '5px' }"
                  v-action:Delete
                >
                  删除
                </a-button>
              </a-popconfirm>
            </div>
          </template>
        </a-table> -->

        <!-- 操作 -->
        <template slot="operation" slot-scope="x, y">
          <div>
            <a-button
              type="primary"
              @click="edit3(y, that)"
              :style="{ marginRight: '5px', background: '#16D46B', border: '#16D46B' }"
              v-action:MenuConfig
            >
              {{ $t("菜单配置") }}
            </a-button>
            <a-button
              type="primary"
              @click="edit2(y, that)"
              :style="{ marginRight: '5px', background: '#16D46B', border: '#16D46B' }"
              v-action:SetRole
            >
              {{ $t("成员配置") }}
            </a-button>

            <a-button
              type="primary"
              @click="edit(y, that)"
              :style="{ marginRight: '5px' }"
              v-action:Modify
            >
              {{ $t("编辑") }}
            </a-button>

            <a-popconfirm title="确认删除?" @confirm="() => deletedADInfo(y.id)">
              <a-button
                type="danger"
                :style="{ background: '#FD572B', marginRight: '5px' }"
                v-action:Delete
              >
                {{ $t("删除") }}
              </a-button>
            </a-popconfirm>
          </div>
        </template>
      </a-table>
    </a-spin>
  </div>
</template>
<script>
import "@/common/components/Commonality/Table/less/table.less";
import { exportExcel } from "@/common/components/Commonality/Form/js/form";

import { getRoleList, deleteRole, roleListDrag, roleExport } from "@/baseConfigComponents/api/role.js";
import { getSiteOfRouter } from "@/baseConfigComponents/components/Menu/List/js/utils.js";

import ActionColumns from "@/common/components/Commonality/Table/components/TableSet.vue";
import PopForm from "@/baseConfigComponents/components/Role/Modify/RoleForm.vue";
import TableSearch from "@/common/components/Commonality/Table/components/TableSearch.vue";
import TableSize from "@/common/components/Commonality/Table/components/TableSize.vue";
import AddMember from "@/baseConfigComponents/components/Role/Modify/components/AddMember.vue";
import AddMenu from "@/baseConfigComponents/components/Role/Modify/components/AddMenu.vue";
// import MenuSetting from "@/baseConfigComponents/components/Role/Modify/components/MenuSetting.vue";
import {
  resetFullHeight,
  changeTableSize,
  getcolumns,
  getTableFixed,
  resetTableFixed,
  edit,
  closePopForm,
  goDetail,
  columnsFixed,
  columnsKeys,
  drop,
  mouseenter,
  dragstart,
  dragover,
  dataAddIsEditName,
  dragEndData,
  upFristLevel,
} from "@/common/components/Commonality/Table/js/table.js";
import {
  closePopForm2,
  edit2,
  closePopForm3,
  edit3,
} from "@/baseConfigComponents/components/Role/Modify/js/roleform.js";
import { columns } from "@/baseConfigComponents/components/Role/List/js/columns.js";

export default {
  data() {
    this.thethis = this;
    return {
      columns,
      columns2: [],
      data: [], // 数据
      data2: undefined,
      isShow: false,
      isShow2: false,
      isShow3: false,
      tableSize: "default", // 表格默认大小
      searchParams: {}, // 高级搜索参数
      fullHeight: "", // 页面高度
      FormData: "",
      FormData2: "",
      FormData3: "",
      innerData: "",
      expandedRowKeys: [],

      isSpinning: false,
      site: {},
      isDrag: false,
      isEditName: false, //编辑名字
      passRow: "", //拖拽路过行 class
    };
  },

  created() {
    this.site = getSiteOfRouter(window.location.hash);

    // 初始化表格窗口高度
    resetFullHeight(this);
    this.columns2 = JSON.parse(JSON.stringify(this.columns));

    // //获取广告列表
    this.getList(this.searchParams);
  },
  methods: {
    // 改变表格size  子传父
    changeTableSize,
    // 列设置 展示指定 的参数
    getcolumns,
    // 编辑跳转 表单
    edit,
    //编辑跳转 配置成员
    edit2,
    edit3, //配置菜单
    // 改变列固定方向
    getTableFixed,
    // 重置 列 固定方向
    resetTableFixed,
    // 关闭表单（编辑）
    closePopForm,
    closePopForm2, //配置成员
    closePopForm3, //配置菜单
    // 跳转详情页
    goDetail,
    dataAddIsEditName,
    dragEndData,
    upFristLevel,

    open(expanded, record) {
      // console.log(expanded, record);
      if (expanded) {
        this.innerData = record.children;
        // console.log(record.children);
        this.expandedRowKeys = [];
        this.expandedRowKeys.push(record.id);
      } else {
        this.expandedRowKeys = [];
      }
    },
    // 获取 列表
    getList(searchParams) {
      this.isSpinning = true;
      getRoleList(this.site.siteCode, this.site.siteId).then((res) => {
        // console.log(res.data);
        this.data = res.data;
        this.dataAddIsEditName(this.data, this);
        this.data2 = JSON.parse(JSON.stringify(this.data));
        this.isSpinning = false;
      });
    },

    // 查询
    searchTable(searchParams) {
      this.searchParams = searchParams;
      this.data = JSON.parse(JSON.stringify(this.data2));
      this.getList(this.searchParams);
    },

    // 删除
    deletedADInfo(id) {
      // console.log(id);
      try {
        deleteRole(this.site.siteCode, this.site.siteId, id).then(() => {
          this.$message.success("删除成功");
          this.getList();
        });
      } catch (error) {}
    },

    drag(record, index) {
      return {
        props: {
          draggable: true, // 设置拖拽属性
        },
        style: {
          cursor: "pointer",
        },
        on: {
          dblclick: () => {
            this.edit(record, this);
            // ////////console.log(record, index);
          },
          // 鼠标移入
          mouseenter: (event) => mouseenter(event, this),
          // 开始拖拽
          dragstart: (event) => dragstart(event, this, record, index),
          // 拖动元素经过的元素
          dragover: (event) => dragover(event, this, record, index),
          // 鼠标松开
          drop: (event) => drop(event, this, record, index),
        },
      };
    },

    //拖拽提交
    dragSubmit() {
      var dragMenuData = this.dragEndData(this.data);
      console.log(dragMenuData);
      roleListDrag(dragMenuData).then((res) => {
        this.$message.success("成功！");
        this.isDrag = false;

        this.getList(this.searchParams);
      });
    },
    // 导出
    exoprtList() {
      roleExport()
        .then((res) => {
          exportExcel(res, "角色");
          this.$message.success("导出成功");
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },

  computed: {
    // 提取 标题 传递给子组件
    columnsKeys,
    // 提取 fixed 传递给子组件
    columnsFixed,

    that() {
      return this;
    },
  },
  components: {
    ActionColumns,
    PopForm,
    TableSearch,
    TableSize,
    AddMember,
    AddMenu,
    // MenuSetting,
  },
  watch: {
    fullHeight(val) {
      // ///console.log(val);
      this.fullHeight = val;
    },
  },
};
</script>
<style lang="less" scoped>
.table-color-dust {
  background-color: #1890ff !important;
}
</style>
