<template>
  <view class="page-wrapper global-wrapper bgF2">
    <JHeaderTitle title="创建拓展员" bgColor="#f2f2f2" />
    <JMainCard pd="0" wrapPd="0 30rpx">
      <JInput
        v-model:value="member.realname"
        name="拓展员姓名"
        place="请输入拓展员姓名"
        :rules="{ name: 'realname', rule: 'REG_NotNUll' }"
        :isBorder="true"
      ></JInput>
      <JInput
        v-model:value="member.userNo"
        name="拓展员编号"
        place="请输入拓展员编号"
        :rules="{ name: 'userNo', rule: 'REG_NotNUll' }"
        :isBorder="true"
      ></JInput>
      <JInput name="拓展员性别" :isBorder="true">
        <view class="place-text" :class="{ 'selected-text': member.sex > 0 }" @tap="sex.open(member.sex)">
          {{ sexList[member.sex] }}
          <image src="/static/iconImg/right-arrow.svg" mode="scaleToFill" />
        </view>
      </JInput>
      <JInput
        v-model:value="member.loginUsername"
        name="登录名"
        place="字母开头6到18位"
        :rules="{ name: 'loginUsername', rule: 'REG_LoginName' }"
        :isBorder="true"
      ></JInput>

      <JInput
        v-model:value="member.telphone"
        name="拓展员手机号"
        place="请输入拓展员手机号"
        :rules="{ name: 'telphone', rule: 'REG_Phone' }"
        :isBorder="true"
      ></JInput>
      <JInput name="拓展员状态" :isBorder="true">
        <view class="dis-wrapper">
          <text v-if="member.state">启用</text>
          <text v-else>禁用</text>
          <switch
            :checked="member.state == 1 ? true : false"
            @change="change($event, 'state')"
            style="margin-left: 15rpx; transform: scale(1.2)"
            color="#7737FE"
          />
        </view>
      </JInput>
    </JMainCard>
    <JMainCard pd="0" wrapPd="30rpx">
      <view
        class="select-wrapper"
        @tap="jumpPage('/pageWork/SelectedList/SelectedList?title=team&&selected=' + member.teamId)"
      >
        <view class="select-mch" v-if="!member.teamId"> 请选择团队 </view>
        <view class="mch-info" v-else>
          <image src="/static/iconImg/expand-fill.svg" mode="scaleToFill" />
          <view
            >{{ member.teamName }} <text>{{ member.teamId }}</text>
          </view>
        </view>
        <image src="/static/iconImg/right-arrow.svg" mode="scaleToFill" />
      </view>
    </JMainCard>
    <JMainCard pd="0" wrapPd="0 30rpx">
      <JInput name="是否发送开通提醒" :isBorder="true">
        <view class="dis-wrapper">
          <text v-if="member.isNotify">启用</text>
          <text v-else>禁用</text>
          <switch
            :checked="member.isNotify == 1 ? true : false"
            @change="change($event, 'isNotify')"
            style="margin-left: 15rpx; transform: scale(1.2)"
            color="#7737FE"
          />
        </view>
      </JInput>
      <JInput name="是否使用默认密码" :isBorder="true">
        <view class="dis-wrapper">
          <switch
            :checked="member.defaultPass == 1 ? true : false"
            @change="change($event, 'defaultPass')"
            style="margin-left: 15rpx; transform: scale(1.2)"
            color="#7737FE"
          />
        </view>
      </JInput>
      <JInput
        name="自定义密码"
        v-model:value="member.loginPassword"
        :rules="{ name: 'loginPassword', rule: 'REG_NotNUll' }"
        place="请输入自定义密码"
        v-if="!member.defaultPass == 1"
      ></JInput>
    </JMainCard>
    <JButton pdTop="0" pd="30rpx  30rpx 50rpx" @HandleTouch="addMember">创建成员</JButton>
    <SelectSex ref="sex" @selected="selectedSex" />
  </view>
</template>

<script setup>
import { ref, reactive } from "vue"
import { onShow, onLoad } from "@dcloudio/uni-app"
import { $addDev, $devDetail } from "@/http/apiManager.js"
import { validateArray } from "@/hooks/rules" //校验函数
import JHeaderTitle from "@/components/newComponents/JHeaderTitle/JHeaderTitle"
import JMainCard from "@/components/newComponents/JMainCard/JMainCard"
import JInput from "@/components/newComponents/JInput/JInput"
import JButton from "@/components/newComponents/JButton/JButton"
import SelectSex from "./components/SelectSex.vue"
import useStore from "@/hooks/useStore.js"
const { getStore, clearItem } = useStore()

onShow(() => {
  if (getStore("team").teamId) {
    member.value.teamId = getStore("team").teamId
    member.value.teamName = getStore("team").teamName
    clearItem("team")
  }
})
const member = ref({
  state: 1,
  isNotify: 0,
  defaultPass: 1,
  sex: 0,
  userType: 3,
  isTeamLeader: 0,
})
const sexList = reactive(["请选择拓展员性别", "男", "女"])
const sex = ref()
const change = (e, val) => {
  member.value[val] = e.detail.value ? 1 : 0
}
const selectedSex = (val) => {
  member.value.sex = val
}
const jumpPage = (url) => {
  uni.navigateTo({
    url,
  })
}
const addMember = () => {
  if (validateArray(member.value)) {
    uni.showLoading({ title: "添加中..." })
    $addDev(member.value).then((res) => {
      uni.hideLoading()
      uni.showToast({ title: "新增成功", icon: "success" })
      uni.navigateBack()
    })
  }
}
</script>

<style lang="scss" scoped>
.page-wrapper {
  .place-text {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    font-size: 33rpx;
    color: #a6a6a6;
    image {
      width: 40rpx;
      height: 40rpx;
      transform: translateX(20rpx);
    }
  }
  .selected-text {
    color: #000;
  }
  .select-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx;
    .select-mch {
      margin: 20rpx;
    }
    .mch-info {
      display: flex;
      image {
        width: 93rpx;
        height: 93rpx;
        margin-right: 10rpx;
      }
      view {
        display: flex;
        flex-direction: column;
        font-size: 33rpx;
        font-weight: 700;
        text {
          margin-top: 15rpx;
          color: #8c8c8c;
          font-size: 25rpx;
          font-weight: 500;
        }
      }
    }
    image {
      width: 40rpx;
      height: 40rpx;
    }
    .img-wrapper {
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;
      width: 93rpx;
      height: 93rpx;
      margin-right: 20rpx;
      image {
        width: 60rpx;
        height: 66rpx;
      }
    }
  }
}
</style>
