<template>
  <el-drawer
    :model-value="modelValue"
    title="搭配優惠代碼功能說明"
    direction="ltr"
    size="50%"
    @update:model-value="$emit('update:modelValue', $event)"
  >
    <template #default>
      <article>
        <el-row class="tw-space-y-5">
          <el-col>
            <el-row class="tw-items-center">
              <el-col :span="3" class="tw-font-light">優惠代碼</el-col>
              <el-col :span="21">
                <el-input
                  :input-style="{ fontSize: 'medium' }"
                  size="large"
                  :model-value="couponCode"
                  @update:model-value="$emit('update:couponCode', $event)"
                />
              </el-col>
            </el-row>
          </el-col>

          <el-col>
            <el-row class="tw-items-center">
              <el-col :span="3" class="tw-font-light">推薦代碼</el-col>
              <el-col :span="21">
                <el-input
                  :input-style="{ fontSize: 'medium' }"
                  size="large"
                  :model-value="affiliateCode"
                  @update:model-value="$emit('update:affiliateCode', $event)"
                />
              </el-col>
            </el-row>
          </el-col>

          <el-col>
            <el-radio-group
              :model-value="couponType"
              @update:model-value="$emit('update:couponType', $event)"
            >
              <el-row>
                <el-col :span="8" class="tw-pb-3">
                  <el-radio label="優惠代碼" size="large" border>優惠代碼</el-radio>
                </el-col>
                <el-col :span="8" class="tw-pb-3">
                  <el-radio label="推薦代碼" size="large" border>推薦代碼</el-radio>
                </el-col>
                <el-col :span="8" class="tw-pb-3">
                  <el-radio label="優惠代碼+推薦代碼" size="large" border>優惠代碼+推薦代碼</el-radio>
                </el-col>
                <el-col :span="8" class="tw-pb-3">
                  <el-radio label="行銷圖卡+優惠代碼" size="large" border>行銷圖卡+優惠代碼</el-radio>
                </el-col>
                <el-col :span="8" class="tw-pb-3">
                  <el-radio label="行銷圖卡+推薦代碼" size="large" border>行銷圖卡+推薦代碼</el-radio>
                </el-col>
                <el-col :span="8" class="tw-pb-3">
                  <el-radio label="行銷圖卡+優惠代碼+推薦代碼" size="large" border
                    >行銷圖卡+優惠代碼+推薦代碼</el-radio
                  >
                </el-col>
              </el-row>
            </el-radio-group>
          </el-col>

          <el-col>
            <p>網址：</p>
            <a class="tw-text-blue-600" :href="cardCodeUrl">{{ cardCodeUrl }}</a>
          </el-col>
        </el-row>
      </article>
    </template>
  </el-drawer>
</template>

<script setup>
defineProps({
  modelValue: {
    type: Boolean,
    default: false,
  },
  couponType: {
    type: String,
    default: "",
  },
  couponCode: {
    type: String,
    default: "",
  },
  affiliateCode: {
    type: String,
    default: "",
  },
  cardCodeUrl: {
    type: String,
    default: "",
  },
})

defineEmits([
  "update:modelValue",
  "update:couponType",
  "update:couponCode",
  "update:affiliateCode",
])
</script>
