<template>
  <view style="height: 100% !important">
    <view class="context-bg"></view>
    <view class="context">
      <view class="confirm-list"> 欢迎登录 ! </view>
      <view class="org-select-wrap">
        <view
          class="org-select"
          :class="{ active: orgType === 0 }"
          @click="selectOrgType(0)"
        >
          <image
            :src="orgType === 0 ? '/static/医院（2）.svg' : '/static/医院.svg'"
            style="width: 180rpx; height: 180rpx"
          />
          <text
            :style="
              orgType === 0
                ? 'color:#1296db;font-weight:bold;'
                : 'color:#333;font-weight:bold;'
            "
            >医院</text
          >
        </view>
        <view
          class="org-select"
          :class="{ active: orgType === 1 }"
          @click="selectOrgType(1)"
        >
          <image
            :src="orgType === 1 ? '/static/供应商（2）.svg' : '/static/供应商.svg'"
            style="width: 180rpx; height: 180rpx"
          />
          <text
            :style="
              orgType === 1
                ? 'color:#1296db;font-weight:bold;'
                : 'color:#333;font-weight:bold;'
            "
            >供应商</text
          >
        </view>
      </view>
      <view class="type-btn-group" v-if="orgType !== null">
        <view
          class="type-btn"
          :class="{ selected: selectedType === 'drug' }"
          @click="selectType('drug')"
          >药品</view
        >
        <view
          class="type-btn"
          :class="{ selected: selectedType === 'mcs' }"
          @click="selectType('mcs')"
          >耗材</view
        >
      </view>
      <transition name="fade-slide-input">
        <view v-if="orgType !== null">
          <view class="input-wrap" style="margin-bottom: 30rpx" v-if="orgType === 0">
            <view
              style="width: 100%; height: 100%; display: flex; align-items: center"
              @tap="handlePickerTap"
            >
              <text v-if="orgIndex === -1" style="color: #808080">请选择医疗机构</text>
              <text v-else>{{ orgList[orgIndex].spdName }}</text>
            </view>
            <CustomPicker
              :visible="pickerVisible"
              :options="orgList.map((item, idx) => ({ label: item.spdName, value: idx }))"
              title="选择医疗机构"
              @confirm="handleOrgConfirm"
              @cancel="pickerVisible = false"
              @update:visible="pickerVisible = $event"
            />
          </view>
          <view class="input-wrap">
            <input
              style="text-align: start"
              placeholder="请输入用户名"
              v-model="loginId"
              auto-complete="new-password"
              autocomplete="off"
            />
          </view>
          <view class="input-wrap" style="margin-top: 30rpx">
            <input
              class="uni-input"
              placeholder="请输入密码"
              :type="isShow ? 'text' : 'password'"
              v-model="pwd"
            />
          </view>
        </view>
      </transition>
    </view>
    <view class="fixed-bottom-btns" v-if="orgType !== null">
      <button class="bottom" style="margin-top: 20rpx" @click.stop="loginFun">
        登录
      </button>
      <button class="bottom" style="margin-top: 20rpx" @click.stop="showLoding">
        手机号快速登录
      </button>
    </view>
    <zero-privacy
      ref="privacy"
      @disagree="handleNeedAuthorization"
      :onNeed="false"
      @agree="agehandleNeed"
    ></zero-privacy>
    <fLogin :agree="agreeTwo" />
  </view>
</template>

<script>
import fLogin from "@/subpkg/uni_modules/f-wxLogin/components/f-wxLogin/f-wxLogin.vue";
import CustomPicker from "@/subpkg/uni_modules/custom-search-picker_0.0.1_example/pages/index/customPicker.vue";
import md5 from "@/components/md5.js";
import { mapState, mapMutations } from "vuex";
import sha1 from "js-sha1";
export default {
  components: {
    fLogin,
    CustomPicker,
  },
  props: {
    themeColor: {
      type: String,
      default: "#33CCCC",
    },
    logoUrl: {
      type: String,
      default: "",
    },
  },
  computed: {
    style_xuan() {
      let that = this;
      var themeColor = that.themeColor;
      var isRemeber = that.isRemeber;
      var style = "";

      if (isRemeber) {
        style += `color:${themeColor};`;
      }
      return style;
    },
  },
  data() {
    return {
      isRemeber: false,
      isShow: false,
      loginId: "",
      pwd: "",
      agree: false,
      agreeTwo: false,
      orgList: [],
      orgIndex: -1,
      orgType: null,
      selectedOrg: null,
      pickerVisible: false,
      selectedType: null,
    };
  },
  methods: {
    getOrgList() {
      this.$http("common.getSpdInfo", {}, "加载中").then((res) => {
        this.orgList = res.data || [];
      });
    },
    isLoding() {
      let isglag;
      let isLogin = uni.getStorageSync("headLogo");
      if (isLogin) {
        isglag = false;
      } else {
        isglag = true;
      }
      return isglag;
    },
    ...mapMutations(["setShowWxLogin"]),
    showLoding() {
      // let that = this;
      // if (that.agreeTwo == false) {
      // 	uni.showToast({
      // 		title: '请阅读并勾选用户协议和隐私政策',
      // 		icon: 'none'
      // 	});
      // 	return;
      // }
      this.setShowWxLogin(true);
    },
    isShowPassword() {
      let that = this;
      that.isShow = !that.isShow;
    },
    selectType(type) {
      this.selectedType = type;
      uni.setStorageSync("userType", type);
      if (this.orgType === 0) {
        this.getOrgList();
      }
    },
    loginFun(e) {
      let type = this.selectedType;
      let that = this;
      if (that.loginId == "" || that.pwd == "") {
        uni.showToast({
          title: "请输入账号或密码",
          icon: "none",
        });
        return;
      }
      if (that.orgType === 0 && that.orgIndex === -1) {
        uni.showToast({
          title: "请选择医疗机构",
          icon: "none",
        });
        return;
      }
      let data = {
        loginId: that.loginId,
        pwd: md5(sha1(that.pwd).toUpperCase()).toUpperCase(),
      };
      if (that.orgType === 0 && that.selectedOrg) {
        data.spdName = that.selectedOrg.spdName;
        data.spdId = that.selectedOrg.spdId;
      }
      this.$emit("loginFun", {
        loginData: data,
        type,
      });
    },
    handleNeedAuthorization() {
      uni.exitMiniProgram({
        success: function () {
          console.log("退出小程序成功");
        },
        fail: function (err) {
          console.log("退出小程序失败", err);
        },
      });
    },
    agehandleNeed() {},
    onOrgChange(e) {
      this.orgIndex = e.detail.value;
      this.selectedOrg = this.orgList[this.orgIndex];
    },
    selectOrgType(type) {
      this.orgType = type;
      this.orgIndex = -1;
      this.selectedOrg = null;
      this.loginId = "";
      this.pwd = "";
    },
    handleOrgConfirm(result) {
      console.log("picker result:", result);
      this.orgIndex =
        typeof result.selectedIndex === "number"
          ? result.selectedIndex
          : result.selectedValue && typeof result.selectedValue.value === "number"
          ? result.selectedValue.value
          : result.selectedValue;
      console.log("orgIndex:", this.orgIndex);
      this.selectedOrg = this.orgList[this.orgIndex];
      console.log("selectedOrg:", this.selectedOrg);
      this.pickerVisible = false;
    },
    handlePickerTap() {
      if (!this.selectedType) {
        uni.showToast({
          title: "请先选择药品或耗材",
          icon: "none",
        });
        return;
      }
      this.pickerVisible = true;
    },
  },
};
</script>

<style lang="scss">
.context-bg {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  background-image: linear-gradient(#90ffe4, #ffffff);
  background-size: cover;
  background-repeat: no-repeat;
}
.context {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  padding: 300rpx 50rpx 0rpx 50rpx;
  background-color: transparent;
}

.confirm-list {
  font-size: 50rpx;
  font-weight: bold;
  position: absolute;
  top: 30rpx;
  font-family: "微软雅黑";
}

.input-wrap {
  height: 100rpx;
  text-align: center;
  padding: 35rpx;
  border: 2rpx solid #d5d4d4;
  border-radius: 100rpx;
  background-color: #fff;
}

view {
  box-sizing: border-box;
}

.cf-hengStart {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
}

.xuanShowBox {
  padding-left: 40rpx;

  .icon-weixuan {
    color: #eaeeed;
  }

  .xuanShowTip {
    padding-left: 10rpx;
  }
}

.uni-input {
  text-align: start;
}

.login {
  color: #ffffff;
  width: 40vw;
  border-radius: 68rpx;
  margin: 0;
  padding: 35rpx 0;
  text-align: center;
  box-sizing: border-box;
}

.changeShow {
  font-size: 36rpx;
  position: relative;
  top: -12rpx;
  left: 84rpx;
}

.input-placeholder {
  font-size: 28rpx;
}

.bottom {
  margin-top: 23rpx;
  background: #fff;
  font-size: 30rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #39b54a;
  width: 85%;
  border: solid 1px #39b54a;
  border-radius: 40rpx;

  image {
    width: 54rpx;
    height: 54rpx;
    margin-right: 16rpx;
  }
}

.org-select-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 30rpx;
  background: #fff;
  border-radius: 40rpx;
  padding: 20rpx 0;
}
.org-select {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 40rpx;
  cursor: pointer;
  padding: 10rpx;
  border-radius: 20rpx;
}
.org-select image {
  transition: filter 0.2s;
}
.org-select text {
  margin-top: 10rpx;
  font-size: 36rpx;
  font-weight: bold;
  color: #1976d2;
}
.fixed-bottom-btns {
  position: fixed;
  left: 0;
  bottom: 80rpx;
  width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.fixed-bottom-btns .btn-group {
  width: 85vw;
  display: flex;
  justify-content: space-between;
  margin-bottom: 20rpx;
}
.type-btn-group {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 30rpx;
  background: #fff;
  border-radius: 40rpx;
  padding: 20rpx 0;
}
.type-btn {
  color: #000;
  width: 30vw;
  border-radius: 68rpx;
  margin: 0 20rpx;
  padding: 30rpx 0;
  text-align: center;
  box-sizing: border-box;
  font-size: 32rpx;
  font-weight: bold;
  transition: background 0.2s, color 0.2s, border 0.2s;
  border: 2rpx solid transparent;
  cursor: pointer;
  background: #fff;
}

.type-btn.selected {
  background-color: #1296db;
  color: #fff;
  border: 2rpx solid #1296db;
}
</style>
