<template>
  <q-expansion-item :label="props.item.title" icon="qr_code_scanner" v-bind="attrs" class="expand-item bg-white q-my-sm">
    <q-list separator>
      <template v-for="channel, i in props.item.pay_channels" :key="i">
        <div class="q-pa-md">
          <q-item-label class="text-accent text-caption">请上传二维码图片：微信、支付宝收款码均可</q-item-label>
          <div class="row q-col-gutter-sm wrap q-mt-sm text-grey items-center justify-start">
            <div class="relative-position col-auto">
              <UploadFile :multiple="false" url="seller/material/upload_other" accept="image/*" field-name="file" flat
                square class="full-width" @uploaded="uploaded($event, 'wechat_qrcode')">
                <template #header-content>
                  <q-img v-if="channel.wechat_qrcode" width="100px" class="bg-grey-2" height="160px" :src="channel.wechat_qrcode" />
                  <div v-else class="bordered-dashed row flex-center text-grey" style="width: 100px; height: 160px">
                    微信收款码
                    <!-- <q-icon size="32px" name="file_upload" /> -->
                  </div>
                </template>
              </UploadFile>
              <q-btn v-if="channel.wechat_qrcode" class="absolute-top-right clear-btn"
              style="z-index: 1;" color="grey" unelevated round size="xs" dense icon="clear"
                @click.stop="setPayChannel({ wechat_qrcode: '' })"></q-btn>
            </div>
            <div class="relative-position col-auto">
            <UploadFile :multiple="false" url="seller/material/upload_other" accept="image/*" field-name="file" flat
              square class="full-width" @uploaded="uploaded($event, 'alipay_qrcode')">
              <template #header-content>
                <q-img v-if="channel.alipay_qrcode" width="100px" class="bg-grey-2" height="160px" :src="channel.alipay_qrcode" />
                <div v-else class="bordered-dashed row flex-center text-grey" style="width: 100px; height: 160px">
                  支付宝收款码
                  <!-- <q-icon size="32px" name="file_upload" /> -->
                </div>
              </template>
            </UploadFile>
                <q-btn v-if="channel.alipay_qrcode" class="absolute-top-right clear-btn"
                style="z-index: 1;" color="grey" unelevated round size="xs" dense icon="clear"
                  @click.stop="setPayChannel({ alipay_qrcode: '' })"></q-btn>
          </div>
          </div>
        </div>
        <q-separator></q-separator>
        <q-item @click="editRemind(i)" clickable>
          <q-item-section>
            <q-item-label>付款提醒</q-item-label>
          </q-item-section>
          <q-item-section side>
            <q-item-label caption>修改
              <q-icon name="arrow_forward_ios" color="grey" size="14px" />
            </q-item-label>
          </q-item-section>
        </q-item>
        <div class="q-px-md q-pb-md ">
          <ol class="q-pa-sm bg-grey-2 q-ma-none">
            <li v-if="channel.remind_before" style="list-style:decimal; list-style-position: inside;">{{
              channel.remind_before }}</li>
            <li v-if="channel.remind_after" style="list-style:decimal; list-style-position: inside;">{{
              channel.remind_after }}</li>
          </ol>
        </div>
        <q-separator></q-separator>
        <q-item>
          <q-item-section>
            <q-item-label>开启支付</q-item-label>
          </q-item-section>
          <q-item-section side>
            <q-toggle :model-value="channel.opened" :true-value="1" :false-value="0"
              @update:model-value="setPayChannel({ opened: $event })" />
          </q-item-section>
        </q-item>
      </template>
    </q-list>
  </q-expansion-item>
  <q-dialog v-model="dialogVisible" position="bottom" class="dialog-full-height">
    <q-card>
      <div class="q-py-md text-weight-bold text-center">请修改付款提醒</div>
      <q-card-section>
        <q-form ref="formRef" @submit="submitRemind">
          <div class="q-mb-xs">付款前</div>
          <q-input v-model="form.remind_before" type="textarea" rows="3" clearable filled
            :placeholder="REMIND_DEFAULT['remind_before']" />
          <div class="q-mt-md q-mb-xs">付款完成</div>
          <q-input v-model="form.remind_after" type="textarea" rows="3" clearable filled
            :placeholder="REMIND_DEFAULT['remind_after']" />
          <q-btn unelevated color="primary" class="full-width q-mt-md" type="submit">提交</q-btn>
        </q-form>
      </q-card-section>
      <div class="safe-padding-bottom"></div>
    </q-card>
  </q-dialog>
</template>
<script setup>
import UploadFile from "src/components/UploadFile.vue";
import { ref, onMounted, reactive, watch, useAttrs } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useSelfStore } from "stores/self";
import { api } from "boot/axios";
import { useQuasar } from "quasar";
const props = defineProps({
  item: {
    type: Object,
    default: function () {
      return {}
    }
  }
})
const emits = defineEmits(['update:item'])
const attrs = useAttrs()
const $q = useQuasar();
const route = useRoute();
const router = useRouter();
const store = useSelfStore();
// 上传票据成功回调
function uploaded(res, key) {
  setPayChannel({ [key]: res?.data?.path }, '上传成功')
}
const REMIND_DEFAULT = {
  remind_before: '付款时，请备注充值账号的手机号码。',
  remind_after: '完成付款，请及时联系店主进行查账'
}
const dialogVisible = ref(false)
const form = reactive({
  remind_after: '',
  remind_before: '',
  pay_channel: ''
})
function editRemind(i) {
  for (let p in form) {
    form[p] = props.item.pay_channels[i][p]
  }
  dialogVisible.value = true
}
function submitRemind() {
  // {
  // remind_after: form.remind_after||REMIND_DEFAULT.remind_after,
  // remind_before: form.remind_before || REMIND_DEFAULT.remind_before,
  // }
  setPayChannel(form, '修改付款提醒成功').then(() => {
    dialogVisible.value = false
  })
}
function setPayChannel(data, msg) {
  return api.setPayChannel({ pay_type: props.item.pay_type, ...data })
    .then((res) => {
      msg && $q.notify({ type: "positive", message: msg });
      emits('update:item')
    })
    .catch((e) => {
      $q.notify({ type: "negative", message: e.message });
      return Promise.reject(e)
    });
}
</script>
<style lang="scss" scoped></style>

