<template>
  <div class="created" ref="created">
    <md-app md-waterfall md-mode="fixed">
      <md-app-toolbar class="md-primary">
        <div class="md-toolbar-section-start">
          <md-button class="md-icon-button" @click="back" :disabled="loading_switch">
            <md-icon>arrow_back</md-icon>
          </md-button>
          <span class="md-title page-title">已发布 - {{user_info.created.length}}条</span>
        </div>
      </md-app-toolbar>
      <md-app-content>
        <v-touch @swiperight="back" :swipe-options="{ direction: 'horizontal' }">
          <div ref="list_placeholder" :style="`height:56px`"></div>
          <md-progress-bar
            v-if="loading_switch"
            md-mode="indeterminate"
            style="position: absolute; top: 56px; left: 0; width: 100%;"
          ></md-progress-bar>
          <md-content
                v-for="(item, index) in user_info.created"
                :key="index"
                @click="turnToDetail(item.id)"
              >
                <md-card class="md-card-example">
                  <md-card-area md-inset>
                    <md-card-media md-ratio="16:9">
                      <img :src="`https://tracer.lacus.site/photo/${item.img_url}`" />
                    </md-card-media>

                    <md-card-header>
                      <h2 class="md-subheading">{{item.title}}</h2>
                      <div class="md-subhead">
                        <md-icon>access_time</md-icon>
                        <span>{{formatDateTime(item.create_time)}}</span>
                      </div>
                      <div class="md-subhead">
                        <md-icon>location_on</md-icon>
                        <span>{{item.total_addr}}</span>
                      </div>
                    </md-card-header>
                  </md-card-area>
                </md-card>
              </md-content>

          <md-dialog-confirm
            :md-active.sync="clear_confirm_switch"
            md-title="警告"
            md-content="您将清空所有消息</br>该操作不可复原，是否继续"
            md-confirm-text="继续"
            md-cancel-text="取消"
            :md-click-outside-to-close="false"
            @md-confirm="clearMsg"
          />

          <md-snackbar
            md-position="center"
            :md-active.sync="show_snackbar"
            md-persistent
            :md-duration="1500"
          >
            <span>{{ snakebar_msg }}</span>
          </md-snackbar>
          <div style="height: 40px;"></div>
        </v-touch>
      </md-app-content>
    </md-app>
  </div>
</template>

<script>
// @ is an alias to /src
import { mapState, mapActions } from "vuex";
import { setHtmlFontSize } from "@/utils/px2rem.js";
import { api } from "@/axios/fetch.js";
import { formatDateTime } from "@/utils/formatTime.js";

export default {
  name: "Created",
  data() {
    return {
      // 显示高度，控制md-app的最小高度，防止抽屉高度塌陷
      clientHeight: "",
      // snackbar控制
      show_snackbar: false,
      snakebar_msg: "",
      // 加载控制
      loading_switch: false,
      // 清除确认弹窗控制
      clear_confirm_switch: false
    };
  },
  computed: {
    ...mapState(["user_info", "settings", "bar_state"])
  },
  methods: {
    ...mapActions(["setUserInfo", "setSettings", "setBarState"]),
    formatDateTime,
    // 修改md-app的最小高度
    changeFixed(clientHeight) {
      //动态修改样式
      this.$refs.created.children[0].style.minHeight = clientHeight + "px";
      this.$refs.list_placeholder.parentNode.parentNode.style.maxHeight =
        clientHeight + "px";
      this.$refs.list_placeholder.parentNode.style.minHeight =
        clientHeight - 32 + "px";
      window.document.documentElement.setAttribute(
        "data-theme",
        this.settings.is_dark_mode ? "dark" : "light"
      );
    },

    // 初始化
    init() {
      // 刷新vuex
      this.$store.replaceState(
        Object.assign(
          this.$store.state,
          JSON.parse(localStorage.getItem("tracer"))
        )
      );
      // 底部状态栏状态设置
      this.setBarState([false, this]);
      // 无内容拦截
      if (this.user_info.created.length == 0) {
        this.back();
      }
    },

    // 返回到主页
    back() {
      this.$router.replace("/account");
    },

    // 调用snackBar
    message(msg) {
      this.snakebar_msg = msg;
      this.show_snackbar = true;
    },

    // 跳转详情
    turnToDetail(id) {
      console.log(id);
      this.$router.push({ path: "/detail", query: { id: id } });
    },
  },
  created() {
    this.init();
  },
  mounted() {
    // 获取浏览器可视区域高度
    this.clientHeight = `${document.documentElement.clientHeight}`;
    //document.body.clientWidth;
    window.onresize = function temp() {
      this.clientHeight = `${document.documentElement.clientHeight}`;
      setHtmlFontSize();
    }.bind(this);
    this.$refs.list_placeholder.parentNode.parentNode.addEventListener(
      "scroll",
      this.scroll
    );
  },
  watch: {
    // 如果 `clientHeight` 发生改变，这个函数就会运行
    clientHeight: function() {
      this.changeFixed(this.clientHeight);
    }
  },
  beforeDestroy() {},
  components: {}
};
</script>

<style scoped lang="scss" type="text/scss">
@import "../../style/main";
.created {
  width: 100%;
  // max-width: 500px;
  min-height: 100%;
  background: #fff;
  // margin: 0 auto;
  .expand {
    box-sizing: border-box;
    min-height: 0.8rem !important;
    margin: 0.5rem 16px !important;
  }
  .login-submit {
    width: 100%;
    margin: 0.5rem 0 !important;
  }
  .md-toolbar {
    position: fixed;
    top: 0;
  }
  .md-toolbar-row {
    order: 12;
    // margin-bottom: .3rem !important;
  }
  .md-toolbar-section-start,
  .md-toolbar-section-end,
  .md-toolbar-row {
    min-height: 56px;
  }
  .md-toolbar-row {
    margin-top: -10px;
  }
  .md-speed-dial.md-bottom-right {
    position: fixed !important;
  }
}
// Demo purposes only
.md-drawer {
  width: 240px;
  max-width: calc(100vw - 125px);
}
.md-app-scroller > div {
  overflow-y: scroll !important;
}
.face {
  color: #fff !important;
}
.page-title {
  flex: 1;
  min-height: 56px;
  line-height: 56px;
}
.sroll-top-area {
  flex: 1;
  min-height: 56px;
}
.md-bottom-bar.md-type-fixed .md-bottom-bar-item {
  max-width: 1000px !important;
}
.md-card-example {
  .md-subhead {
    margin-top: 0.1rem;
    .md-icon {
      $size: 16px;
      width: $size;
      min-width: $size;
      height: $size;
      font-size: $size !important;
      margin-right: 0.3rem;
    }

    span {
      vertical-align: middle;
    }
  }
}
.md-app-content .md-card {
  margin: 0 !important;
}
.loading {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 5rem;
  width: 5rem;
  margin-top: -2.5rem;
  margin-left: -2.5rem;
}
.md-list-item-text p {
  word-wrap: break-word !important;
  overflow: visible !important;
  white-space: normal !important;
  margin-top: 0.2rem;
}
</style>
