<template>
  <view>
    <tui-tabs :tabs="tabs"
              itemWidth="50%"
              :currentTab="currentTab"
              @change="change"></tui-tabs>
    <view v-show="currentTab == 1">
      <tui-form ref='form'
                height="900">
        <tui-input required
                   label='岗位'
                   placeholder='请选择'
                   v-model="defaultRole"
                   textRight
                   disabled>
          <template v-slot:right>
            <tui-icon name="arrowright"
                      :size="24"
                      @click="picker"></tui-icon>
          </template>
        </tui-input>
        <tui-input label='登录名'
                   v-model='username'
                   placeholder="请填写手机号"
                   textRight
                   required></tui-input>
        <tui-input label='默认密码'
                   v-model="password"
                   textRight
                   required></tui-input>
        <tui-input label='姓名'
                   v-model='nickname'
                   textRight
                   required></tui-input>
        <tui-input type="number"
                   label='手机号'
                   v-model='mobile'
                   textRight
                   required></tui-input>
        <tui-input label='状态'
                   disabled>
          <template v-slot:right>
            <tui-switch @change="switchChange"
                        disabled
                        :checked="user.status==1?true:false"></tui-switch>
          </template>
        </tui-input>
        <view class="operation">
          <tui-button @click="addNewAccount">添加</tui-button>
        </view>
      </tui-form>
    </view>
    <view v-show="currentTab == 0">
      <tui-form ref='form'
                height="900">
        <tui-input required
                   label='岗位'
                   placeholder='请选择'
                   v-model="defaultRole"
                   textRight
                   disabled>
          <template v-slot:right>
            <tui-icon name="arrowright"
                      :size="24"
                      @click="picker"></tui-icon>
          </template>
        </tui-input>
        <tui-input label='统一平台登录账号'
                   v-model='name'
                   textRight
                   required></tui-input>
        <tui-dropdown-list :show="dropdownShow"
                           :height="400">
          <template v-slot:dropdownbox>
            <tui-list-view color="#777">
              <tui-list-cell v-for="(item, index) in userList"
                             :key="index"
                             arrow
                             @click="selectUser(item)">
                {{item.name}}
              </tui-list-cell>
            </tui-list-view>
          </template>
        </tui-dropdown-list>
        <tui-input label='默认密码'
                   v-model="password"
                   textRight
                   required></tui-input>
        <tui-input label='姓名'
                   v-model='nickname'
                   textRight
                   required></tui-input>
        <tui-input type="number"
                   label='手机号'
                   v-model='mobile'
                   textRight
                   required></tui-input>
        <view class="operation">
          <tui-button @click="add">添加</tui-button>
        </view>
      </tui-form>
    </view>
    <tui-picker :show="showPicker"
                :pickerData="roleList"
                @hide="hide"
                @change="pickRoleChange"></tui-picker>

  </view>
</template>

<script>
import { mapState, mapGetters, mapActions, mapMutations } from "vuex";
import tuiTabs from "@/components/thorui/tui-tabs/tui-tabs.vue";
import { getStorage } from "@/utils/storage.js";
import { tuiDropdownList } from "@/components/thorui/tui-dropdown-list/tui-dropdown-list.vue";
export default {
  components: {
    tuiTabs,
  },
  data() {
    return {
      defaultRole: null,
      name: null,
      password: null,
      nickname: null,
      user: {
        status: 1,
      },
      username: null,
      mobile: null,
      selectRoleId: null,
      showPicker: false,
      userList: [],
      dropdownShow: false,
      roleList: [],
      currentTab: 0,
      tabs: [
        {
          name: "有统一平台账号",
        },
        {
          name: "无统一平台账号",
        },
      ],
    };
  },
  computed: {
    ...mapState(["APIHOST", "userinfo"]),
    // switch组件映射Boolean
    is_switch() {
      return this.itemInfo.is_use === 1 ? true : false;
    },
  },
  watch: {
    name(newValue, oldValue) {
      if (newValue !== oldValue && newValue != "") {
        this.dropdownShow = true;
        this.showSelectUser = true;
        this.getUserList(newValue);
      } else {
        this.dropdownShow = false;
      }
    },
  },
  onLoad() {
    // 页面通信
    this.page = this.getOpenerEventChannel();
    // 触发事件
    this.roleList = this.getRoleList();
  },
  methods: {
    // switch组件
    switchChange(e) {
      this.user.status = e.detail.value;
    },
    change(e) {
      this.currentTab = e.index;
    },
    hide(e) {
      this.showPicker = false;
    },
    pickRoleChange(e) {
      this.defaultRole = e.text;
      this.selectRoleId = e.value;
    },
    picker() {
      this.showPicker = true;
    },
    dropDownList: function () {
      this.dropdownShow = !this.dropdownShow;
    },
    selectUser(val) {
      this.name = val.name;
      this.userList = [];
      this.password = val.mobile;
      this.nickname = val.nickname;
      this.mobile = val.mobile;
      this.dropdownShow = false;
    },
    getRoleList() {
      uni.request({
        url: this.APIHOST + "ProjectPersonnel/getRoleList",
        header: {
          authorization: "Bearer " + getStorage("sxlq_token"),
        },
        success: (res) => {
          this.roleList = res.data.data.map((item) => ({
            value: item.id,
            text: item.name,
          }));
        },
      });
    },
    getUserList(val) {
      uni.request({
        url: this.APIHOST + "ProjectPersonnel/getUserList",
        header: {
          authorization: "Bearer " + getStorage("sxlq_token"),
        },
        data: { name: this.name },
        success: (res) => {
          this.userList = res.data.data;
        },
      });
    },
    // 返回上一级
    add() {
      let pages = getCurrentPages(); // 当前页面
      let beforePage = pages[pages.length - 2];
      this.user.org_id = getStorage("nowSelectOrganizationInfo")["id"];
      this.user.name = this.name;
      this.user.nickname = this.nickname;
      this.user.password = this.password;
      this.user.mobile = this.mobile;
      this.user.status = this.stauts;
      this.user.role_id = this.selectRoleId;
      uni.request({
        url: this.APIHOST + "ProjectPersonnel/add",
        method: "POST",
        data: this.user,
        header: {
          authorization: "Bearer " + getStorage("sxlq_token"),
        },
        success: (res) => {
          if (res.data.code == 0) {
            setTimeout(() => {
              uni.showToast({
                title: "添加成功",
                icon: "none",
              });
              uni.navigateBack({
                success: function () {
                  beforePage.getList(); // 执行上一页的getList里面的方法方法
                },
              });
            }, 500);
          } else {
            setTimeout(() => {
              uni.showToast({
                title: res.data.msg,
                icon: "none",
              });
            }, 500);
          }
        },
      });
    },
    isAlphaNumeric(pwd) {
      //密码强度校验
      if (!/[a-zA-Z].*\d|\d.*[a-zA-Z]/.test(pwd)) {
        uni.showToast({
          title: "密码需要密码和数字组合",
          icon: "none",
        });
        return false;
      }
      if (pwd.length < 6) {
        uni.showToast({
          title: "密码长度不能小于6位",
          icon: "none",
        });
        return false;
      }
      return true;
    },
    // 返回上一级
    addNewAccount() {
      if (!this.isAlphaNumeric(this.password)) {
        return;
      }
      let pages = getCurrentPages(); // 当前页面
      let beforePage = pages[pages.length - 2];
      let checkMobile = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
      this.user.org_id = getStorage("nowSelectOrganizationInfo")["id"];
      this.user.name = this.username;
      this.user.nickname = this.nickname;
      this.user.password = this.password;
      this.user.mobile = this.mobile;
      this.user.role_id = this.selectRoleId;
      if (!checkMobile.test(this.user.name)) {
        this.showTips("登录名必须为手机号");
      } else {
        uni.request({
          url:
            this.APIHOST + "ProjectPersonnel/addNewAccount",
          method: "POST",
          data: this.user,
          header: {
            authorization: "Bearer " + getStorage("sxlq_token"),
          },
          success: (res) => {
            if (res.data.code == 0) {
              setTimeout(() => {
                uni.showToast({
                  title: "添加成功",
                  icon: "none",
                });
                uni.navigateBack({
                  success: function () {
                    beforePage.getList(); // 执行上一页的getList里面的方法方法
                  },
                });
              }, 500);
            } else {
              setTimeout(() => {
                uni.showToast({
                  title: res.data.msg,
                  icon: "none",
                });
              }, 500);
            }
          },
        });
      }
    },
    // 消息提示组件
    showTips(value) {
      let options = {
        msg: value,
        duration: 1000,
      };
      // 确认已获取到组件实例
      this.$refs.toast && this.$refs.toast.showTips(options);
    },
  },
};
</script>

<style lang="scss">
.user {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 2;
  margin-top: 20rpx;
}

.avatar-img {
  width: 140rpx;
  height: 140rpx;
  border-radius: 50%;
  align-self: center;
}

.user-info-mobile {
  margin-top: 30rpx;
  margin-bottom: 30rpx;
  position: relative;
  font-size: 28rpx;
  color: #fefefe;
  line-height: 28rpx;
  align-self: center;
  padding: 0 50rpx;
}

.operation {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  height: 100rpx;

  .tui-btn {
    width: 80% !important;
    height: 80rpx !important;
    line-height: 80rpx !important;
  }
}

.tui-input__wrap {
  height: 80rpx !important;
}

.tui-input__label {
  width: 180rpx !important;
  font-size: $uni-font-size-sm !important;
}
</style>