<template>
  <div>
    <el-dialog title="权益设置" v-model="dialogVisible">
      <div>
        <div
          class="text-lg mb-4 font-bold bg-gray-200 text-red-400 py-4 px-2 rounded"
        >
          提示：修改项目内容或者服务次数，只会对后续绑定用户生效，已绑定用户延用绑定那一刻的配置，不会因为修改而更改
        </div>
        <el-space direction="vertical" alignment="flex-start" :size="0">
          <div class="text-base font-bold mb-2">上传报告</div>
          <div class="text-sm">
            <el-text
              >启用该服务：
              <el-switch
                v-model="form.uploadReport"
                :inactive-value="0"
                :active-value="1"
            /></el-text>
          </div>
          <div class="text-sm">
            <el-text>服务有效期内可上传：</el-text>
            <el-radio-group v-model="uploadReportType">
              <el-radio :label="-1">不限次数</el-radio>
              <el-radio :label="1">有限次数</el-radio>
            </el-radio-group>
            <el-input-number
              class="ml-1"
              v-model="form.uploadReportTimes"
              :min="0"
            />
            次
          </div>
          <div class="mt-2">
            <span class="text-xs">说明：个人和家人公用该上传次数设置</span>
          </div>
        </el-space>
        <el-divider />
        <el-space direction="vertical" alignment="flex-start" :size="0">
          <div class="text-base font-bold mb-2">添加家人</div>
          <div class="text-sm">
            <el-text
              >启用该服务：
              <el-switch
                v-model="form.addFamily"
                :active-value="1"
                :inactive-value="0"
            /></el-text>
          </div>
          <div class="text-sm">
            <el-text>服务有效期内可添加：</el-text>
            <el-input-number v-model="form.addFamilyTimes" :min="0" />
            个家人
          </div>
          <div class="mt-2">
            <span class="text-xs"
              >说明：该可添加人数与用户实际已添加人数共享，例如该会员卡设置为3个家人，而用户在绑定该卡时已创建过2个家人，则该用户该卡有效期内还能再添加1个家人</span
            >
          </div>
        </el-space>
        <el-divider />
        <el-space direction="vertical" alignment="flex-start" :size="0">
          <div class="text-base font-bold mb-2">私人健康管家</div>
          <div class="text-sm mb-2">
            <el-text
              >启用服务：
              <el-switch
                v-model="form.healthManager"
                :inactive-value="0"
                :active-value="1"
            /></el-text>
          </div>
          <div class="text-sm flex">
            <span class="text-sm flex-shrink-0">配置：</span>
            <!-- <Editor v-model="form.weComContent" /> -->
            <el-upload
              class="avatar-uploader"
              :show-file-list="false"
              :before-upload="beforeAvatarUpload"
              :http-request="simpleImgHttpUpload"
            >
              <img
                v-if="form.weComContent"
                :src="form.weComContent"
                class="avatar"
              />
              <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
            </el-upload>
          </div>
        </el-space>
      </div>
      <template #footer>
        <div>
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="onSubmit">确 定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import { request, uploadToOSS } from "@/utils";
import { ElMessage } from "element-plus";
import { Plus } from "@element-plus/icons-vue";

import type { UploadProps } from "element-plus";

import { ref, computed, defineProps, defineEmits, watch, reactive } from "vue";
const props = defineProps({
  show: {
    type: Boolean,
    default: false
  },
  rowData: {
    type: Object,
    default: () => {}
  }
});
const emits = defineEmits(["update:show", "success"]);
const dialogVisible = computed({
  get() {
    return props.show;
  },
  set(n) {
    emits("update:show", n);
  }
});

watch(
  () => dialogVisible.value,
  n => {
    if (n) {
      console.log("props.rowData", props.rowData);

      if (props.rowData?.id) {
        form.id = props.rowData?.id;
        form.uploadReport = props.rowData?.uploadReport;
        form.uploadReportTimes = props.rowData?.uploadReportTimes;
        form.addFamily = props.rowData?.addFamily;
        form.addFamilyTimes = props.rowData?.addFamilyTimes;
        form.healthManager = props.rowData?.healthManager;
        form.weComContent = props.rowData?.weComContent;
        uploadReportType.value =
          props.rowData.uploadReportTimes === -1 ? -1 : 1;
      }
    }
  }
);

const form = reactive({
  id: undefined,
  uploadReport: 1, //是否开启上传：0:关闭；1:打开
  uploadReportTimes: 0, //可上传次数：-1:不限次数；
  addFamily: 0,
  addFamilyTimes: 0, // 可添加家人数
  healthManager: 0, //是否开启私人健康管家
  weComContent: "" // 企业微信富文本
});
const uploadReportType = ref(-1);
const onSubmit = () => {
  request
    .post(`walletService/mechanism/membershipCard/systemInterest`, {
      ...form,
      uploadReportTimes:
        uploadReportType.value === -1 ? -1 : form.uploadReportTimes
    })
    .then(resp => {
      ElMessage.success(resp.message);
      dialogVisible.value = false;
      emits("success");
    });
};
const beforeAvatarUpload: UploadProps["beforeUpload"] = rawFile => {
  if (!["image/png", "image/jpeg"].includes(rawFile.type)) {
    ElMessage.error("Avatar picture must be JPG format!");
    return false;
  } else if (rawFile.size / 1024 / 1024 > 50) {
    ElMessage.error("图片不能超过 50MB!");
    return false;
  }
  return true;
};

const simpleImgHttpUpload = options => {
  uploadToOSS(options.file, options.file.name).then(resp => {
    form.weComContent = resp;
  });
};
</script>
<style lang="scss">
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
