<template>
  <v-app id="app">
      <div class="py-8">
        <Timeline 
          :displaySize="displaySize"
          v-model="etapes"
          />
      </div>
  </v-app>
</template>

<script>
import Timeline from '@/components/Timeline'
export default {
  name: 'App',
  components: {
      Timeline
  },
  data() {
    return {
      displaySize: "30",
      etapes: [
        {
          id:24,
          type: "OPERATION",
          period: true,
          label : "Vente VIP - OPEL Laval",
          description: "Fusce ut viverra ligula, ac semper mauris. Nunc aliquet risus in egestas placerat. Mauris in nulla rutrum, tincidunt velit id, viverra orci. Aenean id nibh ut felis pretium tempus. Praesent ullamcorper nisl et ullamcorper faucibus. Sed tristique sem id elit tempor ullamcorper. Duis et sagittis metus. Aliquam ut congue neque, eget pharetra quam. Vestibulum eget fermentum massa, ac dapibus nisl.",
          display: true,
          trigger:"Automatique",
          start: "2021-02-16 09:00",
          end: "2021-02-18 18:00",
          link:"",
          icon: '$close',
          color: '#741b47',
        },
        {
          id:23,
          type: "CALL",
          period: true,
          label : "Call Center",
          description: "<p>Fusce ut viverra ligula, ac semper mauris. Nunc aliquet risus in egestas placerat. Mauris in nulla rutrum, tincidunt velit id, viverra orci. Aenean id nibh ut felis pretium tempus. Praesent ullamcorper nisl et ullamcorper faucibus. Sed tristique sem id elit tempor ullamcorper. Duis et sagittis metus. Aliquam ut congue neque, eget pharetra quam. Vestibulum eget fermentum massa, ac dapibus nisl. <a href='http://google.fr' class='buttons btn-primary'>Test</a></p>",
          display: true,
          trigger:"Automatique",
          start: "2021-01-24 09:00",
          end: "2021-02-02 18:00",
          link:"http://www.google.fr",
          icon: 'https://cdn.dev.media.upyourbizz.com/data/DEMO/2a/49/f6/8363ae9565-161123831960.svg',
          color: '#674ea7',
        },
        {
          id:22,
          type: "COACHING",
          period: true,
          label : "Période de coaching",
          description: "Fusce ut viverra ligula, ac semper mauris. Nunc aliquet risus in egestas placerat. Mauris in nulla rutrum, tincidunt velit id, viverra orci. Aenean id nibh ut felis pretium tempus. Praesent ullamcorper nisl et ullamcorper faucibus. Sed tristique sem id elit tempor ullamcorper. Duis et sagittis metus. Aliquam ut congue neque, eget pharetra quam. Vestibulum eget fermentum massa, ac dapibus nisl.",
          display: true,
          trigger:"Automatique",
          start: "2021-01-22 09:00",
          end: "2021-01-26 18:00",
          link:"",
          icon: 'https://cdn.dev.media.upyourbizz.com/data/DEMO/29/d3/76/5fe8fa5c92-161123833327.svg',
          color: '#efad4d',
        },
        {
          id:21,
          type: "EMAILING",
          period: false,
          label : "Envoi E-mailing",
          description: "Fusce ut viverra ligula, ac semper mauris. Nunc aliquet risus in egestas placerat. Mauris in nulla rutrum, tincidunt velit id, viverra orci. Aenean id nibh ut felis pretium tempus. Praesent ullamcorper nisl et ullamcorper faucibus. Sed tristique sem id elit tempor ullamcorper. Duis et sagittis metus. Aliquam ut congue neque, eget pharetra quam. Vestibulum eget fermentum massa, ac dapibus nisl.",
          display: true,
          trigger:"Automatique",
          start: "2021-01-16 09:00",
          end: "",
          link:"",
          icon: 'https://cdn.dev.media.upyourbizz.com/data/DEMO/8e/4d/cd/9882b32aed-161123834668.svg',
          color: '#b45f06',
        },
        {
          id:20,
          type: "MAILING",
          period: false,
          label : "Envoi courrier",
          description: "Fusce ut viverra ligula, ac semper mauris. Nunc aliquet risus in egestas placerat. Mauris in nulla rutrum, tincidunt velit id, viverra orci. Aenean id nibh ut felis pretium tempus. Praesent ullamcorper nisl et ullamcorper faucibus. Sed tristique sem id elit tempor ullamcorper. Duis et sagittis metus. Aliquam ut congue neque, eget pharetra quam. Vestibulum eget fermentum massa, ac dapibus nisl.",
          display: true,
          trigger:"Automatique",
          start: "2021-01-21 09:00",
          end: "",
          link:"",
          icon: 'https://cdn.dev.media.upyourbizz.com/data/DEMO/d8/68/9a/9e9472b4f1-161123835914.svg',
          color: '#5bb85d',
        },
      ]
    }
  },
  methods: {
   
  },
}
</script>

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