<template>
  <el-dialog
    :title="dialogTitle"
    v-model="dialogVisible"
    width="640px"
    @close="closeDialog()"
    @open="open"
  >
    <el-form
      ref="formInfo"
      :model="form"
      class="demo-form-inline userManageDialog"
      label-width="100px"
      :rules="rules"
    >
      <el-form-item label="用户名：" prop="nickName">
        <el-input v-model="form.nickName"></el-input>
      </el-form-item>
      <el-form-item label="账号：" prop="userName">
        <el-input v-model="form.userName"></el-input>
      </el-form-item>
      <el-form-item label="性别：" prop="sex">
        <el-radio-group v-model="form.sex">
          <el-radio label="1" value="1">男</el-radio>
          <el-radio label="2" value="2">女</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="手机号码：" prop="phonenumber">
        <el-input v-model="form.phonenumber"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password" v-if="dialogTitle == '新增'">
        <el-input v-model="form.password"></el-input>
      </el-form-item>

      <el-form-item
        label="创建时间："
        prop="createTime"
        style="margin-top: 0px"
      >
        <el-date-picker
          v-model="form.createTime"
          width="100%"
          type="datetime"
          placeholder="选择日期时间"
        ></el-date-picker>
      </el-form-item>

      <el-form-item label="角色名称：" prop="roleName">
        <!-- <el-input v-model="form.roleName"></el-input> -->

        <el-select v-model="form.roleId" placeholder="请选择">
          <el-option
            v-for="(item, index) in roleSelectData"
            :key="index"
            :label="item.roleName"
            :value="item.roleId"
          ></el-option>
        </el-select>
      </el-form-item>

      <br />
      <br />
      <br />
      <div style="text-align: right">
        <el-button @click="closeDialog(0)">取消</el-button>
        <el-button type="primary" @click="submitForm('formInfo')">
          确定
        </el-button>
      </div>
    </el-form>
  </el-dialog>
</template>

<script>
import { defineComponent, ref, onMounted, watchEffect } from 'vue'
import * as api from '@/api/systemManage/userManage.js'
import { ElMessage } from 'element-plus'
import { parseTime, validatorPhone } from '@/utils'

export default defineComponent({
  name: 'DialogComponent',
  emits: ['closeDialog'],
  props: {
    flag: Boolean,
    dialogTitle: String,
    itemInfo: Object,
  },
  setup(props, context) {
    context

    const dialogVisible = ref(false)
    const formInfo = ref(null)

    const form = ref([])
    const roleSelectData = ref([])

    // open(): Dialog弹窗打开之前做的事
    const open = () => {
      form.value = props.itemInfo.value
      // console.log('form.value')
      // console.log(form.value)
    }

    const options = [
      {
        value: '选项1',
        label: '站点一',
      },
      {
        value: '选项2',
        label: '站点二',
      },
      {
        value: '选项3',
        label: '站点三',
      },
      {
        value: '选项4',
        label: '站点四',
      },
      {
        value: '选项5',
        label: '站点五',
      },
    ]

    // 关闭弹框
    const closeDialog = () => {
      context.emit('closeDialog', false)
      dialogVisible.value = false
    }

    watchEffect((fn, options) => {
      fn, options
      dialogVisible.value = props.flag
    })

    const roleValid = (rule, value, callback) => {
      rule
      if (value.length === 0) {
        callback(new Error('角色不能为空'))
      } else {
        callback()
      }
    }

    // 保存-修改操作
    const submitForm = () => {
      form.value.createTime
        ? (form.value.createTime = parseTime(form.value.createTime))
        : ''

      formInfo.value.validate((valid) => {
        if (valid) {
          if (props.dialogTitle === '新增') {
            api.userAdd(form.value).then((requset) => {
              if (requset.status === 'SUCCESS') {
                ElMessage.success({
                  message: '新增成功',
                  type: 'success',
                })
                closeDialog()
              } else {
                ElMessage.error(requset.msg)
              }
            })
          } else {
            alert('修改')

            //  如果选了角色调用绑定接口
            // if (form.value.roleId) {
            //   alert(1)
            //   api.authRoleDetail({userId: form.value.userId,roleIds:[form.value.roleId]}).then((requset) => {
            //     if (requset.status === 'SUCCESS') {
             
            //       closeDialog()
            //     } else {
            //       ElMessage.error(requset.msg)
            //     }
            //   })
            // } 
            form.value.roleIds=[form.value.roleId];
            api.userUpdate(form.value).then((requset) => {
              if (requset.status === 'SUCCESS') {
                ElMessage.success({
                  message: '修改成功',
                  type: 'success',
                })
                closeDialog()
              } else {
                ElMessage.error(requset.msg)
              }
            })
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }

    //角色下拉请求
    function optionselect() {
      api.optionselect().then((requset) => {
        if (requset.status === 'SUCCESS') {
          console.log('requset.data')
          console.log(requset.data)
          roleSelectData.value = requset.data
        } else {
          ElMessage.error(requset.msg)
        }
      })
    }

    onMounted(() => {
      optionselect()
    })

    return {
      closeDialog,
      dialogVisible,
      options,
      roleValid,
      formInfo,
      form,
      roleSelectData,
      open,
      submitForm,
      rules: {
        nickName: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          {
            min: 3,
            max: 6,
            message: '用户名长度在 3 到 6 个字符',
            trigger: 'blur',
          },
        ],
        userName: [
          { required: true, message: '请输入账号', trigger: 'blur' },
          {
            min: 3,
            max: 6,
            message: '用户名长度在 3 到 6 个字符',
            trigger: 'blur',
          },
        ],
        sex: [{ required: true, message: '请选择性别', trigger: 'change' }],
        phonenumber: [
          { required: true, message: '请输入手机号码', trigger: 'blur' },
          {
            validator: validatorPhone,
            message: '输入的电话号码不正确',
            trigger: 'blur',
          },
        ],
        createTime: [
          { required: true, message: '请输入创建时间', trigger: 'change' },
        ],
        roleId: [
          { required: true, message: '请选择角色名称', trigger: 'change' },
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          {
            min: 3,
            max: 6,
            message: '长度在 3 到 6 个字符',
            trigger: 'blur',
          },
        ],
      },
    }
  },
})
</script>
 
<style scoped lang="scss">
.el-input,
.el-select {
  width: 240px;
}
</style>
<style lang="scss">
</style>