<!--
 * @Date: 2022-09-21 16:04:10
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2022-10-31 17:26:24
 * @FilePath: /swx/src/pages/createActivity/index.vue
 * @Description: 创建活动页面
-->
<template>
  <view>
    <van-cell-group inset>
      <van-field :value="org_type" label-class="label-class" input-class="input-class" label="主办方"
        :right-icon="icon_sel" placeholder="请选择活动主办方" placeholder-style="color: #999;" customStyle="" inputAlign=""
        maxlength="" type="text" @tap="show_org_popup=true" :required="true" :disabled="true" />
      <view class="divide-line"></view>
      <van-field :value="activity_name" label-class="label-class" input-class="input-class" label="活动主题" type="textarea"
        placeholder="请输入活动主题（最多30个字）" placeholder-style="color: #999;" :autosize="{ maxHeight: 80, minHeight: 20 }" customStyle="" inputAlign=""
        rightIcon="" :required="true" :maxlength="30" :border="false" @change="onChange" />
      <view class="divide-line"></view>
      <view class="form-item">
        <view class="form-item-title required">活动封面图<text class="sub">（图片比例16:9展示最佳）</text></view>
        <van-uploader v-if="!has_image" @after-read="afterRead">
          <view class="upload-box" :style="uploaderStyle">
            <van-icon :name="icon_upload" size="5rem" color="" class="upload-icon" />
          </view>
        </van-uploader>
        <view v-else class="upload-box" :style="uploaderStyle">
          <van-image fit="contain" :width="uploader_width" height="12rem" :src="uploader_image" />
          <van-icon name="clear" size="1.5rem" color="#000" class="upload-close" @tap="removeUploadImage" />
        </view>
      </view>
      <view class="divide-line"></view>
      <view class="form-item">
        <view class="form-item-title border">活动详情</view>
        <activity-editor name="editor" :showTabBar="true" placeholder="开始输入活动详情介绍" @on-input="onEditorInput" :htmlContent="html_content"></activity-editor>
      </view>
      <view class="divide-line"></view>
      <view class="form-item">
        <view class="form-item-title">报名信息<text class="sub">（ <text style="color: red;">*</text>为必填项，单击启用，长按修改）</text>
        </view>
      </view>
      <view class="sign-box">
        <view @tap="onTapSign(item)" @longpress="onLongPressSign(item)" v-for="(item, index) in signInfo" :key="index"
          class="sign-item" :class="{ 'checked': item.checked }"><text :class="{ 'required': item.is_require }">{{ item.label }}</text></view>
        <view class="sign-item" @tap="addSign">
          <van-icon name="plus" color="" />
        </view>
      </view>
      <view class="divide-line"></view>
      <view class="advanced-title">
        <view class="box">
          <text class="bg-gradient" style="font-size: 1.15rem;">高级设置</text>
        </view>
      </view>
      <view class="advanced-settings-modules">
        <!-- 活动时间 -->
        <timePickerData :start-time="startTime" :end-time="endTime" :default-time="defaultActivityTime" @result="onActivityTime">
          <van-field :value="activity_time" label-class="label-class-super" input-class="input-class" label="活动时间"
            :right-icon="icon_sel" input-align="right" placeholder="请选择" placeholder-style="color: #999;" customStyle=""
            maxlength="" type="" :border="true" :required="false" :disabled="true" />
        </timePickerData>
        <!-- 报名开始时间 -->
        <timePickerData :start-time="startTime" :end-time="endTime" :default-time="defaultStartTime" @result="onBeginTime">
          <van-field :value="reg_begin_time" label-class="label-class-super" input-class="input-class" label="报名开始时间"
            :right-icon="icon_sel" input-align="right" placeholder="请选择" placeholder-style="color: #999;" customStyle=""
            maxlength="" type="" :border="true" :required="false" :disabled="true" />
        </timePickerData>
        <!-- 报名截止时间 -->
        <timePickerData :start-time="startTime" :end-time="endTime" :default-time="defaultEndTime" @result="onEndTime">
          <van-field :value="reg_end_time" label-class="label-class-super" input-class="input-class" label="报名截止时间"
            :right-icon="icon_sel" input-align="right" placeholder="请选择" placeholder-style="color: #999;" customStyle=""
            maxlength="" type="" :border="true" :required="false" :disabled="true" />
        </timePickerData>
        <!-- 人数限制 -->
        <van-field :value="reg_max" label-class="label-class-super" input-class="input-class" label="人数限制"
          :right-icon="icon_sel" input-align="right" placeholder="请选择" placeholder-style="color: #999;" customStyle=""
          maxlength="" type="" :border="true" @tap="onShowRegMax" :required="false" :disabled="true" />
        <!-- 是否发布 -->
        <van-field :value="publish_status" label-class="label-class-super" input-class="input-class" label="是否发布"
          :right-icon="icon_sel" input-align="right" placeholder="请选择" placeholder-style="color: #999;" customStyle=""
          maxlength="" type="" :border="true" @tap="show_publish_popup=true" :required="false" :disabled="true" />
        <!-- 活动方式 -->
        <van-field :value="activity_type" label-class="label-class-super" input-class="input-class" label="活动方式"
          :right-icon="icon_sel" input-align="right" placeholder="请选择" placeholder-style="color: #999;" customStyle=""
          maxlength="" type="" :border="true" @tap="show_activity_type_popup=true" :required="false" :disabled="true" />
        <!-- 活动地址 -->
        <van-field :value="address" label-class="label-class-super" input-class="input-class" label="活动地址"
          type="textarea" placeholder="请输入地址或位置说明" placeholder-style="color: #999;" customStyle="" inputAlign="right"
          rightIcon="" :required="false" maxlength="" :border="false" :autosize="{ maxHeight: 80, minHeight: 20 }"
          @change="onAddressChange" />
      </view>
      <view class="divide-line"></view>
      <view>
        <view class="form-item public-sub">
          <view class="public-sub-border">
            <van-row>
              <van-col span="12">
                <view class="form-item-title fix">
                  是否公开显示
                  <van-icon :name="icon_vip" size="1rem" color="" class="vip-icon" />
                </view>
              </van-col>
              <van-col span="12">
                <view>
                  <van-field :value="public_type" label-class="label-class-super" input-class="input-class" label=""
                    :right-icon="icon_sel" input-align="right" placeholder="请选择" placeholder-style="color: #999;"
                    customStyle="" maxlength="" type="" :border="false" @tap="show_public_popup=true" :required="false"
                    :disabled="true" />
                </view>

              </van-col>
            </van-row>
          </view>
        </view>
        <view class="form-item inner-sub">
          <view class="inner-sub-border">
            <view class="form-item-title fix">
              允许内部人员报名活动
              <van-icon :name="icon_vip" size="1rem" color="" class="vip-icon" />
            </view>
            <van-switch style="float: right; padding-top: 0.5rem;" :checked="is_inner" @change="onInnerChange"
              size="1.5rem" active-color="#199A74" inactive-color="#FFFFFF" />
          </view>
        </view>
        <view class="form-item blacklist-sub">
          <view class="blacklist-sub-border">
            <view class="form-item-title fix">
              屏蔽黑名单用户
              <van-icon :name="icon_vip" size="1rem" color="" class="vip-icon" />
            </view>
            <van-switch style="float: right; padding-top: 0.5rem;" :checked="is_black" @change="onBlackChange"
              size="1.5rem" active-color="#199A74" inactive-color="#FFFFFF" />
          </view>
        </view>
        <view class="form-item server-sub">
          <van-row>
            <van-col span="10">
              <view class="form-item-title fix">
                服务岗位报名
                <van-icon :name="icon_vip" size="1rem" color="" class="vip-icon" />
              </view>
            </van-col>
            <van-col span="14">
              <view style="">
                <van-field :value="job_post" label-class="label-class-super" input-class="input-class" label=""
                  type="textarea" placeholder="岗位名以中文逗号分隔" placeholder-style="color: #999;" customStyle=""
                  inputAlign="left" rightIcon="" :required="false" maxlength="" :border="false"
                  :autosize="{ maxHeight: 80, minHeight: 20 }" @change="onExtendChange" @blur="onExtendBlur" />
              </view>

            </van-col>
          </van-row>
        </view>
      </view>
    </van-cell-group>
  </view>

  <view class="confirm-publish-wrapper">
    <view class="box">
      <view @tap="create_show=true" class="button">确定发布</view>
    </view>
  </view>

  <!-- 活动主办方弹出框 -->
  <van-popup :show="show_org_popup" position="bottom" custom-style="height: 40%;" :lock-scroll="true">
    <van-picker :show-toolbar="true" title="" confirm-button-text="确定" :columns="org_type_columns"
      :default-index="defaultIndex"
      toolbar-class="picker-toolbar" @confirm="onOrgTypeConfirm" @cancel="onOrgTypeCancel" @change="onOrgTypeChange" />
  </van-popup>
  <!-- 报名信息弹出框 -->
  <van-overlay :show="show_edit_sign" z-index="999">
    <view class="sign-wrapper">
      <view class="block">
        <view class="title">
          <text class="bg-gradient">报名信息</text>
        </view>
        <!-- <view>
          <AtInput
            name='value1'
            title='标准五个字'
            type='text'
            placeholder='使用 v-model:value 更新 value 值'
            v-model:value="value1"
          />
        </view> -->
        <view style="width: 22rem;">
          <van-field :value="sign_filed.name" label-class="label-class" input-class="input-class" rows="1" autosize label="字段名称"
            type="textarea" placeholder="请输入字段名称（6个字以内）" placeholder-style="color: #999;" customStyle="" inputAlign=""
            rightIcon="" :required="true" :maxlength="6" :border="true" @change="onFiledChange" />
          <view class="form-item border">
            <view class="form-item-title fix">是否必填</view>
            <van-switch style="float: right; padding-top: 0.5rem;" :checked="sign_filed.checked" @change="onChangeEdit"
              size="1.5rem" active-color="#199A74" inactive-color="#FFFFFF" />
          </view>
          <van-row>
            <van-col span="12">
              <view class="cancel-box">
                <view class="button" @tap="closeEditSign">取消</view>
              </view>
            </van-col>
            <van-col span="12">
              <view class="confirm-box">
                <view class="button" @tap="confirmEditSign">确定</view>
              </view>
            </van-col>
          </van-row>
          <!-- <view style="padding: 1rem 0; margin: 1rem; text-align: center;">
            <view @tap="closeEditSign" style="color: #FFFFFF; background-color: #199A74; padding: 0.5rem 1rem; border-radius: 1rem;">确定</view>
          </view> -->
        </view>
      </view>
    </view>
  </van-overlay>
  <!-- 人数限制弹出框 -->
  <van-popup :show="show_popup" position="bottom" custom-style="height: 30%;" :lock-scroll="true">
    <view class="limit-wrapper">
      <view class="form-item border">
        <view class="form-item-title fix">不限制人数</view>
        <van-switch style="float: right; padding-top: 0.5rem;" :checked="limit_number" @change="onChangeLimit"
          size="1.5rem" active-color="#199A74" inactive-color="#FFFFFF" />
      </view>
      <view v-if="!limit_number" class="form-item border">
        <view class="form-item-title fix">参加人数</view>
        <view style="float: right;">
          <van-field :value="temp_reg_max" type="number" label="" placeholder="请输入参加人数"
            placeholder-style="color: #999; font-size: 1rem;" input-align="right" customStyle="" rightIcon=""
            maxlength="" :border="false" @change="onRegMaxChange" />
        </view>
      </view>
    </view>
    <van-row>
      <van-col span="12">
        <view class="limit-button-wrapper">
          <view class="button cancel" @tap="closeEditLimit">取消</view>
        </view>
      </van-col>
      <van-col span="12">
        <view class="limit-button-wrapper">
          <view class="button confirm" @tap="confirmEditLimit">确定</view>
        </view>
      </van-col>
    </van-row>
  </van-popup>
  <!-- 是否发布弹出框 -->
  <van-popup :show="show_publish_popup" position="bottom" custom-style="height: 50%;" :lock-scroll="true">
    <van-picker :show-toolbar="true" title="" confirm-button-text="确定" :columns="columns" toolbar-class="picker-toolbar"
      @confirm="onPublishConfirm" @cancel="onPublishCancel" @change="onPublishChange" />
  </van-popup>
  <!-- 活动方式弹出框 -->
  <van-popup :show="show_activity_type_popup" position="bottom" custom-style="height: 50%;" :lock-scroll="true">
    <van-picker :show-toolbar="true" title="" confirm-button-text="确定" :columns="activity_type_columns"
      toolbar-class="picker-toolbar" @confirm="onActivityTypeConfirm" @cancel="onActivityTypeCancel"
      @change="onActivityTypeChange" />
  </van-popup>
  <!-- 是否公开显示弹出框 -->
  <van-popup :show="show_public_popup" position="bottom" custom-style="height: 50%;" :lock-scroll="true">
    <van-picker :show-toolbar="true" confirm-button-text="确定" title="" :columns="public_type_columns"
      toolbar-class="picker-toolbar" @confirm="onPublicTypeConfirm" @cancel="onPublicTypeCancel"
      @change="onPublicTypeChange" />
  </van-popup>

  <van-toast id="van-toast" />
  <van-dialog title="温馨提示" :show="create_show" :show-cancel-button="true" message="是否确认提交？" confirm-button-color="#199A74" @confirm="onCreateConfirm" @cancel="onCreateCancel"></van-dialog>

</template>

<script setup>
import { ref, onMounted, nextTick, getCurrentInstance } from "vue";
// import icon_home1 from '@/images/icon/home01@2x.png'
import icon_upload from '@/images/icon/upload@2x.png'
import icon_vip from '@/images/icon/vip@2x.png'
import icon_sel from '@/images/icon/sel@2x.png'
import timePickerData from "@/components/time-picker-data/picker";
import activityEditor from "@/components/activity-editor";
import { getCurrentPageUrl, getCurrentPageParam } from "@/utils/weapp";
import Taro from '@tarojs/taro'
import mixin from '@/utils/mixin';
import BASE_URL from '@/utils/config';
import Toast from '@/components/vant-weapp/toast/toast';
import { randomId } from '@/utils/tools'
import moment from '@/utils/moment.min.js'
import { activityInfoAPI } from '@/api/Host/index';

const activity_name = ref('');
const onChange = ({ detail }) => {
  activity_name.value = detail
}

/***** 主办方选择弹框列表 *****/
const show_org_popup = ref(false);
const org_type = ref('');
const host_id = ref('');
const onOrgTypeChange = (event) => {
}
const onOrgTypeConfirm = (event) => { // 主办方弹框确认按钮回调
  const detail = event.detail;
  org_type.value = detail.value.text; // 主办方名称
  host_id.value = detail.value.id; // 主办方ID
  show_org_popup.value = false;
}
const onOrgTypeCancel = (event) => {
  show_org_popup.value = false;
}

/**************** 上传模块 ******************/
const uploader_width = ref('')
const uploaderStyle = ref({})
const has_image = ref(false)
const uploader_image = ref('')
const afterRead = (event) => {
  wx.showLoading({
    title: '上传中',
    mask: true
  });
  const { file } = event.detail;
  // 获取上传URL
  wx.uploadFile({
    url: BASE_URL + '/admin/?m=srv&a=upload',
    filePath: file.url,
    name: 'file',
    header: {
      'content-type': 'multipart/form-data',
    },
    success: function (res) {
      let upload_data = JSON.parse(res.data);
      wx.hideLoading({
        success: () => {
          if (res.statusCode === 200) {
            has_image.value = true;
            uploader_image.value = upload_data.data.src;
          } else {
            wx.showToast({
              icon: 'error',
              title: '服务器错误,稍后重试！',
              mask: true
            })
          }
        },
      });
    }
  });
}
const removeUploadImage = () => {
  has_image.value = false;
  uploader_image.value = ''
}
/**********************************/
let startTime = new Date()
let endTime = new Date()
let defaultActivityTime = new Date()
let defaultStartTime = new Date()
let defaultEndTime = new Date()
onMounted(async () => {
  // 日期控件
  startTime = getTime("min", 0);
  endTime = getTime("year", 2);
  // 判断是否为修改活动
  if (getCurrentPageParam().type === 'edit') {
    // 动态修改标题
    wx.setNavigationBarTitle({
      title: '修改活动',
    });
    const { code, data } = await activityInfoAPI({ i: getCurrentPageParam().id });
    if (code) {
      // 更新活动信息
      updateActivityInfo(data);
    }
  } else {
    defaultActivityTime = getTime("min", 1);
    defaultStartTime = getTime("min", 1);
    defaultEndTime = getTime("min", 1);
  }
  nextTick(() => {
    setTimeout(() => {
      // 获取元素宽度
      wx.createSelectorQuery().selectAll('.form-item-title').boundingClientRect(function (rect) {
        uploaderStyle.value = {
          width: rect[0].width - 8 + 'px'
        }
        uploader_width.value = rect[0].width - 8 + 'px';
      }).exec();
    }, 300);
  })
});

/******** 报名信息 ********/
const signInfo = ref([{
  key: 'name',
  label: '姓名',
  checked: 1,
  is_require: 1,
  nop: true
}, {
  key: 'phone',
  label: '手机号',
  checked: 1,
  is_require: 1,
  nop: true
}, {
  key: 'gender',
  label: '性别',
  checked: 1,
  is_require: 1,
  nop: true
}, {
  key: 'age_group',
  label: '年龄段',
  checked: 1,
  is_require: 1,
  nop: true
}]);

const onTapSign = (item) => { // 点击取消
  if (item.nop) return false; // 如果是固定字段不能操作
  item.checked = !item.checked;
}

const is_long_press = ref(false); // 是否是长按激活
const onLongPressSign = (item) => { // 长按编辑
  if (item.nop) return false; // 如果是固定字段不能操作
  // console.warn(item);
  sign_filed.value.key = item.key;
  sign_filed.value.name = item.label;
  sign_filed.value.is_require = item.is_require;
  show_edit_sign.value = true;
  is_long_press.value = true;
}

// 报名信息弹框
const show_edit_sign = ref(false);
const sign_filed = ref({}); // 临时报名
const onFiledChange = ({ detail }) => {
  sign_filed.value.name = detail;
}
const onChangeEdit = ({ detail }) => {
  sign_filed.value.checked = detail;
}
const closeEditSign = () => {
  show_edit_sign.value = false;
  is_long_press.value = false;
}
const confirmEditSign = () => { // 确认报名信息回调
  if (!sign_filed.value.name) {
    Toast.fail('字段不能为空');
  } else {
    show_edit_sign.value = false;
    if (is_long_press.value) { // 通过长按打开的弹框
      signInfo.value.forEach(item => {
        if (item.key === sign_filed.value.key) { // key值相同
          item.label = sign_filed.value.name;
          item.is_require = sign_filed.value.checked;
        }
      });
    } else {
      signInfo.value.push({
        key: randomId(5),
        label: sign_filed.value.name,
        checked: 1,
        is_require: sign_filed.value.checked ? 1 : 0,
        nop: false,
        type: 'player',
        field: sign_filed.value.name
      });
    }
    is_long_press.value = false;
    // // 如果key值存在修改，key值不存在新增
    // const result = signInfo.value.filter(item => item.key === sign_filed.value.key);
    // if (result.length) {
    //   signInfo.value.forEach(item => {
    //     if (item.key === sign_filed.value.key) { // key值相同
    //       item.label = sign_filed.value.name;
    //       item.is_require = sign_filed.value.checked;
    //     }
    //   })
    // } else {
    //   signInfo.value.push({
    //     key: randomId(5),
    //     label: sign_filed.value.name,
    //     checked: 1,
    //     is_require: sign_filed.value.checked ? 1 : 0,
    //     nop: false,
    //     type: 'player',
    //     field: sign_filed.value.name
    //   });
    // }
  }
}

const addSign = () => { // 新增-报名信息弹框
  show_edit_sign.value = true;
  sign_filed.value.name = '';
  sign_filed.value.checked = false;
}

/************* 活动时间 ************/

const activity_time = ref('');
const reg_begin_time = ref('');
const reg_end_time = ref('');

const getTime = (key, number, date) => {
  let _date = date ? new Date(date) : new Date();
  if (key === "min") {
    _date.setMinutes(_date.getMinutes() + number);
  }
  if (key === "hour") {
    _date.setHours(_date.getHours() + number);
  }
  if (key === "year") {
    _date.setFullYear(_date.getFullYear() + number);
  }
  return _date;
}
const onActivityTime = (arr) => {
  let time = arr[0] + "-" + arr[1] + "-" + arr[2] + " " + arr[3] + ":" + arr[4];
  activity_time.value = time;
}
const onBeginTime = (arr) => {
  let time = arr[0] + "-" + arr[1] + "-" + arr[2] + " " + arr[3] + ":" + arr[4];
  reg_begin_time.value = time;
}
const onEndTime = (arr) => {
  let time = arr[0] + "-" + arr[1] + "-" + arr[2] + " " + arr[3] + ":" + arr[4];
  reg_end_time.value = time;
}


/********* 人数限制 *********/
const reg_max = ref(''); // 表单显示人数绑定
const temp_reg_max = ref(''); // 弹框显示人数绑定
const limit_number = ref(false);

const onRegMaxChange = ({ detail }) => {
  temp_reg_max.value = detail;
}
const onChangeLimit = ({ detail }) => { // 不限制开关回调
  limit_number.value = detail
  if (detail) { // 无限制清空数据
    temp_reg_max.value = '';
  }
}

let show_popup = ref(false);
const clone_limit_number = ref(false); // 保存原始开关数据
const clone_reg_max = ref(''); // 保存原始人数数据
const onShowRegMax = () => { // 打开弹框
  show_popup.value = true;
  if (reg_max.value !== '无限制') {
    clone_reg_max.value = reg_max.value;
  } else {
    clone_limit_number.value = true;
    clone_reg_max.value = '无限制';
  }
}
const closeEditLimit = () => {
  show_popup.value = false;
  // 还原数据
  reg_max.value = clone_reg_max.value;
  limit_number.value = clone_limit_number.value;
}
const confirmEditLimit = () => { // 提交人数限制
  if (limit_number.value) {
    reg_max.value = '无限制'; // 无限人数默认为0
    show_popup.value = false;
  } else {
    const pattern = /^([1-9][0-9]*){1,3}$/; // 非零正整数
    if (!pattern.test(temp_reg_max.value)) {// 如果包含特殊字符返回false
      Toast('请输入非零正整数');
    } else {
      reg_max.value = temp_reg_max.value;
      show_popup.value = false;
    }
  }
}

/******* 是否发布 *******/
const show_publish_popup = ref(false);
const status = ref('disable'); // disable=未发布，enable=已发布
const publish_status = ref('暂不发布');
const columns = ref(['暂不发布', '立即发布']);
const onPublishChange = (event) => {
}
const onPublishConfirm = (event) => {
  const { picker, value, index } = event.detail;
  if (index) { // 已发布
    status.value = 'enable';
  } else { // 未发布
    status.value = 'disable';
  }
  publish_status.value = value;
  show_publish_popup.value = false;
}
const onPublishCancel = (event) => {
  show_publish_popup.value = false;
}

/***** 活动方法 *****/
const show_activity_type_popup = ref(false);
const activity_type = ref('现场活动');
const mode = ref('offline'); // offline=现场活动，online=线上活动
const activity_type_columns = ref(['现场活动', '线上活动']);
const onActivityTypeChange = (event) => {
}
const onActivityTypeConfirm = (event) => {
  const { picker, value, index } = event.detail;
  if (index) { // 已发布
    mode.value = 'online';
  } else { // 现场活动
    mode.value = 'offline';
  }
  activity_type.value = value;
  show_activity_type_popup.value = false;
}
const onActivityTypeCancel = (event) => {
  show_activity_type_popup.value = false;
}

const address = ref('');
const onAddressChange = ({ detail }) => {
  address.value = detail
}


/****** 是否公开显示 ******/
const show_public_popup = ref(false);
const public_type = ref('不公开');
const is_public = ref(0);
const public_type_columns = ref(['不公开', '公开']);
const onPublicTypeChange = (event) => {
}
const onPublicTypeConfirm = (event) => {
  const { picker, value, index } = event.detail;
  if (index) { // 公开
    is_public.value = 1;
  } else { // 不公开
    is_public.value = 0;
  }
  public_type.value = value;
  show_public_popup.value = false;
}
const onPublicTypeCancel = (event) => {
  show_public_popup.value = false;
}

const is_inner = ref(0); // 是否允许内部人员报名。1=允许，0=不允许
const is_black = ref(0); // 是否屏蔽黑名单。1=屏蔽，0=不屏蔽
const onInnerChange = ({ detail }) => {
  is_inner.value = detail
};
const onBlackChange = ({ detail }) => {
  is_black.value = detail
};

const extend = ref(''); // 义工岗位
const job_post = ref(''); // 义工岗位
const onExtendChange = ({ detail }) => {
  job_post.value = detail;
  extend.value = detail.split('，');
}
const onExtendBlur = () => {
  if (job_post.value.indexOf(',') >= 0) {
    Toast('请使用中文标点逗号分隔');
  }
}

// 活动详情富文本
const activity_note = ref('');
const onEditorInput = ({ html, text }) => {
  activity_note.value = html;
}

const validForm = () => { // 校验表单
  if (!host_id.value) {
    Toast('主办方不能为空');
    return false;
  }
  if (!activity_name.value) {
    Toast('活动主题不能为空');
    return false;
  }
  if (!uploader_image.value) {
    Toast('活动封面不能为空');
    return false;
  }
  if (!activity_time.value) {
    Toast('活动时间不能为空');
    return false;
  }
  if (!reg_begin_time.value) {
    Toast('报名开始时间不能为空');
    return false;
  }
  if (!reg_end_time.value) {
    Toast('报名截止时间不能为空');
    return false;
  }
  if (!moment(reg_begin_time.value).isBefore(moment(reg_end_time.value))) {
    Toast('报名开始时间不能晚于报名截止时间');
    return false;
  }
  if (!moment(activity_time.value).isBetween(moment(reg_begin_time.value), moment(reg_end_time.value), null, '[]')) {
    Toast('活动时间请在报名时间之间');
    return false;
  }
  if (reg_max.value === '') {
    Toast('报名人数不能为空');
    return false;
  }
  if (address.value === '') {
    Toast('活动地址不能为空');
    return false;
  }
  if (job_post.value.indexOf(',') >= 0) {
    Toast('岗位报名，请使用中文标点逗号分隔');
    return false;
  }
  return true;
}

const create_show = ref(false);
const onCreateConfirm = () => {
  create_show.value = false;
  onSubmit()
}
const onCreateCancel = () => {
  create_show.value = false;
}
const onSubmit = async () => {
  const fields = signInfo.value.filter(item => !item.nop && item.checked); // 处理报名信息结构，剔除固定字段，获取选中字段
  if (validForm()) {
    const params = {
      host_id: host_id.value, // 主办方
      name: activity_name.value, // 活动主题
      cover: uploader_image.value, // 活动封面
      note: activity_note.value, // 活动详情
      fields: JSON.stringify(fields), // 报名信息
      activity_time: activity_time.value, // 活动（开始）时间
      reg_begin_time: reg_begin_time.value, // 报名开始时间
      reg_end_time: reg_end_time.value, // 报名截止时间
      reg_max: reg_max.value === '无限制' ? 0 : reg_max.value, // 报名限制人数
      status: status.value, // 状态
      mode: mode.value, // 活动方式
      address: address.value, // 活动地址
      is_public: is_public.value, // 是否公开
      is_inner: is_inner.value ? 1 : 0, // 是否允许内部人员报名
      is_black: is_black.value ? 1 : 0, // 是否屏蔽黑名单
      extend: JSON.stringify(extend.value), // 义工岗位
    }
    if (getCurrentPageParam().type === 'edit') { // 修改
      params.i = activity_id.value;
      const { code } = await editActivityAPI(params);
      if (code) {
        Taro.navigateBack()
      }
    } else {
      const { code } = await addActivityAPI(params);
      if (code) {
        Taro.navigateBack()
      }
    }
  }
}

// 格式化活动时间
const formatInfoDate = (date) => {
  const formatYear = moment(date).year();
  const formatMonth = moment(date).month();
  const formatDay = moment(date).dates();
  const formatHour = moment(date).hour();
  const formatMin = moment(date).minute()
  return new Date(formatYear, formatMonth, formatDay, formatHour, formatMin);
}

// 获取活动信息，还原
const defaultIndex = ref(0);
const html_content = ref('');
const activity_id = ref('');
const updateActivityInfo = async ({ activity, host }) => {
  // 获取主办方列表信息
  const { code, data } = await hostListAPI();
  if (code) {
    const my_hosts = data.my_hosts;
    activity_id.value = activity.id;
    // 主办方
    org_type.value = my_hosts.filter(item => item.id === host.id)[0]['name'];
    // 主办方默认选中下标
    my_hosts.forEach((item, index) => {
      if (item.id === host.id) {
        defaultIndex.value = index;
      }
    });
    host_id.value = host.id;
    // 活动主题
    activity_name.value = activity.name;
    // 活动封面
    if (activity.cover) {
      has_image.value = true;
      uploader_image.value = activity.cover;
    }
    // 活动详情
    html_content.value = activity.note;
    activity_note.value = activity.note;
    // 报名信息
    if (activity.fields.length) {
      activity.fields.forEach(item => {
        item.label = item.field;
        item.checked = 1;
        item.nop = false;
      })
      signInfo.value = signInfo.value.concat(activity.fields);
    }
    // 活动时间
    activity_time.value = moment(activity.activity_time).format('YYYY-MM-DD HH:mm');
    // 开始时间
    reg_begin_time.value = moment(activity.reg_begin_time).format('YYYY-MM-DD HH:mm');
    // 结束时间
    reg_end_time.value = moment(activity.reg_end_time).format('YYYY-MM-DD HH:mm');
    // 默认弹框活动时间
    defaultActivityTime = formatInfoDate(activity.activity_time);
    console.warn(defaultActivityTime);
    defaultStartTime = formatInfoDate(activity.reg_begin_time);
    defaultEndTime = formatInfoDate(activity.reg_end_time);
    // 人数限制字段
    if (activity.reg_max) { // 有人数
      limit_number.value = false;
      temp_reg_max.value = activity.reg_max;
      reg_max.value = activity.reg_max;
    } else { // 无限制
      limit_number.value = true;
      reg_max.value = '无限制';
    }
    // 是否发布
    publish_status.value = activity.status === 'disable' ? '暂不发布' : '立即发布';
    status.value = activity.status;
    // 活动方法
    activity_type.value = activity.status === 'offline' ? '现场活动' : '线上活动';
    // 活动地址
    address.value = activity.address;
    // 是否公开显示
    public_type.value = activity.is_public === 0 ? '不公开' : '公开';
    is_public.value = activity.is_public;
    //
    is_inner.value = activity.is_inner ? true : false;
    is_black.value = activity.is_black ? true : false;
    // 义工岗位
    job_post.value = activity.extend.length ? activity.extend.join('，') : '';
    extend.value = activity.extend;
  }
}
</script>

<script>
import "./index.less";
import { hostListAPI, addActivityAPI, editActivityAPI } from '@/api/Host/index'

export default {
  name: "createActivityPage",
  data () {
    return {
      org_type_columns: []
    }
  },
  mixins: [mixin.init],
  // onLoad (options) {
    //options.参数名就可以取到
    // if (options.type === 'edit') {
    //   // 动态修改标题
    //   wx.setNavigationBarTitle({
    //     title: '修改活动',
    //   })
    // }
  // },
  async onShow () {
    // 获取主办方列表信息
    const { code, data } = await hostListAPI();
    if (code) {
      data.my_hosts.forEach(item => {
        item.text = item.name
      })
      this.org_type_columns = data.my_hosts;
    }
  }
};
</script>