_alipay_handle_response: function (response) {
    var line = this.pos.get_order().selected_paymentline;
    var self = this;
    if (response.code == '10000') {
        self._alipay_success(response.trade_no)
        self.pos.gui.close_popup();
    }
    else if (response.code == '10003') {
        line.set_payment_status("pending")
        this.pos.gui.show_popup('confirm', {
            'title': '支付中',
            'body': '等待用户付款',
            'confirm': this.check_payment,
            'cancel': this.cancel_payment,
            'payment_method': line.payment_method,
            'trade_no': response.trade_no
        });
    }
    else if (response.code = '40004') {
        line.set_payment_status("pending")
        this.pos.gui.show_popup('error', {
            'title': '支付失败',
            "body": response.sub_msg
        });
    }
},

const { Component, useState } = owl;
const { xml } = owl.tags;

class Counter extends Component {
    static template = xml`
<button t-on-click="state.value++">
    Click Me! [<t t-esc="state.value"/>]
</button>`;

        state = useState({ value: 0 });
    }

class App extends Component {
    static template = xml`
<div>
<span>Hello Owl</span>
<Counter />
</div>`;

    static components = { Counter };
}

const app = new App();
app.mount(document.body);

(function(){
    console.log("Hello OWL", owl.__info__.version);
})();

const {Component} = owl;
const {xml} = owl.tags;
const {whenReady} = owl.utils;

class App extends Component {
    static template = xml`<div>todo App</div>`;
}

function setup(){
    const app = new App();
    app.mount(document.body);
}

whenReady(setup);

class App extends Component {
  static template = xml/* xml */ `
    <div class="task-list">
        <t t-foreach="tasks" t-as="task" t-key="task.id">
            <div class="task">
                <input type="checkbox" t-att-checked="task.isCompleted"/>
                <span><t t-esc="task.title"/></span>
            </div>
        </t>
    </div>`;

  tasks = [
    {
      id: 1,
      title: "buy milk",
      isCompleted: true,
    },
    {
      id: 2,
      title: "clean house",
      isCompleted: false,
    },
  ];
}

// -------------------------------------------------------------------------
// Task Component
// -------------------------------------------------------------------------
const TASK_TEMPLATE = xml /* xml */`
    <div class="task" t-att-class="props.task.isCompleted ? 'done' : ''">
        <input type="checkbox" t-att-checked="props.task.isCompleted"/>
        <span><t t-esc="props.task.title"/></span>
    </div>`;

class Task extends Component {
    static template = TASK_TEMPLATE;
    static props = ["task"];
}

// -------------------------------------------------------------------------
// App Component
// -------------------------------------------------------------------------
const APP_TEMPLATE = xml /* xml */`
    <div class="task-list">
        <t t-foreach="tasks" t-as="task" t-key="task.id">
            <Task task="task"/>
        </t>
    </div>`;

class App extends Component {
    static template = APP_TEMPLATE;
    static components = { Task };

    tasks = [
        {
          id: 1,
          title: "buy milk",
          isCompleted: true,
        },
        {
          id: 2,
          title: "clean house",
          isCompleted: false,
        },
      ];
}

// -------------------------------------------------------------------------
// Setup code
// -------------------------------------------------------------------------
function setup() {
    owl.config.mode = "dev";
    const app = new App();
    app.mount(document.body);
}

whenReady(setup);

addTask(ev) {
    // 13 is keycode for ENTER
    if (ev.keyCode === 13) {
        const title = ev.target.value.trim();
        ev.target.value = "";
        console.log('adding task', title);
        // todo
    }
}

tasks=[]

inputRef = useRef("add-input");

mounted(){
    this.inputRef.el.focus();
}

class App extends Component {
    static template = APP_TEMPLATE;
    static components = { Task };

    nextId = 1;
    tasks = [];

    addTask(ev) {
        // 13 is keycode for ENTER
        if (ev.keyCode === 13) {
            const title = ev.target.value.trim();
            ev.target.value = "";
            console.log('adding task', title);

            if (title) {
                const newTask = {
                    id: this.nextId++,
                    title: title,
                    isCompleted: false
                };
                this.tasks.push(newTask);
                console.log(this.tasks);
            }
        }
    }

    inputRef = useRef("add-input");

    mounted() {
        this.inputRef.el.focus();
    }

    // tasks = []
}

// on top of the file
const { useRef, useState } = owl.hooks;

// replace the task definition in App with the following:
tasks = useState([]);

toggleTask(ev) {
        this.trigger('toggle-task', { id: this.props.task.id });
    }

toggleTask(ev) {
    const task = this.tasks.find(t => t.id == ev.detail.id);
    task.isCompleted = !task.isCompleted;
}

deleteTask() {
    this.trigger('delete-task', {id: this.props.task.id});
}

deleteTask(ev) {
    const index = this.tasks.findIndex(t => t.id === ev.detail.id);
    this.tasks.splice(index, 1);
}

const { Component, Store } = owl;
const { xml } = owl.tags;
const { whenReady } = owl.utils;
const { useRef, useDispatch, useStore } = owl.hooks;

//
// Store
//
const actions = {
    addTask({ state }, title) {
        title = title.trim();
        if (title) {
            const task = {
                id: state.nextId++,
                title: title,
                isCompleted: false
            };
            state.tasks.push(task);
        }
    },

    toggleTask({ state }, id) {
        const task = state.tasks.find((t) => t.id === id);
        task.isCompleted = !task.isCompleted;
    },

    deleteTask({ state }, id) {
        const index = state.tasks.findIndex((t) => t.id === id);
        state.tasks.splice(index, 1)
    }
};

const initialState = {
    nextId: 1,
    tasks: [],
};



// -------------------------------------------------------------------------
// Task Component
// -------------------------------------------------------------------------
const TASK_TEMPLATE = xml /* xml */`
<div class="task" t-att-class="props.task.isCompleted ? 'done' : ''">
<input type="checkbox" t-att-checked="props.task.isCompleted"
        t-on-click="dispatch('toggleTask', props.task.id)"/>
<span><t t-esc="props.task.title"/></span>
<span class="delete" t-on-click="dispatch('deleteTask', props.task.id)">🗑</span>
</div>`;

class Task extends Component {
    static template = TASK_TEMPLATE;
    static props = ["task"];
    dispatch = useDispatch();
}

// -------------------------------------------------------------------------
// App Component
// -------------------------------------------------------------------------
const APP_TEMPLATE = xml /* xml */`
    <div class="todo-app">
    <input placeholder="Enter a new task" t-on-keyup="addTask" t-ref="add-input"/>
    <div class="task-list">
        <t t-foreach="tasks" t-as="task" t-key="task.id">
            <Task task="task"/>
        </t>
    </div>
    </div>`;

class App extends Component {
    static template = APP_TEMPLATE;
    static components = { Task };

    inputRef = useRef("add-input");
    tasks = useStore((state) => state.tasks);
    dispatch = useDispatch();

    mounted() {
        this.inputRef.el.focus();
    }

    addTask(ev) {
        if (ev.keyCode == 13) {
            this.dispatch("addTask", ev.target.value);
            ev.target.value = ""
        }
    }
}

// -------------------------------------------------------------------------
// Setup code
// -------------------------------------------------------------------------
function setup() {
    owl.config.mode = "dev";
    const store = new Store({ actions, state: initialState });
    App.env.store = store;
    const app = new App();
    app.mount(document.body);
}

whenReady(setup);

function makeStore() {
    const localState = window.localStorage.getItem("todoApp");
    const state = localState ? JSON.parse(localState) : initialState;
    const store = new Store({ state, actions });
    store.on("update", null, () => {
        localStorage.setItem("todoApp", JSON.stringify(store.state));
    })
    return store;
}

function setup() {
    owl.config.mode = "dev";
    // const store = new Store({ actions, state: initialState });
    // App.env.store = store;
    App.env.store = makeStore();
    const app = new App();
    app.mount(document.body);
}

// on top of file, readd useState:
const { useRef, useDispatch, useState, useStore } = owl.hooks;

// in App:
filter = useState({value: "all"})

get displayedTasks() {
    switch (this.filter.value) {
        case "active": return this.tasks.filter(t => !t.isCompleted);
        case "completed": return this.tasks.filter(t => t.isCompleted);
        case "all": return this.tasks;
    }
}

setFilter(filter) {
    this.filter.value = filter;
}