import styled from 'styled-components'
import {rem, zIndex} from '../style/function.style'

const goToIcon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAL5SURBVHgB1VqBcdswDIQzgTcIN6g3iDtB3QmSTlBvIG+QbqB0glwnsDuB3QmoDeRO8CVL6qxQIC1RkJz8HU4ni3oAJEBCpBckAABLc9kY+WREGVkZWXppUHk5efm9WCwquhWs0UZ2RvbIx9HIoxFFc6FleA1ZlJM7MpHhIXZDbFr0aeR75pVcbMdwIBfbzfWvifGzf9/mguW49xxrLzFURj6L5IhR/pTodft74Q0cyqs8t05wb2gM4EImRv6dhHDFkR3lIGH8c06P99BnR6QUccIOXYRIrNcTurcR3Y99CRS6MW/vH2gmGF2riA2qz8ua8X5FM8PoXDN2HK+9tLtF2CTs4cKpiDVWTOOSbgy4SSMMpSXXsAwaasxZo0QAV7rUyVGI9H6/rO8qbBY+ncvBcG6To+CVvul9ygS6k4CUE/FRgCtrRZSCLztGOwFXsrSxbx5w4aMoE8xoijgBlwshlpzCPY3EhE7sQ747cp+BbRxoJEwZ/GIu35hHLyOdOAX3K86rLyQE6ZFAt0Z75WYN0bJB0gl081UTQzxFqSziBLqJXHccoIkQcaKmgQgJ7ui2ONNYoLvwfKQQApfE9yQIyCbxKuDQNoS6c6sQrPHmwpXkT2at+EnDoYL7yjpQBT+uSQATGG8RLrqnD19KxIuk92e8YjhVzLNihCItbbznDTvm2H5YBA8HLzAtrlraeM+ro7zgvzu3lAFctglrQeO5sFRhoyIcBUywqA0FXOzrwLaSa8iNwjPdGOD3S1WsccE0zgolCWDIxlbrpSPz0ppmBrplg8X13RLEN3dn2x+F2xfN29z1BLHFaPJwQnx7fdhpDfh8sCgxwZYj3CTyI6Izb2FNOKEhNMd7PVvEz+Gyq4KGfJMg18g8qMb18+ZeC+GQY1ZbpapEs4OXP+T/VhAcs1qxE8EDXY5aY7DfKF/F/4qQCCkp/D+2pSmB9GniKMMxZ+mCy0H1EfnYjzW8Vw70cYZcTNtPPhvfit7my9mLje3KX381OTIG/wBy0B0Stiaq9AAAAABJRU5ErkJggg=='

export const Container = styled.div`
  padding: 0 ${rem(16)} ${rem(16)};
`
export const Inner = styled.div`
  width: ${rem(702)};
  padding: ${rem(16)} ${rem(16)} 0;
  margin: 0 auto;
  background: #FFF;
  box-shadow: 0 ${rem(2)} ${rem(30)} 0 rgba(150,150,150,0.11);
  border-radius: ${rem(16)};
  -webkit-border-radius: ${rem(16)};
  .title-wrap{
    padding-top: ${rem(24)};
  }
`

export const Title = styled.div`
  margin: ${rem(34)} auto ${rem(40)} ;
  font-weight: bold;
  line-height: ${rem(45)};
  font-size: ${rem(32)};
  text-align: center;
  color: #1f1f1f;
`

export const ColumnBox = styled.div`
  &::after{
    content: '';
    display: table;
    clear: both;
  }
`
export const Item1Coupon = styled.div<{
  styleColor: string,
  fontColor: string,
}>`
  width: ${rem(670)};
  display:flex;
  margin: 0 auto ${rem(16)};
  height: ${rem(180)};
  background: ${props => props.styleColor};
  color: ${props => props.fontColor};
  text-align:center;
  border-radius:${rem(8)};
  -webkit-border-radius:${rem(8)};
  .lpart{
    width:${rem(160)};
    height:${rem(180)};
    padding-left:${rem(4)};
    text-align:center;
    position:relative;
    overflow: hidden;
    .facevalue{
      margin-top: ${rem(36)};
      height:${rem(65)};
      line-height:${rem(65)};
      text-align:center;
      font-size:${rem(46)};
      font-weight: bold;
    }
    .doorsill{
      margin: ${rem(10)} auto 0;
      padding:0 ${rem(8)};
      width: max-content;
      height:${rem(30)};
      line-height:${rem(30)};
      text-align:center;
      font-size:${rem(20)};
      background:rgba(255, 255, 255, .2);
      color: ${props => props.fontColor};
      border-radius:${rem(8)};
      -webkit-border-radius:${rem(8)};
    }
  }
  .mpart{
    position: relative;
    width: ${rem(14)};
    height:${rem(180)};
    .top-circle, .bottom-circle{
      position: absolute;
      width: ${rem(14)};
      height: ${rem(14)};
      border-radius: 50%;
      -webkit-border-radius: 50%;
      background: #fff;
    }
    .top-circle{top: ${rem(-7)};left: 0;}
    .bottom-circle{bottom: ${rem(-7)};left: 0;}
    .line{
      position: absolute;
      left: ${rem(6)};
      top: ${rem(10)};
      height: ${rem(160)};
      border-right: ${rem(2)} dashed #FFF;
      opacity: .4;
    }
  }
  .rpart{
    position:relative;
    width:${rem(496)};
    height:${rem(180)};
    padding-left:${rem(24)};
    text-align: left;
    .ttl{
      width:${rem(300)};
      height:${rem(36)};
      line-height:${rem(36)};
      margin:${rem(38)} 0 ${rem(8)};
      font-size:${rem(28)};
      font-weight: bold;
      color: ${props => props.fontColor};
    }
    .validterm{
      height:${rem(26)};
      line-height:${rem(26)};
      font-size:${rem(20)};
    }
    .pdlink{
      display: flex;
      align-items: center;
      margin-top: ${rem(8)};
      height:${rem(26)};
      color: ${props => props.fontColor};
      font-size:${rem(20)};
      .go-to-icon{
        margin-left:${rem(8)};
        width: ${rem(20)};
        height: ${rem(20)};
        background:url(${goToIcon}) no-repeat;
        background-size: 100%;
      }
    }
    .pdlink-hover {
      position: absolute;
      left:${rem(-190)};
      top:0;
      z-index:${zIndex('coupon-hover')};
      width:${rem(505)};
      height:${rem(180)};
    }
    .getbtn{
      position:absolute;
      z-index:${zIndex('coupon-hover')};
      top:${rem(65)};
      right:${rem(24)};
      width:${rem(100)};
      height:${rem(50)};
      line-height:${rem(54)};
      background:  ${props => props.fontColor};
      font-size:${rem(24)};
      font-weight:bold;
      text-align:center;
      color: ${props => props.styleColor};
      border-radius:${rem(25)};
      -webkit-border-radius:${rem(25)};
    }
    .unable{
      background:#ffffff66;
    }
  }
`
export const Item2Coupon = styled.div<{
  styleColor: string,
  fontColor: string,
}>`
  width: ${rem(327)};
  float: left;
  margin-right: ${rem(16)};
  margin-bottom: ${rem(16)};
  height: ${rem(180)};
  background: ${props => props.styleColor};
  border-radius:${rem(8)};
  color: ${props => props.fontColor};
  text-align:center;
  &.num-2th{
    margin-right: 0;
  }
  .part {
    display:flex;
    justify-content: center;
    align-items: center;
    margin-top: ${rem(16)};
    .facevalue{
      margin-right: ${rem(16)};
      height:${rem(60)};
      line-height:${rem(60)};
      text-align:center;
      font-size:${rem(40)};
      font-weight: bold;
    }
    .doorsill{
      padding:0 ${rem(8)};
      width: max-content;
      height:${rem(30)};
      line-height:${rem(30)};
      text-align:center;
      font-size:${rem(20)};
      background:rgba(255, 255, 255, .2);
      color: ${props => props.fontColor};
      border-radius:${rem(8)};
      -webkit-border-radius:${rem(8)};
    }
  }
  .title {
    margin: ${rem(2)} auto ${rem(8)};
    font-weight: bold;
    font-size: ${rem(26)};
    line-height: ${rem(36)};
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width:${rem(280)};
    color: ${props => props.fontColor};
  }
  .divide{
    position: relative;
    width: ${rem(327)};
    height:${rem(10)};
    .left-circle, .right-circle{
      position: absolute;
      width: ${rem(12)};
      height: ${rem(12)};
      border-radius: 50%;
      -webkit-border-radius: 50%;
      background: #fff;
    }
    .left-circle{left: ${rem(-6)};top: 0;}
    .right-circle{right: ${rem(-6)};top: 0;}
    .line{
      position: absolute;
      left: ${rem(16)};
      top: ${rem(5)};
      width: ${rem(295)};
      height: ${rem(2)};
      border-top: ${rem(2)} dashed #FFF;
      opacity: .4;
    }
  }
  .bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    .getbtn{
      width:${rem(163)};
      height:${rem(46)};
      line-height:${rem(46)};
      color: ${props => props.fontColor};
      font-size:${rem(22)};
      z-index:${zIndex('coupon-hover')};
    }
    .unable{
      color:#fff6;
    }
    .border {
      height:${rem(32)};
      margin-top:${rem(2)};
      border-left: ${rem(2)} dashed #FFF;
      opacity: .4;
    }
    .link{
      display: flex;
      align-items: center;
      justify-content: center;
      width:${rem(163)};
      height:${rem(46)};
      color: ${props => props.fontColor};
      font-size:${rem(22)};
      .go-to-icon{
        margin-left:${rem(8)};
        width: ${rem(24)};
        height: ${rem(24)};
        background:url(${goToIcon}) no-repeat;
        background-size: 100%;
      }
    }
  }
`

export const Item3Coupon = styled.div<{
  styleColor: string,
  fontColor: string,
}>`
  width: ${rem(212)};
  float: left;
  margin-right: ${rem(17)};
  margin-bottom: ${rem(16)};
  height: ${rem(222)};;
  background: ${props => props.styleColor};
  border-radius:${rem(8)};
  color: ${props => props.fontColor};
  text-align:center;
  &.num-3th{
    margin-right: 0;
  }
  .facevalue{
    margin-top: ${rem(16)};
    height:${rem(60)};
    line-height:${rem(60)};
    text-align:center;
    font-size:${rem(40)};
    font-weight: bold;
  }
  .doorsill{
    margin: ${rem(3)} auto 0;
    padding: 0 ${rem(8)};
    width: max-content;
    height:${rem(30)};
    line-height:${rem(30)};
    text-align:center;
    font-size:${rem(20)};
    background:rgba(255, 255, 255, .2);
    color: ${props => props.fontColor};
    border-radius:${rem(8)};
    -webkit-border-radius:${rem(8)};
  }
  .title {
    margin: ${rem(12)} auto ${rem(20)};
    font-weight: bold;
    font-size: ${rem(22)};
    line-height: ${rem(28)};
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width:${rem(200)};
    color: ${props => props.fontColor};
  }
  .divide{
    position: relative;
    width: ${rem(212)};
    height:${rem(10)};
    .left-circle, .right-circle{
      position: absolute;
      width: ${rem(12)};
      height: ${rem(12)};
      border-radius: 50%;
      -webkit-border-radius: 50%;
      background: #fff;
    }
    .left-circle{left: ${rem(-6)};top: 0;}
    .right-circle{right: ${rem(-6)};top: 0;}
    .line{
      position: absolute;
      left: ${rem(16)};
      top: ${rem(5)};
      width: ${rem(182)};
      height: ${rem(2)};
      border-top: ${rem(2)} dashed #FFF;
      opacity: .4;
    }
  }
  .bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    .getbtn{
      width:${rem(106)};
      height:${rem(46)};
      line-height:${rem(46)};
      color: ${props => props.fontColor};
      font-size:${rem(22)};
      z-index:${zIndex('coupon-hover')};
    }
    .unable{
      color:#fff6;
    }
    .border {
      height:${rem(33)};
      margin-top:${rem(-3)};
      border-left: ${rem(2)} dashed #FFF;
      opacity: .4;
    }
    .link{
      display: flex;
      align-items: center;
      justify-content: center;
      width:${rem(106)};
      height:${rem(46)};
      color: ${props => props.fontColor};
      font-size:${rem(22)};
      .go-to-icon{
        margin-left:${rem(8)};
        width: ${rem(24)};
        height: ${rem(24)};
        background:url(${goToIcon}) no-repeat;
        background-size: 100%;
      }
    }
  }
`