<template>
  <div class="menu">
    <div class="menu-head">
      <a-input
        placeholder="接口地址"
        style="width: 300px"
        v-model="searchUrl"
        allowClear
      ></a-input>
      <a-button type="primary" @click="searchList">查询</a-button>
      <a-button type="primary" style="background: green" @click="addMenu"
        >新增</a-button
      >
    </div>
    <standard-table
      :columns="columns"
      :dataSource="tableList"
      :pagination="pagination"
      :loading="loading"
      style="background: #fff"
      @change="onChange"
      :customRow="customRow"
    >
      <div
        class="operation-list"
        slot="operation"
        slot-scope="{ text, record }"
      >
        <a-button type="primary" @click="editMenu({ text, record }, 'auth')"
          >数据权限</a-button
        >
        <a-button type="danger" @click="delMenu({ text, record }, 'auth')"
          >清空</a-button
        >
      </div>
      <div slot="type" slot-scope="record">
        <!-- {{ text }} -->
        {{ record.customScriptFlag == 0 ? "否" : "是" }}
      </div>
      <div slot="permission" slot-scope="{ text }">
        {{
          authList
            .map((v) => {
              return v.value == text ? v.label : "";
            })
            .join("")
        }}
      </div>
    </standard-table>

    <a-modal
      v-model="visible"
      :title="title"
      @ok="handleOk"
      layout="inline"
      width="50%"
      :confirm-loading="confirmLoading"
    >
      <a-form :layout="formLayout">
        <!-- 此处是数据权限 -->
        <a-form-item label="接口地址" v-bind="formItemLayout">
          <a-input placeholder="接口地址" v-model="authPermissions.url" />
        </a-form-item>

        <a-form-item label="是否自定义脚本" v-bind="formItemLayout">
          <a-switch
            checked-children="是"
            un-checked-children="否"
            v-model="authPermissions.customScriptFlag"
          ></a-switch>
          <!-- {{ authPermissions.customScriptFlag }} -->
        </a-form-item>
        <a-form-item
          label="数据权限分类"
          v-bind="formItemLayout"
          v-show="!authPermissions.customScriptFlag"
        >
          <a-select v-model="authPermissions.dataPermissionId">
            <a-select-option
              v-for="item in authList"
              :key="item.value"
              :value="item.value"
              >{{ item.label }}</a-select-option
            >
          </a-select>
        </a-form-item>
        <a-form-item
          label="脚本"
          v-bind="formItemLayout"
          v-show="authPermissions.customScriptFlag"
        >
          <a-input
            placeholder="脚本内容"
            v-model="dataForm.icon"
            type="textarea"
          />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>
  
  <script>
import StandardTable from "@/components/table/StandardTable";

const columns = [
  {
    title: "接口地址",
    dataIndex: "url",
    //
  },

  {
    title: "是否自定义脚本",
    dataIndex: "customScriptFlag",
    scopedSlots: { customRender: "type" },
  },
  {
    title: "数据权限分类",
    dataIndex: "dataPermissionId",
    scopedSlots: { customRender: "permission" },
  },
  {
    title: "脚本内容",
    dataIndex: "scriptContent",
  },

  {
    title: "操作",
    key: "operation",
    scopedSlots: { customRender: "operation" },
  },
];

export default {
  components: {
    StandardTable,
  },
  data() {
    return {
      visible: false,
      confirmLoading: false,
      title: "",
      formLayout: "horizontal",
      menuTypeList: ["目录", "菜单", "按钮"],
      replaceFields: {
        children: "children",
        title: "name",
        key: "id",
      },
      pagination: {
        current: 1,
        defaultPageSize: 10,
        total: 0,
        pagesize0ptions: ["10", "20", "30", "50", "100"],
        hideOnSinglePage: false,
        showQuickJumper: true, //
        showSizeChanger: true, //是否可以改变pagesize
        showTotal: (total) => `共 ${total} 条数据`,
      },
      dataForm: {
        id: 0,
        type: 1,
        name: "",
        parentId: 0,
        parentName: "",
        url: "",
        perms: "",
        orderNum: 0,
        icon: "",
      },
      formItemLayout: {
        labelCol: {
          xs: { span: 5 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
      },
      menuList: [],
      columns,
      tableList: [],
      loading: false,
      resetForm: {},
      authType: false,
      authList: [],
      authPermissions: {
        customScriptFlag: 0,
        dataPermissionId: "",
        id: undefined,
        menuId: 0,
        scriptContent: "",
        url: "",
      },
      searchUrl: "",
    };
  },
  created() {
    this.getList();
    this.resetForm = { ...this.authPermissions };
    this.getAuthList();
  },
  mounted() {},
  methods: {
    searchList() {
      this.pagination.current = 1;
      this.pagination.defaultPageSize = 10;
      this.getList();
    },
    onChange(pagination) {
      // this.$message.info('表格状态改变了')
      // console.log(pagination, filters, sorter, { currentDataSource });
      this.pagination = {
        current: pagination.current,
        defaultPageSize: pagination.pageSize,
        total: pagination.total,
      };
      this.getList();
    },
    customRow(record, index) {
      console.log(record, index);
      return {
        style: {
          cursor: "move",
        },
        // 鼠标移入
        onMouseenter: (event) => {
          // 兼容IE
          var ev = event || window.event;
          ev.target.draggable = true;
        },
        // 开始拖拽
        onDragstart: (event) => {
          console.log(event);
          // 兼容IE
          var ev = event || window.event;
          // 阻止冒泡
          ev.stopPropagation();
          // 得到源目标数据
          this.sourceObj = record;
        },
        // 拖动元素经过的元素
        onDragover: (event) => {
          // 兼容 IE
          var ev = event || window.event;
          // 阻止默认行为
          ev.preventDefault();
        },
        // 鼠标松开
        onDrop: (event) => {
          // 兼容IE
          var ev = event || window.event;
          // 阻止冒泡
          ev.stopPropagation();
          // 得到目标数据
          this.targetObj = record;
          console.log(this.sourceObj, this.targetObj);
          const tempDta = this.data;
          tempDta[this.targetObj.weight] = this.sourceObj;
          tempDta[this.sourceObj.weight] = this.targetObj;
          let weightList = [];
          tempDta.forEach((item, index) => {
            item.weight = index;
            weightList.push({
              id: item.id,
              weight: index,
            });
          });
          // this.handleWeightModify(weightList); // 更改顺序接口
        },
      };
    },

    getAuthList() {
      this.$API.sysManage.getAuthModule("sjqx").then((res) => {
        if (res.data.code === 200) {
          this.authList = [...res.data.data];
        }
      });
    },
    delMenu(item) {
      this.dataForm = { ...item.record };
      let that = this;

      this.$confirm({
        title: "确认删除吗？",
        onOk() {
          that.$API.sysManage
            .removeMenuAuth({ id: item.record.id })
            .then((res) => {
              if (res.data.code === 200) {
                that.$message.success("操作成功");
                that.getList();
              }
            });
        },
      });
      // this.$API.sysManage.delMenuItem([{ id: item.record.id }]).then((res) => {
      //   if (res.data.code === 200) {
      //     this.getList();
      //   }
      // });
    },
    editMenu(item, type) {
      this.title = "编辑";
      this.visible = true;
      this.dataForm = { ...item.record };

      if (type) {
        this.authType = true;
        this.authPermissions.id = item.record.id;
        this.$API.sysManage
          .getMenuAuthItem({ id: item.record.id })
          .then((res) => {
            if (res.data.code === 200) {
              this.authPermissions = { ...res.data.data };
              this.authPermissions.dataPermissionId =
                res.data.data.dataPermissionId;
            }
          });
      } else {
        this.authType = false;
      }
    },
    onSelect(val, { node }) {
      this.dataForm.parentId = val[0];
      this.dataForm.parentName = node.title;
    },
    getList() {
      this.loading = true;
      this.$API.sysManage
        .getAuthList({
          pageNum: this.pagination.current,
          pageSize: this.pagination.defaultPageSize,
          url: this.searchUrl,
        })
        .then((res) => {
          if (res.data.code === 200) {
            this.loading = false;

            this.tableList = [...res.data.data.content];
            this.pagination = {
              current: res.data.data.pageNum,
              defaultPageSize: res.data.data.pageSize,
              total: res.data.data.totalSize,
            };
          }
        });
    },
    addMenu() {
      this.title = "新增";
      this.visible = true;
      this.authPermissions = { ...this.resetForm };
    },
    handleOk() {
      //   this.visible = false;
      // this.confirmLoading = true;

      // console.log(this.authPermissions);
      this.$API.sysManage
        .setMenuAuth({
          customScriptFlag: this.authPermissions.customScriptFlag ? 1 : 0,
          dataPermissionId:
            this.authPermissions.customScriptFlag == 0
              ? this.authPermissions.dataPermissionId
              : undefined,
          id: this.authPermissions.id,
          menuId: this.authPermissions.menuId,
          scriptContent: this.authPermissions.customScriptFlag
            ? this.authPermissions.scriptContent
            : undefined,
          url: this.authPermissions.url,
        })
        .then((res) => {
          if (res.data.code === 200) {
            this.$message.success("操作成功");
            this.confirmLoading = false;
            this.visible = false;
            this.getList();
          }
        });
    },
  },
};
</script>
  <style lang='less' scoped>
.menu {
  display: flex;
  flex-direction: column;
  background: #fff;
  .menu-head {
    display: flex;
    background: #fff;
    padding: 15px;
    box-sizing: border-box;
    button {
      margin-left: 10px;
    }
  }
  /deep/ .ant-form .ant-form-item {
    display: flex !important;
  }
  .operation-list {
    button {
      margin-right: 10px;
    }
  }
}
</style>