<template>
  <q-item class="bg-white q-mt-sm q-py-md">
    <q-item-section side class="q-pr-sm">
      <img width="34" :src="'/statics/lottery/' + props.item.lottery_type.type + '.png'"/>
    </q-item-section>
    <q-item-section>
      <q-item-label class="col">{{ props.item.lottery_type.name }}
      <q-badge color="primary" v-if="props.item.lottery_early_minute">提前{{props.item.lottery_early_minute}}分钟</q-badge>
      </q-item-label>
      <q-item-label class="text-red" caption>佣金：{{props.item.brokerage}}%</q-item-label>
      <q-item-label lines="2" caption v-if="props.item.audit_state == 3">
        申请说明：{{ props.item.apply_message }}
      </q-item-label>
      <q-item-label lines="2" caption v-else-if="props.item.audit_state == 2">
        拒绝原因：{{ props.item.audit_message }}
      </q-item-label>
    </q-item-section>
    <q-item-section side class="q-pl-none">
      <div v-if="props.item.audit_state == 1" class="text-caption row q-gutter-sm">
        <template v-if="props.cooperateType == 'entrust'">
          <q-radio v-for="item in options"
            :key="item.value"
            :model-value="props.item.order_method"
            :val="item.value" :label="item.label" size="xs"
            dense
            @click="openSetting(item.value)"/>
        </template>
      </div>
      <q-badge v-else-if="props.item.audit_state == 2" outline color="orange" label="已拒绝" />
      <q-btn-group unelevated v-else-if="props.item.audit_state == 3">
        <template v-if="props.cooperateType == 'entrusted'">
          <q-btn color="primary" dense class="q-py-none q-px-sm" @click="audit(1)">同意</q-btn>
          <q-btn color="orange"  dense class="q-py-none q-px-sm" @click="audit(2)">拒绝</q-btn>
        </template>
        <q-badge v-else outline color="primary" label="申请中" />
      </q-btn-group>
    </q-item-section>
    <div v-if="props.cooperateType == 'entrust' && props.item.audit_state == 1"
      class="relative-position unbind-btn"
      @click="unbindPartnerLottery()">
      <q-icon name="close" class=""/>
      <template v-if="props.item.audit_state == 1">解除</template>
      <template v-else>删除</template>
    </div>
  </q-item>
  <q-dialog v-model="setting" position="bottom" class="full-width">
    <q-card class="full-width">
        <q-card-section class="text-center q-pb-none">
          <div class="text-subtitle1 text-weight-bold">{{ props.item.lottery_type.name }}</div>
          <div class="text-caption text-grey">自动甩单金额配置</div>
        </q-card-section>
        <q-card-section>
          <label class="row q-pa-sm">
            <span class="col">不限制金额</span>
            <q-radio v-model="dialogForm.limit_money" :val="false" size="sm" dense/>
          </label>
          <label class="row q-pa-sm">
            <span class="col">限制金额</span>
            <q-radio v-model="dialogForm.limit_money" :val="true" size="sm" dense/>
          </label>
          <div v-if="dialogForm.limit_money" class="row q-pa-sm flex-center q-gutter-x-sm">
            <div class="col-4"><q-input v-model="dialogForm.money_min" suffix="元"
              dense
              placeholder="最低金额"
              input-class="text-center" /></div>
            <span> — </span>
            <div class="col-4"><q-input v-model="dialogForm.money_max" suffix="元"
              dense
              placeholder="最高金额"
              input-class="text-center" /></div>
          </div>
        </q-card-section>
        <q-separator size="0.5px" />
        <q-card-actions align="stretch" class="row">
          <q-btn
            color=""
            class="col"
            unelevated=""
            flat
            @click="setting = false"
            >取消</q-btn
          >
          <q-btn
            color="primary"
            class="col"
            unelevated=""
            flat
            @click="submit"
            >确认</q-btn
          >
        </q-card-actions>
      </q-card>
  </q-dialog>
</template>
<script setup>
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 options = [{label:'自动甩单',value:1},{label:'手动甩单',value:2}]
const $q = useQuasar();
const store = useSelfStore()
const emits = defineEmits(['update:item', 'delete'])
const props = defineProps({
  item: {
    type: Object,
    default: function () {
      return {}
    }
  },
  cooperateType: {
    type: String,
    default: function () {
      return 'entrust'
    }
  },
  shopCooperateId:{}
})

function audit(audit_state){
  if(audit_state === 2){
    $q.dialog({
    cancel: true,
    title:`拒绝合作彩种申请`,
    message:'清输入拒绝原因',
    prompt: {
      model: '',
    }
  }).onOk((val) => {
    auditPartnerLottery({audit_state, audit_message : val })
  });
  return
  }
  auditPartnerLottery({audit_state,audit_message:'同意' })
}
function auditPartnerLottery(data){
  data.shop_cooperate_lottery_id = props.item.id
  api.auditPartnerLottery(data).then((res) => {
    $q.notify({ type: "positive", message: (res.audit_state == 1? '同意':'拒绝') + '合作彩种申请成功' });
    emits('update:item',{...props.item,...res})
    store.refresh()
  })
  .catch((e) => {
    $q.notify({ type: "negative", message: e.message });
  });
}
function updatePartnerLottery(data){
  data.shop_cooperate_id = props.item.shop_cooperate_id
  data.shop_cooperate_lottery_id = props.item.id
  api.updatePartnerLottery(data).then((res) => {
    const item = {...props.item,...data,...res}
    $q.notify({ type: "positive", message: '修改合作彩种成功' });
    emits('update:item',item)
    // if(!item.opened){
    //   emits("delete",item)
    // }
    setting.value = false
  })
 .catch((e) => {
  $q.notify({ type: "negative", message: e.message });
  });
}

function unbindPartnerLottery(){
  api.unbindPartnerLottery({
    shop_cooperate_id : props.item.shop_cooperate_id,
    shop_cooperate_lottery_id : props.item.id
  }).then((res) => {
    $q.notify({ type: "positive", message: '解绑合作彩种成功' });
    emits("delete",props.item)
  })
  .catch((e) => {
    $q.notify({ type: "negative", message: e.message });
  });
}
const setting = ref(false)
const dialogForm = reactive({
  limit_money:false,
  money_max:'',
  money_min:'',
  order_method:''
})
function openSetting(order_method){
  if(order_method == 2){
    if(props.item.order_method != 2){
    $q.dialog({
      title: "",
      message: "确定将该彩种设为手动甩单？",
      cancel:true
    }).onOk(() => {
      updatePartnerLottery({order_method})
    });
  }
  return
  }
  dialogForm.order_method = order_method
  dialogForm.money_min = props.item.money_min
  dialogForm.money_max = props.item.money_max
  dialogForm.limit_money = props.item.limit_money
  setting.value = true
}
function submit(){
  if(dialogForm.limit_money){
    if(dialogForm.money_min*1<0){
      return $q.notify('最低金额不能小于0！')
    }
    if(dialogForm.money_max*1<0){
      return $q.notify('最高金额不能小于0！')
    }
    if(dialogForm.money_max*1<=dialogForm.money_min*1){
      return $q.notify('最高金额不能小于最低金额！')
    }
  }
  updatePartnerLottery({
    order_method: dialogForm.order_method,
    limit_money:dialogForm.limit_money,
    money_min:dialogForm.money_min,
    money_max:dialogForm.money_max
  })
}
</script>
<style lang="scss" scoped>
.unbind-btn{
  background:red;
  position:absolute;
  top:0;
  right:0;
  padding:0 4px 0 10px;
  color:white;
  border-radius: 0 0 0 20px;
  font-size: 12px;
  display: flex;
  align-items: center;
}
</style>
