<template>
  <el-dialog v-model="dialogVisible" :title="form.id ? '编辑推送任务' : '添加推送任务'" width="1200px" top="4vh"
    @closed="formRef.resetFields()">
    <div class="scroll" ref="scrollRef">
      <el-form ref="formRef" :model="form" :rules="formRules" label-width="160px">
        <div class="title">选择目标用户</div>
        <el-form-item label-width="0">
          <div class="shop_user_wrap">
            <div class="item">
              <el-form-item label="发送对象">
                <el-radio-group v-model="form.userType">
                  <el-radio label="全部已关注公众号用户" :value="1"></el-radio>
                  <el-radio label="自定义用户" :value="2"></el-radio>
                </el-radio-group>
              </el-form-item>
              <div v-if="form.userType == 2">
                <el-form-item label="性别">
                  <el-checkbox v-model="form.pushEventUser.sexMan" label="男" :true-value="1"
                    :false-value="0"></el-checkbox>
                  <el-checkbox v-model="form.pushEventUser.sexWoman" label="女" :true-value="1"
                    :false-value="0"></el-checkbox>
                  <el-checkbox v-model="form.pushEventUser.sexUnknown" label="未知" :true-value="1"
                    :false-value="0"></el-checkbox>
                </el-form-item>
                <el-form-item label="下单">
                  <el-checkbox v-model="form.pushEventUser.noOrder" label="从未下单" :true-value="1"
                    :false-value="0"></el-checkbox>
                  <el-checkbox v-model="form.pushEventUser.oneOrder" label="下过1单" :true-value="1"
                    :false-value="0"></el-checkbox>
                  <el-checkbox v-model="form.pushEventUser.fiveOrder" label="下过5单及以上" :true-value="1"
                    :false-value="0"></el-checkbox>
                </el-form-item>
                <el-form-item label="下单时间">
                  <el-checkbox v-model="form.pushEventUser.orderTimeToday" label="今天" :true-value="1"
                    :false-value="0"></el-checkbox>
                  <el-checkbox v-model="form.pushEventUser.orderTimeYesterday" label="昨天" :true-value="1"
                    :false-value="0"></el-checkbox>
                  <el-checkbox v-model="form.pushEventUser.orderTimeTwoWeeks" label="2周内" :true-value="1"
                    :false-value="0"></el-checkbox>
                  <el-checkbox v-model="form.pushEventUser.orderTimeMoreThanTwoWeeks" label="2周前" :true-value="1"
                    :false-value="0"></el-checkbox>
                </el-form-item>
                <el-form-item label="会员">
                  <el-radio-group v-model="form.pushEventUser.isVip">
                    <el-radio label="全部" value=""></el-radio>
                    <el-radio label="会员" :value="1"></el-radio>
                    <el-radio label="非会员" :value="0"></el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="充值">
                  <el-radio-group v-model="form.pushEventUser.isRecharge">
                    <el-radio label="全部" value=""></el-radio>
                    <el-radio label="从未充值过" :value="0"></el-radio>
                    <el-radio label="充值过" :value="1"></el-radio>
                  </el-radio-group>
                </el-form-item>
              </div>
              <el-form-item label-width="160" style="margin-top: 50px;">
                <el-button type="primary" icon="Search" :loading="userTableData.loading"
                  @click="getPushEventUserAjax">搜索</el-button>
              </el-form-item>
            </div>
            <div class="item2">
              <div class="user_wrap" v-loading="userTableData.loading">
                <div class="user_header">
                  <span>预计发送</span>
                  <span>{{ form.estimateNum }}人</span>
                </div>
                <div class="list">
                  <div class="item" v-for="item in userTableData.list" :key="item.id">
                    <div class="avatar">
                      <el-avatar :size="50" :src="item.headImg" />
                    </div>
                    <div class="info">
                      <div class="name">{{ item.nickName }}</div>
                      <div class="info_wrap">
                        <span>余额：{{ item.amount }}</span>
                        <span>积分：{{ item.accountPoints }}</span>
                        <span>手机号：{{ item.phone }}</span>
                      </div>
                    </div>
                  </div>
                </div>
                <div style="display: flex;justify-content: center;padding-bottom: 14px;">
                  <el-pagination v-model:current-page="userTableData.page" v-model:page-size="userTableData.pageSize"
                    :page-sizes="[100, 200, 300, 400]" background layout="prev, pager, next"
                    :total="userTableData.total" @size-change="handleSizeChange"
                    @current-change="handleCurrentChange" />
                </div>
              </div>
            </div>
          </div>
        </el-form-item>
        <div class="title">发送内容</div>
        <el-form-item label="商家名称">
          <el-input placeholder="请输入文字" v-model="form.shopName" disabled :maxlength="20"
            style="width: 300px;"></el-input>
        </el-form-item>
        <el-form-item label="商家地址" prop="address">
          <el-input placeholder="请输入文字" type="textarea" :rows="4" v-model="form.address" :maxlength="10"
            style="width: 300px;"></el-input>
        </el-form-item>
        <el-form-item label="活动描述" prop="activityDetail">
          <el-input type="textarea" v-model="form.activityDetail" :rows="4" placeholder="请输入活动描述" :maxlength="20"
            style="width: 300px;"></el-input>
        </el-form-item>
        <el-form-item label="活动时间" prop="activityTime">
          <el-date-picker v-model="form.activityTime" type="datetime" placeholder="请选择时间" format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss" style="width: 300px;" />
        </el-form-item>
        <el-form-item label="赠送优惠券">
          <div class="column">
            <div class="center" v-for="(item, index) in selectCoupons" :key="item.id">
              <el-select v-model="item.id" @change="selectCouponChnge($event, index)">
                <el-option :label="val.title" :value="val.id" v-for="val in couponList" :key="val.id"></el-option>
              </el-select>
              <el-input v-model="item.num" input-style="text-align:center;">
                <template #append>数量</template>
              </el-input>
              <div class="del" @click="selectCoupons.splice(index, 1)">
                <el-icon size="18" color="#FF2F2F">
                  <Delete />
                </el-icon>
              </div>
            </div>
            <div class="center">
              <el-button link type="primary" icon="CirclePlus" @click="addCoupon">新增券</el-button>
            </div>
          </div>
        </el-form-item>
        <div class="title">发送设置</div>
        <el-form-item label="发送时间">
          <el-radio-group v-model="form.sendType">
            <el-radio label="立即发送" :value="1"></el-radio>
            <el-radio label="定时发送" :value="2"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="选择时间" v-if="form.sendType == 2" prop="sendTime">
          <el-date-picker v-model="form.sendTime" type="datetime" placeholder="请选择发送时间" format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss" :min-date="minTime" :teleported="false" style="width: 220px;"
            @open="refreshMinTime" @change="handleChange" />
        </el-form-item>
        <el-form-item label="预计发送人数">
          {{ form.estimateNum }}人
        </el-form-item>
        <!-- <el-form-item label="短信单价">
          {{ notePirce }}元/条
        </el-form-item>
        <el-form-item label="预计费用">
          ¥{{ predictPrice }}
        </el-form-item>
        <el-form-item label="账户余额">
          ¥{{ multiplyAndFormat(shopBalance.money || 0) }}
          <span v-if="predictPrice > shopBalance.money"
            style="color:#FF2F2F;margin-left: 14px;">余额不足，请联系管理员充值后再发送</span>
        </el-form-item> -->
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" :disabled="form.estimateNum <= 0" :loading="loading" @click="submitHandle">确
          定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import _ from 'lodash'
import { multiplyAndFormat } from '@/utils'
import { ref, reactive, onMounted, computed, nextTick } from 'vue'
import { getAcPushEventUser, couponPage, acPushEventPost, smsMoneyGet, smsMoneyGetFee } from '@/api/coupon'

const dialogVisible = ref(false)
const smsPushEventUserObj = ref({
  sexMan: 1,
  sexWoman: 1,
  sexUnknown: 1,
  noOrder: 1,
  oneOrder: 0,
  fiveOrder: 0,
  orderTimeToday: 0,
  orderTimeYesterday: 0,
  orderTimeTwoWeeks: 0,
  orderTimeMoreThanTwoWeeks: 0,
  isVip: '',
  isRecharge: '',
  vipLevel: 0,
  vipLevelId: 0
})

const form = ref({
  id: '',
  shopId: localStorage.getItem('shopId') || '',
  userType: 1,
  pushEventId: '',
  estimateNum: 0, // 预计人数
  coupon: '',
  shopName: '',
  activityDetail: '',
  activityTime: '',
  address: '',
  sendType: 1,
  sendTime: '',
  pushEventUser: { ...smsPushEventUserObj.value }
})

const resetForm = ref({})

const formRules = ref({
  address: [
    {
      required: true,
      validator: (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入商家地址'));
          return;
        }
        if (value && value.length > 10) {
          callback(new Error('最多10个字'));
          return;
        }
        callback();
      },
      trigger: 'blur'
    },
  ],
  activityDetail: [
    { required: true, message: '请输入活动描述', trigger: 'blur' },
  ],
  activityTime: [
    { required: true, message: '请选择活动时间', trigger: 'change' },
  ],
  coupon: [
    {
      validator: (rule, value, callback) => {
        // value 是 selectCoupons.value 的 JSON 字符串
        let coupons = selectCoupons.value;
        if (coupons.length === 0) {
          // 没有添加优惠券，不校验
          callback();
        } else {
          // 校验每个优惠券
          for (let i = 0; i < coupons.length; i++) {
            if (!coupons[i].id) {
              callback(new Error('请选择优惠券'));
              return;
            }
            if (!coupons[i].num || !Number.isInteger(Number(coupons[i].num)) || Number(coupons[i].num) <= 0) {
              callback(new Error('请输入大于零的优惠券数量'));
              return;
            }
          }
          callback();
        }
      },
      trigger: 'change'
    }
  ],
  sendTime: [
    {
      required: (form) => form.sendType == 2,
      message: '请选择发送时间',
      trigger: 'change'
    }
  ]
})

// 最小可选时间（响应式）
const minTime = ref(new Date());

// 刷新最小时间为当前时间
const refreshMinTime = () => {
  minTime.value = new Date(); // 每次打开面板，强制更新为当前时间
};

// 变更时二次校验（防止极端情况）
const handleChange = (value) => {
  if (!value) return;
  const selectedTime = new Date(value).getTime();
  const currentTime = new Date().getTime();
  if (selectedTime < currentTime) {
    form.value.sendTime = '';
    ElMessage.warning('选择的时间不能早于当前时间');
  }
};

// 开始提交
const formRef = ref(null)
const emits = defineEmits(["success"]);
const loading = ref(false);

function submitHandle() {
  formRef.value.validate(async (valid) => {
    try {
      if (valid) {
        loading.value = true;
        let data = { ...form.value }
        data.coupon = JSON.stringify(selectCoupons.value);
        // console.log(data.json);
        // return
        await acPushEventPost(data, data.id ? 'put' : 'post');
        emits("success");
        dialogVisible.value = false;

        ElNotification({
          title: '注意',
          message: '保存成功',
          type: 'success'
        })

        form.value = { ...resetForm.value }
      }
    } catch (err) {
      console.log(err);
    }
    loading.value = false;
  });
}

// 获取用户列表
const notePirce = ref(0); // 短信单价

// 预计费用
const predictPrice = computed(() => {
  return multiplyAndFormat(form.value.estimateNum, notePirce.value);
})

const userTableData = reactive({
  loading: false,
  list: [],
  total: 0,
  page: 1,
  pageSize: 5
})

// 获取推送用户
async function getPushEventUserAjax() {
  try {
    userTableData.loading = true
    const res = await getAcPushEventUser({
      ...form.value.pushEventUser,
      isAll: form.value.userType,
      shopId: form.value.shopId,
      page: userTableData.page,
      size: userTableData.pageSize
    })
    userTableData.list = res.records
    userTableData.total = res.totalRow
    form.value.estimateNum = res.totalRow

    console.log(form.value);

  } catch (error) {
    console.log(error);
  }
  setTimeout(() => {
    userTableData.loading = false
  }, 500);
}

// 分页大小发生变化
function handleSizeChange(e) {
  userTableData.pageSize = e;
  getPushEventUserAjax();
}

// 分页发生变化
function handleCurrentChange(e) {
  userTableData.page = e;
  getPushEventUserAjax();
}

// 获取商户短信余额
const shopBalance = ref('')
async function smsMoneyGetAjax() {
  try {
    const res = await smsMoneyGet()
    shopBalance.value = res
  } catch (error) {
    console.log(error);
  }
}

// 获取短信单价
async function smsMoneyGetFeeAjax() {
  try {
    const res = await smsMoneyGetFee()
    console.log('获取短信单价', res);
    notePirce.value = +res.paramValue
  } catch (error) {
    console.log(error);
  }
}

// 显示弹窗
const scrollRef = ref(null);
async function show(obj, temp = null) {
  dialogVisible.value = true
  nextTick(() => {
    if (scrollRef.value) {
      setTimeout(() => {
        scrollRef.value.scrollTop = 0;
      }, 50);
    }
  });

  // smsMoneyGetAjax()
  // smsMoneyGetFeeAjax()

  if (obj && obj.id) {
    form.value = { ...obj }
    form.value.userType = +obj.userType
    if (obj.userType == 1) {
      form.value.pushEventUser = { ...smsPushEventUserObj.value }
    }

    // 解析优惠券
    if (form.value.coupon) {
      try {
        const coupons = JSON.parse(form.value.coupon)
        if (Array.isArray(coupons)) {
          selectCoupons.value = coupons
        }
      } catch (error) {
        console.log(error);
      }
    } else {
      selectCoupons.value = []
    }
  } else {
    form.value = { ...resetForm.value }
    form.value.shopName = shopInfo.value.shopName || ''
    form.value.address = shopInfo.value.address || ''
    selectCoupons.value = []
    form.value.estimateNum = userTableData.total
  }
  getPushEventUserAjax()
}

// 从本地获取商户信息
const shopInfo = ref(JSON.parse(localStorage.getItem("userInfo")));

// 选择优惠券开始
const couponList = ref([])
const selectCoupons = ref([]);
const couponObj = ref({ id: '', num: 1, title: '' });

// 选择优惠券添加标题
function selectCouponChnge(e, index) {
  const coupon = couponList.value.find(item => item.id === e)
  if (coupon) {
    selectCoupons.value[index].title = coupon.title
  }
}

// 新增优惠券
function addCoupon() {
  selectCoupons.value.push(_.cloneDeep(couponObj.value));
}

// 获取优惠券列表
async function couponPageAjax() {
  try {
    const res = await couponPage({
      shopId: form.value.shopId,
      page: 1,
      size: 500
    })
    couponList.value = res.records
  } catch (error) {
    console.log(error);
  }
}
// 选择优惠券结束

defineExpose({
  show
})

onMounted(() => {
  resetForm.value = { ...form.value }
  couponPageAjax()
})
</script>

<style scoped lang="scss">
.title {
  color: #000;
  padding: 14px;
  background-color: #f8f8f8;
  margin-bottom: 14px;
  font-size: 16px;
}

.scroll {
  height: 76vh;
  padding-bottom: 60px;
  overflow-y: auto;
}

.center {
  display: flex;
  align-items: center;
  gap: 14px;

  &:not(:first-child) {
    margin-top: 14px;
  }

  .del {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
}

.column {
  display: flex;
  flex-direction: column;
}

.shop_user_wrap {
  width: 100%;
  display: flex;
  gap: 14px;

  .item {
    flex: 1;

    .temp_preview {
      border: 1px solid #D9D9D9;
      border-radius: 6px;
      overflow: hidden;
      background-color: #F8F8F8;
      padding: 14px;

      .temp_preview_title {
        font-size: 16px;
        font-weight: bold;
        line-height: 16px;
      }

      .temp_preview_content {
        font-size: 14px;
        color: #666;
        line-height: 16px;
      }
    }
  }

  .item2 {
    width: 400px;
    margin-right: 50px;

    .user_wrap {
      border: 1px solid #ddd;
      border-radius: 6px;
      overflow: hidden;

      .user_header {
        padding: 20px 14px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: #F8F8F8;

        span {
          font-size: 16px;
          color: #333;
          font-weight: bold;
        }
      }

      .list {
        --count: 5;
        --itemHeight: 70px;
        height: calc(var(--count) * var(--itemHeight) + 30px);

        .item {
          height: var(--itemHeight);
          border-bottom: 1px solid #ddd;
          display: flex;
          align-items: center;
          padding: 0 14px;

          .avatar {
            display: flex;
            align-items: center;
          }

          .info {
            flex: 1;
            margin-left: 10px;

            .name {
              font-size: 14px;
              color: #333;
              font-weight: bold;
            }

            .info_wrap {
              margin-top: 4px;
              font-size: 12px;
              color: #999;
              display: flex;

              span {
                &:nth-child(1) {
                  flex: 1;
                }

                &:nth-child(2) {
                  flex: 1;
                }

                &:nth-child(3) {
                  flex: 1.5;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>