<template>
  <!-- <div class="loanProDetail">loanProDetail</div> -->
  <view class="page loanProDetail">
    <component :is="'style'">
      :root { --height-to-be-removed: {{ heightToBeRemoved + "px" }}; }
    </component>
    <view class="page-head" :ref="'pageHead'" @click="heiToBeRem">
      <view class="head-top">
        <view v-if="true" class="image-view">
          <image :src="thumbLink(options.lenderName)" />
        </view>
        <view class="loan-pro-info">
          <view class="loan-pro-name">
            <text>{{ loanProduct.loanCommodity }}</text>
          </view>
          <view class="bank">
            <text>{{ options.lenderName }}</text>
          </view>
        </view>
      </view>
    </view>

    <view class="page-body">
      <view class="body-view" v-if="true">
        <scroll-view
          class="top-menu-view"
          scroll-x="true"
          :scroll-into-view="tabCurrent"
          :ref="'topMenuView'"
        >
          <view
            class="menu-topic-view"
            v-for="item in tabs"
            :id="'tabNum' + item.id"
            :key="item.id - 1"
            @click="swichMenu(item.id - 1)"
          >
            <view
              :class="
                currentTab == item.id - 1 ? 'menu-topic-act' : 'menu-topic'
              "
            >
              <text class="menu-topic-text">{{ item.name }}</text>
              <view class="menu-topic-bottom">
                <view class="menu-topic-bottom-color" />
              </view>
            </view>
          </view>
        </scroll-view>
        <!-- 内容 -->
        <swiper
          class="swiper-box-list"
          :current="currentTab"
          @change="swiperChange"
        >
          <swiper-item
            class="swiper-topic-list"
            v-for="(item, index) in tabs"
            :key="index"
          >
            <scroll-view class="tabs-item" scroll-y="true">
              <block v-if="item.name === '产品介绍'">
                <!-- <block> -->
                <view
                  class="loan-card pro-introduce"
                  v-for="(loanDetail, loanDetailIndex) in productPresentation"
                  :key="loanDetailIndex"
                >
                  <view class="card-title">
                    <text>{{ loanDetail.title }}</text>
                  </view>
                  <view class="card-body">
                    <view
                      class="empty"
                      v-if="
                        loanProduct[loanDetail.name] === null ||
                        loanProduct[loanDetail.name] === '' ||
                        loanProduct[loanDetail.name] === undefined
                      "
                      ><text>暂无内容</text></view
                    >
                    <view v-else
                      ><text>{{ loanProduct[loanDetail.name] }}</text></view
                    >
                  </view>
                </view>
              </block>
              <block v-if="item.name === '贷款说明'">
                <view
                  class="
                    loan-card
                    pro-loan-details
                    loanDetailIndex
                    !==
                    0
                    ?
                    'mar-top'
                    :
                    ''}}
                  "
                  v-for="(loanDetail, loanDetailIndex) in LoanSpecification"
                  :key="loanDetailIndex"
                >
                  <view class="card-title">
                    <text>{{ loanDetail.title }}</text>
                  </view>
                  <view class="card-body">
                    <view
                      class="empty"
                      v-if="
                        loanProduct[loanDetail.name] === null ||
                        loanProduct[loanDetail.name] === '' ||
                        loanProduct[loanDetail.name] === undefined
                      "
                      ><text>暂无内容</text></view
                    >
                    <text>{{ loanProduct[loanDetail.name] }}</text>
                  </view>
                </view>
              </block>
              <block
                v-if="
                  item.name === '产品描述' &&
                  loanProduct.introduction !== null &&
                  loanProduct.introduction !== undefined &&
                  loanProduct.introduction !== ''
                "
              >
                <view class="loan-card pro-procedure">
                  <view class="loan-card card-body">
                    <div
                      class="introduction"
                      v-html="loanProduct.introduction"
                    />
                  </view>
                </view>
              </block>
              <block v-else-if="item.name === '产品描述'">
                <view
                  class="loan-card card-body"
                  style="text-align: center; padding: 10px; color: #717d71"
                >
                  <view class="empty">
                    <text>暂无内容</text>
                  </view>
                </view>
              </block>
            </scroll-view>
          </swiper-item>
        </swiper>
      </view>

      <view class="page-foot">
       <view class="apply-for">
          <view class="app-for-relat"></view>
          <navigator
            :url="'#'"
            @click="navigator(options)"
            class="app-for-fixed"
          >
            <view class="center">
              <text>申请贷款</text>
            </view>
          </navigator>
        </view>
      </view>
      
    </view>
  </view>
</template>

<script>
import {
  listLoanProduct,
  getLoanProduct,
  delLoanProduct,
  addLoanProduct,
  updateLoanProduct,
  changeProductEnable,
} from "@/api/financialCredit/loanProduct";
import { selectBaseInfo } from "@/api/enterprise/baseInfo";
import { selectUserEntity } from "@/api/enterprise/userEntity";

export default {
  name: "loanProDetail",
  components: {},
  props: {},
  data() {
    return {
      haveEnterprise: false,
      heightToBeRemoved: 125,
      currentTab: 0,
      tabCurrent: "tabNum1",
      remheiClas: [".page-head", ".app-for-fixed", ".top-menu-view"],
      tabs: [
        {
          id: 1,
          name: "产品介绍",
        },
        {
          id: 2,
          name: "贷款说明",
        },
        {
          id: 3,
          name: "产品描述",
        },
      ],
      options: {},
      loanProduct: {},
      loanCom: {},
      loanProductList: [],
      LoanSpecification: [
        {
          title: "贷款期限说明",
          name: "loanTerm",
        },
        {
          title: "贷款额度",
          name: "loanLimit",
        },
        {
          title: "利率说明",
          name: "interestRate",
        },
        {
          title: "申请所需资料",
          name: "materials",
        },
        {
          title: "还款方式",
          name: "repayMethod",
        },
        {
          title: "担保形式",
          name: "guarantee",
        },
        // {
        //   title: "",
        //   name: "",
        // },
        // {
        //   title: "",
        //   name: "",
        // },
        // {
        //   title: "",
        //   name: "",
        // },
        // {
        //   title: "",
        //   name: "",
        // },
      ],
      productPresentation: [
        {
          title: "产品优势",
          name: "advantages",
        },
        {
          title: "贷款条件",
          name: "loanConditions",
        },
        {
          title: "办理渠道",
          name: "applicationChannel",
        },
        {
          title: "适用对象",
          name: "applicationUser",
        },
        // {
        //   title: "",
        //   name: "",
        // },
        // {
        //   title: "",
        //   name: "",
        // },
      ],
    };
  },
  watch: {
    haveEnterprise: {
      handler: function (val, oldVal) {
        if (this.haveEnterprise === true) {
          this.getBaseInfo();
        }
      },
      deep: true,
    },
  },
  mounted() {
    this.$nextTick(function () {
      let removeHeight = 0;
      for (let remheicla of this.remheiClas) {
        let pageHead = uni.createSelectorQuery().select(remheicla);
        pageHead
          .fields({ size: true }, (data) => {
            removeHeight = removeHeight + data.height;
          })
          .exec();
      }
      this.heightToBeRemoved = removeHeight;
    });
  },
  onLoad(options) {
    this.getRouter(options);
    this.getById();
    this.getEnterprise()
  },
  methods: {
    confirmCreateEnterPrise() {
      this.$modal.confirm("请先创建经营主体").then((res) => {
        if (res === true) {
          this.$tab.navigateTo("/pages/formPages/enterprise/baseInfo/index");
        }
      });
    },
    navigator(item, isNew) {
      if (this.haveEnterprise === true) {
        this.$tab.navigateTo("/pages/formPages/loan/applyLoanForm/index?loanProductId=" +item.id +"&baseinfoId=" +item.baseinfoId)
          .then((res) => {
            if (res[0] !== null) {
              this.$modal.showToast("模块建设中~");
            }
          });
      } else if (!this.$auth.hasRole("admin") && this.$auth.hasRole("enterprise")) {
        this.confirmCreateEnterPrise();
      } else {
        this.$modal.confirm("非主体用户无法拥有主体！").then(() => {});
      }
    },
    //查询主体用户关联信息
    getEnterprise() {
      selectUserEntity().then((response) => {
        if (response.data.length !== 0) {
          this.haveEnterprise = true;
        } else {
          this.haveEnterprise = false;
        }
      });
    },
    //查询主体信息
    getBaseInfo() {
      selectBaseInfo().then((response) => {
        let baseInfo = response.data;
        this.$set(this.options, "baseinfoId", baseInfo.id);
      });
    },
    getMsg(yes_no) {
      if (yes_no === true) {
        this.$modal.msgSuccess("提交申请成功");
      } else if (yes_no === false) {
        this.$modal.msgSuccess("申请修改成功");
      } else if (yes_no === undefined) {
      } else {
        this.$modal.msgError("提交申请失败");
      }
    },
    thumbLink(lenderName) {
      switch (lenderName) {
        case "中国邮政储蓄银行股份有限公司":
          return "../../../../static/images/index/zgyz.png";
        case "邮政储蓄银行":
          return "../../../../static/images/index/zgyz.png";
        case "中国农业银行":
          return "../../../../static/images/index/nyyh.png";
        default:
          return "../../../../static/images/index/no-photo.png";
      }
    },
    swichMenu(id) {
      this.currentTab = id;
      this.tabCurrent = "tabNum" + id;
    },
    swiperChange(e) {
      let index = e.detail.current;
      this.swichMenu(index);
    },
    async getRouter(options) {
      this.options = options;
    },
    getById() {
      this.$modal.loading("加载中，请耐心等待...");
      getLoanProduct(this.options.id).then((res) => {
        this.loanProduct = res.data;
        this.$modal.closeLoading();
      });
    },
  },
 
};
</script>

<style scoped lang="scss">
// --heightToBeRemoved:heighttoberemoved
.page-head {
  padding: 0px;
  background-color: white;
}

.page-body {
  margin-top: 15rpx;
}

.page-foot {
  margin: 0px;
  padding: 0px;
  // height: 80rpx;
}

.head-top {
  display: flex;
  text-align: left;
  position: relative;
  padding: 10px;
}

.head-top::after {
  content: "";
  border-bottom: 1rpx #e0e0e0 solid;
  position: absolute;
  bottom: -5rpx;
  left: 0rpx;
  width: 100%;
}

.image-view {
  width: 240rpx;
  height: 240rpx;
}

.image-view image {
  width: 240rpx;
  height: 240rpx;
}

.loan-pro-info {
  padding-top: 10px;
}

.loan-pro-name {
  font-weight: 600;
}

.bank {
  margin-top: 10px;
  font-size: 14px;
}

.head-bottom {
  margin-top: 15rpx;
  display: flex;
  justify-content: space-around;
  font-size: 35rpx;
}

.head-bottom > view {
  width: 33%;
}

.head-bottom > view > view {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.head-bottom .label {
  color: #5a5a5a;
  font-size: 20rpx;
}

.head-bottom .pro-mar .content .rate {
  color: orange;
}

.weui-tabs-bar__content {
  display: flex;
  justify-content: space-around;
  position: relative;
}

.weui-tabs-bar__content::before {
  content: "";
  position: absolute;
  width: 100%;
  border-bottom: #f1f1f1 2px solid;
  bottom: 0px;
}

.weui-tabs-bar__title {
  position: relative;
}

.weui-tabs .weui-tabs-swiper {
  height: calc(100vh - 100px) !important;
}

.weui-tabs swiper {
  height: 100vh !important;

  overflow: unset;
}

.weui-tabs swiper-item {
  height: auto !important;
  overflow: unset;
}

.tab-bar-title_selected {
  color: #1B7AF5;
}

.swiper-topic-list {
  color: #1B7AF5;
}

.tab-content {
  height: 100vh;
  overflow: scroll;
}

.loan-card {
  width: 100%;
  background-color: white;
  border: 0px !important;
}

.mar-top {
  margin-top: 15rpx;
}

.card-title {
  margin: 15rpx;
  margin-left: 0;
  padding: 15rpx 15rpx 15rpx 55rpx;
  position: relative;
}

.card-title::before {
  content: "";
  position: absolute;
  width: 10rpx;
  height: 40rpx;
  background-color: #1B7AF5;
  display: inline-block;
  line-height: 20rpx;
  margin-left: -30rpx;
  transform: translateY(5%);
}

.card-title::after {
  content: "";
  position: absolute;
  width: 100vw;
  left: 0px;
  bottom: 0px;
  border-bottom: #f1f1f1 1px solid;
}

.card-body {
  font-size: 15px;
  margin: 15rpx;
  margin-left: 0;
  padding: 10rpx 15rpx 30rpx 40rpx;
  position: relative;
  border-bottom: #ebebeb 1px solid;
  color: #7a7a7a;

  .empty {
    color: #bbb;
  }

  .introduction {
    // padding-right: 25rpx;
    width: calc(100vw - 80rpx);

    :not(not) {
      max-width: calc(100vw - 80rpx);
      word-wrap: break-word;
      white-space: break-spaces;
    }
  }
}

/* .card-body{
    display:;
    position: fixed;
} */

.apply-for {
  height: 100%;
  width: 100vw;
  position: relative;
}

.apply-for view {
  height: 100%;
}

.apply-for .app-for-fixed {
  bottom: 0px;
  width: 100%;
  height: 6vh;
  position: fixed;
  background-color: #1B7AF5;
  font-size: 15px;
  color: white;

  .center {
    position: relative;

    text {
      position: absolute;
      margin-top: 1vh;
      // margin: auto 0px;
      // transform: translateY(50%);
      // transform: rotateX(5);

      /deep/span {
        margin-left: -100%;
        // margin-top: 100%;
      }
    }
  }
}

.page-body {
  position: relative;

  .body-view {
    position: relative;
    // top: ;
    .top-menu-view {
      z-index: 3;
      display: flex;
      // position: fixed;
      // top: 100rpx;
      top: calc(44px + env(safe-area-inset-top));
      left: 0;
      white-space: nowrap;
      width: 100%;
      background-color: #ffffff;
      height: 86rpx;
      line-height: 86rpx;
      border-top: 1rpx solid #d8dbe6;

      .menu-topic-view {
        display: inline-block;
        white-space: nowrap;
        height: 86rpx;
        position: relative;

        .menu-topic-text {
          font-size: 30rpx;
          color: #303133;
          padding: 10rpx 40rpx;
        }

        .menu-topic-bottom {
          position: absolute;
          bottom: 0;
          width: 100%;

          .menu-topic-bottom-color {
            width: 40rpx;
            height: 4rpx;
          }
        }

        .menu-topic-act .menu-topic-bottom {
          display: flex;
          justify-content: center;
        }

        .menu-topic-act .menu-topic-bottom-color {
          background: #3d7eff;
          min-height: 2px;
        }
      }
    }
  }

  .swiper-box-list {
    width: 100%;
    padding-top: 11px;
    flex: 1;
    background-color: #ffffff;
    // height: 100px;
    height: calc(
      100vh -
        calc(
          var(--height-to-be-removed) + 6px + var(--status-bar-height) +
            calc(44px + env(safe-area-inset-top))
        )
    );

    .swiper-topic-list {
      width: 100%;
      // height: calc(calc(auto) + calc(44px));
      // padding-bottom: 44px;

      .tabs-item {
        height: calc(
          100vh -
            calc(
              var(--height-to-be-removed) + 6px + 11px +
                var(--status-bar-height) + calc(44px + env(safe-area-inset-top))
            )
        );
      }
    }
  }
}
</style>