<template>
  <div class="cloudCoachList">
    <div class="headCon">
      <div class="headLeft">
        <img class="tipImg" src="@/views/Editor/CanvasTool/imgs/yp.png" alt="" />
        <div class="title">乐谱</div>
      </div>
      <div class="headright">
        <img @click="emits('close')" class="closeBtn" src="./imgs/close.png" alt="" />
      </div>
    </div>
    <div class="content">
      <div class="tabTools">
        <div class="tabCon">
          <div class="tab" :class="{ active: item.value === querData.tab }" v-for="item in tabData" :key="item.value">{{ item.label }}</div>
        </div>
        <div class="query">
          <Input :placeholder="'请输入搜索关键词'" v-model:value="querData.value">
            <template #prefix>
              <img class="img" src="./imgs/query.png" alt="" />
            </template>
            <template #suffix>
              <div class="queryBtn">搜索</div>
            </template>
          </Input>
        </div>
      </div>
      <div class="musicListCon">
        <div class="queryFrom">
          <div class="queryFromList">
            <div class="tit">标签：</div>
            <div class="queryFromCon">
              <div class="queryTip active">全部</div>
              <div class="queryTip">最新</div>
              <div class="queryTip">最新</div>
              <div class="queryTip">最新</div>
              <div class="queryTip">最新</div>
              <div class="queryTip">最新1</div>
            </div>
          </div>
          <div class="queryFromList">
            <div class="tit">标签：</div>
            <div class="queryFromCon">
              <div class="queryTip">全部</div>
              <div class="queryTip active">最新</div>
              <div class="queryTip">最新</div>
              <div class="queryTip">最新</div>
              <div class="queryTip">最新</div>
              <div class="queryTip">最新</div>
              <div class="queryTip">最新</div>
              <div class="queryTip">最新</div>
              <div class="queryTip">最新</div>
              <div class="queryTip">最新</div>
              <div class="queryTip">最新</div>
              <div class="queryTip">最新</div>
              <div class="queryTip">最新</div>
              <div class="queryTip">最新</div>
              <div class="queryTip">最新</div>
              <div class="queryTip">最新</div>
              <div class="queryTip">最新</div>
              <div class="queryTip">最新</div>
              <div class="queryTip">最新</div>
              <div class="queryTip">最新</div>
              <div class="queryTip">最新</div>
              <div class="queryTip">最新</div>
              <Popover trigger="mouseenter" :offset="-4">
                <template #content>
                  <PopoverMenuItem>英式竖笛</PopoverMenuItem>
                  <PopoverMenuItem>德式竖笛</PopoverMenuItem>
                </template>
                <div class="queryTip" :class="{ hoverActive: true }">
                  <div>我是</div>
                  <img src="./imgs/jt.png" alt="" />
                </div>
              </Popover>
            </div>
          </div>
          <div class="isExpand" :class="{ active: isExpand }">
            <div>{{ isExpand ? "收起" : "展开" }}</div>
            <img src="./imgs/jiao.png" alt="" />
          </div>
        </div>
        <!-- <div class="musicList empty"> -->
        <div class="musicList">
          <div class="musicListBox">
            <div class="musicCon">
              <div class="musicLeft">
                <div class="iconCon">
                  <img class="icon" src="" alt="" />
                  <img class="jxImg" src="./imgs/jx.png" alt="" />
                </div>
                <div class="musicInfo">
                  <EllipsisScroll class="musicTit" :title="'流浪地球流浪地球流浪地球流浪地球'" />
                  <div class="info">
                    <div class="hotInfo">
                      <img src="./imgs/hot.png" alt="" />
                      <div>1.8万</div>
                    </div>
                    <div class="play">演唱</div>
                    <div class="sing">演奏</div>
                    <div class="musicUserName">
                      <EllipsisScroll :title="'耶寒尔'" />
                    </div>
                  </div>
                </div>
              </div>
              <div class="musicRight">
                <img class="sc" src="./imgs/sc.png" alt="" />
                <div class="addBtn">添加</div>
              </div>
            </div>
            <div class="musicCon">
              <div class="musicLeft">
                <div class="iconCon">
                  <img class="icon" src="" alt="" />
                  <img class="jxImg" src="./imgs/jx.png" alt="" />
                </div>
                <div class="musicInfo">
                  <EllipsisScroll class="musicTit" :title="'流浪地球流浪地球流浪地球流浪地球'" />
                  <div class="info">
                    <div class="hotInfo">
                      <img src="./imgs/hot.png" alt="" />
                      <div>1.8万</div>
                    </div>
                    <div class="play">演唱</div>
                    <div class="sing">演奏</div>
                    <div class="musicUserName">
                      <EllipsisScroll :title="'耶寒尔'" />
                    </div>
                  </div>
                </div>
              </div>
              <div class="musicRight">
                <img class="sc" src="./imgs/sc.png" alt="" />
                <div class="addBtn">添加</div>
              </div>
            </div>
            <div class="musicCon">
              <div class="musicLeft">
                <div class="iconCon">
                  <img class="icon" src="" alt="" />
                  <img class="jxImg" src="./imgs/jx.png" alt="" />
                </div>
                <div class="musicInfo">
                  <EllipsisScroll class="musicTit" :title="'流浪地球流浪地球流浪地球流浪地球'" />
                  <div class="info">
                    <div class="hotInfo">
                      <img src="./imgs/hot.png" alt="" />
                      <div>1.8万</div>
                    </div>
                    <div class="play">演唱</div>
                    <div class="sing">演奏</div>
                    <div class="musicUserName">
                      <EllipsisScroll :title="'耶寒尔'" />
                    </div>
                  </div>
                </div>
              </div>
              <div class="musicRight">
                <img class="sc" src="./imgs/sc.png" alt="" />
                <div class="addBtn">添加</div>
              </div>
            </div>
            <div class="musicCon">
              <div class="musicLeft">
                <div class="iconCon">
                  <img class="icon" src="" alt="" />
                  <img class="jxImg" src="./imgs/jx.png" alt="" />
                </div>
                <div class="musicInfo">
                  <EllipsisScroll class="musicTit" :title="'流浪地球流浪地球流浪地球流浪地球'" />
                  <div class="info">
                    <div class="hotInfo">
                      <img src="./imgs/hot.png" alt="" />
                      <div>1.8万</div>
                    </div>
                    <div class="play">演唱</div>
                    <div class="sing">演奏</div>
                    <div class="musicUserName">
                      <EllipsisScroll :title="'耶寒尔'" />
                    </div>
                  </div>
                </div>
              </div>
              <div class="musicRight">
                <img class="sc" src="./imgs/sc.png" alt="" />
                <div class="addBtn">添加</div>
              </div>
            </div>
          </div>
          <!-- <Empty /> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ElButton } from "element-plus"
import Input from "@/components/Input.vue"
import Popover from "@/components/Popover.vue"
import PopoverMenuItem from "@/components/PopoverMenuItem.vue"
import Empty from "@/components/Empty"
import EllipsisScroll from "@/components/ellipsisScroll"
import { reactive, ref } from "vue"

const emits = defineEmits<{
  (event: "update", id: string): void
  (event: "close"): void
}>()
function handleUpdate() {
  emits("update", "1760123974848413697")
}

const tabData = [
  {
    label: "相关资源",
    value: "1"
  },
  {
    label: "共享资源",
    value: "2"
  },
  {
    label: "我的资源",
    value: "3"
  },
  {
    label: "我的收藏",
    value: "4"
  }
]

const isExpand = ref(true)

const querData = reactive({
  tab: "1",
  value: ""
})
</script>

<style lang="scss" scoped>
.cloudCoachList {
  width: 100%;
  height: 100%;
  position: relative;
  &::after {
    width: 100%;
    content: "";
    position: absolute;
    width: 100%;
    height: 100px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
    bottom: 0;
    left: 0;
  }
  .headCon {
    width: 100%;
    height: 64px;
    border-bottom: 1px solid #eaeaea;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .headLeft {
      margin-left: 30px;
      display: flex;
      align-items: center;
      .tipImg {
        width: 24px;
        height: 24px;
      }
      .title {
        font-weight: 600;
        font-size: 18px;
        color: #131415;
        margin-left: 8px;
      }
    }
    .headright {
      margin-right: 30px;
      display: flex;
      align-items: center;
      .closeBtn {
        width: 24px;
        height: 24px;
        cursor: pointer;
        &:hover {
          opacity: 0.8;
        }
      }
    }
  }
  .content {
    width: 100%;
    height: calc(100% - 64px);
    .tabTools {
      height: 72px;
      width: 100%;
      padding: 18px 30px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .tabCon {
        display: flex;
        .tab {
          margin-right: 32px;
          font-weight: 400;
          font-size: 16px;
          color: #8b8d98;
          line-height: 22px;
          cursor: pointer;
          &:hover {
            opacity: 0.8;
          }
          &:last-child {
            margin-right: 0;
          }
          &.active {
            font-weight: 600;
            color: #131415;
            position: relative;
            &::after {
              content: "";
              position: absolute;
              width: 100%;
              height: 10px;
              background: linear-gradient(90deg, #77bbff 0%, rgba(163, 231, 255, 0.22) 100%);
              bottom: 0;
              left: 0;
              z-index: -1;
            }
          }
        }
      }
      .query {
        width: 400px;
        height: 36px;
        &::v-deep(.input) {
          align-items: center;
          padding: 0 3px 0 12px;
          border-radius: 18px;
          height: 100%;
          &:not(.disabled):hover,
          &.focused {
            .img {
              opacity: 1;
            }
            .queryBtn {
              opacity: 1;
            }
          }
          input {
            font-size: 14px;
          }
          .img {
            width: 16px;
            height: 16px;
            opacity: 0.4;
          }
          .queryBtn {
            width: 60px;
            height: 30px;
            background: #198cfe;
            border-radius: 16px;
            font-weight: 500;
            font-size: 14px;
            color: #ffffff;
            line-height: 30px;
            text-align: center;
            opacity: 0.4;
            cursor: pointer;
            &:hover {
              opacity: 0.8 !important;
            }
          }
        }
      }
    }
    .musicListCon {
      width: 100%;
      height: calc(100% - 72px);
      overflow: auto;
      overflow: overlay;
      display: flex;
      flex-direction: column;
      .queryFrom {
        padding: 0 30px;
        .queryFromList {
          display: flex;
          margin-bottom: 4px;
          .tit {
            flex-shrink: 0;
            font-weight: 500;
            font-size: 14px;
            color: #131415;
            line-height: 32px;
            margin-right: 16px;
          }
          .queryFromCon {
            display: flex;
            flex-wrap: wrap;
            .queryTip {
              margin: 0 16px 12px 0;
              font-weight: 400;
              font-size: 14px;
              color: rgba(0, 0, 0, 0.6);
              line-height: 20px;
              padding: 6px 16px;
              background: #f5f6fa;
              border-radius: 6px;
              cursor: pointer;
              display: flex;
              align-items: center;
              & > img {
                width: 7px;
                height: 4px;
                margin-left: 6px;
              }
              &.active,
              &:hover {
                background: #d2ecff;
                color: rgba(0, 0, 0, 1);
              }
              &.hoverActive {
                > img {
                  transform: rotate(180deg);
                }
              }
            }
          }
        }
        .isExpand {
          margin-bottom: 16px;
          cursor: pointer;
          display: flex;
          justify-content: center;
          font-weight: 400;
          font-size: 14px;
          color: #198cfe;
          line-height: 20px;
          align-items: center;
          &:hover {
            opacity: 0.8;
          }
          &.active > img {
            transform: rotate(180deg);
          }
          & > img {
            margin-left: 4px;
            width: 10px;
            height: 10px;
          }
        }
      }
      .musicList {
        display: flex;
        padding: 0 30px;
        &.empty {
          flex-grow: 1;
          justify-content: center;
          align-items: center;
        }
        .musicListBox {
          width: calc(100% + 24px);
          margin-left: -24px;
          display: flex;
          flex-wrap: wrap;
          .musicCon {
            margin-bottom: 24px;
            width: calc(33.3333% - 24px);
            margin-left: 24px;
            padding: 16px;
            background: #f5f6fa;
            border-radius: 12px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            &:hover {
              outline: 2px solid #198cfe;
            }
            .musicLeft {
              display: flex;
              align-items: center;
              margin-right: 14px;
              overflow: hidden;
              .iconCon {
                position: relative;
                .icon {
                  width: 70px;
                  height: 70px;
                  border-radius: 8px;
                }
                .jxImg {
                  position: absolute;
                  left: 0;
                  top: 0;
                  width: 34px;
                  height: 16px;
                }
              }
              .musicInfo {
                margin-left: 12px;
                overflow: hidden;
                .musicTit {
                  font-weight: 600;
                  font-size: 15px;
                  color: #131415;
                  line-height: 21px;
                }
                .info {
                  margin-top: 13px;
                  display: flex;
                  align-items: center;
                  .hotInfo {
                    margin-right: 4px;
                    padding: 0 4px;
                    background: #fff3f3;
                    border-radius: 3px;
                    border: 1px solid rgba(254, 67, 67, 0.5);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    flex-shrink: 0;
                    line-height: 16px;
                    & > img {
                      width: 10px;
                      height: 12px;
                    }
                    & > div {
                      font-weight: 400;
                      font-size: 12px;
                      color: #fe4343;
                    }
                  }
                  .play {
                    margin-right: 4px;
                    flex-shrink: 0;
                    padding: 0 4px;
                    background: #ffffff;
                    border-radius: 3px;
                    border: 1px solid rgba(243, 130, 26, 0.5);
                    font-weight: 400;
                    font-size: 12px;
                    color: #f3821a;
                    line-height: 16px;
                    text-align: center;
                  }
                  .sing {
                    margin-right: 4px;
                    flex-shrink: 0;
                    padding: 0 4px;
                    background: #ffffff;
                    border-radius: 3px;
                    border: 1px solid rgba(21, 178, 253, 0.5);
                    font-weight: 400;
                    font-size: 12px;
                    color: #00adff;
                    line-height: 16px;
                    text-align: center;
                  }
                  .musicUserName {
                    overflow: hidden;
                    font-weight: 400;
                    font-size: 13px;
                    color: #777777;
                    line-height: 16px;
                  }
                }
              }
            }
            .musicRight {
              flex-shrink: 0;
              display: flex;
              align-items: center;
              .sc {
                width: 26px;
                height: 26px;
                cursor: pointer;
                &:hover {
                  opacity: 0.8;
                }
              }
              .addBtn {
                margin-left: 12px;
                width: 58px;
                height: 26px;
                background: #198cfe;
                border-radius: 4px;
                font-weight: 600;
                font-size: 13px;
                color: #ffffff;
                line-height: 26px;
                text-align: center;
                cursor: pointer;
                &:hover {
                  opacity: 0.8;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
