/*
 * @Author: zhangleyuan
 * @Date: 2020-11-27 15:06:31
 * @LastEditors: zhangleyuan
 * @LastEditTime: 2020-12-07 15:59:26
 * @Description: 描述一下
 * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
 */


import React, { useEffect, useState } from "react";
import { withRouter } from "react-router-dom";
import {Form,Button,Input,message} from "antd";
import Breadcrumbs from "@/components/Breadcrumbs";
import UpLoad from "../common/UpLoad";
import _ from 'underscore';
import $ from 'jquery';
import baseImg from '@/common/images/xiaomai-IMG.png';
import {CropperModal} from '@/components/';
import IdentificationModal from './IdentificationModal';
import ChangePhoneModal from './ChangePhoneModal';
import BaseService from "@/domains/basic-domain/baseService";
import StoreService from "@/domains/store-domain/storeService";
import User from '@/common/js/user';
import './index.less';
const FormItem = Form.Item;
function PersonalInfoPage() {
  const [avatar,setAvatar]  = useState(baseImg);
  const [imgUrl, setImgUrl] = useState(avatar);
  const [nickName,setNickName] = useState('');
  const [cropperModalVisible, setCropperModalVisible] = useState(false);
  const [IdentificationModalVisible, setIdentificationModalVisible] = useState(false);
  const [changePhoneModalVisible, setChangePhoneModalVisible] = useState(false);
  const [roleCodes,setRoleCodes] = useState([])
  const [phone,setPhone] = useState("");
  const storeUserId = User.getStoreUserId()
  useEffect(() => {
    getUserInfo();
  },[storeUserId])
  function getUserInfo(){
    const param ={
      storeUserId:User.getStoreUserId()
    }
    BaseService.getStoreUser(param).then((res) => {
      const {nickName,phone,roleCodes,avatar} = res.result;
      setNickName(nickName);
      setPhone(phone);
      setRoleCodes(roleCodes)
      setAvatar(avatar)
    });
  }
  function _handleUpdateAvatar(e: any): any {
    const avatar = e.target.files[0];
    const newUrl = URL.createObjectURL(avatar);
    const $image = $('#image');
    setImgUrl(newUrl);
    setCropperModalVisible(true);
  }

  function _onUpload(): any {
    $('#CrpperAvatarPic').trigger('click');
  }

  function changeAvatar(img:string):any{
    setAvatar(img);
    setImgUrl(img);
  }

  function closeCropperModal():any {
    setCropperModalVisible(false);
  }
  function identificationConfirm():any {
    setIdentificationModalVisible(false);
    setChangePhoneModalVisible(true);
  }
  function saveUserInfo(){ 
    const params = {
      nickName,
      phone: String(phone),
      roleCodes:roleCodes,
      avatar,
      storeUserId:User.getStoreUserId()
    };
    StoreService.editEmployee(params).then((res) => {
      message.success("编辑成功");
    });
  }
  return (
    <div className="page personal-info-page">
      <div className="page-content">
        <div className="content-header"> 
              个人设置
        </div>
        <div className="box">
        <Form>
          <div className="avatat-item">
            <span className="label">头像：</span>
            <Button id="click_upload_btn" onClick={_onUpload}>点击上传</Button>
            <input
              type="file"
              accept="image/*"
              id="CrpperAvatarPic"
              style={{ display: 'none' }}
              onChange={_handleUpdateAvatar} />
            <img className="avatar" src={avatar}></img>
            { cropperModalVisible &&
              <CropperModal 
                imgUrl={imgUrl}
                save={changeAvatar}
                close={closeCropperModal}
              />
            }
          </div>
          <div className="name-item">
            <span className="label">姓名：</span>
            <Input
              placeholder="请输入姓名" 
              style={{ width:300,height:32}} value={nickName}  
              onChange={(e) => { 
                setNickName(e.target.value);
              }}
            />
          </div>
          <div className="phone-item">
            <span className="label">手机号：</span>
            <span>{phone}</span>
            <Button className="changePhoneBtn" onClick={()=>{setIdentificationModalVisible(true)}}>更换手机号</Button>
          </div>
          <div>
            <Button type="primary" onClick={()=>{saveUserInfo()}}>保存</Button>
          </div>
        </Form>
        </div>
        {
          IdentificationModalVisible  && <IdentificationModal  phone={phone} onClose={()=>{setIdentificationModalVisible(false)}} onConfirm={()=>{identificationConfirm()}}/>
        }
        
        {
          changePhoneModalVisible  && <ChangePhoneModal   onClose={()=>{setChangePhoneModalVisible(false)}}/>
        }
      </div>
      
    </div>
  );
}

export default withRouter(PersonalInfoPage);
