import React, { useState, useEffect } from 'react';

import { Input, Menu, Dropdown, Button, Icon, message, Table, Tooltip, Tabs, Radio, Divider, Tag, Select, Form, Alert } from 'antd';
import { FormattedMessage } from 'umi-plugin-react/locale';
import BuildSelect from '../../../components/SelectButton/BuildSelect'
import router from 'umi/router';
import styles from '../../style/GoodsList.less';
import XForm, { FieldTypes } from '../../../components/XForm';
import Wangedit from '../../../components/Wangedit/Wangedit'
import channels from './channelList.less';
import Tagss from '../components/Tagss.jsx';
import apis from '../../../services/apis';
import request from '../../../utils/request'

const { TextArea } = Input;
const { Option } = Select;


/**
 *
 *
 * @param {*} props
 * @returns
 */
const Edit = (props) => {
  const userId = props.location.query.userId
  const [userData, setUserData] = useState({})
  const [tagData, setTagData] = useState([])
  const [roleData, setRoleData] = useState([])

  const getTagList = () => {
    request({ ...apis.staff.taTags, params: { pageNum: 1, pageSize: 999 } }).then((data) => {
      setTagData(data.records)
    })
  }

  const getRoleList = () => {
    request({ ...apis.role.getRoleList, params: { pageNum: 1, pageSize: 999 } }).then((data) => {
      console.log(data)
      setRoleData(data.records)
    })
  }

  // 查询列表
  const getUserData = (userId) => {
    request({ ...apis.staff.getTaUser, urlData: { id: userId } }).then((data) => {
      console.log(data, "tauser")
      setUserData(data)
    })
  }

  useEffect(() => {
    getTagList();
    getRoleList();
    if (userId) {
      getUserData(userId);
    }
  }, [])

  const tagsChange = (value) => {
    console.log(`selected ${value}`);
  }

  const handleSubmit = val => {
    if (userId) {
      request({ ...apis.staff.updateTaUser, urlData: { id: userId }, data: val, }).then((data) => {
        console.log(data, "tauser")
        message.info("保存成功")
        router.go(-1)
      }).catch(error => {
        // message.info(error.message)
      })
    } else {
      request({ ...apis.staff.addTaUser, data: val, }).then((data) => {
        console.log(data, "tauser")
        message.info("保存成功")
        router.go(-1)
      }).catch(error => {
        // message.info(error.message)
      })
    }
  }

  const fields = [
    {
      label: '姓名',
      name: 'userName',
      type: FieldTypes.Text,
      value: userData.userName,
      rules: [
        { required: true, message: '请输入姓名' },
      ]
    },
    {
      label: '公司',
      name: 'orgName',
      type: FieldTypes.Text,
      placeholder: '请输入公司名称',
      value: userData.orgName,
      rules: [
        { required: true, message: '请输入公司名称' },
      ]
    },
    {
      label: '部门',
      name: 'department',
      type: FieldTypes.Text,
      placeholder: '请输入部门',
      value: userData.department,
      rules: [
        { required: true, message: '请输入部门' },
      ]
    },
    {
      label: '职位',
      name: 'position',
      type: FieldTypes.Text,
      placeholder: '请输入职位',
      value: userData.position,
      rules: [
        { required: true, message: '请输入职位' },
      ]
    },
    {
      label: '是否置业顾问',
      name: 'isConsultant',
      type: FieldTypes.Switch,
      value: userData.isConsultant
    },
    {
      label: '电话',
      name: 'phone',
      type: FieldTypes.Text,
      placeholder: '请输入电话号码',
      value: userData.phone,
      rules: [
        {
            required: true,
            pattern: new RegExp('^1[0-9]{10}$'),
            message: '请输入正确的电话号码',
        },
      ],
      help: '默认密码：123456',
    },
    {
      label: '角色',
      name: 'roleIds',
      render: <Select
        mode="multiple"
        style={{ width: '100%' }}
        placeholder="请选择标签"
        onChange={tagsChange} >
        {roleData.map(item => (
          <Select.Option key={item.roleId} value={item.roleId}>
            {item.roleName}
          </Select.Option>
        ))}
      </Select>,
      value: userData.roleIds,
    },
    {
      label: '标签',
      name: 'taTags',
      render: <Select
        mode="multiple"
        style={{ width: '100%' }}
        placeholder="请选择标签"
        onChange={tagsChange} >
        {tagData.map(item => (
          <Select.Option key={item.tagId} value={item.tagId}>
            {item.tagName}
          </Select.Option>
        ))}
      </Select>,
      value: userData.taTags,
    },
    {
      label: '地址',
      name: 'address',
      type: FieldTypes.Text,
      placeholder: '请输入地址',
      value: userData.address,
      rules: [
        { required: true, message: '请输入地址' },
      ]
    },
    {
      label: '授权项目',
      name: 'buildingId',
      render: <BuildSelect />,
      value: userData.buildingId
    },
    {
      label: '头像',
      name: 'photo',
      type: FieldTypes.ImageUploader,
      extra: '建议图片大小 640 * 640',
      value: userData.photo,
      rules: [
        { required: true, message: '请选择头像' },
      ]
    },
    {
      label: '简介',
      name: 'description',
      render: <TextArea className={channels.inpuitTxt} ></TextArea>,
      value: userData.description

    },
    {
      label: '状态',
      name: 'status',
      render: <Radio.Group initialValue="1" buttonStyle="solid">
        <Radio.Button value="0">禁用</Radio.Button>
        <Radio.Button value="1">启用</Radio.Button>
      </Radio.Group>,
      value: userData.status != null ? userData.status.toString() : "1"
    },
  ]

  console.log('--------->', fields)

  return <XForm onSubmit={handleSubmit} fields={fields}></XForm>
}



export default Edit









