<template>
  <v-sheet>
    <!-- autocomplete에 저장된 tag 넣어서(동영상 업로드 할 때마다 tag가 저장됨) 자동완성 되게끔.-->
    <v-layout justify-center>
      <v-flex xs12 sm8 md8 lg6>
        <v-row class="mx-0 mt-10 mb-8" justify="center">
          <v-icon color="lightblue">mdi-power-on</v-icon>
          <div
            style="text-align: center; font-size: 22px; font-weight: 400; color: #343a40; "
          >Video List</div>
          <v-icon color="lightblue">mdi-power-on</v-icon>
        </v-row>
        <v-autocomplete
          class="mx-5"
          v-model="params.tags"
          :items="tagsList"
          placeholder="Click to search Tags"
          prepend-inner-icon="mdi-shape"
          chips
          multiple
          deletable-chips
          item-color="primary"
        ></v-autocomplete>
        <!-- 동영상 리스트 -->
        <div
          v-infinite-scroll="getPost"
          infinite-scroll-disabled="busy"
          infinite-scroll-distance="10"
          class="mb-2"
        >
          <v-row class="mx-5">
            <v-flex xs12 md6 v-for="(post, index) in postList" :key="index" class="mx-0">
              <v-card class="mx-1 my-1" elevation="0" outlined>
                <div class="mx-2 my-1" style="font-size: 18px; color: #5a5a5a">{{ post.title }}</div>
                <v-img height="250" style="border-top: 1px solid; solid;;border-color: #e0e0e0">
                  <div style="background-color: #7DC1E8; height: 250px">
                    <v-row justify="end" class="mx-0">
                      <v-avatar @click="delte()" size="30" color="#888" class="mt-1 mr-1">
                        <v-icon color="white">mdi-delete</v-icon>
                      </v-avatar>
                    </v-row>
                    <div
                      style="margin-left: 130px; margin-top: 70px; color: #ffff; font-size: 20px"
                    >Sample</div>
                  </div>
                </v-img>
                <v-divider></v-divider>
                <v-chip-group column class="mx-1">
                  <v-chip color="secondary" v-for="(tag, index) in post.tags" :key="index">#{{ tag }}</v-chip>
                </v-chip-group>
              </v-card>
            </v-flex>
          </v-row>
        </div>
      </v-flex>
    </v-layout>
  </v-sheet>
</template>
<script>
// @ is an alias to /src
export default {
  name: "Home",
  components: {},
  data() {
    return {
      postList: [],
      tagsList: [],
      busy: false,
      params: {
        tags: [],
        skip: 0,
        page: 1
      }
    };
  },
  watch: {
    "params.tags"(newValue, oldValue) {
      console.log(newValue, oldValue);
      this.postList = [];
      this.params.page = 1;
      this.getPost();
    }
  },
  computed: {
    setSkip() {
      if (this.params.page <= 0) return 0;
      return (this.params.page - 1) * 10;
    }
  },
  created() {
    this.getPost();
    this.getTags();
  },
  methods: {
    getPost() {
      this.busy = true;

      this.params.skip = this.setSkip;
      if (this.postList.length !== (this.params.page - 1) * 10) {
        return;
      }

      this.$axios
        .get("/video", { params: this.params })
        .then(r => {
          let tags = []
          for (let i = 0; i < r.data.length; i++) {
            tags = r.data[i].tags.split(',')
            r.data[i].tags = tags
            this.postList.push(r.data[i]);
          }
          this.busy = false;
          this.params.page++;
        })
        .catch(e => {
          console.log(e);
        });
    },
    getTags() {
      this.$axios
        .get("/loadtag")
        .then(r => {
          let tags = []
          for (let i = 0; i < r.data.length; i++) {
            tags.push(r.data[i].tag)
          }
          this.tagsList = [...new Set(tags)]
        })
        .catch(e => {
          console.log(e);
        });
    },
    delete(atc) {
      this.$axios
        .delete(`/${atc._id}`)
        .then(() => {
          window.location.reload();
        })
        .catch(e => {
          console.log(e);
        });
    }
  }
};
</script>