<template>
  <!-- <div class="mynav" :style="{'background':bg}" style="padding-bottom:5px;"> -->
  <div
    class="mynav"
    style="padding-bottom: 5px; min-height: 430px"
    :style="{ 'background-color': navs.backgroundColor }"
  >
    <swiper
      v-if="navs.navType == 1"
      :autoplay="false"
      :style="{ height: height + 'rpx' }"
    >
      <swiper-item v-for="(item, index) in cols" :key="index">
        <view :style="[formatStyle]">
          <u-grid :col="getColumn(navs)" align="left" :border="false">
            <u-grid-item
              v-for="(c, i) in item"
              :key="i"
              class="grid-text"
              v-if="c.isShow == 1"
              @click="clickHandler(c)"
            >
              <image
                :src="getIconLink(c.icon)"
                mode="widthFix"
                style="width: 64rpx; height: 64rpx"
              />
              <text :style="{ color: navs.color }">{{ c.name }}</text>
            </u-grid-item>
          </u-grid>
        </view>
      </swiper-item>
    </swiper>
    <u-tabs
      v-if="navs.navType === 0"
      :bg-color="navs.backgroundColor"
      :is-scroll="false"
      name="Name"
      :list="navs.navs"
      :active-color="mainColor"
      :current="active"
      @change="changeHandler2"
      :show-bar="showBar"
      :activeFontSize="34"
      :inactive-color="secondary"
      :bold="true"
      height="100"
      duration="0"
      font-size="28"
    ></u-tabs>
    <template>
      <template v-if="clickItem.ShowType == 0">
        <cats v-if="clickItem.ComponentName == 'cats'"></cats>
        <activity v-if="clickItem.ComponentName == 'activity'"></activity>
      </template>
      <template v-else>
        <template
          v-if="clickItem && clickItem.TemplateData"
          v-for="subItem in clickItem.TemplateData"
        >
          <view v-if="subItem.Id == 'image-text'" class="imageText">
            <view
              v-html="
                subItem.data.content.replace(
                  new RegExp('max-width: 100%', 'gm'),
                  'max-width:100%;display:block'
                )
              "
            ></view>
          </view>
          <rubik v-if="subItem.Id == 'rubik'" :ad="subItem.data"></rubik>
          <!-- 网课列表 -->
          <rgoods
            v-if="subItem.Id == 'educationCustom'"
            :goods="subItem.data"
          ></rgoods>
          <matchmaking
            v-if="subItem.Id == 'miaiuser'"
            :navs="subItem.data"
          ></matchmaking>
          <pagetitle v-if="subItem.Id == 'link'" :ts="subItem.data"></pagetitle>
          <goods v-if="subItem.Id == 'goods'" :goods="subItem.data"></goods>
        </template>
      </template>
    </template>
    <u-popup v-model="showModal" mode="center" length="90%">
      <view class="companyMainCon">
        <view class="companyCanhui">
          <Text class="companyLeftTitle">参会人<text>*</text>：</Text>
          <input
            class="uni-input inputM"
            style="margin-left: 10px; margin-top: 5px"
            v-model="companyMsg.Principal"
            placeholder="请输入参会人"
          />
        </view>
        <view class="companyCanhui">
          <Text class="companyLeftTitle">手机号码<text>*</text>：</Text>
          <input
            class="uni-input inputM"
            type="number"
            style="margin-left: 10px; margin-top: 5px"
            v-model="companyMsg.Mobile"
            placeholder="请输入手机号码"
          />
        </view>
        <view class="companyCanhui">
          <Text class="companyLeftTitle">邮箱地址<text>*</text>：</Text>
          <input
            class="uni-input inputM"
            type="number"
            style="margin-left: 10px; margin-top: 5px"
            v-model="companyMsg.EMail"
            placeholder="请输入邮箱地址"
          />
        </view>
        <view class="companyCanhui">
          <Text class="companyLeftTitle">公司名(中文)<text>*</text>：</Text>
          <input
            class="uni-input inputM"
            style="margin-left: 10px; margin-top: 5px"
            v-model="companyMsg.CompanyName"
            placeholder="请输入企业中文名称"
          />
        </view>
        <view
          style="
            display: flex;
            flex-direction: row;
            margin-top: 30px;
            align-items: center;
            height: 50px;
            border-top: 1px solid #f5f5f5;
            width: 100%;
          "
        >
          <view
            style="
              width: 50%;
              display: flex;
              align-items: center;
              justify-content: center;
            "
            @click="showModal = false"
          >
            <Text>取消</Text>
          </view>
          <view
            style="
              width: 50%;
              color: #000450;
              display: flex;
              align-items: center;
              justify-content: center;
            "
            @click="signUpCompany"
          >
            <Text>确定</Text>
          </view>
        </view>
      </view>
    </u-popup>
  </div>
</template>
<script>
import cats from "@/components/navpage/category";
import activity from "@/components/navpage/activity";
import rubik from "@/components/rubik/index";
import rgoods from "@/components/study/index.vue";
import matchmaking from "@/components/matchmaking/index";
import pagetitle from "@/components/pagetitle/index";
import goods from "@/components/goods/index";
export default {
  components: {
    cats,
    activity,
    rubik,
    rgoods,
    matchmaking,
    pagetitle,
    goods,
  },
  props: ["navs"],
  data() {
    return {
      cols: [],
      formatStyle: "",
      height: 160,
      bg: "",
      clickItem: {}, //当前点击的页面
      showModal: false,
      companyMsg: {
        Principal: "", //参会人
        Mobile: "", //手机号码
        EMail: "", //邮箱地址
        CompanyName: "", //公司名-中文
      },
      mainColor: "",
      secondary: "",
      active: 0,
	  showBar:true
    };
  },
  created() {
    this.mainColor = this.$uiConfig.mainColor;
    this.secondary = this.$uiConfig.secondary;
    let tempArray = [];
    this.height = this.navs.rows * this.height;
    this.navs.navs.forEach((x, i) => {
      tempArray.push(x);
      if (
        ((i + 1) % (this.navs.columns * this.navs.rows) == 0 ||
          i == this.navs.navs.length - 1) &&
        (i != 0 || this.navs.navs.length == 1)
      ) {
        this.cols.push(tempArray);
        tempArray = [];
      }
    });
    if (this.navs.showImg) {
      this.formatStyle = {
        backgroundColor: this.navs.backgroundColor,
        backgroundImage: `url('${this.backgroundPicUrl}');`,
        backgroundPosition: this.navs.position,
        backgroundSize: `${this.navs.backgroundWidth}% ${this.navs.backgroundHeight}%;`,
      };
    } else {
      if (
        this.navs.backgroundColor &&
        this.navs.backgroundColor.indexOf("#") == -1
      ) {
        this.navs.backgroundColor = "#" + this.navs.backgroundColor;
      }
      this.formatStyle = {
        backgroundColor: this.navs.backgroundColor,
      };
    }
    this.bg = this.formatStyle.backgroundColor;
    if (this.cols && this.cols.length > 0) {
      this.clickItem = this.cols[0][0];
    }
    //this.getList();
	// #ifdef MP-ALIPAY
	this.showBar=false
	// #endif
  },
  methods: {
    clickHandler(item) {
      this.clickItem = {};
      this.$nextTick(function () {
        this.clickItem = item;
      });
    },
    changeHandler2(i) {
      this.active = i;
      this.clickItem = {};
      this.$nextTick(function () {
        this.clickItem = this.navs.navs[i];
      });
    },
    //获取数据
    getList() {
      this.request2(
        {
          url: "/api/AppletTrade/GetUserCompany",
          data: {},
        },
        (res) => {
          uni.hideLoading();
          if (res.resultCode == 1) {
            if (res.data == null) {
              this.showModal = true;
            } else {
              this.showModal = false;
            }
          }
        }
      );
    },
    //保存信息
    signUpCompany() {
      if (this.companyMsg.Principal == "") {
        uni.showToast({
          title: "请输入参会人",
          icon: "none",
        });
        return;
      }
      if (this.companyMsg.Mobile == "") {
        uni.showToast({
          title: "请输入手机号码",
          icon: "none",
        });
        return;
      }
      if (this.companyMsg.EMail == "") {
        uni.showToast({
          title: "请输入邮箱地址",
          icon: "none",
        });
        return;
      }
      if (this.companyMsg.CompanyName == "") {
        uni.showToast({
          title: "请输入公司中文名称",
          icon: "none",
        });
        return;
      }
      this.request2(
        {
          url: "/api/AppletTrade/SetCompany",
          data: this.companyMsg,
        },
        (res) => {
          if (res.resultCode == 1) {
            uni.showToast({
              title: "保存成功",
            });
            this.getList();
          }
        }
      );
    },
    //判断返回几个图标
    getColumn(nav) {
      var Num = 0;
      for (var i = 0; i < nav.navs.length; i++) {
        if (nav.navs[i].isShow == 1) {
          Num++;
        }
      }
      return Num;
    },
  },
};
</script>

<style>
.mynva .grid-text {
  font-size: 28rpx;
  margin-top: 4rpx;
  color: "#330330";
}

.grid-text view {
  background: transparent !important;
}
.companyMainCon {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #fff;
}
.companyCanhui {
  display: flex;
  width: 100%;
  margin-top: 30px;
  padding-left: 20px;
}
.companyLeftTitle {
  display: inline-block;
  width: 110px;
  text-align: right;
  margin-top: 6px;
}
.companyLeftTitle text {
  color: red;
  margin-left: 3px;
}
</style>
