<template>
  <div class="airportInfo scroll-y">
    <div class="wrap">
      <Minheader :is-auth="true" :is-statuser="true" @addForm="addForm">
        <template #header>
          <div class="status flex-wrap">
            <div class="manageTitle">菜单管理</div>
          </div>
        </template></Minheader
      >
      <div class="app-containers">
        <el-table
          :data="tableData"
          style="width: 100%"
          :row-style="rowStyle"
          :row-class-name="tableRowClassName"
          :cell-class-name="cellClassName"
          :row-key="
            props.tableProperty.rowKey
              ? props.tableProperty.rowKey
              : tablePropertyDefault.rowKey
          "
          :height="
            props.tableProperty.height
              ? props.tableProperty.height
              : tablePropertyDefault.height
          "
          :max-height="
            props.tableProperty.maxHeight
              ? props.tableProperty.maxHeight
              : tablePropertyDefault.maxHeight
          "
          :stripe="
            props.tableProperty.stripe
              ? props.tableProperty.stripe
              : tablePropertyDefault.stripe
          "
          :border="
            props.tableProperty.border
              ? props.tableProperty.border
              : tablePropertyDefault.border
          "
          :highlight-current-row="
            props.tableProperty.highlightCurrentRow
              ? props.tableProperty.highlightCurrentRow
              : tablePropertyDefault.highlightCurrentRow
          "
          :header-cell-class-name="
            props.tableProperty.headerRowClassName
              ? props.tableProperty.headerRowClassName
              : tablePropertyDefault.headerRowClassName
          "
          :tooltip-effect="
            props.tableProperty.tooltipEffect
              ? props.tableProperty.tooltipEffect
              : tablePropertyDefault.tooltipEffect
          "
          :show-summary="
            props.tableProperty.showSummary
              ? props.tableProperty.showSummary
              : tablePropertyDefault.showSummary
          "
        >
          <el-table-column label="菜单名称" class="infinite-list-item">
            <template #default="scope">
              <div style="display: flex; align-items: center">
                <component
                  :is="scope.row.icon"
                  style="width: 2rem; height: 2rem"
                >
                </component>
                <span style="margin-left: 10px">{{ scope.row.menuName }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="menuCode"
            label="菜单编码"
            class="infinite-list-item"
          />
          <el-table-column
            prop="treeSort"
            label="排序"
            class="infinite-list-item"
          />
          <el-table-column
            prop="menuType"
            label="菜单类型"
            class="infinite-list-item"
          >
            <template #default="scope">
              <div class="catalogue">
                <span>{{ scope.row.menuType }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="visible"
            label="可见"
            class="infinite-list-item"
          />
          <el-table-column
            prop="perms"
            label="权限标识"
            class="infinite-list-item"
          />
          <el-table-column
            prop="component"
            label="组件路径"
            class="infinite-list-item"
          />
          <el-table-column label="状态" class="infinite-list-item">
            <template #default="scope">
              <div style="display: flex; align-items: center">
                <div class="log"></div>
                <span style="margin-left: 10px">{{ scope.row.status }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            v-if="tableBtnGroup.length"
            label="操作"
            width="300px"
            :align="props.tableColumnProperty.align"
          >
            <template #default="scope">
              <el-button
                v-for="(btn, index) in tableBtnGroup"
                :key="index"
                size="small"
                @click="handleClick(scope.$index, scope.row, btn.param)"
                :class="btn.className"
                >{{ btn.name }}</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- <DataTable
          :tableHeader="state.list"
          :tableData="tableData"
          :tableBtnGroup="tableBtnGroup"
          :tableProperty="{ rowKey: 'ID' }"
          @btnClick="btnClick"
        /> -->
      </div>
      <Dialog
        width="628px"
        :flag="flag"
        :type="type"
        :msgTitle="msgTitle"
        @resetForm="resetForm"
        @delRest="delRest"
      >
        <div class="diacont">
          <el-form
            :model="tableForm"
            :rules="formRules"
            ref="systemconfiguration"
          >
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="上级菜单" size="default">
                  <el-select
                    style="width: 100%"
                    v-model="tableForm.parentId"
                    class="input-shadow"
                    filterable
                    default-first-option
                    clearable
                    placeholder="主目录"
                  >
                    <el-option
                      v-for="item in tableOptionser"
                      :key="item.v"
                      :label="item.k"
                      :value="item.v"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label="菜单类型"
                  size="default"
                  :rules="formRules.isNotNull"
                  prop="menuType"
                >
                  <el-radio-group v-model="tableForm.menuType" size="default">
                    <el-radio-button label="目录" />
                    <el-radio-button label="菜单" />
                    <el-radio-button label="按钮" />
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col>
                <!-- <el-icon v-for="(name, index) in icons">
                  <name />
                </el-icon> -->
                <el-form-item label="图标" size="default" prop="icon">
                  <div style="display: flex">
                    <el-input
                      style="width: 178px"
                      v-model="tableForm.icon"
                      placeholder="请输入"
                      @focus="focus()"
                    />
                    <component
                      :is="tableForm.icon"
                      style="width: 2rem; height: 2rem; margin-left: 5px"
                    >
                    </component>
                  </div>
                  <div
                    style="
                      display: flex;
                      flex-wrap: wrap;
                      height: 300px;
                      overflow: scroll;
                      overflow-x: hidden;
                    "
                    v-if="isShow"
                  >
                    <div
                      v-for="(name, index) in icons"
                      :index="index"
                      :key="index"
                      style="cursor: pointer; padding: 1rem"
                      @click="iconck(name)"
                    >
                      <component :is="name" style="width: 2rem; height: 2rem">
                      </component>
                    </div>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label="菜单编码"
                  size="default"
                  :rules="formRules.isNotNull"
                  prop="menuCode"
                >
                  <el-input
                    v-model="tableForm.menuCode"
                    placeholder="请输入菜单编码"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label="菜单名称"
                  size="default"
                  :rules="formRules.isNotNull"
                  prop="menuName"
                >
                  <el-input
                    v-model="tableForm.menuName"
                    placeholder="请输入菜单名称"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label="排序"
                  size="default"
                  :rules="formRules.isNotNull"
                  prop="treeSort"
                >
                  <el-input v-model="tableForm.treeSort" placeholder="" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label="是否外链"
                  size="default"
                  :rules="formRules.isNotNull"
                  prop="isFrame"
                >
                  <el-radio-group v-model="tableForm.isFrame" size="default">
                    <el-radio-button label="是" />
                    <el-radio-button label="否" />
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label="路由地址"
                  size="default"
                  :rules="formRules.isNotNull"
                  prop="path"
                >
                  <el-input v-model="tableForm.path" placeholder="" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label="是否显示"
                  size="default"
                  :rules="formRules.isNotNull"
                  prop="visible"
                >
                  <el-radio-group v-model="tableForm.visible" size="default">
                    <el-radio-button label="是" />
                    <el-radio-button label="否" />
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label="组件路径"
                  size="default"
                  :rules="formRules.isNotNull"
                  prop="component"
                >
                  <el-input v-model="tableForm.component" placeholder="" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label="权限标识"
                  size="default"
                  :rules="formRules.isNotNull"
                  prop="perms"
                >
                  <el-input v-model="tableForm.perms" placeholder="" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label="状态"
                  size="default"
                  :rules="formRules.isNotNull"
                  prop="status"
                >
                  <el-radio-group v-model="tableForm.status" size="default">
                    <el-radio-button label="开启" />
                    <el-radio-button label="关闭" />
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label="是否缓存"
                  size="default"
                  :rules="formRules.isNotNull"
                  prop="isCache"
                >
                  <el-radio-group v-model="tableForm.isCache" size="default">
                    <el-radio-button label="缓存" />
                    <el-radio-button label="不缓存" />
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="备注" size="default">
                  <el-input
                    type="textarea"
                    v-model="tableForm.remark"
                    placeholder="请输入备注"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </Dialog>
    </div>
  </div>
</template>

<script setup lang="ts">
import DataTable from "@/components/tableTemp/index.vue";
import Minheader from "@/components/minheader/index.vue";
import Dialog from "@/components/dialog/index.vue";
import { Timer } from "@element-plus/icons-vue";
import * as ElIcons from "@element-plus/icons-vue";
const formRules = useElement().formRules;
const router = useRouter();
const props = defineProps({
  //表格参数
  tableProperty: {
    type: Object,
    default: {
      height: "100%",
      maxHeight: "100%",
      stripe: true,
      border: true,
      highlightCurrentRow: false,
      rowClassName: "rowClass",
      headerRowClassName: "headerRowClass",
      tooltipEffect: "light",
      showSummary: false,
      rowKey: "",
    },
  },
  //公共表头参数
  tableColumnProperty: {
    type: Object,
    default: {
      width: "",
      fixed: "",
      sortable: false,
      showOverflowTooltip: false,
      align: "center",
      headerAlign: "",
    },
  },
});
//表格参数
const tablePropertyDefault = {
  height: "100%",
  maxHeight: "100%",
  stripe: true,
  border: true,
  highlightCurrentRow: false,
  rowClassName: "rowClass",
  headerRowClassName: "headerRowClass",
  tooltipEffect: "light",
  showSummary: false,
  rowKey: "",
};
const tableOptionser = ref([]); //弹窗下拉
const isShow = ref<Boolean>(false);
const flag = ref<Boolean>(false); //弹窗开关
const type = ref<String>(""); //判断是否删除
const TagsAll = ref<Array>([]);
const currentval = ref<String>("");
const TagsAlls = ref<Array>([]);
const currentvals = ref<String>("");
const msgTitle = ref<String>("新增登录策略"); //弹窗标题
const tableColsCopys = reactive<Object>({}); //弹窗
const tableForm = reactive({
  parentId: "",
  menuType: "目录",
  icon: "",
  menuCode: "",
  menuName: "",
  treeSort: "",
  isFrame: "否",
  path: "",
  visible: "是",
  component: "",
  perms: "",
  status: "关闭",
  isCache: "不缓存",
  remark: "",
}); //弹窗内容
//列表
const tableData = ref([
  {
    menuName: "测试",
    menuCode: "测试",
    treeSort: "测试",
    menuType: "测试",
    visible: "测试",
    perms: "测试",
    component: "测试",
    status: "测试",
  },
]);
//表头
const state = reactive({
  list: [
    { label: "名称", key: "name" },
    { label: "有效日期", key: "china" },
    { label: "有效时间", key: "englin" },
    { label: "黑名单", key: "two" },
    { label: "白名单", key: "three" },
    { label: "描述", key: "text" },
  ],
  listLoading: true,
});
const tableBtnGroup = ref([
  {
    name: "修改",
    className: "editBtn",
    param: 2,
  },
  {
    name: "添加子菜单",
    className: "editBtn",
    param: 4,
  },
  {
    name: "删除",
    className: "delBtn",
    param: 3,
  },
]);
//新增
const addForm = () => {
  msgTitle.value = "新增菜单";
  flag.value = true;
  type.value = "";
};
//取消
const resetForm = () => {
  flag.value = false;
  tableForm.name = "";
  tableForm.china = "";
  tableForm.englin = "";
  tableForm.two = "";
  tableForm.three = "";
  tableForm.text = "";
  TagsAll.value = [];
  TagsAlls.value = [];
};
//编辑
// const editDialog = (data) => {
//   msgTitle.value = "编辑航司信息维护";
//   flag.value = true;
//   type.value = "";
//   tableForm.name = data.name;
//   tableForm.china = data.china;
//   tableForm.englin = data.englin;
//   tableForm.two = data.two;
//   tableForm.three = data.three;
//   tableForm.text = data.text;
// };
//编辑-删除
const btnClick = (row, index, param) => {
  if (param === 2) {
    router.push({ path: "/systemSettings/securityPolicyedit" });
    // msgTitle.value = "编辑登录策略";
    // flag.value = true;
    // type.value = "";
    // tableForm.name = index.name;
    // tableForm.china = index.china;
    // tableForm.englin = index.englin;
    // tableForm.two = index.two;
    // tableForm.three = index.three;
    // tableForm.text = index.text;
  } else if (param === 3) {
    msgTitle.value = "删除航司信息维护";
    flag.value = true;
    type.value = "del";
  } else if (param === 4) {
  }
};
//删除
const eleDialog = () => {
  msgTitle.value = "删除登录策略";
  flag.value = true;
  type.value = "del";
};
//删除
const delRest = () => {
  flag.value = false;
};
//按钮点击index为当前行序号 row 为当前行 param按钮类型判断参数由父组件传过来
const handleClick = (index: number, row: Object, param: number) => {
  if (param === 2) {
    msgTitle.value = "编辑菜单";
    flag.value = true;
    type.value = "";
  } else if (param === 3) {
    msgTitle.value = "删除";
    flag.value = true;
    type.value = "del";
  }
};
//行公共样式
const rowStyle = (row: Object, rowIndex: number) => {
  let styleJson: Object = {
    height: "50px",
    fontSize: "14px",
    color: "#101116",
  };
  return styleJson;
};
//表格行class样式 可通过父组件直接传class名称修改当前行样式
const tableRowClassName = (row: Object, rowIndex: number) => {
  if (row.row.rowClass) {
    return row.row.rowClass;
  }
  return "";
};
//向父组件传参 btnClick：点击按钮后    load  触发下拉加载   cellClass 修改某一行class的触发条件
const emit = defineEmits(["btnClick", "load", "cellClass"]);
//给某一格加class
const cellClass = ref("");
const cellClassName = (row: Object) => {
  emit("cellClass", row);
  return cellClass.value;
};
const removeTag = (index) => {
  TagsAll.value.splice(index, 1);
};
const addTags = () => {
  if (currentval) {
    TagsAll.value.push(currentval.value);
    currentval.value = "";
  }
};
const deleteTags = () => {
  TagsAlls.value.pop();
};
const removeTags = (index) => {
  TagsAlls.value.splice(index, 1);
};
const addTagss = () => {
  if (currentvals) {
    TagsAlls.value.push(currentvals.value);
    currentvals.value = "";
  }
};
const deleteTagss = () => {
  TagsAlls.value.pop();
};
// const inputStyle = () => {
//   let style = {};
//   style.width = `${inputLength}px`;
//   return style;
// };
let icons = [];
const getData = () => {
  for (const name in ElIcons) {
    icons.push(name);
  }
  return icons;
};
const focus = () => {
  isShow.value = true;
};
const iconck = (data) => {
  isShow.value = false;
  tableForm.icon = data;
};
getData();
console.log(icons);
defineExpose({
  cellClass,
});
</script>
<style lang="scss" scoped>
::v-deep .el-form-item__label {
  width: 100px;
}
::v-deep .el-radio-button__original-radio:checked + .el-radio-button__inner {
  color: #fff;
  background-color: #ac014d;
  box-shadow: none;
}
.catalogue {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  background: red;
  color: #fff;
  padding: 4px 10px;
}
.log {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: greenyellow;
}
.app-containers {
  height: calc(100vh - 180px);
}
.infinite-list {
  height: 300px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.infinite-list .infinite-list-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  background: var(--el-color-primary-light-9);
  margin: 10px;
  color: var(--el-color-primary);
}
.infinite-list .infinite-list-item + .list-item {
  margin-top: 10px;
}
::v-deep.el-table .rowClass {
  height: 40px;
  font-size: 14px;
  color: #101116;
}
::v-deep.el-table .headerRowClass {
  height: 40px;
  background: #ffffff;
  font-size: 14px;
  font-weight: bold;
  color: #101116;
}
::v-deep .el-table--small .cell {
  display: flex;
  justify-content: center;
}
::v-deep.el-table .editBtn {
  background: #ffffff;
  border: 1px solid #f79ec6;
  box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.06);
  border-radius: 4px;
  font-size: 12px;
  font-weight: 400;
  color: #ac014d;
}

::v-deep.el-table .delBtn {
  background: #eb2f3b;
  box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.06);
  border-radius: 4px;
  font-size: 12px;
  font-weight: 400;
  color: #ffffff;
  border: none;
}
::v-deep.el-table--striped
  .el-table__body
  tr.el-table__row--striped
  td.el-table__cell {
  background-color: #f0f3f7;
}
::v-deep.el-table thead.is-group th.el-table__cell {
  background: #fff;
}
.father_box {
  width: 100%;
  /* width: 300px; */
  box-sizing: border-box;
  background-color: white;
  border: 1px solid #dcdee2;
  border-radius: 4px;
  font-size: 12px;
  text-align: left;
  padding-left: 5px;
  word-wrap: break-word;
  overflow: hidden;
}
/* 标签 */
.spanbox {
  display: inline-block;
  font-size: 14px;
  margin: 0px 4px 0px 0;
  background: #dfe3ea;
  border: 1px solid #e8eaec;
  border-radius: 3px;
}
.tagspan {
  height: 24px;
  line-height: 22px;
  max-width: 99%;
  position: relative;
  display: inline-block;
  padding-left: 8px;
  color: #495060;
  font-size: 14px;
  cursor: pointer;
  opacity: 1;
  vertical-align: middle;
  overflow: hidden;
  transition: 0.25s linear;
  color: rgb(26, 26, 26);
  font-weight: 600;
}
.span_close {
  padding: 0 4px 0 4px;
  opacity: 1;
  -webkit-filter: none;
  filter: none;
  color: rgb(26, 26, 26);
  font-weight: 600;
}
.span_close:after {
  content: "\00D7";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* line-height: 27px; */
  transition: 0.3s, color 0s;
}
/* input */
.inputTag {
  font-size: 16px;
  border: none;
  box-shadow: none;
  outline: none;
  background-color: transparent;
  padding: 0;
  width: auto;
  min-width: 250px;
  vertical-align: top;
  height: 32px;
  color: #495060;
  line-height: 32px;
}
.father_box {
  ::v-deep .el-input__wrapper:hover {
    box-shadow: 0 0 0 0;
  }
  ::v-deep .el-input__wrapper {
    box-shadow: 0 0 0 0;
  }
}
</style>
