<template>
  <el-tabs v-model="curTab">
    <el-tab-pane label="表格效果" name="demo">
      <keep-alive>
        <TableCode />
      </keep-alive>
    </el-tab-pane>
    <el-tab-pane label="表格代码" name="code">
      <pre v-highlightjs="code">
        <code class="language-html">
        </code>
      </pre>
    </el-tab-pane>
    <el-tab-pane label="API" name="api">
      <MdView url="md/table.md" />
    </el-tab-pane>
  </el-tabs>
</template>
<script>
import TableCode from "@/demo/TableCode.vue";
import MdView from "@/views/MdView.vue";

export default {
  name: "my-table",
  components: { TableCode, MdView },
  data() {
    return {
      curTab: "demo",
      code: `
<template>
  <ht-table
    @load="loadData"
    :data="data"
    :pageResult="pageResult"
    :selection="true"
    quick-search-props="account,name,mobile"
  >
    <template v-slot:toolbar>
      <el-button size="small">添加</el-button>
      <el-button size="small">删除</el-button>
      <el-button size="small">同步到微信</el-button>
    </template>
    <template v-slot:search>
      <ht-table-search-panel :divide="3">
        <ht-table-search-field label="姓名test" prop="name" />
        <ht-table-search-field label="账号" prop="account" />
        <ht-table-search-field label="邮箱地址" prop="email" />
        <ht-table-search-field label="电话" prop="mobile" />
      </ht-table-search-panel>
    </template>
    <template>
      <ht-table-column type="index" width="50" align="center" label="序号" />
      <ht-table-column
        prop="name"
        label="名称"
        width="300"
        :sortable="true"
        :show-overflow-tooltip="true"
      />
      <ht-table-column prop="account" label="账号" :sortable="true" />
      <ht-table-column prop="email" label="邮箱" hidden />
      <ht-table-column prop="mobile" label="电话" sortable :hidden="true" />
      <ht-table-column
        hidden
        prop="sex"
        label="性别"
        width="80"
        :filters="[{text:'男士', value:'0'},{text:'女士', value:'1'}]"
      >
        <template v-slot="{row}">
          <el-tag v-if="row.sex==0">男士</el-tag>
          <el-tag type="danger" v-if="row.sex==1">女士</el-tag>
        </template>
      </ht-table-column>
      <ht-table-column
        prop="status"
        label="状态"
        width="110"
        :filters="[{text:'正常', value:'0'},{text:'锁定', value:'1'},{text:'已删除', value:'2'}]"
      >
        <template v-slot="{row}">
          <el-tag v-if="row.status==0">正常</el-tag>
          <el-tag type="warning" v-if="row.status==1">锁定</el-tag>
          <el-tag type="danger" v-if="row.status==2">已删除</el-tag>
        </template>
      </ht-table-column>
      <ht-table-column label="操作" fixed="right">
        <template v-slot="{row}">
          <el-button type="text">编辑</el-button>
        </template>
      </ht-table-column>
    </template>
  </ht-table>
</template>
<script>
import user from "@/api/user.js";

export default {
  name: "table-code",
  data() {
    return {
      data: [],
      pageResult: {
        page: 1,
        pageSize: 50,
        total: 0
      }
    };
  },
  mounted() {},
  methods: {
    loadData(param, cb) {
      user
        .getUsers(param)
        .then(response => {
          this.data = response.rows;

          this.pageResult = {
            page: response.page,
            pageSize: response.pageSize,
            total: response.total
          };
        })
        .finally(() => cb());
    }
  }
};
<\/script>`
    };
  }
};
</script>
<style scoped>
.el-tabs--top {
  height: 100%;
}

.el-tabs--top >>> .el-tabs__content {
  height: calc(100% - 50px);
}

.el-tab-pane {
  height: calc(100% - 10px);
  overflow-y: auto;
}
</style>