{% extends "public.html" %} {% block page %}
<div class="row q-col-gutter-md flex">
  <div class="col-12 col-md-7 col-lg-6 q-gutter-y-md">
    <q-card>
      <div class="chat-container q-pa-md">
        <div class="chat-box">
          <!-- <p v-if="Object.keys(messages).length === 0">No messages yet</p> -->
          <div class="chat-messages">
            <q-chat-message
              :key="key"
              v-for="(message, key) in messages"
              :name="message.from == 'me' ? 'me' : 'merchant'"
              :text="[message.text]"
              :sent="message.from == 'me' ? true : false"
              :bg-color="message.from == 'me' ? 'white' : 'light-green-2'"
            />
          </div>
        </div>
        <q-form @submit="sendMessage" class="full-width chat-input">
          <q-input
            ref="newMessage"
            v-model="newMessage"
            placeholder="Message"
            class="full-width"
            dense
            outlined
          >
            <template>
              <q-btn
                round
                dense
                flat
                type="submit"
                icon="send"
                color="primary"
              />
            </template>
          </q-input>
        </q-form>
      </div>
    </q-card>
  </div>
  <div class="col-12 col-md-5 col-lg-6 q-gutter-y-md">
    <q-card>
      <q-card-section>
        {% raw %}
        <h6 class="text-subtitle1 q-my-none">{{ stall.name }}</h6>
        <p @click="copyText(stall.publickey)">
          Public Key: {{ sliceKey(stall.publickey) }}
          <q-tooltip>{{ stall.publickey }}</q-tooltip>
        </p>
        {% endraw %}
        <q-form @submit="" class="q-gutter-md">
          <q-select
            filled
            dense
            emit-value
            v-model="model"
            :options="mockMerch"
            label="Merchant"
            hint="Select a merchant you've opened an order to"
          ></q-select>
          <br />
          <q-select
            filled
            dense
            emit-value
            v-model="model"
            :options="mockOrder"
            label="Order"
            hint="Select an order from this merchant"
            :disabled="!this.model"
          ></q-select>
        </q-form>
      </q-card-section>
      <q-card-section>
        <q-separator></q-separator>
        <p>
          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolore,
          quasi.
        </p>
        <div class="text-center q-mb-lg">
          <a :href="'lightning:'">
            <q-responsive :ratio="1" class="q-mx-xl">
              <qrcode
                :value="cb4c0164fe03fcdadcbfb4f76611c71620790944c24f21a1cd119395cdedfe1b"
                :options="{width: 340}"
                class="rounded-borders"
              ></qrcode>
            </q-responsive>
          </a>
        </div>
        <p>
          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolore,
          quasi.
        </p>
      </q-card-section>
      <q-card-section>
        <q-separator></q-separator>
        <div class="row q-mt-lg">
          <q-btn outline color="grey" @click=""
            >Backup keys
            <q-tooltip>Download your keys</q-tooltip>
          </q-btn>
          <q-btn @click="" v-close-popup flat color="grey" class="q-ml-auto"
            >Delete data
            <q-tooltip>Delete all data from browser</q-tooltip>
          </q-btn>
        </div>
      </q-card-section>
    </q-card>
  </div>
</div>
{% endblock %} {% block scripts %}
<script>
  Vue.component(VueQrcode.name, VueQrcode)
  new Vue({
    el: '#vue',
    mixins: [windowMixin],
    data: function () {
      return {
        newMessage: '',
        showMessages: false,
        messages: {},
        stall: null,
        orders: [],
        // Mock data
        model: null,
        mockMerch: ['Google', 'Facebook', 'Twitter', 'Apple', 'Oracle'],
        mockOrder: ['1', '2', '3']
      }
    },
    computed: {},
    methods: {
      clearMessage() {
        this.newMessage = ''
        this.$refs.newMessage.focus()
      },
      sendMessage() {
        let message = {
          key: Date.now(),
          text: this.newMessage,
          from: 'me'
        }
        this.$set(this.messages, message.key, message)

        this.clearMessage()
      },
      sliceKey(key) {
        if (!key) return ''
        return `${key.slice(0, 4)}...${key.slice(-4)}`
      }
    },
    created() {
      let stall = JSON.parse('{{ stall | tojson }}')
      let orders = JSON.parse('{{ orders | tojson }}')

      this.stall = stall
      this.orders = orders
      console.log(stall)
      console.log(orders)
    }
  })
</script>
<style scoped>
  .chat-container {
    position: relative;
    display: grid;
    grid-template-rows: 1fr auto;
    height: calc(100vh - 133px);
  }

  .chat-box {
    display: flex;
    flex-direction: column-reverse;
    padding: 1rem;
    overflow-y: auto;
  }

  .chat-messages {
    width: auto;
  }

  .chat-other {
  }

  .chat-input {
    position: relative;
    display: flex;
    align-items: end;
    margin-top: 1rem;
  }
</style>
{% endblock %}