<template>
  <el-form ref="loginForm" :model="form" :rules="rules" label-width="0" size="large">
    <el-form-item prop="user">
      <el-input v-model="form.user" prefix-icon="el-icon-user" clearable :placeholder="$t('login.userPlaceholder')">
        <!-- <template #append>
          <el-select v-model="userType" style="width: 130px">
            <el-option :label="$t('login.admin')" value="admin"></el-option>
            <el-option :label="$t('login.user')" value="user"></el-option>
          </el-select>
        </template> -->
      </el-input>
    </el-form-item>
    <el-form-item prop="password">
      <el-input v-model="form.password" prefix-icon="el-icon-lock" clearable show-password
        :placeholder="$t('login.PWPlaceholder')" @keyup.enter="login"></el-input>
    </el-form-item>
    <el-form-item style="margin-bottom: 10px">
      <el-col :span="12" class="login-reg">
        <!-- <el-link @click="visitors">{{$t('login.fangke')}}</el-link> -->
      </el-col>
      <el-col :span="12" class="login-forgot">
        <router-link to="/reset_password">{{ $t("login.forgetPassword") }}？</router-link>
      </el-col>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" style="width: 100%" :loading="islogin" round @click="login">{{ $t("login.signIn")
        }}</el-button>
    </el-form-item>

    <!--  <div class="login-reg">
      {{ $t("login.noAccount") }}
      <router-link to="/user_register">{{
        $t("login.createAccount")
      }}</router-link>
    </div>-->
  </el-form>
  <sc-dialog v-model="visitorsdialog" draggable title="创建访客账号">
    <el-form ref="dialogForms" :model="visitorform" label-width="120px">
      <el-row>
        <el-col :md="24" :sm="24">
          <el-form-item label="姓名" prop="name">
            <el-input v-model="visitorform.name" placeholder="请输入姓名" clearable></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :md="24" :sm="24">
          <el-form-item label="用户名" prop="username">
            <el-input v-model="visitorform.username" placeholder="请输入用户名" clearable></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="visitorsdialog = false">取 消</el-button>
      <el-button type="primary" @click="submitvisitor">确 定</el-button>
    </template>
  </sc-dialog>
</template>

<script>
export default {
  data() {
    return {
      redirect: undefined,
      userType: "admin",
      visitorsdialog: false,
      visitorform: {},
      form: {
        user: "admin",
        password: "admin",
        autologin: false,
      },
      rules: {
        user: [
          {
            required: true,
            message: this.$t("login.userError"),
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: this.$t("login.PWError"),
            trigger: "blur",
          },
        ],
      },
      islogin: false,
    };
  },
  watch: {
    userType(val) {
      if (val == "admin") {
        this.form.user = "admin";
        this.form.password = "admin";
      } else if (val == "user") {
        this.form.user = "user";
        this.form.password = "user";
      }
    },
    $route: {
      handler: function (route) {
        this.redirect = route.query && route.query.redirect;
      },
      immediate: true,
    },
  },
  mounted() { },
  methods: {
    async login() {
      let that = this;
      var validate = await that.$refs.loginForm.validate().catch(() => { });
      if (!validate) {
        return false;
      }
      that.islogin = true;
      var data = {
        username: that.form.user,
        // password: that.$TOOL.crypto.MD5(that.form.password)
        password: that.form.password,
      };
      //获取token
      try {
        var res = await that.$API.auth.token.post(data);
        that.$TOOL.data.set("TOKEN", res.access);
        that.$TOOL.data.set("TOKEN_REFRESH", res.refresh);
        that.$TOOL.data.set("TOKEN_TIME", new Date().getTime());
        try {
          var res1 = await that.$API.auth.info.get();
          that.$TOOL.data.set("USER_INFO", res1);
          that.$TOOL.data.set("PERMISSIONS", Object.keys(res1.perms));

          let base_dashboard = this.$TOOL.data.get('BASE_INFO').base.base_dashboard;
          if (this.redirect) {
            base_dashboard = this.redirect;
          }
          else if (base_dashboard == null || base_dashboard == undefined) {
            base_dashboard = '/dashboard'
          }
          if (this.$TOOL.data.get('BASE_INFO').base.base_name_short.indexOf('曲阳') != -1) {
            if (res1.type === 'employee') {
              this.$router.replace({
                path: base_dashboard,
              });
            } else {
              this.$router.replace({
                path: "/rpm/rpj",
              });
            }
            that.$message.success("Login Success 登录成功");
            that.islogin = false;
            that.$API.am.area.list.req({ page_size: 999 }).then(res => {
              if (res.err_msg) {
              } else {
                debugger;
                let areaList = res.results;
                that.$TOOL.data.set("qyjyAreaList", areaList);
              }
            })
          } else {
            this.$router.replace({
              path: base_dashboard,
            });
          }
        } catch (err) {
          that.islogin = false;
          console.log(err);
        }
      } catch (err) {
        that.islogin = false;
        console.log(err);
      } finally {
        that.islogin = false;
      }
    },
    visitors() {
      this.visitorsdialog = true;
    },
    submitvisitor() {
      this.$API.vm.visitor.createz
        .req(this.visitorform)
        .then((res) => {
          this.$message.success("创建成功!");
          this.visitorsdialog = false;
          return res;
        })
        .catch((err) => {
          return err;
        });
    }
  },
};
</script>

<style></style>
