<template>
  <view class="bindUser">
    <view class="scanFont">您的微信未绑定工号，请填写工号后进行使用</view>
    <view class="searchUser">
      <input class="searchUserIpt" v-model="account" type="text" placeholder="请输入工号" />
      <button class="searchUserBtn" @click="search(account)">检索</button>
    </view>
    <view class="accountName">
      检索到的用户：{{accountName}}
    </view>
    <view class="bind">
      <button class="bindBtn" :disabled="!bindAccount" type="primary" @click="bindAccountHandler(account)">绑定工号</button>
    </view>
    <!-- 弹窗 -->
    <showModel :title="models.title" :icon="models.icon" :disjunctor="models.disjunctor" :content="models.content"
      @ok="ok" @cancel="cancel" @know="know" :operate="models.operate"></showModel>
  </view>
</template>

<script>
  import {
    get,
    post,
    SM,
    baseUrl,
    webHandle
  } from "../../http/http.js";
  export default {
    data() {
      return {
        account: '', //检索的工号
        accountName: '', //检索的用户名称
        bindAccount: '', //绑定的工号
        // 弹窗model
        models: {
          disjunctor: false,
        },
        type: "", //登录来源类型
      }
    },
    methods: {
      // 绑定工号
      bindAccountHandler(account) {
        this.models = {
          disjunctor: true,
          title: "提示",
          content: `您的账号为“${this.bindAccount}”，姓名为“${this.accountName}”，您确认要绑定吗？`,
          icon: "warn",
          operate: {
            ok: "确定",
            cancel: "取消",
          },
        };
      },
      // 检索
      search(account) {
        let trimValue = account.trim();
        if (trimValue === '') {
          this.accountName = '';
          this.bindAccount = '';
          return;
        }
        uni.showLoading({
          title: "检索中",
          mask: true,
        });
        post("/data/isRepeat", {
          account: trimValue
        }).then(result => {
          uni.hideLoading();
          if (result.status == 200) {
            this.accountName = result.userName;
            this.bindAccount = trimValue;
          } else {
            this.accountName = '';
            this.bindAccount = '';
          }
        })
      },
      //抢单后知道了
      know() {
        this.models.disjunctor = false;
      },
      //确定
      ok() {
        this.models.disjunctor = false;
        uni.showLoading({
          title: "加载中",
          mask: true,
        });
        post("/data/isBindAccount", {
          account: this.bindAccount
        }).then((res) => {
          uni.hideLoading();
          let _this = this;
          if (res.status == 200) {
            uni.showModal({
              title: '提示',
              content: '绑定成功',
              showCancel: false,
              confirmColor: '#49b856',
              confirmText: '进入系统',
              success: function(result) {
                if (result.confirm) {
                  console.log('用户点击确定',_this.type);
                  if (_this.type) {
                    location.assign(baseUrl + '/' + '#/pages/homePage/homePage?type=' +
                      _this.type);
                  } else {
                    location.assign(baseUrl + '/' + '#/pages/homePage/homePage');
                  }
                } else if (result.cancel) {
                  console.log('用户点击取消');
                }
              }
            });
          } else if (res.status == 500) {
            this.models = {
              disjunctor: true,
              title: '提示',
              content: '您提供的工号已经绑定微信号，请联系管理人员进行处理',
              icon: 'warn',
              operate: {
                know: "知道了",
              },
            };
          }
        })
      },
      //取消
      cancel() {
        this.models.disjunctor = false;
      },
    },
    onLoad(options) {
      console.log(options, 'seimin');
      this.type = options.type || "";
      // #ifdef APP-PLUS
      webHandle("no", "app");
      // #endif
      // #ifdef H5
      webHandle("no", "wx");
      // #endif
    }
  }
</script>

<style lang="less" scoped>
  .bind {
    margin-top: 68rpx;
    display: flex;
    justify-content: center;

    .bindBtn {
      background-color: rgb(73, 184, 86) !important;

      &[disabled] {
        background-color: rgba(73, 184, 86, 0.6) !important
      }
    }
  }

  .bindUser {
    background-color: rgb(249, 250, 251);
    padding-top: 36rpx;
    height: 100vh;
    box-sizing: border-box;

    .scanFont {
      font-size: 34rpx;
      font-weight: 700;
      margin: 30rpx;
      text-align: center;

      &.nr {
        font-weight: normal;
      }

      &.red {
        color: red;
      }
    }

    .searchUser {
      display: flex;
      align-items: center;
      padding: 30rpx;

      .searchUserIpt {
        padding: 24rpx;
        flex: 3;
        border: 1px solid #0003;
        margin-right: 30rpx;
      }

      .searchUserBtn {
        flex: 1;
      }
    }

    .accountName {
      padding: 0 30rpx;
    }
  }
</style>