<template>
  <WsMain
    v-if="modelData"
    :style="[{'padding-bottom':'120px'}]"
  >
    <!-- <WsBackLabel
      @click="$router.go(-1)"
      :label="_backRouteText"
    /> -->
    <WsBreadCrumbs :items="_breadcrumbsItems"></WsBreadCrumbs>
    <WsTitle>{{_title}}</WsTitle>
    <div class="ws-button-group">
      <WsBtn
        color="textSecondary"
        outlined
        :to="`/${modelName}/${id}/update?redirect=${this.$route.fullPath}`"
      >
        <v-icon left>mdi-pencil</v-icon> 編輯{{label}}
      </WsBtn>
      <WsBtn
        v-show="modeVersions"
        color="textSecondary"
        outlined
        :to="`/${modelName}/${id}/version/create?redirect=${this.$route.fullPath}`"
      >
        <v-icon left>mdi-update</v-icon> 更新{{label}}版本
      </WsBtn>
      <WsBtn
        v-show="modeVersions"
        color="textSecondary"
        :to="`/${modelName}/${id}/version`"
        outlined
      >
        <v-icon left>mdi-book-open-variant</v-icon> 查看版本列表
      </WsBtn>
      <WsBtn
        @click="$_onDelete(id)"
        color="deleteBtn white--text"
      >
        <v-icon left>mdi-delete</v-icon> 刪除
      </WsBtn>
    </div>
    <!-- <WsLocalePicker
      v-if="localeMode"
      title="切換查看多國語言內容"
      v-model="selectingLocale"
    ></WsLocalePicker> -->
    <div class="ws-content-section">
      <div class="ws-content-section__primary">
        <WsReadContentBlock
          v-for="(item,itemKey) in primary"
          :key="itemKey"
          :type="item.type"
          :label="item.label"
          :title="item.title"
          :remark="item.remark"
          :floors="item.floors"
          :modedFields="fields"
          :fields="item.fields"
          :activeText="item.activeText"
          :inactiveText="item.inactiveText"
          :field="item.field"
          :locale="_selectingLocale"
          :modelName="item.modelName"
          :searchMode="item.searchMode"
          :batchMode="item.batchMode"
          :modeVersions="item.modeVersions"
          :modeParent="item.modeParent"
          :customButtons="item.customButtons"
          :modelData="modelData"
          :modelId="id"
          :titleKey="item.titleKey"
          :fieldsRead="item.fieldsRead"
          :orderBy="item.orderBy"
          :orderWay="item.orderWay"
          :parentModelName="$_getParentModelName(item)"
          :parentState="$_getParentState(item)"
        ></WsReadContentBlock>
      </div>
      <div class="ws-content-section__secondary">
        <WsReadContentBlock
          v-for="(item,itemKey) in secondary"
          :key="itemKey"
          :type="item.type"
          :label="item.label"
          :title="item.title"
          :remark="item.remark"
          :floors="item.floors"
          :modedFields="fields"
          :fields="item.fields"
          :activeText="item.activeText"
          :inactiveText="item.inactiveText"
          :field="item.field"
          :locale="_selectingLocale"
          :modelName="item.modelName"
          :searchMode="item.searchMode"
          :batchMode="item.batchMode"
          :modeVersions="item.modeVersions"
          :modeParent="item.modeParent"
          :customButtons="item.customButtons"
          :modelData="modelData"
          :modelId="id"
          :titleKey="item.titleKey"
          :fieldsRead="item.fieldsRead"
          :orderBy="item.orderBy"
          :orderWay="item.orderWay"
          :parentModelName="$_getParentModelName(item)"
          :parentState="$_getParentState(item)"
        ></WsReadContentBlock>
      </div>
    </div>
    <!-- Delete Dialog -->
    <WsAlertDialog
      ref="deleteDialog"
      title="確定要刪除嗎？"
      description="刪除後資料將無法回覆"
      @submit="$_onDeleteSubmit($event)"
    />
  </WsMain>
</template>

<script>
export default {
  data: () => ({
    // selectingLocale: null,
    modelData: null,
  }),
  props: {
    titleKey: {
      type: String,
      default: "text",
    },
    modeVersions: {
      type: Boolean,
      default: false,
    },
    backRouteText: {
      type: String,
      default: "返回",
    },
    backRoute: {
      type: String,
      default: null,
    },
    primary: {
      type: Array,
      default() {
        return [];
      },
    },
    secondary: {
      type: Array,
      default() {
        return [];
      },
    },
    id: {
      type: [String, Number],
      default: null,
    },
    localeMode: {
      type: Boolean,
      default: false,
    },
    backLabel: String,
    modelName: String,
    label: String,
    fields: Object,
  },
  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 = [];
      _breadcrumbsItems.push({
        text: this.label,
        to: `/${this.modelName}`,
        disabled: false,
      });
      _breadcrumbsItems.push({
        text: this._title,
        disabled: true,
      });
      return _breadcrumbsItems;
    },
    _backRouteText() {
      if (this.backRouteText) {
        return "返回";
      } else {
        return `${this.label}列表`;
      }
    },
    _backRoute() {
      if (this.backRoute) {
        return this.backRoute;
      } else {
        return `/${this.modelName}`;
      }
    },
  },
  methods: {
    $_onDelete($event) {
      this.$refs.deleteDialog.open($event);
    },
    async $_onDeleteSubmit($event) {
      this.$refs.deleteDialog.startLoading();
      try {
        await this.$axios.delete(`/${this.modelName}/${$event}`);
        this.$router.push(`/${this.modelName}`);
      } catch (error) {
        alert(error);
      } finally {
        this.$refs.deleteDialog.close();
      }
    },
    $_getParentState(primaryItem) {
      if (primaryItem.modeParentVersions && this.modelData.last_version) {
        return this.modelData.last_version.id;
      } else {
        return this.modelData.id;
      }
    },
    $_getParentModelName(primaryItem) {
      if (primaryItem.modeParentVersions) {
        return `${this.modelName}_version`;
      } else {
        return this.modelName;
      }
    },
    async $_fetchData() {
      this.$store.dispatch("app/startPageLoading");
      let getUrl = `/${this.modelName}/${this.id}`;
      if (this.localeMode) {
        getUrl += `?locale=${this._selectingLocale}`;
      }
      try {
        const res = await this.$axios.get(getUrl);
        this.modelData = res.data.data;
      } catch (error) {
        alert(error);
      } finally {
        this.$store.dispatch("app/stopPageLoading");
      }
    },
  },
  mounted() {
    this.$_fetchData();
  },
};
</script>

<style>
</style>