<!--
 * @Author: jiangzaicheng jiangzaicheng_jzc@163.com
 * @Date: 2022-07-05 14:05:30
 * @LastEditors: jiangzaicheng jiangzaicheng_jzc@163.com
 * @LastEditTime: 2022-07-07 20:21:56
 * @FilePath: \mcep-h5\src\views\main\MainView.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="d-page d-flex flex-column" style=" background-color: #ebedf0">
    <div class="rarle">
      <tools-bar :title="tatleName" style="width:100%;height: calc(25vh);">
      </tools-bar>
    </div>
    <div class="roolsolt">
      <van-row class="roll" background="#ecf9ff" style="background: #ecf9ff;width: 90%;height: 34px;margin: 2% auto; border-radius: 10px;position: absolute; top: 21%;
    left: 5%;">
        <van-col span="5" class="titleName"
          style="height: 34px;margin: 7px auto 0px 8px; border-radius: 12px; color: #a2d2f4;">
          审批进度
        </van-col>
        <van-col span="18" class="notice">
          <van-notice-bar left-icon="volume-o" color="#1989fa" background="#ecf9ff"
            style="height: 34px; border-radius: 12px;">
            {{ notice }}
          </van-notice-bar>
        </van-col>
      </van-row>
    </div>


    <div style="background-color: #ffff;height: 18%;">
      <div class="prudect">
        <span style="font-size: 18px;font-weight: 600;margin-left: 4%;">推荐产品</span>
      </div>
      <div>
        <!-- <van-tabs v-model="activeName">
          <van-tab title="综合排序" name="a"></van-tab>
          <van-tab title="金额" name="b"></van-tab>
          <van-tab title="期限" name="c"></van-tab>
          <van-tab title="利率" name="d"></van-tab>
        </van-tabs> -->
        <van-dropdown-menu>
  <van-dropdown-item title="综合排序" ref="item">
    <van-cell center title="包邮">
      <template #right-icon>
        <van-switch  size="24" active-color="#ee0a24" />
      </template>
    </van-cell>
    <van-cell center title="团购">
      <template #right-icon>
        <van-switch  size="24" active-color="#ee0a24" />
      </template>
    </van-cell>
    <div style="padding: 5px 16px;">
      <van-button type="danger" block  >
        确认
      </van-button>
    </div>
  </van-dropdown-item>
  <van-dropdown-item title="金额" ref="item">
    <van-cell center title="包邮">
      <template #right-icon>
        <van-switch  size="24" active-color="#ee0a24" />
      </template>
    </van-cell>
    <van-cell center title="团购">
      <template #right-icon>
        <van-switch  size="24" active-color="#ee0a24" />
      </template>
    </van-cell>
    <div style="padding: 5px 16px;">
      <van-button type="danger" block round >
        确认
      </van-button>
    </div>
  </van-dropdown-item>
  <van-dropdown-item title="期限" ref="item">
    <van-cell center title="包邮">
      <template #right-icon>
        <van-switch  size="24" active-color="#ee0a24" />
      </template>
    </van-cell>
    <van-cell center title="团购">
      <template #right-icon>
        <van-switch  size="24" active-color="#ee0a24" />
      </template>
    </van-cell>
    <div style="padding: 5px 16px;">
      <van-button type="danger" block round >
        确认
      </van-button>
    </div>
  </van-dropdown-item>
  <van-dropdown-item title="利率" ref="item">
    <van-cell center title="包邮">
      <template #right-icon>
        <van-switch  size="24" active-color="#ee0a24" />
      </template>
    </van-cell>
    <van-cell center title="团购">
      <template #right-icon>
        <van-switch  size="24" active-color="#ee0a24" />
      </template>
    </van-cell>
    <div style="padding: 5px 16px;">
      <van-button type="danger" block round >
        确认
      </van-button>
    </div>
  </van-dropdown-item>
</van-dropdown-menu>
      </div>
      <scroller-view v-calculate-height >
         <div v-for="(item, index) in productList" :key="index">
        <picket-bar :productname="item.productname" :describe="item.describe" :limitrange="item.limitrange"
          :interestrate="item.interestrate" :loanterm="item.loanterm"></picket-bar>
      </div>
      </scroller-view>
      
    </div>
  </div>

</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { ProductData } from '@/model/entity/ProductData'

@Component({
  name: "Main",
})
export default class Main extends Vue {
  tatleName = "线上金融服务平台"
  notice = "在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。"
  productList: ProductData[] = [{
    productname: "金融消费贷", //产品名称
    describe: "1年100万",//描述
    limitrange: "1000~2000",//额度范围
    interestrate: "19%~20%",//利率
    loanterm: "89个月",//贷款期限
  },
  {
    productname: "金融消费贷", //产品名称
    describe: "1年100万三年内还清了",//描述
    limitrange: "1000~2000",//额度范围
    interestrate: "19%~20%",//利率
    loanterm: "89个月",//贷款期限
  }];
  activeName: string = "a"
}
</script>
<style scoped lang="scss">
.roll {
  background: #ecf9ff;
}

.titleName {
  float: inline-end;
  height: 34px;
  margin: 7px auto 0px 8px;
  border-radius: 12px;
  color: #a2d2f4;
}

.prudect {
  line-height: 100%;
  margin-top: 40px;
  margin-bottom: 10px;
}
</style>
