<template>
  <div>
    <h1>Tabs 标签页组件</h1>
    <p class="fbg-text">分隔内容上有关联但属于不同类别的数据集合。</p>
    <h3 class="fbg-title">基础用法</h3>
    <demo :code="baseTabsStr">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="测试1" name="first">测试1</el-tab-pane>
        <el-tab-pane label="测试2" name="second">测试2</el-tab-pane>
        <el-tab-pane label="测试3" name="third">测试3</el-tab-pane>
      </el-tabs>
    </demo>
    <h3 class="fbg-title">选项卡样式</h3>
    <demo :code="cardTabsStr">
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="测试1" name="first">测试1</el-tab-pane>
        <el-tab-pane label="测试2" name="second">测试2</el-tab-pane>
        <el-tab-pane label="测试3" name="third">测试3</el-tab-pane>
      </el-tabs>
    </demo>
    <h3 class="fbg-title">卡片化</h3>
    <demo :code="borderCardTabsStr">
      <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
        <el-tab-pane label="测试1" name="first">测试1</el-tab-pane>
        <el-tab-pane label="测试2" name="second">测试2</el-tab-pane>
        <el-tab-pane label="测试3" name="third">测试3</el-tab-pane>
      </el-tabs>
    </demo>
    <h3 class="fbg-title">位置</h3>
    <demo :code="positionTabsStr">
      <el-tabs tab-position="left" v-model="activeName" type="border-card" @tab-click="handleClick">
        <el-tab-pane label="测试1" name="first">测试1</el-tab-pane>
        <el-tab-pane label="测试2" name="second">测试2</el-tab-pane>
        <el-tab-pane label="测试3" name="third">测试3</el-tab-pane>
      </el-tabs>
    </demo>
    <h3 class="fbg-title">自定义标签页</h3>
    <demo :code="defineTabsStr">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="测试1" name="first">
          <span slot="label"><i class="fbg-icon-date"></i> 测试1</span>
          测试1
        </el-tab-pane>
        <el-tab-pane label="测试2" name="second">测试2</el-tab-pane>
        <el-tab-pane label="测试3" name="third">测试3</el-tab-pane>
      </el-tabs>
    </demo>
    <h3 class="fbg-title">动态增减标签页</h3>
    <demo :code="dynamicTabsStr">
      <el-tabs editable  @edit="handleTabsEdit" v-model="dynamicActiveName" type="border-card" @tab-click="handleClick">
        <el-tab-pane v-for="(item, index) in dynamicTabList" :key="index" :label="item.label" :name="item.value">
          {{item.content}}
        </el-tab-pane>
      </el-tabs>
    </demo>
    <h3 class="fbg-title">关闭标签按钮</h3>
    <demo :code="closeTabsStr">
      <el-tabs closable @tab-remove="removeTab" v-model="closeActiveName" type="border-card" @tab-click="handleClick">
        <el-tab-pane v-for="(item, index) in closeTabList" :key="index" :label="item.label" :name="item.value">
          {{item.content}}
        </el-tab-pane>
      </el-tabs>
    </demo>
    <h3 class="fbg-title">Tabs 属性</h3>
    <table class="fbg-table">
      <thead>
        <tr>
          <th>参数</th>
          <th>说明</th>
          <th>类型</th>
          <th>可选值</th>
          <th>默认值</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>type</td>
          <td>风格类型</td>
          <td>String</td>
          <td>card|border-card</td>
          <td>--</td>
        </tr>
        <tr>
          <td>type</td>
          <td>风格类型</td>
          <td>String</td>
          <td>card|border-card</td>
          <td>--</td>
        </tr>
        <tr>
          <td>closable</td>
          <td>标签是否可关闭</td>
          <td>Boolean</td>
          <td>true|false</td>
          <td>false</td>
        </tr>
        <tr>
          <td>addable</td>
          <td>标签是否可增加</td>
          <td>Boolean</td>
          <td>true|false</td>
          <td>false</td>
        </tr>
        <tr>
          <td>editable</td>
          <td>标签是否同时可增加和关闭</td>
          <td>Boolean</td>
          <td>true|false</td>
          <td>false</td>
        </tr>
        <tr>
          <td>tab-position</td>
          <td>选项卡所在位置</td>
          <td>String</td>
          <td>top|right|bottom|left</td>
          <td>top</td>
        </tr>
        <tr>
          <td>stretch</td>
          <td>标签的宽度是否自撑开</td>
          <td>Boolean</td>
          <td>true|false</td>
          <td>false</td>
        </tr>
        <tr>
          <td>before-leave</td>
          <td>切换标签之前的钩子，若返回 false 或者返回 Promise 且被 reject，则阻止切换。</td>
          <td>Function(activeName, oldActiveName)</td>
          <td>--</td>
          <td>--</td>
        </tr>
      </tbody>
    </table>
    <h3 class="fbg-title">Tabs 事件</h3>
    <table class="fbg-table">
      <thead>
        <tr>
          <th>事件名称</th>
          <th>说明</th>
          <th>回调参数</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th>tab-click</th>
          <th>tab 被选中时触发</th>
          <th>被选中的标签 tab 实例</th>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script>
import hljs from '../util/highlight';
export default {
  data() {
    return {
      activeName: 'first',
      dynamicActiveName: "1",
      editableTabsValue: "1",
      closeActiveName: "1",
      tabIndex: "3",
      dynamicTabList: [
        {
          label: '测试1',
          value: "1",
          content: '测试1'
        },
        {
          label: '测试2',
          value: "2",
          content: '测试2'
        },
        {
          label: '测试3',
          value: "3",
          content: '测试3'
        }
      ],
      closeTabList: [
        {
          label: '测试1',
          value: "1",
          content: '测试1'
        },
        {
          label: '测试2',
          value: "2",
          content: '测试2'
        },
        {
          label: '测试3',
          value: "3",
          content: '测试3'
        }
      ],
      baseTabsStr: `
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="测试1" name="first">测试1</el-tab-pane>
        <el-tab-pane label="测试2" name="second">测试2</el-tab-pane>
        <el-tab-pane label="测试3" name="third">测试3</el-tab-pane>
      </el-tabs>
      <script>
        export default {
          data() {
            return {
              activeName: 'first'
            }
          },
          methods: {
            handleClick(tab, event) {
              console.log(tab,  event);
            }
          }
        }
      <\/script>
      `,
      cardTabsStr: `
      <el-tabs type="card" v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="测试1" name="first">测试1</el-tab-pane>
        <el-tab-pane label="测试2" name="second">测试2</el-tab-pane>
        <el-tab-pane label="测试3" name="third">测试3</el-tab-pane>
      </el-tabs>
      <script>
        export default {
          data() {
            return {
              activeName: 'first'
            }
          },
          methods: {
            handleClick(tab, event) {
              console.log(tab,  event);
            }
          }
        }
      <\/script>
      `,
      borderCardTabsStr: `
      <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="测试1" name="first">测试1</el-tab-pane>
        <el-tab-pane label="测试2" name="second">测试2</el-tab-pane>
        <el-tab-pane label="测试3" name="third">测试3</el-tab-pane>
      </el-tabs>
      <script>
        export default {
          data() {
            return {
              activeName: 'first'
            }
          },
          methods: {
            handleClick(tab, event) {
              console.log(tab,  event);
            }
          }
        }
      <\/script>
      `,
      positionTabsStr: `
      <el-tabs tab-position="left" type="border-card" v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="测试1" name="first">测试1</el-tab-pane>
        <el-tab-pane label="测试2" name="second">测试2</el-tab-pane>
        <el-tab-pane label="测试3" name="third">测试3</el-tab-pane>
      </el-tabs>
      <script>
        export default {
          data() {
            return {
              activeName: 'first'
            }
          },
          methods: {
            handleClick(tab, event) {
              console.log(tab,  event);
            }
          }
        }
      <\/script>
      `,
      defineTabsStr: `
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="测试1" name="first">
          <span slot="label"><i class="fbg-icon-date"></i> 测试1</span>
          测试1
        </el-tab-pane>
        <el-tab-pane label="测试2" name="second">测试2</el-tab-pane>
        <el-tab-pane label="测试3" name="third">测试3</el-tab-pane>
      </el-tabs>
      <script>
        export default {
          data() {
            return {
              activeName: 'first'
            }
          },
          methods: {
            handleClick(tab, event) {
              console.log(tab,  event);
            }
          }
        }
      <\/script>
      `,
      dynamicTabsStr: `
      <el-tabs editable  @edit="handleTabsEdit" v-model="editableTabsValue" type="border-card" @tab-click="handleClick">
        <el-tab-pane v-for="(item, index) in dynamicTabList" :key="index" :label="item.label" :name="item.value">
          {{item.content}}
        </el-tab-pane>
      </el-tabs>
      <script>
        export default {
          data() {
            return {
              editableTabsValue: '1',
              tabIndex: '3',
              dynamicTabList: [
                {
                  label: '测试1',
                  value: '1',
                  content: '测试1'
                },
                {
                  label: '测试2',
                  value: '2',
                  content: '测试2'
                },
                {
                  label: '测试3',
                  value: '3',
                  content: '测试3'
                }
              ]
            }
          },
          methods: {
            handleClick(tab, event) {
              console.log(tab,  event);
            },
            handleTabsEdit(targetName, action) {
              if (action === 'add') {
                ++this.tabIndex; 
                let newTabName = '测试' + (this.tabIndex);
                this.dynamicTabList.push({
                  label: newTabName,
                  value: this.tabIndex,
                  content: newTabName
                });
                this.editableTabsValue = this.tabIndex;
              }
              if (action === 'remove') {
                let tabs = this.dynamicTabList;
                let activeName = this.editableTabsValue;
                if (activeName === targetName) {
                  tabs.forEach((tab, index) => {
                    if (tab.name === targetName) {
                      let nextTab = tabs[index + 1] || tabs[index - 1];
                      if (nextTab) {
                        activeName = nextTab.name;
                      }
                    }
                  });
                }
                this.editableTabsValue = activeName;
                this.dynamicTabList = tabs.filter(tab => tab.name !== targetName);
              }
            }
          }
        }
      <\/script>
      `,
      closeTabsStr: `
        <el-tabs closable @tab-remove="removeTab" v-model="closeActiveName" type="border-card" @tab-click="handleClick">
          <el-tab-pane v-for="(item, index) in closeTabList" :key="index" :label="item.label" :name="item.value">
            {{item.content}}
          </el-tab-pane>
        </el-tabs>
        <script>
          export default {
            data() {
              return {
                closeActiveName: '1',
                closeTabList: [
                  {
                    label: '测试1',
                    value: "1",
                    content: '测试1'
                  },
                  {
                    label: '测试2',
                    value: "2",
                    content: '测试2'
                  },
                  {
                    label: '测试3',
                    value: "3",
                    content: '测试3'
                  }
                ]
              }
            },
            methods: {
              handleClick(tab, event) {
                console.log(tab,  event);
              },
              removeTab(targetName) {
                let tabs = this.closeTabList;
                let activeName = this.closeActiveName;
                if (activeName === targetName) {
                  tabs.forEach((tab, index) => {
                    if (tab.value === targetName) {
                      let nextTab = tabs[index + 1] || tabs[index - 1];
                      if (nextTab) {
                        activeName = nextTab.value;
                      }
                    }
                  });
                }
                this.closeActiveName = activeName;
                this.closeTabList = tabs.filter(tab => tab.value !== targetName);
              }
            }
          }
        <\/script>
      `,
    }
  },
  mounted() {
    hljs.highlightCode();
  },
  methods: {
    handleClick() {},
    handleClose(path, data) {
      console.log(path, data);
    },
    handleChange(path, data) {
    },
    handleTabsEdit(targetName, action) {
      if (action === 'add') {
        ++this.tabIndex; 
        let newTabName = '测试' + (this.tabIndex);
        this.dynamicTabList.push({
          label: newTabName,
          value: this.tabIndex,
          content: newTabName
        });
        this.dynamicActiveName = this.tabIndex;
      }
      if (action === 'remove') {
        let tabs = this.dynamicTabList;
        let activeName = this.dynamicActiveName;
        if (activeName === targetName) {
          tabs.forEach((tab, index) => {
            if (tab.name === targetName) {
              let nextTab = tabs[index + 1] || tabs[index - 1];
              if (nextTab) {
                activeName = nextTab.name;
              }
            }
          });
        }
        this.editableTabsValue = activeName;
        this.dynamicTabList = tabs.filter(tab => tab.name !== targetName);
      }
    },
    removeTab(targetName) {
      let tabs = this.closeTabList;
      let activeName = this.closeActiveName;
      if (activeName === targetName) {
        tabs.forEach((tab, index) => {
          if (tab.value === targetName) {
            let nextTab = tabs[index + 1] || tabs[index - 1];
            if (nextTab) {
              activeName = nextTab.value;
            }
          }
        });
      }
      this.closeActiveName = activeName;
      this.closeTabList = tabs.filter(tab => tab.value !== targetName);
    }
  }
}
</script>