<template>
  <div>
    <el-dialog title="推广码" v-model="dialogVisible" width="60%">
      <div>
        <h3 class="mb-4">推广者名称： {{ rowData.name }}</h3>
        <el-table :data="state.list" style="width: 100%" border>
          <el-table-column prop="memberCardName" label="会员卡名称" :formatter="v => v.memberCardName || '-'"> </el-table-column>
          <el-table-column prop="originPrice" :formatter="v => (v.originPrice / 100).toFixed(2)" label="推广原价">
          </el-table-column>
          <el-table-column prop="price" :formatter="v => (v.price / 100).toFixed(2)" label="推广售价"> </el-table-column>
          <el-table-column prop="prop" label="操作">
            <template #default="{ row }">
              <el-space>
                <el-button
                  type="primary"
                  :icon="CopyDocument"
                  v-copy="`${H5_DOMAIN}/promotion/goods?promotionSiteId=${rowData.sn}&&promotionGoodsId=${row.sn}`"
                  link
                  >复制推广链接</el-button
                >
                <QRCodeShare ref="QRCodeShareRef">
                  <el-button
                    type="primary"
                    :icon="Download"
                    link
                    @click="
                      QRCodeShareRef.generateAndDownloadQRCode(
                        `${H5_DOMAIN}/promotion/goods?promotionSiteId=${rowData.sn}&&promotionGoodsId=${row.sn}`,
                        `推广者二维码--${rowData.name}--会员卡名称--${row.memberCardName}`
                      )
                    "
                  >
                    下载推广二维码</el-button
                  >
                </QRCodeShare>
              </el-space>
              <!-- <el-button type="primary" :icon="Download" link>
                下载推广二维码</el-button> -->
            </template>
          </el-table-column>
        </el-table>
      </div>
      <template #footer>
        <div>
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="onSubmit(formRef)">保 存</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
import { computed, defineProps, defineEmits, reactive, watch, ref } from "vue";
import { ElMessage, type FormInstance } from "element-plus";
import { promotionSiteUpdateOrCreate, getPromotionGoodsList } from "@/api/modules/promotion";
import { Download, CopyDocument } from "@element-plus/icons-vue";
import QRCodeShare from "./QRCodeShare.vue";
const props = defineProps({
  show: {
    type: Boolean,
    default: false
  },
  rowData: {
    type: Object,
    default: () => {
      return {};
    }
  }
});
const emits = defineEmits(["update:show", "success"]);
const QRCodeShareRef = ref();
const H5_DOMAIN = import.meta.env.VITE_APP_H5_DOMAIN as string;
const state = reactive({
  list: []
});
const dialogVisible = computed({
  get() {
    return props.show;
  },
  set(n) {
    emits("update:show", n);
  }
});
watch(dialogVisible, newVal => {
  if (newVal) {
    getList();
  }
});
const getList = async () => {
  let response = await getPromotionGoodsList({ id: props.rowData.id });
  state.list = response.data.list;
};
const onSubmit = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.validate(async valid => {
    if (!valid) {
      console.log("submit!");
      return;
    }
    let { message } = await promotionSiteUpdateOrCreate(form);
    ElMessage.success(message);
    dialogVisible.value = false;
    emits("success");
  });
};
</script>
