<template>
  <div id="app">
    <div class="example">
       <div class="ex-item"><p>Example1：</p><stepView cricleSize="23px" cricleBgColor="white" cricleColor="orange" :dataList="stepList"  title="理赔流程"></stepView></div>
       <div class="ex-item"><p>Example2：</p><stepView
      :dataList="questionList"
      title="常见问题"
      @openDetail="openDetail"
      :showIcon="true"
    ></stepView></div>
        <div class="ex-item"><p>Example3：</p><stepView  :dataList="stepList"  title="理赔流程"></stepView></div>
        <div class="ex-item"><p>Example4：</p><stepView :dataList="cityList" :isLogistics="true" title="物流跟踪"></stepView></div>
        <div class="ex-item"><p>Example5：</p><stepView
          class="win-step"
          titleColor="#FF9B2C"
          :showTitle="false"
          :noCircle="true"
          cricleBgColor="white"
          cricleColor="#FF9B2C"
          titleSize="16px"
          titleDetailSize="14px"
          :titleWeight="500"
          :dataList="clientList"
        >
          <p style="font-size: 14px">
            投保前请仔细阅读《xxx条款》、《xxx须知》及<span
              style="color: #4865d9"
              @click="openClause"
              >《xxxx告知书》</span
            >
          </p>
    </stepView></div>
    </div>  
  </div>
</template>

<script>
import stepView from './base/stepview/stepview'
export default {
  name: 'app',
  components:{
     stepView
  },
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
       stepList: [
        {
          title: '报案流程',
          detail:
            '拨打全国统一客服热线 xxxx进行报案，或关注“xxxxx”官方微信公众号在线报案',
          showline: true,
          index: '1',
          showDetail: true
        },
        {
          title: '提交资料',
          detail: '按照xxxxx官方微信、官网的要求，提供所需理赔资料',
          showline: true,
          index: '2',
          showDetail: true
        },
        {
          title: '资料审核',
          detail:
            '在您提交的理赔材料真实齐全的情况下，xxxxx理赔专员会尽快进行内部审核工作',
          showline: true,
          index: '3',
          showDetail: true
        },
        {
          title: '理赔款支付',
          detail: '审核通过后，理赔金会支付到您提供的账户',
          showline: false,
          index: '4',
          showDetail: true
        }
      ],
       cityList: [
        {
          title: '【城市】物流状态1',
          detail:
            '2016-07-12 12:40',
          showline: true,
          index: '1',
          showDetail: true
        },
        {
          title: '【城市】物流状态',
          detail: '2016-07-11 10:00',
          showline: true,
          index: '2',
          showDetail: true
        },
        {
          title: '快件已发货',
          detail:
            '2016-07-10 09:30',
          showline: false,
          index: '3',
          showDetail: true
        }
      ],
      questionList: [
        {
          title: '本产品的交费方式是月交还是年交？',
          detail:
            '您可选择年交或月交。需要提醒的是，月交方式，首期保费先交两个月，第二个月不扣，从第三个月开始自动划扣。',
          showline: false,
          index: 'Q1',
          showDetail: true
        },
        {
          title: '本产品的产品类型是？',
          detail: '属于长期重疾险。',
          showline: false,
          index: 'Q2',
          showDetail: false
        },
        {
          title: '产品对职业的要求是什么？',
          detail: '本产品能承保的职业类别为1-4类。',
          showline: false,
          index: 'Q3',
          showDetail: false
        },
        {
          title: '本重疾险和社保报销有冲突吗？',
          detail: '一经确诊便可理赔，与社保无冲突，不影响社保报销。',
          showline: false,
          index: 'Q4',
          showDetail: false
        },
        {
          title: '产品等待期多少天？疾病间隔期是多久？',
          detail:
            '本产品等待期为90天，轻症和中症无间隔期，重症每次确诊的间隔期须大于180天。',
          showline: false,
          index: 'Q5',
          showDetail: false
        },
        {
          title: '如何交后续的续期保费？',
          detail:
            '保险公司将会在约定的保险费交纳日从您购买时填写的银行账户中划扣当期应交的保险费，请保持银行账户余额充足。',
          showline: false,
          index: 'Q6',
          showDetail: false
        },
        {
          title: '是否可以投保多份？',
          detail:
            '可以。但需在“重疾风险保额”(下述)规定额度之内 \n被保险人年龄（周岁）：0-15，累计重疾险风险保额（万元）：≤30；\n被保险人年龄（周岁）：16-40，累计重疾险风险保额（万元）：≤60；\n被保险人年龄（周岁）：41-45，累计重疾险风险保额（万元）：≤40；\n被保险人年龄（周岁）：46-50，累计重疾险风险保额（万元）：≤20；\n被保险人年龄（周岁）：51-60，累计重疾险风险保额（万元）：≤15',
          showline: false,
          index: 'Q7',
          showDetail: false
        },
        {
          title: '是否可以为我的家人投保？',
          detail:
            '18周岁以上（含18周岁），具有完全民事行为能力的公民，可作为投保人。投保人可为自己、父母、配偶、及子女投保。',
          showline: false,
          index: 'Q8',
          showDetail: false
        },
        {
          title: '保险销售区域？',
          detail: '全国范围（除青海、西藏及港澳台地区）',
          showline: false,
          index: 'Q9',
          showDetail: false
        }
      ],
      clientList: [
        {
          title: '合作保险公司',
          detail: '该产品由xxx公司承保，由xxxx公司销售',
          showline: false,
          index: '1',
          showDetail: true
        },
        {
          title: '记录投保操作',
          detail: '为了保障您的权益，您的投保过程将被记录，该信息将被加密存储',
          showline: false,
          index: '2',
          showDetail: true
        },
        {
          title: '阅读保险条款',
          detail: '投保前请仔细阅读《xxx条款》、《xxx须知》及《xxxx告知书》',
          showline: false,
          index: '3',
          showDetail: false,
          showSolt: true
        }
      ],
    }
  },
  methods:{
     openDetail(item) {
      this.$set(item, 'showDetail', !item.showDetail)
    },
    openClause(){
      console.log('点击')
    }
  }
}
</script>

<style lang="scss">
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
.example{
  display: flex;
  flex-direction: row;
  .ex-item{
    flex: 1;
  }
}
</style>
