<template>
  <div class='home'>
    <a @click='toggleToast'>1.toast, click me</a> 
    <toast v-if='showToast' v-bind='toastConfig' />
    <a>2.avatar</a>   
    <div class='avatar'>  
      <avatar/>
    </div>
    <a>3.tags</a>
    <div class='tag-wrap' id='tag-wrap'>
      <tag v-bind='item' v-for='item in tagConfigs' :key='item.className' />
    </div>
    <a>4.tabs</a>
    <div class='tab-wrap'>
      <tabs v-bind='tabConfig'/>
    </div>
    <a @click='togglePopover'>5.popover, click me!</a>
    <div class='popover-container'>
      <popover v-if='showPopover' v-bind='popoverConfig'/>
    </div>
    <div class="p-button-container">
      <Button @click="goIndexList" :text="'goIndexList'"></Button>
      <Button @onGetUserInfo="onGetUserInfo" :openType="'getUserInfo'" :text="'开放能力'"></Button>
      <Button @click="openActionSheet" :text="'open actionSheet'"></Button>
      <Button @click="showbNotifycation" :text="'Large show bNotifycation'" :size="'large'"></Button>
      <Button @click="swtichBottomButton" :backgroundColor="'rgba(48,114,246,0.05);'" :textColor="'#3072F6'" :text="'bottom btn'"></Button>
      <Button @click="goIndexList" :disable='true' :text="'Disable'"></Button>
      <Button :loading='true' :text="'Loading'"></Button>
      <Button @click="goSearchBar" :text="'searchBar'"></Button>
      <Button @click="buttonClick" :plain=true :text="'plain'"></Button>
    </div>
    <div class="pSwiperout-wrapper">
      <Swiperout
        :title="'操作提示'"
        :des="'请选择您要进行的操作'"
        :buttons="swiperoutBtns"
        @click="pSwiperoutClick"
      >
      </Swiperout>
    </div>
    <div class="bInput-wrapper">
      <FormInput @change="bInputChange" :maxlength=6 :placeholder="'请输入'" :border=true :title="'联系人姓名'"></FormInput>
      <FormInput @valueButtonClick="bInputClick" :title="'验证码'" :valueButtonText="'获取验证码'" :border=true></FormInput>
      <FormInput @valueButtonClick="bInputClick" :title="'认证方式'" :valueButtonIcon="'/static/images/arrow-right.svg'" :border=true></FormInput>
      <FormInput @change="bInputChange" @titleButtonClick="bInputClick" :title="'认证方式'" :titleIcon="'/static/images/arrow-right.svg'" :border=true></FormInput>
    </div>
    <ActionSheet
      ref="pActionSheet"
      :des="'我是描述'"
      :title="'我是标题'"
      :buttonData="pActionSheetButtonData"
      @click="actionSheetClick"
    >
    </ActionSheet>
    <Notifycation :delayTime="3000" :text="'我是通知栏'" ref="bNotifycation"></Notifycation>
    <BottomButton v-if="showBottomButton" @click="bottomButtonClick" :isShare=true :buttons="bottomButtons"></BottomButton>
  </div>
</template>

<script>
import toast from '@/components/toast'
import popover from '@/components/BKPopover'
import tabs from '@/components/tabs'
import avatar from '@/components/avatar'
import tag from '@/components/tag'
import Button from '@/components/BKButton'
import Notifycation from '@/components/Notifycation'
import Swiperout from '@/components/BKSwiperout'
import ActionSheet from '@/components/BKActionSheet'
import FormInput from '@/components/FormInput'
import BottomButton from '@/components/BottomButton'

const bottomButtons = [
  {
    text: '我是按钮一'
  },
  {
    text: '我是按钮二'
  }
]

const swiperoutBtns = [
  {
    text: '喜欢',
    backgroundColor: '#f44',
    textColor: 'white'
  },
  {
    text: '返回',
    backgroundColor: '#1989fa',
    textColor: 'white'
  }
]

const pActionSheetButtonData = [
  {
    text: '警告',
    backgroundColor: 'white',
    textColor: '#FA5741'
  },
  {
    text: '按钮一',
    backgroundColor: 'white',
    textColor: '#222'
  },
  {
    text: '按钮二',
    backgroundColor: 'white',
    textColor: '#222'
  }
]

const tagConfigs = [
  {
    text: '推荐码123456',
    beforeIcon: '/static/images/tag-example.png',
    className: 'qrcode',
    shape: 'block'
  },
  {
    text: '金融顾问',
    className: 'advisor',
    shape: 'block'
  },
  {
    text: '计',
    className: 'recommend3',
    shape: 'left-bottom-triangle'
  },
  {
    text: '荐',
    className: 'recommend',
    shape: 'right-top-triangle'
  },
  {
    text: '加',
    className: 'recommend4',
    shape: 'left-top-triangle'
  },
  {
    text: '推',
    className: 'recommend2',
    shape: 'right-bottom-triangle'
  },
  {
    text: '提交资料成功',
    className: 'status',
    shape: 'left-bottom-radius'
  }
]
export default {
  data () {
    return {
      showToast: false,
      toastConfig: {},
      tagConfigs,
      tabConfig: {},
      popoverConfig: {},
      showPopover: false,
      pActionSheetButtonData,
      swiperoutBtns,
      bottomButtons,
      showBottomButton: false
    }
  },
  components: {
    toast,
    avatar,
    tag,
    tabs,
    popover,
    FormInput,
    Button,
    Notifycation,
    Swiperout,
    ActionSheet,
    BottomButton
  },
  created () {
    this.popoverConfig = {
      mask: false,
      maskClick: this.togglePopover,
      arrowConfig: {
        direction: 'top',
        show: true,
        positionLeft: '50%'
      },
      type: 'list',
      content: [
        {
          id: 1,
          text: 'scan qrcode',
          beforeIcon: '/static/images/success.png'
        },
        {
          id: 2,
          text: '扫码',
          beforeIcon: '/static/images/error.svg'
        },
        {
          id: 3,
          text: 'are you ok, dude',
          beforeIcon: '/static/images/error.svg'
        }
      ],
      contentClick: this.popoverClickItem
    }
  },
  mounted () {
    this.toastConfig = {
      icon: 'success',
      title: '一级标题',
      subTitle: '二级标题，二级标题，二级标题',
      message: '我是内容，我是内容，我是内容，我是内容，我是内容，我是内容',
      maskClick: this.toggleToast,
      btns: [
        {
          name: '取消',
          fontColor: 'black',
          bgColor: 'white',
          fn: this.toggleToast
        },
        {
          name: '确定',
          fontColor: 'blue',
          bgColor: 'white',
          fn: () => {
            console.log('click confirm')
          }
        }
      ]
    }
    this.tabConfig = {
      list: [
        {
          id: 1,
          name: '未签约',
          active: true,
          click: (e) => {
            this.tabChange(e)
          },
          content: '123'
        },
        {
          id: 2,
          name: '已签约',
          active: false,
          click: (e) => {
            this.tabChange(e)
          },
          content: '456'
        },
        {
          id: 3,
          name: '已完结',
          active: false,
          click: (e) => {
            this.tabChange(e)
          }
        }
      ]
    }
  },
  methods: {
    bindViewTap () {
    },
    toggleToast () {
      this.showToast = !this.showToast
      console.log(this.showToast)
    },
    togglePopover () {
      this.showPopover = !this.showPopover
    },
    tabChange (e) {
      this.tabConfig.list = this.tabConfig.list.map(subItem => {
        subItem.active = e.currentTarget.dataset.id === subItem.id
        return subItem
      })
    },
    popoverClickItem (item, e) {
      console.log(item)
      console.log(e.currentTarget)
      this.togglePopover()
    },
    goIndexList (val) {
      wx.navigateTo({
        url: '/pages/indexList/main'
      })
    },
    goSearchBar () {
      wx.navigateTo({
        url: '/pages/searchBar/main'
      })
    },
    onGetUserInfo (userInfo) {
      console.log(userInfo)
    },
    showbNotifycation () {
      this.$refs.bNotifycation.show()
    },
    pSwiperoutClick (data, index) {
      console.log(data, index)
    },
    openActionSheet () {
      this.$refs.pActionSheet.swtichActionSheet()
    },
    actionSheetClick (val, index) {
      console.log(val, index)
    },
    bInputChange (val) {
      console.log(val)
    },
    bInputClick (e) {
      console.log(e)
    },
    swtichBottomButton () {
      this.showBottomButton = !this.showBottomButton
    },
    bottomButtonClick (val, index) {
      console.log(val, index)
    },
    buttonClick (val) {
      console.log(val)
    }
  }
}
</script>

<style scoped>
.avatar {
  width: 100%;
  height: 100px;
  margin-top: 30px;
}
.tag-wrap {
  margin-top: 30px;
}
.tag-wrap >>> .tuitui-tag {
  margin-left: 10px;
}

.tag-wrap >>> .qrcode {
  background:rgba(83,145,255,0.15);
  color: #006AF5;
  font-size: 22px;
}

.tag-wrap >>> .advisor {
  background-color: #F86139;
  color: #fff;
  height: 30px;
  font-size: 22px;
  margin-left: 12px;
}

/* 覆盖默认样式 */
.tag-wrap >>> .recommend {
  border-color: transparent transparent #CCCCCC;
}
/*可控制富文本样式, popover*/
.popover-container {
  margin-top: 30px;
  margin-left: 30px;
  position: absolute;
}

.p-button-container {
  display: flex;
  align-content: center;
  flex-wrap: wrap;
  margin-top: 50px;
  padding: 0 50px;
}

.p-button-container >>> .wrapper {
  margin: 20px 0 0 20px;
}

.pSwiperout-wrapper {
  margin-top: 30px;
}

.bInput-wrapper {
  margin-bottom: 50px;
  font-size: 25px;
}
</style>
