<template>
  <d2-container>
    <article>
      <header>
        <ai-link
          :underline="false"
          :href="`${aiVueUrl}dialog#zi-ding-yi-nei-rong`"
          target="_blank"
        >
          <h3>Dialog 对话框</h3>
        </ai-link>
      </header>
      <div class="dialog-demo">
        <!-- Table -->
        <ai-button
          type="text"
          @click="dialogTableVisible = true"
        >打开嵌套表格的 Dialog</ai-button>

        <ai-dialog
          title="收货地址"
          :visible.sync="dialogTableVisible"
        >
          <ai-table :data="gridData">
            <ai-table-column
              property="date"
              label="日期"
              width="150"
            ></ai-table-column>
            <ai-table-column
              property="name"
              label="姓名"
              width="200"
            ></ai-table-column>
            <ai-table-column
              property="address"
              label="地址"
            ></ai-table-column>
          </ai-table>
        </ai-dialog>

        <!-- Form -->
        <ai-button
          type="text"
          @click="dialogFormVisible = true"
        >打开嵌套表单的 Dialog</ai-button>

        <ai-dialog
          title="收货地址"
          :visible.sync="dialogFormVisible"
        >
          <ai-form :model="form">
            <ai-form-item
              label="活动名称"
              :label-width="formLabelWidth"
            >
              <ai-input
                v-model="form.name"
                autocomplete="off"
              ></ai-input>
            </ai-form-item>
            <ai-form-item
              label="活动区域"
              :label-width="formLabelWidth"
            >
              <ai-select
                v-model="form.region"
                placeholder="请选择活动区域"
              >
                <ai-option
                  label="区域一"
                  value="shanghai"
                ></ai-option>
                <ai-option
                  label="区域二"
                  value="beijing"
                ></ai-option>
              </ai-select>
            </ai-form-item>
          </ai-form>
          <div
            slot="footer"
            class="dialog-footer"
          >
            <ai-button @click="dialogFormVisible = false">取 消</ai-button>
            <ai-button
              type="primary"
              @click="dialogFormVisible = false"
            >确 定</ai-button>
          </div>
        </ai-dialog>

        <!-- 嵌套 -->
        <ai-button
          type="text"
          @click="outerVisible = true"
        >点击打开外层 Dialog</ai-button>

        <ai-dialog
          title="外层 Dialog"
          :visible.sync="outerVisible"
        >
          <ai-dialog
            width="30%"
            title="内层 Dialog"
            :visible.sync="innerVisible"
            append-to-body
          >
          </ai-dialog>
          <div
            slot="footer"
            class="dialog-footer"
          >
            <ai-button @click="outerVisible = false">取 消</ai-button>
            <ai-button
              type="primary"
              @click="innerVisible = true"
            >打开内层 Dialog</ai-button>
          </div>
        </ai-dialog>
      </div>
    </article>

    <article class="tooltip-demo">
      <header>
        <ai-link
          :underline="false"
          :href="`${aiVueUrl}tooltip`"
          target="_blank"
        >
          <h3>Tooltip 文字提示</h3>
        </ai-link>
      </header>

      <div class="box">
        <div class="top">
          <ai-tooltip
            class="item"
            effect="dark"
            content="Top Left 提示文字"
            placement="top-start"
          >
            <ai-button>上左</ai-button>
          </ai-tooltip>
          <ai-tooltip
            class="item"
            effect="dark"
            content="Top Center 提示文字"
            placement="top"
          >
            <ai-button>上边</ai-button>
          </ai-tooltip>
          <ai-tooltip
            class="item"
            effect="dark"
            content="Top Right 提示文字"
            placement="top-end"
          >
            <ai-button>上右</ai-button>
          </ai-tooltip>
        </div>
        <div class="left">
          <ai-tooltip
            class="item"
            effect="dark"
            content="Left Top 提示文字"
            placement="left-start"
          >
            <ai-button>左上</ai-button>
          </ai-tooltip>
          <ai-tooltip
            class="item"
            effect="dark"
            content="Left Center 提示文字"
            placement="left"
          >
            <ai-button>左边</ai-button>
          </ai-tooltip>
          <ai-tooltip
            class="item"
            effect="dark"
            content="Left Bottom 提示文字"
            placement="left-end"
          >
            <ai-button>左下</ai-button>
          </ai-tooltip>
        </div>

        <div class="right">
          <ai-tooltip
            class="item"
            effect="dark"
            content="Right Top 提示文字"
            placement="right-start"
          >
            <ai-button>右上</ai-button>
          </ai-tooltip>
          <ai-tooltip
            class="item"
            effect="dark"
            content="Right Center 提示文字"
            placement="right"
          >
            <ai-button>右边</ai-button>
          </ai-tooltip>
          <ai-tooltip
            class="item"
            effect="dark"
            content="Right Bottom 提示文字"
            placement="right-end"
          >
            <ai-button>右下</ai-button>
          </ai-tooltip>
        </div>
        <div class="bottom">
          <ai-tooltip
            class="item"
            effect="dark"
            content="Bottom Left 提示文字"
            placement="bottom-start"
          >
            <ai-button>下左</ai-button>
          </ai-tooltip>
          <ai-tooltip
            class="item"
            effect="dark"
            content="Bottom Center 提示文字"
            placement="bottom"
          >
            <ai-button>下边</ai-button>
          </ai-tooltip>
          <ai-tooltip
            class="item"
            effect="dark"
            content="Bottom Right 提示文字"
            placement="bottom-end"
          >
            <ai-button>下右</ai-button>
          </ai-tooltip>
        </div>
      </div>
    </article>

    <article>
      <header>
        <ai-link
          :underline="false"
          :href="`${aiVueUrl}popover`"
          target="_blank"
        >
          <h3>Popover 弹出框</h3>
        </ai-link>
      </header>

      <ai-popover
        placement="top-start"
        title="标题"
        width="200"
        trigger="hover"
        content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"
      >
        <ai-button slot="reference">hover 激活</ai-button>
      </ai-popover>

      <ai-popover
        placement="bottom"
        title="标题"
        width="200"
        trigger="click"
        content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"
      >
        <ai-button slot="reference">click 激活</ai-button>
      </ai-popover>

      <ai-popover
        ref="popover"
        placement="right"
        title="标题"
        width="200"
        trigger="focus"
        content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"
      >
      </ai-popover>
      <ai-button v-popover:popover>focus 激活</ai-button>

      <ai-popover
        placement="bottom"
        title="标题"
        width="200"
        trigger="manual"
        content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"
        v-model="popoverVisiber"
      >
        <ai-button
          slot="reference"
          @click="popoverVisiber = !popoverVisiber"
        >手动激活</ai-button>
      </ai-popover>
    </article>

    <article class="card-demo">
      <header>
        <ai-link
          :underline="false"
          :href="`${aiVueUrl}card`"
          target="_blank"
        >
          <h3>Card 卡片</h3>
        </ai-link>
      </header>

      <ai-card class="box-card">
        <div
          slot="header"
          class="clearfix"
        >
          <span>卡片名称</span>
          <ai-button
            style="float: right; padding: 3px 0"
            type="text"
          >操作按钮</ai-button>
        </div>
        <div
          v-for="o in 4"
          :key="o"
          class="text item"
        >
          {{'列表内容 ' + o }}
        </div>
      </ai-card>
    </article>

    <article class="carousel-demo">
      <header>
        <ai-link
          :underline="false"
          :href="`${aiVueUrl}carousel`"
          target="_blank"
        >
          <h3>Carousel 走马灯</h3>
        </ai-link>
      </header>

      <div class="block">
        <span class="demonstration">默认 Hover 指示器触发</span>
        <ai-carousel height="150px">
          <ai-carousel-item
            v-for="item in 4"
            :key="item"
          >
            <h3 class="small">{{ item }}</h3>
          </ai-carousel-item>
        </ai-carousel>
      </div>
      <div class="block">
        <span class="demonstration">Click 指示器触发</span>
        <ai-carousel
          trigger="click"
          height="150px"
        >
          <ai-carousel-item
            v-for="item in 4"
            :key="item"
          >
            <h3 class="small">{{ item }}</h3>
          </ai-carousel-item>
        </ai-carousel>
      </div>

    </article>

    <article>
      <header>
        <ai-link
          :underline="false"
          :href="`${aiVueUrl}collapse`"
          target="_blank"
        >
          <h3>Collapse 折叠面板</h3>
        </ai-link>
      </header>
      <div class="collapse-demo">
        <ai-collapse
          v-model="activeNames"
          @change="handleChange"
        >
          <ai-collapse-item
            title="一致性 Consistency"
            name="1"
          >
            <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
            <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>
          </ai-collapse-item>
          <ai-collapse-item
            title="反馈 Feedback"
            name="2"
          >
            <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
            <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
          </ai-collapse-item>
          <ai-collapse-item
            title="效率 Efficiency"
            name="3"
          >
            <div>简化流程：设计简洁直观的操作流程；</div>
            <div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>
            <div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>
          </ai-collapse-item>
          <ai-collapse-item
            title="可控 Controllability"
            name="4"
          >
            <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>
            <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>
          </ai-collapse-item>
        </ai-collapse>
      </div>
    </article>

    <article>
      <header>
        <ai-link
          :underline="false"
          :href="`${aiVueUrl}timeline`"
          target="_blank"
        >
          <h3>Timeline 时间线</h3>
        </ai-link>
      </header>

      <div>
        <ai-timeline>
          <ai-timeline-item
            v-for="(activity, index) in activities"
            :key="index"
            :icon="activity.icon"
            :type="activity.type"
            :color="activity.color"
            :size="activity.size"
            :timestamp="activity.timestamp"
          >
            {{activity.content}}
          </ai-timeline-item>
        </ai-timeline>
      </div>
    </article>

    <article>
      <header>
        <ai-link
          :underline="false"
          :href="`${aiVueUrl}divider`"
          target="_blank"
        >
          <h3>Divider 分割线</h3>
        </ai-link>
      </header>

      <div class="divider-demo">
        <div class="divider-item">
          <span>你你你你要跳舞吗</span>
          <ai-divider></ai-divider>
          <span>你你你你要跳舞吗</span>
        </div>
        <div class="divider-item">
          <span>雨纷纷</span>
          <ai-divider direction="vertical"></ai-divider>
          <span>旧故里</span>
          <ai-divider direction="vertical"></ai-divider>
          <span>草木深</span>
        </div>
      </div>

    </article>

    <article class="calendar-demo">
      <header>
        <ai-link
          :underline="false"
          :href="`${aiVueUrl}calendar`"
          target="_blank"
        >
          <h3>Calendar 日历</h3>
        </ai-link>
      </header>

      <ai-calendar v-model="clendarValue"></ai-calendar>
    </article>

    <article>
      <header>
        <ai-link
          :underline="false"
          :href="`${aiVueUrl}image`"
          target="_blank"
        >
          <h3>Image 图片</h3>
        </ai-link>
      </header>

      <div class="image-demo">
        <div
          class="block"
          v-for="fit in imageFits"
          :key="fit"
        >
          <span class="demonstration">{{ fit }}</span>
          <ai-image
            style="width: 100px; height: 100px"
            :src="imageUrl"
            :fit="fit"
          >
          </ai-image>
        </div>
      </div>
    </article>
  </d2-container>
</template>

<script>
export default {
  name: "Others",
  components: {},
  data() {
    return {
      aiVueUrl:
        process.env.VUE_APP_AIVUE_URL + process.env.VUE_APP_AIVUE_PATH,
      // table数据
      gridData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        }
      ],
      // form 数据
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: ""
      },
      // 是否显示Table dialog
      dialogTableVisible: false,
      // 是否显示Form dialog
      dialogFormVisible: false,
      formLabelWidth: "120px",
      // 是否显示外层dialog
      outerVisible: false,
      // 是否显示内层dialog
      innerVisible: false,
      // popover状态是否可见
      popoverVisiber: false,
      // 当前激活的面板
      activeNames: ["1"],
      // 时间线data
      activities: [
        {
          content: "支持使用图标",
          timestamp: "2018-04-12 20:46",
          size: "large",
          type: "primary",
          icon: "ai-icon-more"
        },
        {
          content: "支持自定义颜色",
          timestamp: "2018-04-03 20:46",
          color: "#0bbd87"
        },
        {
          content: "支持自定义尺寸",
          timestamp: "2018-04-03 20:46",
          size: "large"
        },
        {
          content: "默认样式的节点",
          timestamp: "2018-04-03 20:46"
        }
      ],
      // 日历时间
      clendarValue: new Date(),
      imageFits: ["fill", "contain", "cover", "none", "scale-down"],
      imageUrl:
        "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
    };
  },
  mounted() {},
  methods: {
    // 当前激活面板改变时触发
    handleChange(val) {
      console.log(val);
    }
  }
};
</script>
<style lang="scss" scoped>
$demo-width: 580px;
.dialog-demo {
  button {
    margin-right: 20px;
  }
}
.tooltip-demo {
  .box {
    width: 400px;

    .top {
      text-align: center;
    }

    .left {
      float: left;
      width: 60px;
    }

    .right {
      float: right;
      width: 60px;
    }

    .bottom {
      clear: both;
      text-align: center;
    }

    .item {
      margin: 4px;
    }

    .left .ai-tooltip__popper,
    .right .ai-tooltip__popper {
      padding: 8px 10px;
    }
  }
}
.card-demo {
  .text {
    font-size: 14px;
  }

  .item {
    padding: 18px 0;
  }

  .box-card {
    width: 480px;
  }
}
.carousel-demo {
  .ai-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
  }

  .ai-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .ai-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
  }
}
.divider-demo {
  width: $demo-width;
  .divider-item {
    margin-bottom: 30px;
  }
}
.calendar-demo {
  width: $demo-width;
}
.image-demo {
  width: 680px;
}
.collapse-demo {
  width: $demo-width;
}
.block {
  padding: 30px 0;
  text-align: center;
  border-right: 1px solid #eff2f6;
  display: inline-block;
  width: 20%;
  box-sizing: border-box;
  .demonstration {
    display: block;
    color: #8492a6;
    font-size: 14px;
    margin-bottom: 20px;
  }
}
</style>
