<template>
    <div class="common-box">
        <div class="flex ml-3 ai-c">
            <div class="fz-20 fw-b">{{ roleInfo.tasData.name }}</div>
            <div class="ml-3">业务类型：{{ roleInfo.tasData.businessType }}</div>
        </div>
        <div class="flex mt-2 ml-3 ai-c">
            <div>贷款期限：<span class="blue">{{ roleInfo.tasData.rzqx }}</span></div>
            <div class="ml-3">金融机构：<span>{{ roleInfo.tasData.agency }}</span></div>
            <div class="ml-3">综合评分：<span><el-rate disabled v-model="roleInfo.tasData.zhpf" /></span></div>
        </div>
        <div class="flex mt-2 ml-3 ai-c">
            <span class="dbfsbox">{{ roleInfo.tasData.dbfs }}</span>
        </div>
        <div class="flex mt-2 ml-3 ai-c">
            <div class="flex column">
                <div class="ta-l fz-14">参考年化利率</div>
                <div class="mt-1 red fz-20 ta-l">{{ roleInfo.tasData.nhll }}</div>
            </div>
            <div class="ml-3 mr-3 line"></div>
            <div class="flex column">
                <div class="ta-l fz-14">贷款额度(万元)</div>
                <div class="mt-1 blue fz-20 ta-l">{{ roleInfo.tasData.rzed }}</div>
            </div>
        </div>
    </div>
    <div class="mt-3 common-box">
        <div class="flex contentLi column">
            <div class="li-title">产品简介</div>
            <div class="mt-2 fz-14 ta-l content">{{ roleInfo.tasData.cpjj }}</div>
        </div>
        <div class="flex contentLi column">
            <div class="li-title">适用区域</div>
            <div class="mt-2 fz-14 ta-l content">{{ roleInfo.tasData.syqy }}</div>
        </div>
        <div class="flex contentLi column">
            <div class="li-title">产品特点</div>
            <div class="mt-2 fz-14 ta-l content">{{ roleInfo.tasData.cptd }}</div>
        </div>
        <div class="flex contentLi column">
            <div class="li-title">适用客户</div>
            <div class="mt-2 fz-14 ta-l content">{{ roleInfo.tasData.sykh }}</div>
        </div>
        <div class="flex contentLi column">
            <div class="li-title">申请条件</div>
            <div class="mt-2 fz-14 ta-l content">{{ roleInfo.tasData.sqtj }}</div>
        </div>
        <div class="flex contentLi column">
            <div class="li-title">提交材料</div>
            <div class="mt-2 fz-14 ta-l content">{{ roleInfo.tasData.tjcl }}</div>
        </div>
    </div>
</template>
<script>
import { defineComponent, reactive, onMounted, toRefs, watch } from "vue";
import { useRouter } from "vue-router";
export default defineComponent({
  name: "Index",
  components: {},
  props: ["lisdata"],
  setup(props, context) {
    let data = reactive({
        roleInfo:{
            tasData: props.lisdata
        }
        
    });
    watch(
      () => props.lisdata,
      (newVal, oldVal) => {
        console.log('newValwwww', newVal)
        data.roleInfo.tasData  = newVal
      }
    );
    const router = useRouter();
    onMounted(() => {
        console.log('newww', props.lisdata)
    });
    let methods = {};
    return {
      ...methods,
      ...toRefs(data),
    };
  },
});
</script>

<style scoped>
.common-box {
    width: 800px;
    background: #ffffff;
    box-shadow: 0px 2px 10px 2px rgba(0, 0, 0, 0.06);
    border-radius: 6px;
    padding: 34px 20px;
    margin: 0 auto 30px;
}
.blue{
    color: #2e82ff;
}
.red{
    color: #fd6040;
}
.dbfsbox{
    color: #070101;
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 3px 15px;
    font-size: 12px;
}
.line{
    width: 1px;
    height: 40px;
    background: #eee;
}
.contentLi{
    padding: 24px 40px;
    border-bottom: 1px solid #eee;
}
.li-title{
    font-size: 18px;
    color: #424242;
    line-height: 24px;
    font-weight: 700;
    border-left: 4px solid #2e82ff;
    text-align: left;
    padding-left: 16px;
}
.contentLi .content{
    line-height: 26px;
}
</style>
