<!--
 * @Date: 2022-09-19 14:11:06
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2022-10-22 00:26:20
 * @FilePath: /swx/src/pages/createProject/index.vue
 * @Description: 新建主办方页面
-->
<template>
  <view class="create-project-page">
    <view class="activity-title">
      <view class="box">
        <text class="bg-gradient" style="font-size: 1.25rem;">主办方信息设置</text>
      </view>
    </view>
    <AtInput :border="true" title="主办方名称" type='text' placeholder='请输入主办方名称' v-model:value="name" />
    <view class="user-type-box">
      <text class="title">用户类型</text>
      <view class="sign-box">
        <view @tap="onTapType(item)" @longpress="onLongPressType(item)" v-for="(item, index) in userType" :key="index"
          class="sign-item" :class="{ 'checked': item.checked }"><text>{{ item.label }}</text></view>
        <view class="sign-item" @tap="addSign">
          <van-icon name="plus" color="" />
        </view>
      </view>
      <view class="border"></view>
    </view>
    <view class="user-status-box">
      <text class="title">用户状态</text>
      <view class="sign-box">
        <view @tap="onTapStatus(item)" @longpress="onLongPressStatus(item)" v-for="(item, index) in userStatus" :key="index"
          class="sign-item" :class="{ 'checked': item.checked }"><text>{{ item.label }}</text></view>
        <view class="sign-item" @tap="addStatus">
          <van-icon name="plus" color="" />
        </view>
      </view>
      <view class="border"></view>
    </view>
    <view style="height: 6rem;"></view>
    <bottom-button @on-submit="onSave">保存</bottom-button>
  </view>

  <!-- 用户类型弹出框 -->
  <van-overlay :show="show_edit_type" z-index="999">
    <view class="sign-wrapper">
      <view class="block">
        <view class="title">
          <text class="bg-gradient">用户类型</text>
        </view>
        <view style="width: 22rem;">
          <van-field :value="add_user_type.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" :border="true" @change="onChangeType" />
          <van-row>
            <van-col span="12">
              <view class="cancel-box">
                <view class="button" @tap="closeEditType">取消</view>
              </view>
            </van-col>
            <van-col span="12">
              <view class="confirm-box">
                <view class="button" @tap="confirmEditType">确定</view>
              </view>
            </van-col>
          </van-row>
        </view>
      </view>
    </view>
  </van-overlay>

  <!-- 用户状态弹出框 -->
  <van-overlay :show="show_edit_status" z-index="999">
    <view class="sign-wrapper">
      <view class="block">
        <view class="title">
          <text class="bg-gradient">用户状态</text>
        </view>
        <view style="width: 22rem;">
          <van-field :value="add_user_status.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" :border="true" @change="onChangeStatus" />
          <van-row>
            <van-col span="12">
              <view class="cancel-box">
                <view class="button" @tap="closeEditStatus">取消</view>
              </view>
            </van-col>
            <van-col span="12">
              <view class="confirm-box">
                <view class="button" @tap="confirmEditStatus">确定</view>
              </view>
            </van-col>
          </van-row>
        </view>
      </view>
    </view>
  </van-overlay>
  <van-toast id="van-toast" />
</template>

<script setup>
import Taro from '@tarojs/taro'
import { ref } from "vue";
import { AtInput } from 'taro-ui-vue3'
import "taro-ui-vue3/dist/style/components/input.scss";
import bottomButton from "@/components/bottom-button";
import Toast from '@/components/vant-weapp/toast/toast';
import { addHostAPI } from '@/api/Host/index';
import { randomId } from '@/utils/tools'

const name = ref('');
const user_type = ref([]);
const user_status = ref([]);
const add_user_type= ref({});
const add_user_status = ref({});

const userType = ref([{
  key: 'first',
  label: '首次参与',
  checked: 1,
  nop: true
}, {
  key: 'old',
  label: '老用户',
  checked: 1,
  nop: true
}]);
const userStatus = ref([{
  key: 'follow',
  label: '跟踪',
  checked: 1,
  nop: true
}, {
  key: 'guide',
  label: '引导',
  checked: 1,
  nop: true
}]);



// 用户类型弹框操作
const onTapType = (item) => {
  if (item.nop) return false; // 如果是固定字段不能操作
  item.checked = !item.checked;
}

const is_long_press = ref(false); // 是否是长按激活
const onLongPressType = (item) => {
  if (item.nop) return false; // 如果是固定字段不能操作
  show_edit_type.value = true;
  is_long_press.value = true;
  add_user_type.value.key = item.key;
  add_user_type.value.name = item.label;
}
const show_edit_type = ref(false)
const onChangeType = ({ detail }) => {
  add_user_type.value.name = detail;
}
const closeEditType = () => {
  show_edit_type.value = false;
  is_long_press.value = false;
}
const confirmEditType = () => {
  if (!add_user_type.value) {
    Toast.fail('名称不能为空');
  } else {
    show_edit_type.value = false;
    if (is_long_press.value) {
      userType.value.forEach(item => {
        if (item.key === add_user_type.value.key) { // key值相同
          item.label = add_user_type.value.name;
        }
      });
    } else {
      userType.value.push({
        key: randomId(5),
        label: add_user_type.value.name,
        checked: 1,
      });
    }
    add_user_type.value = {};
    is_long_press.value = false;
  }
}
const addSign = () => {
  show_edit_type.value = true;
}

// 用户状态
const onTapStatus = (item) => {
  if (item.nop) return false; // 如果是固定字段不能操作
  item.checked = !item.checked;
}

const is_long_press_status = ref(false); // 是否是长按激活
const onLongPressStatus = (item) => {
  if (item.nop) return false; //如果是固定字段不能操作
  show_edit_status.value = true;
  is_long_press_status.value = true;
  add_user_status.value.key = item.key;
  add_user_status.value.name = item.label;
}
const show_edit_status= ref(false)
const onChangeStatus = ({ detail }) => {
  add_user_status.value = detail;
}
const closeEditStatus = () => {
  show_edit_status.value = false;
  is_long_press_status.value = false;
}
const confirmEditStatus = () => {
  if (!add_user_status.value) {
    Toast.fail('名称不能为空');
  } else {
    show_edit_status.value = false;
    if (is_long_press.value) {
      userStatus.value.forEach(item => {
        if (item.key === add_user_status.value.key) { // key值相同
          item.label = add_user_status.value.name;
        }
      });
    } else {
      userStatus.value.push({
        key: randomId(5),
        label: add_user_status.value,
        checked: 1,
      })
    }
    add_user_status.value = {};
    is_long_press_status.value = false;
  }
}
const addStatus = () => {
  show_edit_status.value = true;
}

const onSave = async () => {
  if (!name.value) {
    Toast.fail('名称不能为空');
    return false;
  }
  let temp_user_type = userType.value.filter(element => element.checked && !element.nop);
  user_type.value = temp_user_type.map(element => element.label);
  let temp_user_status = userStatus.value.filter(element => element.checked && !element.nop);
  user_status.value = temp_user_status.map(element => element.label);
  // 新增主办方信息
  const params = {
    name: name.value,
    user_type: JSON.stringify(user_type.value),
    user_status: JSON.stringify(user_status.value),
  }
  const { code, data } = await addHostAPI(params);
  if (code) {
    Toast.success('新增成功');
    Taro.navigateBack();
  }
}
</script>

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

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