<template>
  <el-dialog
    custom-class="center-dialog"
    :title="title"
    top="0vh"
    :visible.sync="dialogFormVisible"
    width="900px"
    @close="close"
  >
    <div>
      <el-row :gutter="15">
        <el-form
          ref="form"
          label-width="100px"
          :model="form"
          :rules="rules"
          size="medium"
        >
          <el-col :span="12">
            <el-form-item
              :label="__('用户名')"
              label-width="110px"
              prop="user_account"
            >
              <el-input
                v-model="form.user_account"
                clearable
                :placeholder="__('请输入用户名')"
                :readonly="form.user_id"
                :style="{ width: '100%' }"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              :label="__('密码')"
              label-width="110px"
              prop="user_password"
            >
              <el-input
                v-model="form.user_password"
                clearable
                :placeholder="__('请输入密码')"
                :style="{ width: '100%' }"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              :label="__('用户昵称')"
              label-width="110px"
              prop="user_nickname"
            >
              <el-input
                v-model="form.user_nickname"
                clearable
                :placeholder="__('请输入用户昵称')"
                :style="{ width: '100%' }"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              :label="__('备注名称')"
              label-width="110px"
              prop="user_notename"
            >
              <el-input
                v-model="form.user_notename"
                clearable
                :placeholder="__('请输入备注名称')"
                :style="{ width: '100%' }"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              :label="__('用户等级')"
              label-width="110px"
              prop="user_level_id"
            >
              <el-select
                v-model="form.user_level_id"
                clearable
                :placeholder="__('请选择用户等级')"
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="item in userLevelList"
                  :key="item.user_level_id"
                  :label="item.user_level_name"
                  :value="item.user_level_id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item :label="__('手机号码')"  label-width="110px" prop="user_intl">
              <el-select v-model="form.user_intl" :style="{ width: '100%' }">
                <el-option
                  v-for="(item, index) in user_intlOptions"
                  :key="index"
                  :disabled="item.disabled"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label-width="0" prop="user_mobile">
              <el-input
                v-model="form.user_mobile"
                clearable
                :placeholder="__('请输入手机号码')"
                :style="{ width: '100%' }"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              :label="__('来源用户编号')"
              label-width="110px"
              prop="user_parent_id"
            >
              <el-input
                v-model="form.user_parent_id"
                clearable
                :placeholder="__('请输入来源用户编号')"
                :style="{ width: '100%' }"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              :label="__('用户状态')"
              label-width="110px"
              prop="user_state"
            >
              <el-radio-group v-model="form.user_state" size="medium">
                <el-radio
                  v-for="(item, index) in user_stateOptions"
                  :key="index"
                  :disabled="item.disabled"
                  :label="item.value"
                >
                  {{ item.label }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              :label="__('头像')"
              label-width="110px"
              prop="user_avatar"
            >
              <upload
                height="100px"
                :image="form.user_avatar"
                width="100px"
                @upImage="
                  (image) => {
                    form.user_avatar = image
                  }
                "
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              :label="__('性别')"
              label-width="110px"
              prop="user_gender"
            >
              <el-radio-group v-model="form.user_gender" size="medium">
                <el-radio
                  v-for="(item, index) in user_genderOptions"
                  :key="index"
                  :disabled="item.disabled"
                  :label="item.value"
                >
                  {{ item.label }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">{{ __('取消') }}</el-button>
      <el-button type="primary" @click="save">{{ __('确定') }}</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import { translateTitle as __ } from '@/utils/i18n'
  import { getList } from '@/api/base/user/level'
  import { doEdit } from '@/api/user/account'
  import Upload from '@/components/upload'
  import { cellEditRule } from '@/api/store/activity/base'
  import { isPhone } from '@/utils/validate'

  export default {
    name: 'UserAccountEdit',
    components: { Upload },
    data() {
      const validatePhone = (rule, value, callback) => {
        if (!this.form.user_mobile || !isPhone(this.form.user_mobile)) {
          callback(new Error('请输入正确的手机号'))
        } else {
          callback()
        }
      }
      return {
        userLevelList: [],
        form: {
          user_gender: 1,
          user_state: 2,
          user_avatar: '',
          user_intl: '+86',
        },
        rules: {
          user_account: [
            {
              required: true,
              message: '请输入用户名',
              trigger: 'blur',
            },
          ],
          user_nickname: [
            {
              required: true,
              message: '请输入用户昵称',
              trigger: 'blur',
            },
          ],
          user_level_id: [
            {
              required: true,
              message: '请输入用户等级',
              trigger: 'blur',
            },
          ],
          user_mobile: [
            {
              required: true,
              message: '请输入手机号码',
              trigger: 'blur',
            },
            { validator: validatePhone, trigger: 'blur' },
          ],
          user_intl: [
            {
              required: true,
              message: '请选择国家编码',
              trigger: 'change',
            },
          ],
          user_state: [
            {
              required: true,
              message: '用户状态不能为空',
              trigger: 'change',
            },
          ],
          user_gender: [
            {
              required: true,
              message: '性别不能为空',
              trigger: 'change',
            },
          ],
        },
        user_stateOptions: [
          {
            label: this.__('未激活'),
            value: 1,
          },
          {
            label: this.__('已激活'),
            value: 2,
          },
        ],
        user_genderOptions: [
          {
            label: this.__('男'),
            value: 1,
          },
          {
            label: this.__('女'),
            value: 2,
          },
        ],
        title: '',
        dialogFormVisible: false,
        user_intlOptions: [
          {
            label: this.__('简中（+86）'),
            value: '+86',
          },
          {
            label: 'U.S.A(+1)',
            value: '+1',
          },
          {
            label: 'عربي ، (+966)',
            value: '966+',
          },
          {
            label: this.__('日本語(+81)'),
            value: '+81',
          },
        ],
      }
    },
    created() {
      this.initUserLevel()
    },
    methods: {
      async initUserLevel() {
        const { data } = await getList(this.form)
        if (data.items) {
          this.userLevelList = data.items
        }
        console.log(data.items)
      },
      __,
      showEdit(row) {
        if (!row) {
          this.title = this.__('添加')
        } else {
          this.title = this.__('编辑')
          this.form = {
            user_id: row.user_id,
            user_account: row.user_account,
            user_password: row.user_password,
            user_nickname: row.user_nickname,
            user_notename: row.user_notename,
            user_level_id: row.user_level_id,
            user_intl: row.user_intl,
            user_mobile: row.user_mobile,
            user_parent_id: row.user_parent_id,
            user_state: row.user_state,
            user_avatar: row.user_avatar,
            user_gender: row.user_gender,
            user_is_admin: row.user_is_admin,
          }
        }
        this.dialogFormVisible = true
      },
      close() {
        this.form = {
          user_gender: 1,
          user_state: 2,
          user_avatar: '',
          user_intl: '+86',
        }
        this.$refs['form'].resetFields()
        this.dialogFormVisible = false
      },
      save() {
        this.$refs['form'].validate(async (valid) => {
          if (valid) {
            console.log(this.form)
            let params = this.form
            params.is_admin = 'sys'

            const { msg, status } = await doEdit(this.form, params)
            if (200 == status) {
              this.$baseMessage(msg, 'success')
            } else {
              this.$baseMessage(msg, 'error')
            }
            if (status === 200) {
              this.$emit('fetch-data')
              this.close()
            }
          } else {
            return false
          }
        })
      },
      handleAvatarSuccess(name, res) {
        this.form[name] = res.data
      },
      BeforeUpload(file) {
        let isRightSize = file.size / 1024 / 1024 < 2
        if (!isRightSize) {
          this.$message.error('文件大小超过 2MB')
        }
        return isRightSize
      },
    },
  }
</script>

<style scoped lang="scss">
::v-deep {
  .el-form-item--medium .el-form-item__content{
    line-height: 37px!important;
  }
}
</style>
