<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE6">
  <meta charset="UTF-8">
  <title>Vue 2.7 Test</title>
  <!-- IE6-8 support for HTML5 elements -->
  <script src="./local_vue/vue2/html5shiv.min.js"></script>
  <!-- ES5 compatibility shims -->
  <script src="./local_vue/vue2/es5-shim.min.js"></script>
  <!-- DOM4 polyfill -->
  <script src="./local_vue/vue2/dom4.js"></script>
  <!-- EventListener polyfill -->
  <script src="./local_vue/vue2/EventListener.oldie.js"></script>
  <script src="./local_vue/vue2/eventlistener.js"></script>
  <!-- Promise polyfill -->
  <script src="./local_vue/vue2/es6-promise.auto.min.js"></script>
  <!-- Babel browser polyfill -->
  <script src="./local_vue/vue2/browser-polyfill.min.js"></script>
  <!-- Vue 2.7 -->
  <script src="./local_vue/vue2/vue.js"></script>
</head>
<body>
  <div id="app">
    <h1>{{ data.title }}</h1>
    <div v-if="data.show_content">
      <p>Current time: {{ formattedTime }}</p>
      <button @click="functions.toggleList">Toggle List</button>
      <ul v-show="data.show_list">
        <li v-for="(item, index) in data.items" :key="index">
          {{ item.text }} ({{ item.id }})
        </li>
      </ul>
      <input v-model="data.new_item" @keyup.enter="functions.addItem">
      <button @click="functions.addItem">Add Item</button>
    </div>
    <div v-else>
      <p>Content is hidden</p>
      <button @click="data.show_content = true">Show Content</button>
    </div>
    <div>
      <p>Computed reversed message: {{ reversedMessage }}</p>
    </div>

    <your_component_name></your_component_name>
  </div>

  <script>
    /*
      How to reuse component imported from other script?

      <your_component_name></your_component_name>

      function create_and_bind_a_button(selector) {
          Vue.component(selector, {
            template: '<button @click="handleClick">点击</button>',
            methods: { handleClick() { alert('Clicked!'); } }
          });
      }

      create_and_bind_a_button("your_component_name");
    */
    var the_vue_instance = new Vue({
      el: '#app',
      data: {
        data: {
            title: 'Vue 2.7 (IE6 not work) (xp chrome 49 works)',
            show_content: true,
            show_list: true,
            items: [
              { id: 1, text: 'Item 1' },
              { id: 2, text: 'Item 2' }
            ],
            new_item: '',
            current_time: new Date(),
        },
        functions: {
            toggleList: function() {
              the_vue_instance.data.show_list = !the_vue_instance.data.show_list;
            },
            addItem: function() {
              if (the_vue_instance.data.new_item.trim()) {
                the_vue_instance.data.items.push({
                  id: the_vue_instance.data.items.length + 1,
                  text: the_vue_instance.data.new_item
                });
                the_vue_instance.data.new_item = '';
              }
            },
        }
      },
      computed: {
        formattedTime: function() {
          return this.data.current_time.toLocaleTimeString();
        },
        reversedMessage: function() {
          return this.data.title.split('').reverse().join('');
        }
      },
      methods: {
      },
      created: function() {
        var self = this; // equal to the_vue_instance
        setInterval(function() {
          the_vue_instance.data.current_time = new Date();
        }, 1000);
      }
    });
  </script>
  <script>
      function create_and_bind_a_button(selector) {
          Vue.component(selector, {
            template: '<button @click="handleClick">点击</button>',
            methods: { handleClick() { alert('Clicked!'); } }
          });
      }

      create_and_bind_a_button("your_component_name");
  </script>
</body>
</html>
