<template>
  <WsMain>
    <WsBreadCrumbs :items="_breadcrumbsItems"></WsBreadCrumbs>
    <WsTitle>{{_title}} 版本列表</WsTitle>
    <!-- <WsLocalePicker
      v-if="localeMode"
      title="切換查看多國語言內容"
      v-model="selectingLocale"
    ></WsLocalePicker> -->
    <v-tabs
      class="mt-5"
      background-color="transparent"
      vertical
      v-model="tab"
    >
      <v-tabs-slider></v-tabs-slider>
      <v-tab
        v-for="(tab,tabIndex) in versionsData"
        :key="`tab-${tabIndex}`"
      > {{$moment(tab[versionTimestampKey]).format('YYYY.MM.DD')}}
      </v-tab>
      <v-tabs-items
        v-model="tab"
        class="transparent ml-5"
      >
        <v-tab-item
          v-for="(tab,tabIndex) in versionsData"
          :key="`item-${tabIndex}`"
        >
          <WsCard>
            <WsContent>
              <WsInfo
                v-for="(showField,showFieldIndex) in showFields"
                :key="showFieldIndex"
                :label="fields[showField].label"
                :type="fields[showField].type"
                :fields="fields[showField].fields"
                :displayLabel="fields[showField].displayLabel"
                :value="tab[showField]"
                :locale="_selectingLocale"
              >
              </WsInfo>
            </WsContent>
          </WsCard>
        </v-tab-item>
      </v-tabs-items>
    </v-tabs>
  </WsMain>
</template>

<script>
export default {
  data: () => ({
    tab: 0,
    // selectingLocale: null,
    modelData: null,
    versionsData: [],
  }),
  props: {
    showPreRouteInBreadCrumbs: {
      type: Boolean,
      default: true,
    },
    titleKey: {
      type: String,
      default: "text",
    },
    versionTimestampKey: {
      type: String,
      default: "created_at",
    },
    label: String,
    localeMode: {
      type: Boolean,
      default: false,
    },
    id: {
      type: [String, Number],
      default: null,
    },
    modelName: String,
    versionModelName: String,
    fields: Object,
    backRouteText: {
      type: String,
      default: "返回",
    },
    showFields: {
      type: Array,
      required: true,
    },
  },
  methods: {
    async $_fetchData() {
      this.$store.dispatch("app/startPageLoading");
      const apiTasks = [];

      // Modeldata
      let modelDataGetUrl = `/${this.modelName}/${this.id}`;
      apiTasks.push(this.$axios.get(modelDataGetUrl));

      // Versions
      let versionsGetUrl = `/${this.modelName}/${this.id}/${this.versionModelName}`;
      if (this.localeMode) {
        versionsGetUrl += `?locale=${this._selectingLocale}`;
      }
      apiTasks.push(
        this.$axios.get(versionsGetUrl, {
          params: {
            order_by: this.versionTimestampKey,
            order_way: "desc",
          },
        })
      );
      try {
        const resArr = await Promise.all(apiTasks);
        this.modelData = resArr[0].data.data;
        this.versionsData = resArr[1].data.data;
      } catch (error) {
        alert("取得資料錯誤");
      } finally {
        this.$store.dispatch("app/stopPageLoading");
      }
    },
  },
  computed: {
    _selectingLocale() {
      return this.$store.state.locale.selectingLocale;
    },
    _title() {
      if (!this.modelData) {
        return this.label;
      } else {
        return this.$_CMS_getValueByFieldKey(this.titleKey, this.modelData);
      }
    },
    _breadcrumbsItems() {
      const _breadcrumbsItems = [];
      if (this.showPreRouteInBreadCrumbs) {
        _breadcrumbsItems.push({
          text: this.label,
          to: `/${this.modelName}`,
          disabled: false,
        });
        _breadcrumbsItems.push({
          text: this._title,
          to: `/${this.modelName}/${this.id}`,
          disabled: false,
        });
      }
      _breadcrumbsItems.push({
        text: `版本列表`,
        disabled: true,
      });
      return _breadcrumbsItems;
    },
    _backRoute() {
      if (this.backRoute) {
        return this.backRoute;
      } else {
        return `/${this.modelName}`;
      }
    },
  },
  mounted() {
    this.$_fetchData();
  },
};
</script>

<style>
</style>