<template>
  <div class="obpm-dataSource height100">
    <div class="obpm-title">
      <div class="d-inline-block">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane :label="$t('view.basic')" name="basic"></el-tab-pane>
          <el-tab-pane :label="$t('view.data')" name="data"></el-tab-pane>
          <el-tab-pane
            :label="$t('view.list')"
            name="list"
            v-if="params.viewId"
          ></el-tab-pane>
          <el-tab-pane
            :label="$t('view.operation')"
            name="operation"
            v-if="params.viewId"
          ></el-tab-pane>
          <el-tab-pane
            :label="$t('view.city')"
            name="city"
            v-if="$store.state.currentDataSourcesOption.intValue == 18"
          ></el-tab-pane>
        </el-tabs>
      </div>
      <div class="bar d-inline-block float-right">
        <el-button
          type="primary"
          size="small"
          @click="showMenuDialog"
          v-if="params.viewId"
          >{{ $t("btns.create_menu") }}</el-button
        >
        <el-button
          type="primary"
          size="small"
          @click="save('formData')"
          :loading="btnLoading"
          >{{ $t("btns.save") }}</el-button
        >
        <el-button size="small" @click="close" v-if="showLinkBack">{{
          $t("btns.exit")
        }}</el-button>
      </div>
    </div>
    <div class="obpm-main mt-3">
      <el-row :style="{ height: menuHeight + 'px' }" class="overflow-a">
        <!-- 视图基本页面 -->
        <ViewBasic
          ref="viewbasic"
          v-show="tabSwitchover.basicShow"
          :isEdit="edit"
          :moduleId="params.moduleId"
          :viewId="params.viewId"
          @viewModuleData="viewModuleData"
        />

        <!-- 视图数据页面 -->
        <ViewData
          ref="viewData"
          v-show="tabSwitchover.dataShow"
          :isEdit="edit"
          :moduleId="params.moduleId"
          :viewId="params.viewId"
        />

        <!-- 视图列页面 -->
        <ViewColumn
          v-if="tabSwitchover.listShow"
          :viewId="params.viewId"
          :moduleId="params.moduleId"
        />

        <!-- 视图操作页面 -->
        <ViewOperation
          v-if="tabSwitchover.operationShow"
          :viewId="params.viewId"
          :moduleId="params.moduleId"
        />

        <!-- 视图默认加载城市 -->
        <ViewCity
          ref="viewCity"
          v-if="tabSwitchover.cityShow"
          :viewId="params.viewId"
          :moduleId="params.moduleId"
          :viewModuleDataObj="viewModuleDataObj"
          @mapCityObj="mapCityObj"
        />
      </el-row>
    </div>

    <!-- 创建菜单 -->
    <CreateMenu ref="createMenu" :viewId="params.viewId" type="view" />
  </div>
</template>
<script>
import { saveAddModuleView, saveEditModuleView } from "@/service/ViewApi.js";

import ViewCity from "@/components/modulesDetail/ViewCity";
import ViewOperation from "@/components/modulesDetail/ViewOperation";
import ViewColumn from "@/components/modulesDetail/ViewColumn";
import ViewData from "@/components/modulesDetail/ViewData";
import ViewBasic from "@/components/modulesDetail/ViewBasic";

import CreateMenu from "@/components/CommonTool/createMenu";

export default {
  name: "viewDetail",
  components: {
    ViewCity,
    CreateMenu,
    ViewOperation,
    ViewColumn,
    ViewData,
    ViewBasic,
  },
  props: {
    detailData: Object,
    showLinkBack: {
      // 是否显示有调整链接的按钮
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      menuHeight: 0,
      tableHeight:
        document.documentElement.clientHeight - 60 - 32 - 41 - 50 - 32 - 48, //60 头部， 32 面包屑， 41 第一层页签, 48操作列操作栏, 50 第二层页签， 20 下方按钮
      activeName: "basic", //标签页
      tabSwitchover: {
        //切换标签页
        basicShow: true,
        dataShow: false,
        listShow: false,
        operationShow: false,
        cityShow: false,
      },
      btnLoading: false, // 按钮的加载图标
      params: {}, // 视图的数据
      edit: false,
      viewModuleDataObj: {},
      mapCity: {}
    };
  },

  methods: {
    /**
     * 标签页切换
     */
    handleClick(row) {
      let tabSwitchover = {
        ...this.tabSwitchover,
        basicShow: false,
        dataShow: false,
        listShow: false,
        operationShow: false,
        cityShow: false, // 默认加载城市
      };
      this.tabSwitchover = tabSwitchover;
      if (row.name == "data") {
        this.tabSwitchover.dataShow = true;
        this.$store.dispatch("rightHelpPageParams", {
          title: this.$t("msg.view_info_content"),
          url: "application/application_module_view_info_content_help.html",
        });
      } else if (row.name == "list") {
        this.tabSwitchover.listShow = true;
        this.$store.dispatch("rightHelpPageParams", {
          title: this.$t("msg.view_list"),
          url: "application/application_module_view_info_column_help.html",
        });
      } else if (row.name == "operation") {
        // 获取作用表单
        // this.getModuleFormList() // 数据来源表单
        this.tabSwitchover.operationShow = true;
        this.$store.dispatch("rightHelpPageParams", {
          title: this.$t("msg.view_info_do"),
          url: "application/application_module_view_info_activity_help.html",
        });
      } else if (row.name == "city") {
        this.tabSwitchover.cityShow = true;
        this.$store.dispatch("rightHelpPageParams", {
          title: this.$t("msg.view_info_do"),
          url: "application/application_module_view_info_activity_help.html",
        });
      } else {
        this.tabSwitchover.basicShow = true;
        // this.getModuleFormList() // 数据来源表单
        this.$store.dispatch("rightHelpPageParams", {
          title: this.$t("msg.view_info"),
          url: "application/application_module_view_info_help.html",
        });
      }
    },
    viewModuleData(obj){
      if(obj.simpleClassName == "MapView"){
        this.tabSwitchover.cityShow = true;
      }
      this.viewModuleDataObj = obj;
      this.$nextTick(()=>{
        if(this.tabSwitchover.basicShow){
          this.tabSwitchover.cityShow = false;
        }
      })
    },
    /**
     * 显示菜单
     */
    showMenuDialog() {
      this.$refs["createMenu"].showCreateDialog();
    },
    mapCityObj(obj){
      this.mapCity = obj;
    },

    /**
     * 保存表单
     */
    async save() {
      let basicData = this.$refs["viewbasic"].save();
      if (basicData == false) return false;

      let viewData = this.$refs["viewData"]
        ? this.$refs["viewData"].save()
        : {};
      if (viewData == false) return false;

      let viewCity = basicData.simpleClassName == "MapView"
        ? this.mapCity
        : {};

      let data = {
        ...basicData,
        ...viewData,
        ...viewCity,
      };

      let params = {
        appId: sessionStorage.getItem("appId"),
        moduleId: this.params.moduleId,
        viewId: this.params.viewId,
        viewType: parseInt(basicData.intValue),
      };
      if (this.params.viewId) {
        // 编辑保存视图
        this.btnLoading = true
        if(data.address && data.address.length>0){
            data.level='14'
        }else{
          if(data.country){
            data.level='4'
          }
        }
        const response = await saveEditModuleView(params, data);
        this.btnLoading = false;
        if (response.data.errcode == 0) {
          this.$message.success(this.$t("msg.update_ss"));
        }
      } else {
        // 新建保存视图
        this.btnLoading = true;
        if(data.address && data.address.length>0){
            data.level='14'
        }else{
          if(data.country){
            data.level='4'
          }
        }
        const response = await saveAddModuleView(params, data);
        this.btnLoading = false;
        if (response.data.errcode == 0) {
          this.params.viewId = response.data.data.id;
          this.$store.commit("setCurrentDataSources", {
            ...data,
            id: response.data.data.id,
          }); // 当前的数据【传给列的批量创建】
          this.$message.success(this.$t("msg.created_ss"));
        }
      }
    },

    /**
     * 退出
     */
    close() {
      this.$store.commit("setCurrentDataSources", {});
      this.$router.push({
        path: "/home/softwaresdetails/viewlist",
        query: { edit: true, moduleId: this.params.moduleId },
      });
    },
  },
  created() {
    this.params = this.detailData || this.$route.query.params;
    if (this.params.id) {
      this.edit = true;
    }
  },
  mounted() {
    this.$store.dispatch("rightHelpPageParams", {
      title: this.$t("msg.view_info"),
      url: "application/application_module_view_info_help.html",
    });
    let clientHeight =
      document.documentElement.clientHeight || document.body.clientHeight;
    //60 头部， 32 面包屑， 20 父组件外边距,41 标签页，50 内部按钮
    this.menuHeight = clientHeight - 60 - 32 - 41 - 50 - 20 - 16;
  },
  watch: {
    "$store.state.rightHelpPageParams": {
      handler() {
        if (this.$store.state.rightHelpFrame) {
          this.$store.state.rightHelpFrame.contentWindow.showHelpContentHtml(
            this.$store.state.rightHelpPageParams.title,
            this.$store.state.rightHelpPageParams.url
          );
        }
      },
      deep: true,
    },
  },
};
</script>
