<!--
 * @Date: 2022-09-21 16:04:10
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2022-09-26 11:56:39
 * @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="arrow-down"
        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="message"
        label-class="label-class"
        input-class="input-class"
        label="活动主题"
        type="textarea"
        placeholder="请输入活动主题（最多30个字）"
        placeholder-style="color: #999;"
        autosize
        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>
        <van-field
          :value="message"
          input-class="input-class"
          label=""
          inputAlign=""
          maxlength=""
          placeholderStyle=""
          rightIcon=""
          type="textarea"
          placeholder="开始输入活动详情介绍"
          :autosize="{ maxHeight: 200, minHeight: 100 }"
          custom-style="padding-left: 0;"
        />
      </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.label }}</text></view>
        <!-- <view class="sign-item"><text class="">推荐人</text></view> -->
        <view class="sign-item" @tap="addSign"><van-icon name="plus" color="" /></view>
      </view>
      <view class="divide-line"></view>
      <view class="advanced-title" style="background-color: #FFFFFF;">
        <view style="padding: 1rem 1rem 0.5rem 1rem; text-align: center;">
          <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="defaultTime"
          @result="onResult"
        >
          <van-field
          :value="datetime"
          label-class="label-class-super"
          input-class="input-class"
          label="活动时间"
          right-icon="arrow-down"
          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="defaultTime"
          @result="onResult"
        >
          <van-field
          :value="datetime"
          label-class="label-class-super"
          input-class="input-class"
          label="报名开始时间"
          right-icon="arrow-down"
          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="defaultTime"
          @result="onResult"
        >
          <van-field
          :value="datetime"
          label-class="label-class-super"
          input-class="input-class"
          label="报名截止时间"
          right-icon="arrow-down"
          input-align="right"
          placeholder="请选择"
          placeholder-style="color: #999;"
          customStyle=""
          maxlength=""
          type=""
          :border="true"
          :required="false"
          :disabled="true" />
        </timePickerData>
        <!-- 人数限制 -->
        <van-field
        :value="person_num"
        label-class="label-class-super"
        input-class="input-class"
        label="人数限制"
        right-icon="arrow-down"
        input-align="right"
        placeholder="请选择"
        placeholder-style="color: #999;"
        customStyle=""
        maxlength=""
        type=""
        :border="true"
        @tap="show_popup=true"
        :required="false"
        :disabled="true" />
        <!-- 是否发布 -->
        <van-field
        :value="publish_status"
        label-class="label-class-super"
        input-class="input-class"
        label="是否发布"
        right-icon="arrow-down"
        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="arrow-down"
        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="message1"
          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="onChange1"
        />
      </view>
      <view class="divide-line"></view>
      <view>
        <view class="form-item" style="padding-right: 0;">
          <view style="border-bottom: 1px solid #F2F2F2; overflow: auto;">
            <van-row>
              <van-col span="12">
                <view class="form-item-title" style="padding-top: 0.8rem; color: #999;">
                  是否公开显示
                  <van-icon :name="icon_vip" size="1rem" color="" class="vip-icon" />
                </view>
              </van-col>
              <van-col span="12">
                <view style="">
                  <van-field
                  :value="public_type"
                  label-class="label-class-super"
                  input-class="input-class"
                  label=""
                  right-icon="arrow-down"
                  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" style="padding-top: 0;">
          <view style="padding-bottom: 0.5rem;border-bottom: 1px solid #F2F2F2; overflow: auto;">
            <view class="form-item-title" style="float: left; padding-top: 0.5rem; color: #999;">
              允许内部人员报名活动
              <van-icon :name="icon_vip" size="1rem" color="" class="vip-icon" />
            </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>
        <view class="form-item" style="padding-top: 0;">
          <view style="padding-bottom: 0.5rem;border-bottom: 1px solid #F2F2F2; overflow: auto;">
            <view class="form-item-title" style="float: left; padding-top: 0.5rem; color: #999;">
              屏蔽黑名单用户
              <van-icon :name="icon_vip" size="1rem" color="" class="vip-icon" />
            </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>
        <view class="form-item" style="padding-top: 0; padding-right: 0;">
          <van-row>
            <van-col span="12">
              <view class="form-item-title" style="padding-top: 0.8rem; color: #999;">
                服务岗位报名
                <van-icon :name="icon_vip" size="1rem" color="" class="vip-icon" />
              </view>
            </van-col>
            <van-col span="12">
              <view style="">
                <van-field
                  :value="message1"
                  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="onChange1"
                />
              </view>

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

  <view style="background-color: #FFFFFF;box-shadow: 0rem -0.17rem 0.67rem 0rem rgba(0,0,0,0.05);">
    <view style="padding: 1rem 0; margin: 1rem; padding-bottom: 2rem; margin-top: 0; text-align: center;">
      <view @tap="onSubmit" style="color: #FFFFFF; background-color: #199A74; padding: 0.65rem 1rem; border-radius: 1.5rem;">确定发布</view>
    </view>
  </view>

  <!-- 活动主办方弹出框 -->
  <van-popup :show="show_org_popup" position="bottom" custom-style="height: 40%;" :lock-scroll="true">
    <van-picker
      :show-toolbar="true"
      confirm-button-text="确定"
      :columns="org_type_columns"
      toolbar-class="picker-toolbar"
      @confirm="onOrgTypeConfirm"
      @cancel="onOrgTypeCancel"
      @change="onOrgTypeChange" />
  </van-popup>
  <!-- 报名信息弹出框 -->
  <van-overlay :show="show_edit_sign" z-index="999">
    <view class="wrapper">
      <view class="block">
        <view style="padding: 1rem 1rem 0.5rem 1rem; text-align: center;">
          <text class="bg-gradient" style="font-size: 1.15rem;">报名信息</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="message"
            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="onChange"
          />
          <view class="form-item" style="overflow: auto; border-bottom: 1px solid #F2F2F2;">
            <view class="form-item-title" style="float: left; padding-top: 0.5rem;">是否必填</view>
            <van-switch
              style="float: right; padding-top: 0.5rem;"
              :checked="checked"
              @change="onChangeEdit"
              size="1.5rem"
              active-color="#199A74"
              inactive-color="#FFFFFF"
            />
          </view>
          <van-row>
            <van-col span="12">
              <view style="padding: 1rem 0; margin: 1rem; text-align: center;">
                <view @tap="closeEditSign" style="color: #199A74; border: 1px solid #199A74; padding: 0.5rem 1rem; border-radius: 1rem;">取消</view>
              </view>
            </van-col>
            <van-col span="12">
              <view style="padding: 1rem 0; margin: 1rem; text-align: center;">
                <view @tap="confirmEditSign" style="color: #FFFFFF; background-color: #199A74; padding: 0.5rem 1rem; border-radius: 1rem;">确定</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: 40%;" :lock-scroll="true">
    <view>
      <view class="form-item" style="overflow: auto; border-bottom: 1px solid #F2F2F2;">
        <view class="form-item-title" style="float: left; padding-top: 0.5rem;">不限制人数</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" style="overflow: auto; border-bottom: 1px solid #F2F2F2;">
        <view class="form-item-title" style="float: left; padding-top: 0.6rem;">人数最小值</view>
        <view style="float: right;">
          <van-field
            :value="min_number"
            type="number"
            label=""
            placeholder="请输入人数最小值"
            placeholder-style="color: #999; font-size: 1rem;"
            input-align="right"
            customStyle=""
            rightIcon=""
            maxlength=""
            :border="false"
          />
        </view>
      </view>
      <view v-if="!limit_number" class="form-item" style="overflow: auto; border-bottom: 1px solid #F2F2F2;">
        <view class="form-item-title" style="float: left; padding-top: 0.6rem;">人数最大值</view>
        <view style="float: right;">
          <van-field
            :value="max_number"
            type="number"
            label=""
            placeholder="请输入人数最大值"
            placeholder-style="color: #999; font-size: 1rem;"
            input-align="right"
            customStyle=""
            rightIcon=""
            maxlength=""
            :border="false"
          />
        </view>
      </view>
    </view>
    <van-row>
      <van-col span="12">
        <view style="padding: 1rem 0; margin: 1rem; text-align: center;">
          <view @tap="closeEditLimit" style="color: #199A74; border: 1px solid #199A74; padding: 0.5rem 1rem; border-radius: 1rem;">取消</view>
        </view>
      </van-col>
      <van-col span="12">
        <view style="padding: 1rem 0; margin: 1rem; text-align: center;">
          <view @tap="confirmEditLimit" style="color: #FFFFFF; background-color: #199A74; padding: 0.5rem 1rem; border-radius: 1rem;">确定</view>
        </view>
      </van-col>
    </van-row>
  </van-popup>
  <!-- 是否发布弹出框 -->
  <van-popup :show="show_publish_popup" position="bottom" custom-style="height: 40%;" :lock-scroll="true">
    <van-picker
      :show-toolbar="true"
      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: 40%;" :lock-scroll="true">
    <van-picker
      :show-toolbar="true"
      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: 40%;" :lock-scroll="true">
    <van-picker
      :show-toolbar="true"
      confirm-button-text="确定"
      :columns="public_type_columns"
      toolbar-class="picker-toolbar"
      @confirm="onPublicTypeConfirm"
      @cancel="onPublicTypeCancel"
      @change="onPublicTypeChange" />
  </van-popup>
</template>

<script setup>
import { ref, onMounted, nextTick } 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 timePickerData from "@/components/time-picker-data/picker";

const value1 = ref('');
const message = ref('');
const message1 = ref('');
const checked = ref(false);

const onSubmit = () => {
  console.warn(message.value);
}

const onChange = ({ detail }) => {
  console.warn(detail);
  message.value = detail
}
const onChange1 = ({ detail }) => {
  // console.warn(detail);
  // message1.value = detail
}

/**************** 上传模块 ******************/
const uploader_width = ref('')
const uploaderStyle = ref({})
const has_image = ref(false)
const uploader_image = ref('')
const afterRead = (event) => {
  const { file } = event.detail;
  console.warn(file);
  has_image.value = true;
  uploader_image.value = file.url
}
const removeUploadImage = () => {
  has_image.value = false;
  uploader_image.value = ''
}
/**********************************/

onMounted(() => {
  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()
    }, 100)
  })
  //
  startTime = getTime("min", 1);
  endTime = getTime("year", 2);
  defaultTime = getTime("min", 30);
});

const signInfo = ref([{
  key: 'name',
  label: '姓名',
  checked: 1,
  required: 1
}, {
  key: 'phone',
  label: '手机号',
  checked: 1,
  required: 1
}, {
  key: 'sex',
  label: '性别',
  checked: 1,
  required: 1
}, {
  key: 'age',
  label: '年龄段',
  checked: 1,
  required: 1
}]);

const onTapSign = (item) => {
  item.checked = !item.checked
}

const onLongPressSign = (item) => {
  console.warn(item);
  show_edit_sign.value = true;
}

const show_edit_sign = ref(false)

const onChangeEdit = ({ detail }) => {
  console.warn(detail);
  checked.value = detail;
}

const closeEditSign = () => {
  show_edit_sign.value = false;
}
const confirmEditSign = () => {
  show_edit_sign.value = false;
  signInfo.value.push({
    key: 'person',
    label: '推荐人',
    checked: 1,
    required: 1
  })
}

const addSign = () => {
  show_edit_sign.value = true;
}

const show_popup = ref(false);
const closeEditLimit = () => {
  show_popup.value = false;
}
const confirmEditLimit = () => {
  show_popup.value = false;
}


const datetime = ref('');
let startTime = new Date()
let endTime = new Date()
let defaultTime = new Date()

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 onResult = (arr) => {
  let time = arr[0] + "-" + arr[1] + "-" + arr[2] + " " + arr[3] + ":" + arr[4];
  datetime.value = time;
}

const person_num = ref('')
const limit_number = ref(false);
const min_number = ref('');
const max_number = ref('');
const onChangeLimit = ({ detail }) => {
  limit_number.value = detail
}

const show_publish_popup = ref(false);
const publish_status = ref('暂不发布');
const columns = ref(['暂不发布', '立即发布']);
const onPublishChange = (event) => {
  const { picker, value, index } = event.detail;
  console.warn(value);
  console.warn(index);
  publish_status.value = value;
}
const onPublishConfirm = (event) => {
  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 activity_type_columns = ref(['现场活动', '线上活动']);
const onActivityTypeChange = (event) => {
  const { picker, value, index } = event.detail;
  console.warn(value);
  console.warn(index);
  activity_type.value = value;
}
const onActivityTypeConfirm = (event) => {
  show_activity_type_popup.value = false;
}
const onActivityTypeCancel = (event) => {
  show_activity_type_popup.value = false;
}

const show_public_popup = ref(false);
const public_type = ref('不公开');
const public_type_columns = ref(['不公开', '公开']);
const onPublicTypeChange = (event) => {
  const { picker, value, index } = event.detail;
  console.warn(value);
  console.warn(index);
  public_type.value = value;
}
const onPublicTypeConfirm = (event) => {
  show_public_popup.value = false;
}
const onPublicTypeCancel = (event) => {
  show_public_popup.value = false;
}

const show_org_popup = ref(false);
const org_type = ref('');
const org_type_columns = ref(['周三读书会', '周四读书会']);
const onOrgTypeChange = (event) => {
  const { picker, value, index } = event.detail;
  console.warn(value);
  console.warn(index);
  org_type.value = value;
}
const onOrgTypeConfirm = (event) => {
  show_org_popup.value = false;
}
const onOrgTypeCancel = (event) => {
  show_org_popup.value = false;
}
</script>

<script>
import "./index.less";

export default {
  name: "createActivityPage",
};
</script>