<template>
  <!-- 对话框表单 -->
  <el-dialog
    custom-class="ba-operate-dialog"
    :close-on-click-modal="false"
    :model-value="baTable.form.operate ? true : false"
    @close="baTable.toggleForm"
    width="800px"
  >
    <template #header>
      <div class="title" v-drag="['.ba-operate-dialog', '.el-dialog__header']" v-zoom="'.ba-operate-dialog'">
        {{ baTable.form.operate ? baTable.form.operate == "edit" ? "编辑" : "添加" : "无标题" }}
      </div>
    </template>
    <el-scrollbar v-loading="baTable.form.loading" class="ba-table-form-scrollbar">
      <div
        class="ba-operate-form"
        :class="'ba-' + baTable.form.operate + '-form'"
        :style="'width: calc(100% - ' + baTable.form.labelWidth! / 2 + 'px)'"
      >
        <el-form
          ref="formRef"
          @keyup.enter="baTable.onSubmit(formRef)"
          :model="baTable.form.items"
          label-position="right"
          :label-width="baTable.form.labelWidth + 'px'"
          :rules="rules"
          v-if="!baTable.form.loading"
        >
          <el-form-item prop="couponType" label="优惠券类型">
            <el-radio-group class="couponType" v-model="baTable.form.items!.couponType">
              <el-radio :label="0" border>抵扣券</el-radio>
              <el-radio :label="1" border>折扣券</el-radio>
              <el-radio :label="2" border>特价券</el-radio>
              <!--              <el-radio :label="3" border>满减券</el-radio>-->
            </el-radio-group>
          </el-form-item>
          <el-form-item prop="couponName" label="优惠券标题">
            <el-input v-model="baTable.form.items!.couponName" placeholder="请输入优惠券标题"></el-input>
          </el-form-item>
          <el-form-item prop="sceneType" label="使用场景">
            <el-radio-group v-model="baTable.form.items!.sceneType">
              <el-radio :label="0">不限定</el-radio>
              <el-radio :label="1">首页投放</el-radio>
              <el-radio :label="2">商家派发</el-radio>
              <el-radio :label="3">营销活动</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item v-if="baTable.form.items!.couponType==0" prop="deductionAmount" label="抵扣金额">
            <el-input v-model="baTable.form.items!.deductionAmount" placeholder="请输入数字"></el-input>
          </el-form-item>
          <el-form-item v-if="baTable.form.items!.couponType==1" prop="discountValue" label="折扣值">
            <el-input v-model="baTable.form.items!.discountValue"
                      placeholder="请输入0-1数字，最多保留2位小数"></el-input>
          </el-form-item>
          <el-form-item v-if="baTable.form.items!.couponType==2" prop="specialOffer" label="特价金额">
            <el-input v-model="baTable.form.items!.specialOffer" placeholder="请输入数字"></el-input>
          </el-form-item>
          <el-form-item prop="issuesNumber" label="发行量">
            <el-input v-model="baTable.form.items!.issuesNumber" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item prop="minimumCharge" label="最低消费">
            <el-radio-group v-model="baTable.form.items!.minimumCharge">
              <el-radio :label="0">无门槛</el-radio>
              <el-radio :label="baTable.form.items!.minimumCharge==0?1:baTable.form.items!.minimumCharge">满
                <el-input style="width: 100px"
                          v-model="baTable.form.items!.minimumCharge" placeholder="请输入数字"></el-input>
                元可用
              </el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item prop="limitedUse" label="是否限定使用">
            <el-radio-group v-model="baTable.form.items!.limitedUse">
              <el-radio :label="0">否</el-radio>
              <el-radio :label="1">是</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item prop="validityType" label="有效期类型">
            <el-radio-group v-model="baTable.form.items!.validityType">
              <el-radio :label="0">自定义</el-radio>
              <el-radio :label="1">当日计时</el-radio>
              <el-radio :label="2">次日计时</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item v-if="baTable.form.items!.validityType==0" label="有效时间">
            <el-date-picker value-format="YYYY-MM-DD hh:mm:ss" format="YYYY-MM-DD hh:mm:ss"
                            v-model="baTable.form.items!.validityBeginTime" placeholder="开始时间"></el-date-picker>
            <span style="margin: 0px 10px">--</span>
            <el-date-picker value-format="YYYY-MM-DD hh:mm:ss" format="YYYY-MM-DD hh:mm:ss"
                            v-model="baTable.form.items!.validityEndTime" placeholder="结束时间"></el-date-picker>
          </el-form-item>
          <el-form-item v-else prop="validityPeriod" label="有效期天数">
            <el-input v-model="baTable.form.items!.validityPeriod" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item prop="couponStatus" label="状态">
            <el-radio-group v-model="baTable.form.items!.couponStatus">
              <el-radio :label="0">可用</el-radio>
              <el-radio :label="1">停用</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="使用说明">
            <el-input type="textarea" v-model="baTable.form.items!.instruction" placeholder="请输入"></el-input>
          </el-form-item>
        </el-form>
      </div>
    </el-scrollbar>
    <template #footer>
      <div :style="'width: calc(100% - ' + baTable.form.labelWidth! / 1.8 + 'px)'">
        <el-button @click="baTable.toggleForm('')">取消</el-button>
        <el-button v-blur :loading="baTable.form.submitLoading" @click="baTable.onSubmit(formRef)"
                   type="primary">
          {{ baTable.form.operateIds && baTable.form.operateIds.length > 1 ? "保存并编辑下一项" : "保存" }}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, inject, onMounted, watch } from "vue";

import type baTableClass from "/@/utils/baTable";
import { regularPassword, validatorAccount, validatorMobile } from "/@/utils/validate";
import type { ElForm, FormItemRule } from "element-plus";
import FormItem from "/@/components/formItem/index.vue";
import { getOrgTree, getEmployees } from "/@/api/backend/auth/account";
import { authGroup, sysConfig } from "/@/api/controllerUrls";
import editor from "/@/components/editor/index.vue";
import request from "/@/api/request";
import { ElNotification } from "element-plus/es";
import { document } from "/@/api/controllerUrls";
import pictureUpload from "/@/components/pictureUpload/index.vue";

const formRef = ref<InstanceType<typeof ElForm>>();
const baTable = inject("baTable") as baTableClass;

onMounted(() => {
  // getDocList()
});

let docList = ref([]);

let minimumCharge = ref();

function getDocList() {
  request.index(document, undefined, "list").then(res => {
    docList.value = res.data;
  });
}


const rules: Partial<Record<string, FormItemRule[]>> = reactive({
  couponName: [{ required: true, message: "请输入", trigger: "blur" }],
  sceneType: [{ required: true, message: "请输入", trigger: "blur" }],
  couponType: [{ required: true, message: "请输入", trigger: "blur" }],
  issuesNumber: [{ required: true, message: "请输入", trigger: "blur" }],
  minimumCharge: [{ required: true, message: "请输入", trigger: "blur" }],
  limitedUse: [{ required: true, message: "请输入", trigger: "blur" }],
  validityType: [{ required: true, message: "请输入", trigger: "blur" }],
  couponStatus: [{ required: true, message: "请输入", trigger: "blur" }],
  deductionAmount: [{ required: true, message: "请输入", trigger: "blur" }],
  discountValue: [{ required: true, message: "请输入", trigger: "blur" }],
  specialOffer: [{ required: true, message: "请输入", trigger: "blur" }],
  validityPeriod: [{ required: true, message: "请输入", trigger: "blur" }],

});


</script>

<style scoped lang="scss">
.avatar-uploader {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-radius: var(--el-border-radius-small);
  box-shadow: var(--el-box-shadow-light);
  border: 1px dashed var(--color-sub-1);
  cursor: pointer;
  overflow: hidden;
  width: 110px;
  height: 110px;
}

.avatar-uploader:hover {
  border-color: var(--color-primary);
}

.avatar {
  width: 110px;
  height: 110px;
  display: block;
}

.image-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

:deep(.couponType .el-radio__input ) {
  display: none;
}
</style>
