<template>
  <d2-container>
    <article>
      <header>
        <ai-link
          :underline="false"
          :href="`${aiVueUrl}table`"
          target="_blank"
        >
          <h3>Table 表格</h3>
        </ai-link>
      </header>

      <ai-table
        ref="multipleTable"
        :data="curTableData"
        height="300"
        stripe
        border
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <ai-table-column
          fixed
          type="selection"
          width="55"
        >
        </ai-table-column>
        <ai-table-column
          fixed
          prop="number"
          label="序号"
          width="60"
        >
        </ai-table-column>
        <ai-table-column
          label="日期"
          width="120"
        >
          <template slot-scope="scope">{{ scope.row.date }}</template>
        </ai-table-column>
        <ai-table-column
          prop="name"
          label="姓名"
          width="120"
        >
        </ai-table-column>
        <ai-table-column
          prop="province"
          label="省份"
          width="120"
        >
        </ai-table-column>
        <ai-table-column
          prop="city"
          label="市区"
          width="120"
        >
        </ai-table-column>
        <ai-table-column
          label="特长"
          width="300"
        >
          <template slot-scope="scope">
            <ai-tag
              style="margin-right:4px"
              v-for="(tag,index) in scope.row.speciality"
              :key="index"
            >
              {{tag}}
            </ai-tag>
          </template>
        </ai-table-column>
        <ai-table-column
          prop="address"
          label="地址"
          width="300"
        >
        </ai-table-column>
        <ai-table-column
          prop="zip"
          label="邮编"
          width="120"
        >
        </ai-table-column>
        <ai-table-column
          fixed="right"
          label="操作"
          width="100"
        >
          <template slot-scope="scope">
            <ai-button
              @click="handleClick(scope.row)"
              type="text"
              size="small"
            >查看</ai-button>
            <ai-button
              type="text"
              size="small"
            >编辑</ai-button>
          </template>
        </ai-table-column>
      </ai-table>

      <ai-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[6, 12, 18, 24]"
        :page-size="6"
        type="active"
        layout="prev, pager, next, jumper, total, sizes"
        :total="total"
      >
      </ai-pagination>
    </article>

    <article>
      <header>
        <ai-link
          :underline="false"
          :href="`${aiVueUrl}progress`"
          target="_blank"
        >
          <h3>Progress 进度条</h3>
        </ai-link>
      </header>

      <div class="progress-demo">
        <div class="progress-demo-item">
          <ai-progress :percentage="0"></ai-progress>
          <ai-progress :percentage="70"></ai-progress>
          <ai-progress
            :percentage="80"
            color="#8e71c7"
          ></ai-progress>
          <ai-progress
            :percentage="100"
            status="success"
          ></ai-progress>
          <ai-progress
            :percentage="50"
            status="exception"
          ></ai-progress>
        </div>
        <div class="progress-demo-item">
          <ai-progress
            :text-inside="true"
            :stroke-width="18"
            :percentage="0"
          ></ai-progress>
          <ai-progress
            :text-inside="true"
            :stroke-width="18"
            :percentage="70"
          ></ai-progress>
          <ai-progress
            :text-inside="true"
            :stroke-width="18"
            :percentage="80"
            color="rgba(142, 113, 199, 0.7)"
          ></ai-progress>
          <ai-progress
            :text-inside="true"
            :stroke-width="18"
            :percentage="100"
            status="success"
          ></ai-progress>
          <ai-progress
            :text-inside="true"
            :stroke-width="18"
            :percentage="50"
            status="exception"
          ></ai-progress>
        </div>
      </div>
    </article>

    <article>
      <header>
        <ai-link
          :underline="false"
          :href="`${aiVueUrl}tree`"
          target="_blank"
        >
          <h3>Tree 树形控件</h3>
        </ai-link>
      </header>

      <ai-tree
        :data="treeData"
        :props="defaultProps"
        @node-click="handleNodeClick"
      ></ai-tree>
    </article>

    <article>
      <header>
        <ai-link
          :underline="false"
          :href="`${aiVueUrl}badge`"
          target="_blank"
        >
          <h3>Badge 标记</h3>
        </ai-link>
      </header>

      <div class="badge-demo">
        <ai-badge
          :value="12"
          class="item"
        >
          <ai-button size="small">评论</ai-button>
        </ai-badge>
        <ai-badge
          :value="3"
          class="item"
        >
          <ai-button size="small">回复</ai-button>
        </ai-badge>
        <ai-badge
          :value="1"
          class="item"
          type="primary"
        >
          <ai-button size="small">评论</ai-button>
        </ai-badge>
        <ai-badge
          :value="2"
          class="item"
          type="warning"
        >
          <ai-button size="small">回复</ai-button>
        </ai-badge>

        <ai-dropdown trigger="click">
          <span class="ai-dropdown-link">
            点我查看<i class="ai-icon-caret-bottom ai-icon--right"></i>
          </span>
          <ai-dropdown-menu slot="dropdown">
            <ai-dropdown-item class="clearfix">
              评论
              <ai-badge
                class="mark"
                :value="12"
              />
            </ai-dropdown-item>
            <ai-dropdown-item class="clearfix">
              回复
              <ai-badge
                class="mark"
                :value="3"
              />
            </ai-dropdown-item>
          </ai-dropdown-menu>
        </ai-dropdown>
      </div>
    </article>
  </d2-container>
</template>

<script>
export default {
  name: "Data",
  data() {
    return {
      aiVueUrl:
        process.env.VUE_APP_AIVUE_URL + process.env.VUE_APP_AIVUE_PATH,
      // table所有数据
      tableData: [],
      // 当前table数据
      curTableData: [],
      // table总条目数
      total: 0,
      // table每页显示条目个数
      pageSize: 6,
      // table当前页
      currentPage: 1,
      // 树形控件绑定数据
      treeData: [
        {
          label: "一级 1",
          children: [
            {
              label: "二级 1-1",
              children: [
                {
                  label: "三级 1-1-1"
                }
              ]
            }
          ]
        },
        {
          label: "一级 2",
          children: [
            {
              label: "二级 2-1",
              children: [
                {
                  label: "三级 2-1-1"
                }
              ]
            },
            {
              label: "二级 2-2",
              children: [
                {
                  label: "三级 2-2-1"
                }
              ]
            }
          ]
        },
        {
          label: "一级 3",
          children: [
            {
              label: "二级 3-1",
              children: [
                {
                  label: "三级 3-1-1"
                }
              ]
            },
            {
              label: "二级 3-2",
              children: [
                {
                  label: "三级 3-2-1"
                }
              ]
            }
          ]
        }
      ],
      // 树形控件配置选项
      defaultProps: {
        children: "children",
        label: "label"
      }
    };
  },
  mounted() {
    this.setTableData();
    this.setPage();
  },
  methods: {
    // 设置table数据
    setTableData() {
      for (let i = 0; i < 60; i++) {
        this.tableData[i] = {
          date: "2019-05-20",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
          speciality: ["特长一", "特长二", "特长三"],
          number: i + 1
        };
      }
      this.total = this.tableData.length;
    },
    // 设置当前页table数据
    setPage() {
      let start = (this.currentPage - 1) * this.pageSize;
      let end = (this.currentPage - 1) * this.pageSize + this.pageSize;
      this.curTableData = this.tableData.slice(start, end);
    },
    // table选择发生变化触发事件
    handleSelectionChange(val) {
      console.log(val);
    },
    // table操作行触发事件
    handleClick(row) {
      console.log(row);
    },
    // table每页展示条目数改变时触发
    handleSizeChange(val) {
      // 设置每页展示多少条
      this.pageSize = val;
      this.setPage();
    },
    // table当前页改变时触发
    handleCurrentChange(val) {
      // 设置当前页
      this.currentPage = val;
      this.setPage();
    },
    // tree节点被点击时的回调
    handleNodeClick(data) {
      console.log(data);
    }
  }
};
</script>

<style lang="scss" scoped>
.progress-demo {
  display: flex;
  align-items: center;
  .progress-demo-item {
    width: 300px;
    margin-right: 20px;
  }
}
.badge-demo {
  div {
    margin-right: 20px;
  }
}
</style>
