<template>
  <a-modal
    title="用户增加"
    :width="900"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
    @cancel="handleCancel"
  >
    <a-spin :spinning="confirmLoading">
      <a-divider orientation="left">基本信息</a-divider>
      <a-row :gutter="24">
        <a-col :md="12" :sm="24">
          <a-form-item label="头像" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
            <a-upload
              name="file"
              list-type="picture-card"
              class="avatar-uploader"
              :show-upload-list="false"
              :customRequest="handleUpload"
            >
              <img v-if="imageUrl" style="max-height:200px;max-width:400px;" :src="imageUrl" alt="头像" />
              <div v-else>
                <a-icon :type="uploading ? 'loading' : 'plus'" />
                <div class="ant-upload-text">
                  上传头像
                </div>
              </div>
            </a-upload>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :md="12" :sm="24">
          <a-form :form="form">
            <a-form-item label="账号" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
              <a-input
                placeholder="请输入账号"
                v-decorator="[
                  'account',
                  {
                    validateFirst: true,
                    rules: [
                      { required: true, min: 5, message: '请输入至少五个字符的账号！' },
                      { max: 50, message: '账号最多50个字' }
                    ]
                  }
                ]"
              />
            </a-form-item>
          </a-form>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form :form="form">
            <a-form-item label="姓名" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
              <a-input
                placeholder="请输入姓名"
                v-decorator="[
                  'name',
                  {
                    validateFirst: true,
                    rules: [
                      { required: true, message: '请输入姓名！' },
                      { max: 100, message: '姓名最多100个字' }
                    ]
                  }
                ]"
              />
            </a-form-item>
          </a-form>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :md="12" :sm="24">
          <a-form :form="form">
            <a-form-item label="密码" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
              <a-input
                placeholder="请输入密码"
                type="password"
                v-decorator="[
                  'password',
                  {
                    rules: [
                      { required: true, min: 5, message: '请输入至少五个字符的密码！' },
                      {
                        validator: validateToNextPassword
                      }
                    ]
                  }
                ]"
              />
            </a-form-item>
          </a-form>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form :form="form">
            <a-form-item label="重复密码" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
              <a-input
                placeholder="请再次输入密码"
                type="password"
                v-decorator="[
                  'confirm',
                  {
                    rules: [
                      { required: true, message: '请再次输入密码！' },
                      {
                        validator: compareToFirstPassword
                      }
                    ]
                  }
                ]"
              />
            </a-form-item>
          </a-form>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :md="12" :sm="24">
          <a-form :form="form">
            <a-form-item label="昵称" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
              <a-input
                placeholder="请输入昵称"
                v-decorator="[
                  'nickName',
                  {
                    validateFirst: true,
                    rules: [{ max: 100, message: '昵称最多100个字' }]
                  }
                ]"
              />
            </a-form-item>
          </a-form>
        </a-col>
        <a-col :md="12" :sm="24" v-if="$store.state.user.admintype === 1">
          <a-form :form="form">
            <a-form-item label="账户类型" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
              <a-select
                placeholder="请选择账户类型"
                v-decorator="['admintype', { rules: [{ required: true, message: '请选择账户类型' }] }]"
              >
                <a-select-option v-for="(item, index) in admintypedropdown" :key="index" :value="item.code">{{
                  item.val
                }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-form>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :md="12" :sm="24">
          <a-form :form="form">
            <a-form-item label="手机号" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
              <a-input
                placeholder="请输入手机号"
                v-decorator="[
                  'phone',
                  {
                    validateFirst: true,
                    rules: [
                      { required: true, message: '请输入手机号！' },
                      { max: 20, message: '手机号最多20个字' }
                    ]
                  }
                ]"
              />
            </a-form-item>
          </a-form>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form :form="form">
            <a-form-item label="电话" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
              <a-input
                placeholder="请输入电话"
                v-decorator="[
                  'tel',
                  {
                    validateFirst: true,
                    rules: [{ max: 20, message: '电话最多20个字' }]
                  }
                ]"
              />
            </a-form-item>
          </a-form>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :md="12" :sm="24">
          <a-form :form="form">
            <a-form-item label="邮箱" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
              <a-input
                placeholder="请输入邮箱"
                v-decorator="['email', { rules: [{ max: 50, message: '邮箱最多50个字' }] }]"
              />
            </a-form-item>
          </a-form>
        </a-col>
      </a-row>
      <a-divider orientation="left">会员信息</a-divider>
      <a-row :gutter="24">
        <a-col :md="12" :sm="24">
          <a-form :form="form">
            <a-form-item label="机构" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
              <a-tree-select
                v-decorator="['sysEmpParam.orgId', { rules: [{ required: true, message: '请选择机构！' }] }]"
                style="width: 100%"
                :dropdownStyle="{ maxHeight: '300px', overflow: 'auto' }"
                :treeData="orgTree"
                placeholder="请选择机构"
                treeDefaultExpandAll
                @change="e => initrOrgName(e)"
              >
                <span slot="title" slot-scope="{ id }">{{ id }}</span>
              </a-tree-select>
            </a-form-item>
            <a-form-item v-show="false">
              <a-input v-decorator="['sysEmpParam.orgName']" />
            </a-form-item>
          </a-form>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form :form="form">
            <a-form-item label="编号" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
              <a-input
                placeholder="请输入编号"
                v-decorator="[
                  'sysEmpParam.jobNum',
                  {
                    validateFirst: true,
                    rules: [{ max: 30, message: '编号最多30个字' }]
                  }
                ]"
              />
            </a-form-item>
          </a-form>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :md="12" :sm="24">
          <a-form :form="form">
            <a-form-item label="职位信息" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
              <a-select
                style="width: 100%"
                placeholder="请选择职位信息"
                v-decorator="['sysEmpParam.posIdList', { rules: [{ required: true, message: '请选择职位信息！' }] }]"
              >
                <a-select-option v-for="(item, index) in posList" :key="index" :value="item.id">{{
                  item.name
                }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-form>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form :form="form">
            <a-form-item label="行业" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
              <a-select
                style="width: 100%"
                placeholder="请选择行业"
                v-decorator="['industryid', { rules: [{ required: true, message: '请选择行业！' }] }]"
              >
                <a-select-option v-for="(item, index) in industryList" :key="index" :value="item.id">{{
                  item.name
                }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-form>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :md="12" :sm="24">
          <a-form-item label="是否领导" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-switch v-decorator="['isleader', { valuePropName: 'checked' }]" />
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item label="序号" help="数字越小越靠前" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-input placeholder="请输入排序号" type="number" v-decorator="['sortcode', { initialValue: 100 }]" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :md="12" :sm="24">
          <a-form-item label="籍贯" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-input
              placeholder="请输入籍贯"
              v-decorator="[
                'place',
                {
                  validateFirst: true,
                  rules: [{ max: 100, message: '籍贯最多100个字' }]
                }
              ]"
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :md="24" :sm="24">
          <a-form-item label="个人爱好" :labelCol="labelCol_JG" :wrapperCol="wrapperCol_JG" has-feedback>
            <a-textarea
              placeholder="请输入个人爱好"
              :rows="4"
              v-decorator="[
                'interests',
                {
                  validateFirst: true,
                  rules: [{ max: 500, message: '个人爱好最多500个字' }]
                }
              ]"
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :md="24" :sm="24">
          <a-form-item label="提供的资源" :labelCol="labelCol_JG" :wrapperCol="wrapperCol_JG" has-feedback>
            <a-textarea
              placeholder="能为智造团提供哪些资源"
              :rows="4"
              v-decorator="[
                'provide',
                {
                  validateFirst: true,
                  rules: [{ max: 500, message: '资源最多500个字' }]
                }
              ]"
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :md="24" :sm="24">
          <a-form-item label="希望的资源" :labelCol="labelCol_JG" :wrapperCol="wrapperCol_JG" has-feedback>
            <a-textarea
              placeholder="希望智造团提供的资源"
              :rows="4"
              v-decorator="[
                'demand',
                {
                  validateFirst: true,
                  rules: [{ max: 500, message: '资源最多500个字' }]
                }
              ]"
            />
          </a-form-item>
        </a-col>
      </a-row>
    </a-spin>
  </a-modal>
</template>

<script>
import { sysUserAdd } from '@/api/modular/system/userManage'
import { getOrgTree, getOrgList } from '@/api/modular/system/orgManage'
import { sysPosList } from '@/api/modular/system/posManage'
import { GetClientDataList } from '@/utils/clientdata'
import { UploadImg } from '@/api/modular/main/upload'
import { AllList } from '@/api/modular/main/industry'

import moment from 'moment'
export default {
  data() {
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      // 机构行样式
      labelCol_JG: {
        xs: { span: 24 },
        sm: { span: 3 }
      },
      wrapperCol_JG: {
        xs: { span: 24 },
        sm: { span: 20 }
      },
      count: 1,
      visible: false,
      confirmLoading: false,
      orgTree: [],
      orgList: [],
      posList: [],
      sysEmpParamExtList: [],
      memberLoading: false,
      form: this.$form.createForm(this),
      data: [],
      birthdayString: [],
      admintypedropdown: GetClientDataList('admintype'),
      uploading: false,
      imageUrl: '',
      headimg: '',
      industryList: []
    }
  },
  methods: {
    // 初始化方法
    add() {
      this.visible = true
      this.imageUrl = ''
      this.headimg = ''
      this.uploading = false
      this.getOrgDate()
      this.getPosList()
      this.getIndustryList()
    },
    /**
     * 增行
     */
    newMember() {
      const length = this.data.length
      this.data.push({
        key: length === 0 ? '1' : (parseInt(this.data[length - 1].key) + 1).toString(),
        extOrgId: '',
        extPosId: '',
        editable: true,
        isNew: true
      })
    },
    /**
     * 删除
     */
    remove(key) {
      const newData = this.data.filter(item => item.key !== key)
      this.data = newData
    },
    /**
     * 选择子表单单项触发
     */
    handleChange(value, key, column) {
      const newData = [...this.data]
      const target = newData.find(item => key === item.key)
      if (target) {
        target[column] = value
        this.data = newData
      }
    },
    /**
     * 获取机构树，并加载于表单中
     */
    getOrgDate() {
      getOrgTree().then(res => {
        this.orgTree = res.data
      })
      getOrgList().then(res => {
        this.orgList = res.data
      })
    },
    /**
     * 获取职位list列表
     */
    getPosList() {
      sysPosList().then(res => {
        this.posList = res.data
      })
    },
    // 获取行业列表
    getIndustryList() {
      AllList().then(res => {
        this.industryList = res.data
      })
    },
    compareToFirstPassword(rule, value, callback) {
      const form = this.form
      if (value && value !== form.getFieldValue('password')) {
        // eslint-disable-next-line standard/no-callback-literal
        callback('请确认两次输入密码的一致性！')
      } else {
        callback()
      }
    },
    validateToNextPassword(rule, value, callback) {
      const form = this.form
      if (value && this.confirmDirty) {
        form.validateFields(['confirm'], { force: true })
      }
      callback()
    },
    /**
     * 选择树机构，初始化机构名称于表单中
     */
    initrOrgName(value) {
      this.form.getFieldDecorator('sysEmpParam.orgName', {
        initialValue: this.orgList.find(item => value === item.id).name
      })
    },
    /**
     * 子表单json重构
     */
    JsonReconsitution() {
      this.sysEmpParamExtList = []
      const newData = [...this.data]
      newData.forEach(item => {
        // eslint-disable-next-line eqeqeq
        if ((item.extOrgId != '') & (item.extPosId != '')) {
          this.sysEmpParamExtList.push({ orgId: item.extOrgId, posId: item.extPosId })
        }
      })
    },
    /**
     * 日期需单独转换
     */
    onChange(date, dateString) {
      if (date == null) {
        this.birthdayString = []
      } else {
        this.birthdayString = moment(date).format('YYYY-MM-DD')
      }
    },
    handleSubmit() {
      const {
        form: { validateFields }
      } = this
      this.confirmLoading = true
      validateFields((errors, values) => {
        if (!errors) {
          this.JsonReconsitution()
          values.sysEmpParam['extIds'] = this.sysEmpParamExtList
          if (this.birthdayString.length > 0) {
            values.birthday = this.birthdayString
          }
          values['avatar'] = this.headimg
          sysUserAdd(values)
            .then(res => {
              if (res.code === 0) {
                this.$message.success('新增成功')
                this.confirmLoading = false
                this.$emit('ok', values)
                this.handleCancel()
              } else {
                this.$myerror('新增失败：' + JSON.stringify(res.message))
              }
            })
            .finally(res => {
              this.confirmLoading = false
            })
        } else {
          this.confirmLoading = false
        }
      })
    },
    handleCancel() {
      this.form.resetFields()
      this.visible = false
      // 清理子表单中数据
      this.data = []
      // 清理时间
      this.birthdayString = []
    },
    // 上传
    handleUpload(data) {
      const formData = new FormData()
      formData.append('file', data.file)
      this.uploading = true
      UploadImg(formData)
        .then(res => {
          if (res.code === 0) {
            this.imageUrl = res.data.url
            this.headimg = res.data.path
          } else {
            this.$myerror(res.message)
          }
          this.uploading = false
        })
        .catch(() => {
          this.$message.error('上传失败')
          this.uploading = false
        })
    }
  }
}
</script>
