
<template>
  <div class="demo-cell">
    <div class="group-title">
      单行列表示例
    </div>

    <div class="title">
      带说明的列表项
    </div>
    <bxs-cell-group>
      <bxs-cell
        @click-right="cellRightClick"
        :title="'列表一' + moreTextDefault"
        value="说明文字"
        />
    </bxs-cell-group>

    <div class="title">
      带图标、说明的列表项
    </div>
    <bxs-cell-group>
      <bxs-cell
        @click-right="cellRightClick"
        :title="'列表一' + moreTextDefault"
        value="图片示例"
        :logo="logo"
        />
      <bxs-cell
        @click-right="cellRightClick"
        :title="'列表二' + moreTextDefault"
        icon="star"
        icon-size="24px"
        icon-color="#0083fe"
        :logo="logo"
        value="图标示例"
        />
    </bxs-cell-group>

    <div class="title">
      带跳转的列表项
    </div>
    <bxs-cell-group>
      <bxs-cell
        @click-right="cellRightClick"
        :title="'列表一' + moreTextDefault"
        is-link
        />
      <bxs-cell
        @click-right="cellRightClick"
        :title="'列表二' + moreTextDefault"
        is-link
        />
    </bxs-cell-group>


    <div class="title">
      带说明、跳转的列表项
    </div>
    <bxs-cell-group>
      <bxs-cell
        @click-right="cellRightClick"
        :title="'列表一' + moreTextDefault"
        value="说明文字"
        is-link
        />
      <bxs-cell
        @click-right="cellRightClick"
        :title="'列表二' + moreTextDefault"
        value="说明文字"
        is-link
        />
    </bxs-cell-group>

    <div class="title">
      带图标、说明、跳转的列表项
    </div>
    <bxs-cell-group>
      <bxs-cell
        @click-right="cellRightClick"
        :title="'列表一' + moreTextDefault"
        value="说明文字"
        :logo="logo"
        is-link
        />
      <bxs-cell
        @click="cellClick"
        @click-right="cellRightClick"
        :title="'列表二' + moreTextDefault"
        value="说明文字"
        :logo="logo"
        is-link
        />
    </bxs-cell-group>

    <div class="title">
      带图标、说明、消息、跳转的列表项
    </div>
    <bxs-cell-group title="常用工具">
      <bxs-cell
        @click-right="cellRightClick"
        :title="'列表一' + moreTextDefault"
        :badge="true"
        :logo="logo"
        is-link
        />
      <bxs-cell
        @click-right="cellRightClick"
        :title="'列表二' + moreTextDefault"
        value="说明文字"
        :badge="true"
        :logo="logo"
        is-link
        />
      <bxs-cell
        @click-right="cellRightClick"
        :title="'列表三' + moreTextDefault"
        badge="1"
        :logo="logo"
        is-link
        />
      <bxs-cell
        @click-right="cellRightClick"
        :title="'列表四' + moreTextDefault"
        badge="9"
        :logo="logo"
        is-link
        />
      <bxs-cell
        @click-right="cellRightClick"
        :title="'列表五' + moreTextDefault"
        value="图片示例"
        :badge="true"
        :logo="logo"
        />
      <bxs-cell
        @click-right="cellRightClick"
        :title="'列表六' + moreTextDefault"
        icon="star"
        badge="2"
        icon-size="24px"
        icon-color="#0083fe"
        :logo="logo"
        value="图标示例"
        />
    </bxs-cell-group>

    <div class="group-title">
      多行列表示例
    </div>

    <div class="title">
      文字组合列表
    </div>
    <bxs-cell-group :title="'文字组合列表' + moreTextDefault">
      <bxs-cell
        :subtitle="'列表副文案' + moreTextDefault"
        :subtitle-one-line="true"
        @click="cellClick"
        :title="'标题一' + moreTextDefault"
        />
      <bxs-cell
        subtitle="列表副文案文字不限制的话就自适应列表副文案文字不限制的话就自适应"
        @click="cellClick"
        :title="'标题二' + moreTextDefault"
        />
    </bxs-cell-group>

    <div class="title">
      文字组合列表／有时间日期
    </div>
    <bxs-cell-group
      :title="'文字组合列表' + moreTextDefault"
      >
      <bxs-cell
        :subtitle="'张某某' + moreTextDefault"
        :subtitle-one-line="true"
        :value="new Date(1545716407632)"
        value-formatter="YYYY-MM-DD"
        @click="cellClick"
        :title="'标题一' + moreTextDefault"
        />
      <bxs-cell
        value="2017-02-08 12:11:53"
        :subtitle="'张某某' + moreTextDefault"
        @click="cellClick"
        :title="'标题二' + moreTextDefault"
        />
    </bxs-cell-group>

    <div class="title">
      图文组合列表/有主副标题
    </div>
    <bxs-cell-group title="图文组合列表">
      <bxs-cell
        :subtitle="'列表副文案' + moreText"
        :subtitle-one-line="true"
        :logo="logo"
        @click="cellClick"
        :title="'标题一' + moreTextDefault"
        />
      <bxs-cell
        :subtitle="'列表副文案' + moreText"
        :logo="logo"
        @click="cellClick"
        :title="'标题二' + moreTextDefault"
        />
    </bxs-cell-group>

    <div class="title">
      图文组合列表/有主副标题/有查看更多
    </div>
    <bxs-cell-group
      :more-threshold="2"
      more-text="查看更多~"
      :title="'图文组合列表' + moreTextDefault"
      >
      <bxs-cell
        :subtitle="'列表副文案' + moreText"
        :subtitle-one-line="true"
        :logo="logo"
        @click="cellClick"
        :title="'标题一' + moreTextDefault"
        />
      <bxs-cell
        :subtitle="'列表副文案' + moreText"
        :logo="logo"
        @click="cellClick"
        :title="'标题二' + moreTextDefault"
        />
      <bxs-cell
        :subtitle="'列表副文案' + moreText"
        :logo="logo"
        @click="cellClick"
        :title="'标题三' + moreTextDefault"
        />
    </bxs-cell-group>

    <div class="title">
      图文组合列表/有主副标题/有时间
    </div>
    <bxs-cell-group
      @click="groupClickHandler"
      :is-link="true"
      link-url="http://www.baidu.com"
      link-text="查看更多"
      :more-threshold="1"
      :title="'图文组合列表' + moreTextDefault"
      >
      <bxs-cell
        subtitle="列表副文案只显示一行，显示不下省略号列表副文案只显示一行，显示不下省略号"
        :subtitle-one-line="true"
        value="3:12"
        :logo="logo"
        @click="cellClick"
        :title="'标题一' + moreTextDefault"
        />
      <bxs-cell
        subtitle="列表副文案只显示一行，显示不下省略号列表副文案只显示一行，显示不下省略号"
        value="3:12"
        :logo="logo"
        @click="cellClick"
        :title="'标题二' + moreTextDefault"
        />
    </bxs-cell-group>

    <div class="title">
      图文组合列表/有主副标题/有时间/有红点消息
    </div>
    <bxs-cell-group
      @click="groupClickHandler"
      title="图文组合列表"
      >
      <div slot="right">
        <bxs-icon
          name="more"
          color="#ccc"
          size="24px"
          />
      </div>
      <bxs-cell
        subtitle="列表副文案只显示一行，显示不下省略号列表副文案只显示一行，显示不下省略号"
        :subtitle-one-line="true"
        value="3:12"
        :badge="true"
        :logo="logo"
        @click="cellClick"
        :title="'标题一' + moreTextDefault"
        />
      <bxs-cell
        subtitle="列表副文案只显示一行，显示不下省略号列表副文案只显示一行，显示不下省略号"
        value="3:12"
        badge="3"
        :logo="logo"
        @click="cellClick"
        :title="'标题二' + moreTextDefault"
        />
    </bxs-cell-group>

    <div class="title">
      图文组合列表/有标签/阅读数/评论/无分割线
    </div>
    <bxs-cell-group
      @click="groupClickHandler"
      title="图文组合列表"
      >
      <div slot="right">
        <span style="color: green;">自定义 <span style="color: red;">slot</span></span>
      </div>
      <bxs-cell
        :logo="logo"
        @click="cellClick"
        :title-one-line="false"
        subtitle="列表副文案 subtitle 属性"
        :logo-right="true"
        title="国寿福10天给了？"
        >
        <div
          slot="subtitle"
          class="flex-line"
          >
          <bxs-tag plain>
            中国人寿
          </bxs-tag>
          <span style="margin-left: 9px;">1233阅读数 · 8评论</span>
        </div>
      </bxs-cell>
      <bxs-cell
        :logo="logo"
        @click="cellClick"
        :title-one-line="false"
        subtitle="列表副文案 subtitle 属性"
        :logo-right="true"
        title="国寿福10天给了50万除了保险还有谁能这么帮你？"
        >
        <div
          slot="subtitle"
          class="flex-line"
          >
          <bxs-tag plain>
            中国人寿
          </bxs-tag>
          <span style="margin-left: 9px;">1233阅读数 · 8评论</span>
        </div>
      </bxs-cell>
      <bxs-cell
        :logo="logo"
        @click="cellClick"
        :title-one-line="false"
        subtitle="列表副文案 subtitle 属性"
        :logo-right="true"
        title="国寿福10天给了50万除了保险还有谁能这么帮你保险还有谁能这么帮你保险还有谁能这么帮你？"
        >
        <div
          slot="subtitle"
          class="flex-line"
          >
          <bxs-tag plain>
            中国人寿
          </bxs-tag>
          <span style="margin-left: 9px;">1233阅读数 · 8评论</span>
        </div>
      </bxs-cell>
    </bxs-cell-group>
  </div>
</template>
<script>
export default {
  data() {
    return {
      logo:
        '//img.winbaoxian.com/pic/app-article/logo.png?x-oss-process=image/crop,x_7,y_7,w_73,h_73',
      moreText:
        '测试下标题超出测试下标题超出测试下标题超出测试下标题超出测试下标题超出测试下标题超出测试下标题超出测试下',
      moreTextDefault:
        window.location.search.indexOf('more-text') > 0
          ? ' ~~  测试下标题超出测试下标题超出测试下标题超出测试下标题超出测试下标题超出测试下标题超出测试下标题超出测试下标题超出测试下标题超出测试下标题超出测试下标题超出测试下标题超出'
          : '',
    }
  },
  methods: {
    cellRightClick() {
      this.$toast('右侧点击事件')
    },
    cellClick() {
      this.$toast('列表点击事件')
    },
    groupClickHandler() {
      this.$toast('group 右侧点击事件')
    },
  },
}
</script>
<style>
.demo-cell {
  & > .title {
    font-size: 14px;
    font-weight: 600;
    line-height: 30px;
    margin-top: 10px;
    padding-left: 10px;
    color: #b5b3b3;
  }

  & .group-title {
    text-align: center;
    line-height: 40px;
    margin-top: 30px;
  }

  & .flex-line {
    display: flex;
  }

  padding-bottom: 50px;
}
</style>
