<template>
  <div class="page">
    <div class="demoName">
      <a class="icon" @click="$router.push({path:'/'})"></a>
      <div class="comp-title">ActionSheet</div>
    </div>
    <h3>基础</h3>
    <WingBlank><ok-button @onClick="handleBtn">show button actionsheet</ok-button></WingBlank>
    <WhiteSpace size="sm" />
    <WingBlank><ok-button @onClick="handleIcon">show icon actionsheet</ok-button></WingBlank>
    <WhiteSpace size="sm" />
    <WingBlank><ok-button @onClick="handleShare">show share actionsheet</ok-button></WingBlank>
    <h3>Fluent风格</h3>
    <WhiteSpace size="sm" />
    <WingBlank><ok-button @onClick="handleFluentButton">show fluent button actionsheet</ok-button></WingBlank>
    <WhiteSpace size="sm" />
    <WingBlank><ok-button @onClick="handleFluentConfirm">show fluent confirm actionsheet</ok-button></WingBlank>
    <WhiteSpace size="sm" />
    <WingBlank><ok-button @onClick="handleFluentIcon">show fluent icon actionsheet</ok-button></WingBlank>
    <h3>自定义</h3>
    <WingBlank><ok-button @onClick="handleCustom">show custom actionsheet</ok-button></WingBlank>
    <ActionSheet
      type="button"
      :visible.sync="buttonShow"
      :header="buttonHeader"
      :options="buttonOptions"
      :destructiveButtonIndex="1"
      :cancelButtonIndex="2"
      @onClickMenu="buttonClick"
      @onDelete="handleDelete"
    />
    <ActionSheet
      type="icon"
      :visible.sync="iconShow"
      :header="iconHeader"
      :options="iconOptions"
      :destructiveButtonIndex="1"
      :cancelButtonIndex="2"
      @onClickMenu="buttonClick"
      @onDelete="handleDelete"
    />
    <ActionSheet
      type="share"
      :visible.sync="shareShow"
      :header="shareHeader"
      :options="shareOptions"
      @onClickMenu="buttonClick"
    />
    <ActionSheet
      type="button"
      :skinMode="'fluent'"
      :visible.sync="fluentButtonShow"
      :header="buttonHeader"
      :options="buttonOptions"
      @onClickMenu="buttonClick"
      @onDelete="handleDelete"
      />
    <ActionSheet
      type="confirm"
      :skinMode="'fluent'"
      :visible.sync="fluentConfirmShow"
      :header="buttonHeader"
      :options="confirmOptions"
      :destructiveButtonIndex="0"
      @onClickMenu="buttonClick"
      @onDelete="handleDelete"
      />
    <ActionSheet
      type="icon"
      :skinMode="'fluent'"
      :visible.sync="fluentIconShow"
      :header="iconHeader"
      :options="iconOptions"
      :destructiveButtonIndex="1"
      @onClickMenu="buttonClick"
      @onDelete="handleDelete"
    />
    <ActionSheet type="custom" :visible.sync="customShow" id="customActionSheet">
      <ul slot="customContent" class="lists">
        <li class="list"><input class="input" placeholder="custom content line 1" type="tel" maxlength="11" /><button class="button">OK</button></li>
        <li class="list"><i class="icon"></i><i class="icon"></i><i class="icon"></i></li>
        <li class="list"><span class="text">custom content line 3</span><i class="icon"></i></li>
        <li class="list"><span class="text">custom content line 4, custom content line 4, custom content line 4, custom content line 4.</span></li>
      </ul>
    </ActionSheet>
  </div>
</template>
<script>
export default {
  name: 'actionSheetDemo',
  data () {
    return {
      buttonShow: false,
      buttonHeader: {
        title: 'title',
        message: 'message'
      },
      buttonOptions: [{
        name: 'Primary'
      }, {
        name: 'Delete'
      }, {
        name: 'Cancel'
      }],
      confirmOptions: [{
        name: 'Delete'
      }, {
        name: 'Cancel'
      }],
      iconShow: false,
      iconHeader: {
        thumb: 'https://zos.alipayobjects.com/rmsportal/dNuvNrtqUztHCwM.png',
        title: 'title',
        message: 'message'
      },
      iconOptions: [{
        name: 'Primary',
        url: 'https://zos.alipayobjects.com/rmsportal/dNuvNrtqUztHCwM.png'
      }, {
        name: 'Delete',
        iconType: 'icon',
        url: 'cross-circle'
      }, {
        name: 'Cancel',
        iconType: 'icon',
        url: 'cross-circle'
      }],
      shareShow: false,
      shareHeader: {
        thumb: 'https://zos.alipayobjects.com/rmsportal/dNuvNrtqUztHCwM.png',
        title: 'title',
        message: 'message'
      },
      shareOptions: [[
        {
          name: '支付宝',
          url: 'https://gw.alipayobjects.com/zos/rmsportal/OpHiXAcYzmPQHcdlLFrc.png'
        },
        {
          name: '新浪微博',
          url: 'https://gw.alipayobjects.com/zos/rmsportal/wvEzCMiDZjthhAOcwTOu.png'
        },
        {
          name: '生活圈',
          url: 'https://gw.alipayobjects.com/zos/rmsportal/cTTayShKtEIdQVEMuiWt.png'
        },
        {
          name: '微信好友',
          url: 'https://gw.alipayobjects.com/zos/rmsportal/umnHwvEgSyQtXlZjNJTt.png'
        },
        {
          name: 'QQ',
          url: 'https://gw.alipayobjects.com/zos/rmsportal/SxpunpETIwdxNjcJamwB.png'
        },
        {
          name: '生活圈',
          url: 'https://gw.alipayobjects.com/zos/rmsportal/cTTayShKtEIdQVEMuiWt.png'
        }
      ], [
        {
          name: '微信好友',
          url: 'https://gw.alipayobjects.com/zos/rmsportal/umnHwvEgSyQtXlZjNJTt.png'
        },
        {
          name: 'QQ',
          url: 'https://gw.alipayobjects.com/zos/rmsportal/SxpunpETIwdxNjcJamwB.png'
        }
      ]],
      fluentButtonShow: false,
      fluentConfirmShow: false,
      fluentIconShow: false,
      customShow: false
    }
  },
  methods: {
    handleBtn () {
      this.buttonShow = true
    },
    handleIcon () {
      this.iconShow = true
    },
    handleShare () {
      this.shareShow = true
    },
    handleCustom () {
      this.customShow = true
    },
    buttonClick (option) {
      console.log(option)
      this.buttonShow = false
      this.iconShow = false
      this.shareShow = false
    },
    handleDelete (option) {
      console.log(option)
      this.buttonShow = false
      this.iconShow = false
    },
    handleFluentButton () {
      this.fluentButtonShow = true
    },
    handleFluentConfirm () {
      this.fluentConfirmShow = true
    },
    handleFluentIcon () {
      this.fluentIconShow = true
    }
  }
}
</script>

<style lang="less" scoped>
#customActionSheet {
  ::v-deep .ok-action-sheet {
    border-radius: 6px 6px 0 0;
  }
  .lists {
    list-style: none;
    padding: 0 16px;
    .list {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 8px 0;
      font-size: 12px;
      color: #999999;
      .input {
        height: 28px;
        width: 75%;
        width: calc(100% - 88px);
        box-sizing: border-box;
        outline: none;
        border: 1px solid #EFEFEF;
        border-radius: 2px;
        padding: 0 8px;
        transition: all .25s ease-in-out;
        &:hover, &:focus {
          border: 1px solid #40a9ff;
        }
      }
      .button {
        height: 28px;
        width: 80px;
        outline: none;
        border: none;
        -webkit-appearance: none;
        background: #1089FF;
        color: #FFFFFF;
        border-radius: 2px;
        font-size: 14px;
        transition: background .25s ease-in-out;
        &:hover, &:active {
          background: #40A9FF;
        }
      }
      .icon {
        display: inline-block;
        height: 60px;
        width: 80px;
        border-radius: 2px;
        background: linear-gradient(to right bottom, #1089FF, #40A9FF, #71FFFF);
        box-shadow: 0px 1px 2px rgba(120, 120, 120, .1);
      }
    }
  }
}
</style>