<!--
 * @Author: jiangzaicheng jiangzaicheng_jzc@163.com
 * @Date: 2022-07-05 14:05:30
 * @LastEditors: jiangzaicheng jiangzaicheng_jzc@163.com
 * @LastEditTime: 2022-07-28 15:44:01
 * @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 style="height:100%;">
          <van-dropdown-item title="综合排序" ref="item" style="height:100%">
            <div class="application" v-for="(item, index) in applicaList" :key="index">
              <van-row type="flex" class="applicationName">
                <van-col span="24">{{ item.name }}</van-col>
              </van-row>
              <van-row type="flex" class="applicationfale">
                <van-col span="10">
                  <div class="vandiv">{{ item.max }}</div>
                </van-col>
                <van-col span="2">-</van-col>
                <van-col span="10">
                  <div class="vandiv">{{ item.min }}</div>
                </van-col>
              </van-row>

              <van-row type="flex" gutter="10" class="applicationfole">
                <!-- div-->
                <van-col span="6">
                  <div class="vandilote">{{ item.fristsize }}</div>
                </van-col>
                <van-col span="6">
                  <div class="vandilote">{{ item.secondsize }}</div>
                </van-col>
                <van-col span="6">
                  <div class="vandilote">{{ item.thirdsize }}</div>
                </van-col>
                <van-col span="6">
                  <div class="vandilote">{{ item.foursize }}</div>
                </van-col>
              </van-row>
            </div>
            <div style="margin-top: 4%;">
              <van-row type="flex">
                <van-col span="12">
                  <van-button square block type="default">重置</van-button>
                </van-col>
                <van-col span="12">
                  <van-button square block type="info">确定</van-button>
                </van-col>
              </van-row>
            </div>
          </van-dropdown-item>
          <van-dropdown-item title="金额" ref="item">
            <div class="application" v-for="(item, index) in applicaform" :key="index">
              <van-row type="flex" class="applicationName">
                <van-col span="24">{{ item.name }}</van-col>
              </van-row>
              <van-row type="flex" class="applicationfale">
                <van-col span="10">
                  <div class="vandiv">{{ item.max }}</div>
                </van-col>
                <van-col span="2">-</van-col>
                <van-col span="10">
                  <div class="vandiv">{{ item.min }}</div>
                </van-col>
              </van-row>

              <van-row type="flex" gutter="10" class="applicationfole">
                <!-- div-->
                <van-col span="6">
                  <div class="vandilote">{{ item.fristsize }}</div>
                </van-col>
                <van-col span="6">
                  <div class="vandilote">{{ item.secondsize }}</div>
                </van-col>
                <van-col span="6">
                  <div class="vandilote">{{ item.thirdsize }}</div>
                </van-col>
                <van-col span="6">
                  <div class="vandilote">{{ item.foursize }}</div>
                </van-col>
              </van-row>
            </div>
            <div style="margin-top: 4%;">
              <van-row type="flex">
                <van-col span="12">
                  <van-button square block type="default">重置</van-button>
                </van-col>
                <van-col span="12">
                  <van-button square block type="info">确定</van-button>
                </van-col>
              </van-row>
            </div>
          </van-dropdown-item>
          <van-dropdown-item title="期限" ref="item">
            <div class="application" v-for="(item, index) in applicaform" :key="index">
              <van-row type="flex" class="applicationName">
                <van-col span="24">{{ item.name }}</van-col>
              </van-row>
              <van-row type="flex" class="applicationfale">
                <van-col span="10">
                  <div class="vandiv">{{ item.max }}</div>
                </van-col>
                <van-col span="2">-</van-col>
                <van-col span="10">
                  <div class="vandiv">{{ item.min }}</div>
                </van-col>
              </van-row>

              <van-row type="flex" gutter="10" class="applicationfole">
                <!-- div-->
                <van-col span="6">
                  <div class="vandilote">{{ item.fristsize }}</div>
                </van-col>
                <van-col span="6">
                  <div class="vandilote">{{ item.secondsize }}</div>
                </van-col>
                <van-col span="6">
                  <div class="vandilote">{{ item.thirdsize }}</div>
                </van-col>
                <van-col span="6">
                  <div class="vandilote">{{ item.foursize }}</div>
                </van-col>
              </van-row>
            </div>
            <div style="margin-top: 4%;">
              <van-row type="flex">
                <van-col span="12">
                  <van-button square block type="default">重置</van-button>
                </van-col>
                <van-col span="12">
                  <van-button square block type="info">确定</van-button>
                </van-col>
              </van-row>
            </div>
          </van-dropdown-item>
          <van-dropdown-item title="利率" ref="item">
            <div class="application" v-for="(item, index) in applicaform" :key="index">
              <van-row type="flex" class="applicationName">
                <van-col span="24">{{ item.name }}</van-col>
              </van-row>
              <van-row type="flex" class="applicationfale">
                <van-col span="10">
                  <div class="vandiv">{{ item.max }}</div>
                </van-col>
                <van-col span="2">-</van-col>
                <van-col span="10">
                  <div class="vandiv">{{ item.min }}</div>
                </van-col>
              </van-row>

              <van-row type="flex" gutter="10" class="applicationfole">
                <!-- div-->
                <van-col span="6">
                  <div class="vandilote">{{ item.fristsize }}</div>
                </van-col>
                <van-col span="6">
                  <div class="vandilote">{{ item.secondsize }}</div>
                </van-col>
                <van-col span="6">
                  <div class="vandilote">{{ item.thirdsize }}</div>
                </van-col>
                <van-col span="6">
                  <div class="vandilote">{{ item.foursize }}</div>
                </van-col>
              </van-row>
            </div>
            <div style="margin-top: 4%;">
              <van-row type="flex">
                <van-col span="12">
                  <van-button square block type="default">重置</van-button>
                </van-col>
                <van-col span="12">
                  <van-button square block type="info">确定</van-button>
                </van-col>
              </van-row>
            </div>
          </van-dropdown-item>
        </van-dropdown-menu>
      </div>
      <scroller-view v-calculate-height>
        <div v-for="(item, index) in productList" :key="index" style="margin: 4% auto;">
          <picket-bar :productname="item.productname" :describe="item.describe" :limitrange="item.limitrange"
            :interestrate="item.interestrate" :loanterm="item.loanterm" @onClickPicket="onClickPicket"></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 = "在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。"
  //测试
  demo() {
    this.$router.push({
      path: "/CustomerMgtView"
    }
    )
  }
  //div列表
  applicaList: any = [
    {
      name: "产品金额（万元）",
      max: "最高",
      min: "最低",
      fristsize: "1-100",
      secondsize: "100-500",
      thirdsize: "500-1000",
      foursize: "1000-2000"
    },
    {
      name: "产品期限(月)",
      max: "最高",
      min: "最低",
      fristsize: "1-100",
      secondsize: "100-500",
      thirdsize: "500-1000",
      foursize: "1000-2000"
    },
    {
      name: "产品利率(%)",
      max: "最高",
      min: "最低",
      fristsize: "1-100",
      secondsize: "100-500",
      thirdsize: "500-1000",
      foursize: "1000-2000"
    },
    {
      name: "担保方式",
      max: "最高",
      min: "最低",
      fristsize: "抵押",
      secondsize: "质押",
      thirdsize: "信用",
      foursize: "保证"
    },
    // {
    //   name: "产品金额（万元）",
    //   max: "最高",
    //   min: "最低",
    //   fristsize: "1-100",
    //   secondsize: "100-500",
    //   thirdsize: "500-1000",
    //   foursize: "1000-2000"
    // },
    // {
    //   name: "产品金额（万元）",
    //   max: "最高",
    //   min: "最低",
    //   fristsize: "1-100",
    //   secondsize: "100-500",
    //   thirdsize: "500-1000",
    //   foursize: "1000-2000"
    // },
    // {
    //   name: "产品金额（万元）",
    //   max: "最高",
    //   min: "最低",
    //   fristsize: "1-100",
    //   secondsize: "100-500",
    //   thirdsize: "500-1000",
    //   foursize: "1000-2000"
    // }
  ]
  //金额
  applicaform: any = [
    {
      name: "产品金额（万元）",
      max: "最高",
      min: "最低",
      fristsize: "1-100",
      secondsize: "100-500",
      thirdsize: "500-1000",
      foursize: "1000-2000"
    }
  ]

  //按钮
  tabbarlist: any = {
    name: "首页",
    flag: true
  }


  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个月",//贷款期限
  }];
  //点击picket跳转界面
  onClickPicket() {
    this.$router.push({
      path: "/product",
      //路由传值
      // params:{
      //   data:""
      // }
    })
  }
}
</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;
}

.vandiv {
  text-align: center;
  border-color: rgba(204, 204, 204, 1);
  font-size: 12px;
  color: #999999;
  border: 1px solid #999999;
  width: 80%;
  border-radius: 4px;
  //background-color: #a2d2f4;
}

.application {
  height: 20%;
}

.applicationName {
  //margin-left: 6%;
  margin: 2% 6%;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1;
  -webkit-font-feature-settings: "kern";
  -moz-font-feature-settings: "kern";
  -moz-font-feature-settings: "kern=1";
  font-kerning: normal;
}

.applicationfole {
  margin: 0 auto;
  font-size: 14px;
  color: #333333;
  // margin-top: 2%;
  // margin-left: 5%;
  // margin-right: 5%;
  margin: 4% 6% 0% 6%;
}

.applicationfale {
  //margin-left: 5%;
  margin: 4% 6%;
}

.vandilote {
  text-align: center;
  background-color: rgba(242, 242, 242, 1);
  font-size: 12px;
  line-height: 40px;
  border-radius: 4px;
  // color: #999999;
  // border: 1px solid #999999;
}

.applicationbutton {
  text-align: center;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 72px;
}

.van-dropdown-item {
  position: fixed;
  right: 0;
  left: 0;
  z-index: 10;
  overflow: hidden;
  height: 100%;
}
</style>