<template>
  <el-scrollbar :style="{ height: cellScrollHeight + 'px' }">
      <div class="cell-content">
        <router-link
          v-for="(item, index) in quickVisitItem"
          :key="index"
          :to="item.path"
        >
          <div
            class="content-wrapper"
            :style="{ height: Math.floor(cellScrollHeight * 0.3) + 'px' }"
          >
            <div class="visit-item-wrapper">
              <div class="visit-item">
                <img :src="item.icon" alt="" />
                <span>{{ item.name }}</span>
              </div>
            </div>
          </div>
        </router-link>
      </div>

			<el-dialog :visible="visible" title="设置" :before-close="handleClose">
				<div style="text-align: center">
					<el-transfer
						style="text-align: left; display: inline-block"
						v-model="selectedVals"
						filterable
						:titles="['未添加', '已添加']"
						:button-texts="['移除', '添加']"
						:format="{
							noChecked: '${total}',
							hasChecked: '${checked}/${total}',
						}"
						:data="transferData"
					>
					</el-transfer>
				</div>
				<span slot="footer" class="dialog-footer">
					<c-button @click="cancel">取消</c-button>
					<c-button type="primary" @click="save">保存</c-button>
				</span>
			</el-dialog>
    </el-scrollbar>
</template>

<script>
import icons from "./icons.js";

export default {
  props: {
    cellScrollHeight: {
      type: Number,
      required: true,
    },
		quickType: {
			type: String,
      required: true,
		}
  },
	data() {
    return {
      allAvailableItems: [],
      quickVisitItem: [],
      visible: false,
      selectedVals: [],
      transferData: [],
    };
  },
	mounted() {
    this.$nextTick(() => {
      this.init();
      this.generateVisitItems(this.getCachedVisitItems());
    })
  },
  methods: {
    init() {
      const arr = [];
      this.getAllAvailableItems(this.$store.state.UserContext.menu, arr);
      this.allAvailableItems = arr;
      this.transferData = arr.map((item) => {
        const ps = item.path.split("/")
        return {
          key: item.path,
          label: `${ps[ps.length - 1]} - ${item.name}` ,
        };
      });
    },
    getCachedVisitItems() {
      const userId = this.$store.state.UserContext.userId;
      const data = localStorage.getItem(
        `quick-${this.quickType}-${userId.toLowerCase() === "zl" ? "admin" : "normal"}`
      );
      return JSON.parse(data);
    },
    setCachedVisitItems(data) {
      const userId = this.$store.state.UserContext.userId;
      localStorage.setItem(
        `quick-${this.quickType}-${userId.toLowerCase() === "zl" ? "admin" : "normal"}`,
        JSON.stringify(data)
      );
    },
    generateVisitItems(keys) {
      const res = [];
      for (let i = 0; i < keys.length; i++) {
        const key = keys[i];
        const f = this.allAvailableItems.find((item) => item.path === key);
        if (f) {
          res.push({
            name: f.name,
            path: f.path,
            icon: icons[key]
              ? icons[key]
              : require("~/assets/icons/信用证.svg"),
          });
        }
      }
      this.quickVisitItem = res;
    },
    openSetting() {
      this.selectedVals = this.quickVisitItem.map((item) => item.path);
      this.visible = true;
    },
    cancel() {
      this.visible = false;
    },
    save() {
      this.setCachedVisitItems(this.selectedVals);
      this.generateVisitItems(this.selectedVals);
      this.visible = false;
    },
    handleClose(done) {
      this.visible = false;
      done();
    },
    getAllAvailableItems(source, arr) {
      for (let i = 0; i < source.length; i++) {
        const s = source[i];
        if (s.children.length > 0) {
          this.getAllAvailableItems(s.children, arr);
        } else {
          arr.push(s);
        }
      }
    },
  },
}
</script>

<style scoped>
.cell-content {
  /* display: flex;
  flex-wrap: wrap; */
}
.content-wrapper {
  display: inline-block;
  width: 33%;
  /* height: 30%; */
}
.cell-content .visit-item-wrapper {
  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;
}
.cell-content .visit-item {
  /* padding-bottom: 16px; */
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}
.cell-content .visit-item i {
  color: #0088ff;
  font-size: 36px;
}
.cell-content .visit-item span {
  color: #303133;
  font-size: 14px;
  margin-top: 10px;
}
/* .cell-content .visit-item:hover i {
  color: var(--themecolor);
} */
.cell-content .visit-item:hover span {
  color: var(--themecolor);
}
.el-scrollbar >>> .el-transfer-panel {
  width: 300px;
  height: 600px;
}
.el-scrollbar >>> .el-checkbox-group.el-transfer-panel__list {
  height: 500px;
}
</style>