<template>
  <view class="login_back">
    <view class="title_back" align="center" style="display: flex; flex-direction: row; justify-content: center;">
      <image :src="logoimg" style="width:40px;height: 40px;"></image>
      <text class="title" style=" margin-top: 10px;">火灾与建筑物安全隐患排查平台</text>
    </view>
    <view class="froms" style="padding-top: 20px;">
      <!-- <u-form ref="form" labelPosition="left" labelWidth="60" :labelStyle="{'fontSize':'32rpx'}" :model="formData"
        :rules="rules"> -->
      <u-form ref="form" labelPosition="left" labelWidth="0" :model="formData" :rules="rules">

        <u-form-item prop="username" name="username">
          <u-input border="surround" v-model="formData.username" placeholder="请输入用户名" clearable />
        </u-form-item>

        <u-form-item prop="password" name="password">
          <u-input border="surround" password v-model="formData.password" placeholder="请输入密码"
            passwordVisibilityToggle />
        </u-form-item>
        <view style="display: flex; flex-direction: row; justify-content: space-between;">
          <u-form-item prop="code" name="code" style="width:50%">
            <u-input border="surround" v-model="formData.code" placeholder="请输入验证码" />
          </u-form-item>
          <img :show-loading="true" :src="codeUrl" style="width: 40%; height:40px; margin-top:20rpx; margin-left: 1%;"
            @click="getCodeImginfo">
        </view>
        <!-- <uni-forms-item label="记住密码" name="password">
          <checkbox-group name="" @change="change">
            <label>
              <checkbox value="ces" :checked="formData.remember" /><text></text>
            </label>
          </checkbox-group>
        </uni-forms-item> -->
      </u-form>
      <u-button type="primary" @click="submitForm()" style="margin-top:30rpx;">登录</u-button>
    </view>
    <!-- <view class="bottom_sapce">
      <navigator url="/pages/login/register" open-type="navigate" hover-class="navigator-hover"
        style="float: left;padding-left: 30px;">
        <text class="register">注册账户</text>
      </navigator>
      <navigator url="/pages/login/forget" open-type="navigate" hover-class="navigator-hover"
        style="float: right;padding-right:30px">
        <text class="register">忘记密码</text>
      </navigator>
    </view> -->
  </view>
</template>

<script>
  import {
    login,
    logout,
    getInfo,
    getCodeImg
  } from '@/apis/longin'
  import useUserStore from "@/store/user";
  import logoimg from '@/static/logo-DN6OD_0Z.png'
  export default {
    data() {
      return {
        value: true,
        logoimg,
        formData: {
          // username: "admin",
          // password: "admin123456",
          username: "",
          password: "",
          uuid: "",
          code: "",
          loginType: 0
        },
        codeUrl: '',
        rules: {
          username: {
            type: 'string',
            required: true,
            message: '请输入用户名',
            trigger: ['blur', 'change'],
          },
          password: {
            type: 'string',
            required: true,
            message: '请输入密码',
            trigger: ['blur', 'change'],
          },
        },
      }
    },
    mounted() {
      const userStore = useUserStore();
      this.formData.username = userStore.username;
      this.formData.password = userStore.password;
    },
    onReady() {
      // 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
      this.$refs.form.setRules(this.rules);
      this.getCodeImginfo();
      //const fs = uni.getFileSystemManager();
      // const configPath = `${uni.env.USER_DATA_PATH}/config.json`;

    },
    methods: {
      change() {
        this.formData.remember = !this.formData.remember
        console.log(this.formData.remember ? '记住密码' : "不记住密码");
      },
      getCodeImginfo() {
        //获取验证码
        getCodeImg().then((res) => {
          // debugger
          this.codeUrl = "data:image/png;base64," + res.data.img;
          this.formData.uuid = res.data.uuid;
        })
      },
      submitForm() {

        this.$refs.form.validate().then(res => {
          // debugger
          const userStore = useUserStore();
          this.$modal.loading("登录中，请耐心等待...")
          userStore.userLogin(this.formData)
            .then(() => {
              this.$modal.closeLoading()
              userStore.userinfo().then(() => {
                // uni.redirectTo({
                //   url: "/pages/admin/home"
                // })
                userStore.setparentmenutitle('执行');
                userStore.setparentmenutitle('检查表');
                uni.redirectTo({
                  url: "/pages/zhixing/jianchabiao"
                })
              }).catch((error) => {
                this.$modal.msgError("个人信息获取失败！")

              }); //获取个人资料

            }).catch((error) => {
              this.$modal.closeLoading()
              //  debugger
              console.log("登录失败", error);

              setTimeout(() => {
                this.getCodeImginfo();
              }, 1000);

              this.formData.code = '';
              //loading.value = false;
              //getCode();
            });


        }).catch(err => {
          // debugger
          console.log('表单错误信息：', err);
        })
        // console.log(this.formData);
        // uni.navigateTo({
        //   url: "/pages/admin/home"
        // })
      }
    }
  }
</script>

<style>
  page {
    /*  background-image: url(@/static/login_back.jpg); */
    background-image: url(@/static/newbj.jpg);
    background-size: cover;
    height: 100vh;
  }

  .froms {
    padding: 30px;
  }

  .login_back {
    width: 700rpx;
    height: 700rpx;
    /*  background-color: rgba(255, 255, 255, 0.8); */
    background-color: rgba(255, 255, 255, 1);
    position: absolute;
    /*  top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); */
    top: 50%;
    left: 22%;
    transform: translate(-50%, -50%);
    border-radius: 10px;
  }

  .title_back {
    padding-top: 30px;


  }

  .title {
    /*  color: #374041; */
    color: #007aff;
    font-size: 40rpx;
    align-items: center;
  }
</style>