<template>
  <div class="head-content">
    <div
      class="spaceListWrap hoverP"
      @click="showDiskLisk = selectList.length === 0 && !!option.length"
      :class="{ disabled: selectList.length || !option.length }"
    >
      <div class="leftIcon">
        <img src="@/assets/mySpackDisk_sm.png" alt="" />
      </div>
      <div class="curDisk">{{ title }}</div>
      <van-overlay :show="showDiskLisk" :z-index="10" :lock-scroll="false">
        <div class="wrapper" @click.stop>
          <div
            class="diskList"
            v-for="(parentItem, parentIndex) in option"
            :key="parentIndex"
          >
            <div class="spaceTitle">{{ parentItem.title }}</div>
            <van-radio-group v-model="checked">
              <div
                class="spaceList hoverP"
                :class="{
                  isMySpace: childItem.is_public === 0,
                  isPublicSpace: childItem.is_public !== 0,
                }"
                v-for="(childItem, childIndex) in parentItem.children"
                :key="childIndex"
                @click="onDiskChange(childItem)"
              >
                <div class="spaceListLeft" v-if="childItem.is_public === 0">
                  <img src="@/assets/mySpackDisk_lg.png" alt="" />
                </div>
                <div class="spaceListLeft1" v-else>
                  <img src="@/assets/publishDisk.png" alt="" />
                </div>
                <div class="spaceText" v-if="childItem.is_public === 0">
                  {{ childItem.text }}
                </div>
                <div class="publicSpaceText" v-else>
                  <div class="publicSpaceTextTop">{{ childItem.text }}</div>
                  <div class="publicSpaceTextCenter">
                    <van-progress
                      :percentage="parcent(childItem)"
                      stroke-width="5"
                      color=" linear-gradient(135deg, #EF8881 0%, #DA291C 100%)"
                      track-color="#F3F3F3"
                      :show-pivot="false"
                    />
                  </div>
                  <div class="publicSpaceTextBottom">
                    <span class="sizeLeft"
                      >剩余{{
                        convertBytes(childItem.available_size * 1024)
                      }}</span
                    >
                    <span class="sizeRight">{{
                      convertBytes(childItem.total_size * 1024)
                    }}</span>
                  </div>
                </div>
                <div class="spaceListRight">
                  <!-- <van-radio :name="childItem.path" checked-color="#f68484">
                    <template #icon="props">
                      <img
                        class="img-icon"
                        :src="props.checked ? activeIcon : inactiveIcon"
                      />
                    </template>
                  </van-radio> -->
                   <img
                      class="img-icon"
                      :src="checked===childItem.path ? activeIcon : inactiveIcon"
                    />
                </div>
              </div>
            </van-radio-group>
          </div>
        </div>
      </van-overlay>
      <div class="rightIcon">
        <img src="@/assets/diskArrow.png" alt="" />
      </div>
    </div>
    <div class="sort">
      <img src="@/assets/sort.png" alt="" />
      <van-dropdown-menu class="dropDown" active-color="#000">
        <van-dropdown-item ref="dropDownItem">
          <div v-for="(item, index) in actions" :key="index" class="sortList">
            <span class="discription">{{ item.name }}</span>
            <div class="itemRight">
              <div
                class="sortItem hoverP"
                @click="changeSort(item.icon)"
                :class="{ active: store.getters.sortType == item.icon.id }"
              >
                {{ item.icon.ic }}
              </div>
              <div
                class="sortItem hoverP"
                @click="changeSort(item.icon1)"
                :class="{ active: store.getters.sortType == item.icon1.id }"
              >
                {{ item.icon1.ic }}
              </div>
            </div>
          </div>
        </van-dropdown-item>
      </van-dropdown-menu>
    </div>
    <div
      class="listType hoverP"
      v-if="store.getters.listType === 'list'"
      @click="changeListType('thumb')"
    >
      <img src="@/assets/thumb.png" alt="" />
    </div>
    <div class="listType hoverP" v-else @click="changeListType('list')">
      <img src="@/assets/list.png" alt="" />
    </div>
  </div>
</template>

<script>
import { reactive, toRefs, ref, computed, onMounted } from "vue";
import { convertBytes } from "@/utils/index";
import { useStore } from "vuex";

export default {
  name: "sortHead",
  components: {},

  setup(props, context) {
    const store = useStore();
    const dropDownItem = ref(null);
    const state = reactive({
      title: "我的空间",
      activeIcon: require("@/assets/selected.svg"),
      inactiveIcon: require("@/assets/un-select.svg"),
      store,
      showDiskLisk: ref(false),
      onDiskChange(listItem) {
        checked.value = listItem.path
        store.commit("selectFile/SET_PATH", `${listItem.path}`);
        resetList();
        store.commit("selectFile/SET_CUR_DISK_NAME", `${listItem.text}`);
        store.commit("selectFile/SET_PATH_LIST", [`${listItem.path}`]);
        store.commit("selectFile/SET_CUR_DISPLAY_NAME", []);
        store.dispatch("selectFile/GET_FILE_LIST", {
          path: `${listItem.path}`,
          offset: 0,
          len: 20,
        });
        state.title = listItem.text;
        state.showDiskLisk = false;
      }, //选择磁盘
      parcent(item) {
        let dis = item.total_size - item.available_size;
        return (dis * 100) / item.total_size;
      }, //计算磁盘空间占比
      actions: [
        {
          name: "名称顺序",
          icon: { ic: "从A-Z", id: 4, type: "file" },
          icon1: { ic: "从Z-A", id: 5, type: "file" },
        },
        {
          name: "文件大小",
          icon: { ic: "从大到小", id: 3, type: "size" },
          icon1: { ic: "从小到大", id: 2, type: "size" },
        },
        {
          name: "上传时间",
          icon1: { ic: "从远到近", id: 0, type: "mtime" },
          icon: { ic: "从近到远", id: 1, type: "mtime" },
        },
      ],
      changeSort(item) {
        dropDownItem.value.toggle();
        resetList();
        store.commit("selectFile/SET_SORT_TYPE", item.id);
        store.dispatch("selectFile/GET_FILE_LIST", { offset: 0 });
      }, //更改排序方式
      changeListType(type) {
        store.commit("selectFile/SET_LIST_TYPE", type);
      },
    });
    // 磁盘空间列表数据
    const option = computed(() => {
      return store.getters.diskList;
    });
    // 当前已选中文件夹集合
    const selectList = computed(() => {
      return store.getters.selectList;
    });
    // 当前访问空间根路径
    const checked = computed({
      get() {
        return store.getters.rootPath;
      },
      set(val) {
        store.commit("selectFile/SET_ROOT_PATH", val); // 获取磁盘列表
        return store.getters.rootPath;
      },
    });

    const resetList = () => {
      store.commit("selectFile/SET_SELECT_LIST", []);
      store.commit("selectFile/SET_FINISHED", false);
      store.commit("selectFile/SET_OFFSET", 0);
      store.commit("selectFile/SET_FILE_LIST_DATA", { file_list: [] });
    };
    resetList();
    store.dispatch("selectFile/GET_DISK_LIST"); // 获取磁盘列表
    return {
      ...toRefs(state),
      option,
      checked,
      convertBytes,
      dropDownItem,
      selectList,
    };
  },
};
</script>

<style lang="less" scoped>
.head-content {
  display: flex;
  align-items: center;
  .spaceListWrap {
    display: flex;
    align-items: center;
    width: 268px;
    height: 44px;
    background: #ffffff;
    border-radius: 8px;
    border: 1px solid #f2f6fc;
    margin-left: 15px;
    padding: 0 15px;
    &.disabled {
      background: #f0f0f0;
    }
    :deep(.van-overlay) {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .wrapper {
      width: 345px;
      height: 479px;
      max-height: 479px;
      overflow-y: scroll;
      background: #ffffff;
      border-radius: 16px;
      padding: 15px;
      box-sizing: border-box;
      &::-webkit-scrollbar {
        display: none;
      }
      .diskList {
        width: 100%;
        background-color: #fff;
        &:last-child {
          margin-top: 25px;
          .van-radio-group {
            max-height: 320px;
            overflow-y: scroll;
             &::-webkit-scrollbar {
              display: none;
            }
          }
        }
        .spaceList {
          display: flex;
          align-items: center;
          &.isMySpace {
            margin-top: 15px;
          }
          &.isPublicSpace {
            height: 85px;
            border-bottom: 1px solid #f2f6fc;
            &:last-child {
              border-bottom: none;
            }
          }
          .spaceListLeft {
            width: 36px;
            height: 36px;
            margin-right: 15px;
          }
          .spaceListLeft1 {
            width: 35px;
            height: 35px;
            margin-right: 10px;
          }
          .spaceListRight {
            margin-left: auto;
            .img-icon {
              width: 17px;
              height: 17px;
            }
          }
          .publicSpaceText {
            flex: 1;
            margin-right: 10px;
            .publicSpaceTextTop {
              font-size: 15px;
              color: #303133;
              line-height: 22px;
            }
            .publicSpaceTextCenter {
              margin: 8px 0 5px;
            }
            .publicSpaceTextBottom {
              font-size: 11px;
              color: #909399;
              line-height: 16px;
              display: flex;
              justify-content: space-between;
            }
          }
        }
        .spaceTitle {
          width: 100%;
          height: 22px;
          font-size: 15px;
          color: #303133;
          line-height: 22px;
        }
      }
    }
    .leftIcon {
      flex: 0 0 18px;
      height: 18px;
      margin-right: 10px;
    }
    .curDisk {
      font-size: 13px;
      color: #303133;
      line-height: 20px;
    }
    .rightIcon {
      flex: 0 0 20px;
      display: flex;
      align-items: center;
      margin-left: auto;
      img {
        width: 12px;
        height: 12px;
      }
    }
    :deep(.van-dropdown-menu__title) {
      &::after {
        display: none;
      }
    }
  }
  .dropDown {
    :deep(.van-dropdown-menu__title::after) {
      display: none;
    }
    :deep(.van-dropdown-item__content){
      &::-webkit-scrollbar {
        display: none;
      }
    }
    .sortList {
      display: flex;
      height: 45px;
      padding: 0 20px;
      align-items: center;
      &:last-child {
        .itemRight {
          border-bottom: none;
        }
      }
      .discription {
        width: 67px;
        font-size: 11px;
        color: #303133;
        line-height: 16px;
      }
      .itemRight {
        display: flex;
        flex: 1;
        border-bottom: 1px solid #e4e7ed;
        height: 45px;
        box-sizing: border-box;
        .sortItem {
          width: 67px;
          height: 26px;
          font-size: 11px;
          color: #909399;
          line-height: 26px;
          text-align: center;
          margin: 10px 0;
          &.active {
            color: #f56c6c;
            background: #fff7f6;
            border-radius: 4px;
            border: 1px solid #da291c;
          }
        }
      }
    }
  }
  .sort {
    flex: 0 0 16px;
    height: 16px;
    margin-left: 20px;
    position: relative;
    :deep(.van-dropdown-menu__bar) {
      width: 16px;
      height: 30px;
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0;
    }
    :deep(.van-dropdown-item__content) {
      padding-top: 6px;
      background: #fafafa;
      border-radius: 0px 0px 14px 14px;
    }
  }
  .listType {
    flex: 0 0 16px;
    height: 16px;
    margin: 0 20px;
  }
}
</style>
<style lang="less"></style>
