<template>
  <page-layout>
    <div class="row q-col-gutter-md q-pa-md">
      <div v-for="item,i in lotterys" :key="i" class="col-4">
      <q-card class="text-center"
      @click="onSelectLottery(item)">
      <q-card-section class="relative-position overflow-hidden">
        <img width="42" :src="'/statics/lottery/' + item.lottery_type.type + '.png'"/>
        <div>{{ item.name }}</div>
        <div v-if="item.cooperate_audit_state == 1" class="cooperate-opened text-caption bg-red">已合作</div>
        <div v-else-if="item.cooperate_audit_state == 3" class="cooperate-opened text-caption bg-orange">审核中</div>
      </q-card-section>
      </q-card>
    </div>
    </div>
    <q-dialog
      :model-value="!!lottery"
      @update:model-value="lottery = null"
      position="bottom"
      class="full-width"
    >
      <q-card class="full-width">
        <q-card-section class="text-center q-pb-none">
          申请合作彩种
        </q-card-section>
        <q-card-section>
    <q-form ref="formRef" @submit="submit">
      <q-list class="bg-white q-mt-sm" separator>
        <q-item>
          <q-item-section avatar>
            <q-item-label class="text-grey">彩种名称：</q-item-label>
          </q-item-section>
          <q-item-section>
            <q-item-label>{{ lottery.name }}</q-item-label>
          </q-item-section>
        </q-item>
        <q-item>
          <q-item-section avatar>
            <q-item-label class="text-grey">佣金设置：</q-item-label>
          </q-item-section>
          <q-item-section>
            <div class="row items-center">
              <q-input v-model="form.brokerage"
                :rules="[Rules.required,Rules.greaterThan(0),Rules.lessEqualThan(7)]"
                type="text"
                filled
                dense
                style="width:120px;"
                hide-bottom-space
                suffix="%">
              </q-input>
              <span class="text-grey q-ml-sm">佣金范围0-7</span>
            </div>
          </q-item-section>
        </q-item>
        <q-item class="items-start">
          <q-item-section avatar>
            <q-item-label class="text-grey q-pt-sm q-mt-xs">申请说明：</q-item-label>
          </q-item-section>
          <q-item-section>
            <q-input v-model="form.apply_message"
              type="textarea"
              borderless
              clearable
              dense
              hide-bottom-space
              placeholder="请填写申请说明（选填）"/>
          </q-item-section>
        </q-item>
      </q-list>
      <div class="q-ma-md row q-gutter-x-md">
        <q-btn unelevated color="grey-2" class="col" text-color="grey-7" @click="lottery = null">取消</q-btn>
        <q-btn unelevated color="primary" class="col" type="submit">申请</q-btn>
      </div>
    </q-form>
    </q-card-section>
    </q-card>
    </q-dialog>
  </page-layout>
</template>
<script setup>
import {ref,reactive} from 'vue'
import { useSelfStore } from 'stores/self';
import { useQuasar } from 'quasar';
import { Rules,formatMoney } from 'src/utils/tools';
import { api } from 'boot/axios'
import { useRoute,useRouter } from 'vue-router';
const route = useRoute()
const router = useRouter()
const store = useSelfStore()
const $q = useQuasar()
const lottery = ref(null)
const lotterys = ref([])
const form = reactive({
  brokerage: '',
  apply_message: ''
})
function refresh(){
  api.getPartnerLotteries({shop_cooperate_id: route.params.shopCooperateId}).then(res=>{
    lotterys.value = res
  })
}
refresh()
function onSelectLottery(item){
  if(item.cooperate_audit_state == 1){
    return $q.notify('您已和该店铺合作此彩种～')
  }
  if(item.cooperate_audit_state == 3){
    return $q.notify('您已申请该店铺合作此彩种，请等待对方审核～')
  }
  lottery.value = item
}
function submit(){
  api.addPartnerLottery({
    lottery_type_id: lottery.value.lottery_type_id,
    shop_cooperate_id: route.params.shopCooperateId,
    ...form
  }).then((res)=>{
    $q.notify({type: 'positive',message: res.message||'申请成功！' })
    lottery.value = null
    // refresh()
    router.back()
  }).catch(e=>{
    $q.notify({type: 'negative',message: e.message})
  })
}
</script>
<style lang="scss" scoped>
.cooperate-opened{
  position:absolute;
  left:0px;
  top:0px;
  border-radius: 0 0 20px 0;
  color: white;
  padding:0 10px 0 5px;
}
</style>
