<template>
  <div>
    <el-dialog  v-model="visible" :z-index="99" :title="title" width="100%" align-center fullscreen>
      <el-form :inline="true" :disabled="method==='look'" :rules="rules" :model="modalForm" class="demo-form-inline" ref="ruleFormRef">
        <div class="barbox" style="margin-top: -10px;">
          <div class="bar"></div>
          <div class="name">账户信息</div>
        </div>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="账号：" prop="access">
              <el-input v-model="modalForm.access" style="width: 240px" placeholder="请输入账号" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="昵称：" prop="nick_name">
              <el-input v-model="modalForm.nick_name" style="width: 240px" placeholder="请输入昵称" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="手机号：" prop="phone">
              <el-input v-model="modalForm.phone" style="width: 240px" placeholder="请输入手机号" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20" >
          <el-col :span="8">
            <el-form-item label="邮箱：" prop="email">
              <el-input v-model="modalForm.email" style="width: 240px" placeholder="请输入邮箱" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="性别："  prop="sex">
                    <el-select style="width:210px" v-model="modalForm.sex" placeholder="请选择性别" clearable>
                      <el-option label="未知" :value="0" />
                        <el-option label="男" :value="1" />
                        <el-option label="女" :value="2" />
                        
                    </el-select>
                </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="是否是管理员："  prop="is_admin">
                    <el-select style="width:210px" v-model="modalForm.is_admin" placeholder="请选择是否是管理员" clearable>
                        <el-option label="是" :value="1" />
                        <el-option label="否" :value="0" />
                        
                    </el-select>
                </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20" >
          <el-col :span="8">
            <el-form-item label="用户状态：" prop="status">
              <el-select style="width:240px" v-model="modalForm.status" placeholder="请选择用户状态" clearable>
                        <el-option label="正常" :value="1" />
                        <el-option label="审核中" :value="2" />
                        <el-option label="审核失败" :value="3" />
                    </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="是否被删除：" prop="is_deleted">
                    <el-select style="width:210px" v-model="modalForm.is_deleted" placeholder="请选择是否被删除" clearable>
                        <el-option label="是" :value="1" />
                        <el-option label="否" :value="0" />
                    </el-select>
                </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="是否禁用："  prop="is_disabled">
                    <el-select style="width:210px" v-model="modalForm.is_disabled" placeholder="请选择是否禁用" clearable>
                        <el-option label="是" :value="1" />
                        <el-option label="否" :value="0" />
                    </el-select>
                </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20" v-if="method=='view'">
          <el-col :span="8">
            <el-form-item label="密码：" prop="password">
              <el-input v-model="modalForm.password" style="width: 240px" placeholder="请输入密码" />
            </el-form-item>
          </el-col>
         
         
         
        </el-row>
        <el-divider />
      <div class="barbox">
        <div class="bar"></div>
        <div class="name">操作</div>
      </div>
      <el-row :gutter="20">
        <el-col :span="16">
          <el-form-item label="" style="padding-left:30px">
            <el-button @click="visible = false">取消</el-button>
            <el-button type="primary" @click="submit(ruleFormRef)">
              确定
            </el-button>
          </el-form-item>
        </el-col>
      </el-row>
      </el-form>
     

      <!-- <template #footer>
      <div class="dialog-footer">
        <el-button @click="visible = false">取消</el-button>
        <el-button type="primary" @click="submit">
          确定
        </el-button>
      </div>
    </template> -->
    </el-dialog>
    <el-dialog v-model="dialogVisible" title="温馨提示" width="400">
      <span>确定取消该订单？</span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="confirmCancel">
            Confirm
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>

</template>

<script setup>
import { onBeforeMount, reactive, ref, nextTick } from 'vue';
import { useRouter, useRoute } from 'vue-router'
import userApi from "../api/user";
import { ElMessage } from "element-plus";
import { formatOrderStatus, formatRefundStatus, formatDate } from '../utils/format'

const ruleFormRef = ref(null);
const method=ref(null);
const emit=defineEmits(['refreshList']);
const modalForm = reactive({
  user_id: '',
  class_brief:''
})
const checkMobile = (rule, value, callback) => {
  if (!(/^1[3456789]\d{9}$/).test(value)) {
    return callback(new Error('请输入正确的手机号'))
  }else{
    callback()
  }
 }
const rules = reactive({
  access:[
    {
      required: true,
      message: '请输入账号',
      trigger: 'blur',
    }
  ],
  phone:[
    {
      required: true,
      message: '请输入手机号',
      trigger: 'blur',
    },
    { validator:checkMobile,trigger: 'blur'}
  ],
  password:[
    {
      required: true,
      message: '请输入密码',
      trigger: 'blur',

   }
  ],
  nick_name:[
    {
      required: true,
      message: '请输入昵称',
      trigger: 'blur',
    }
  ],
  is_admin:[
    {
      required: true,
      message: '请选择是否是管理员',
      trigger: 'blur',
    }
  ],
  status:[
    {
      required: true,
      message: '请选择账户状态',
      trigger: 'blur',
    }
  ],
  is_deleted:[
    {
      required: true,
      message: '请选择是否被删除',
      trigger: 'blur',
    }
  ],
  is_disabled:[
    {
      required: true,
      message: '请选择是否禁用',
      trigger: 'blur',
    }
  ],
  sex:[
    {
      required: false,
      message: '请选择性别',
      trigger: 'blur',
    }
  ],
  email:[
    {
      required: false,
      message: '请输入邮箱',
      trigger: 'blur',
    },
    {
      type: 'email',
      message: '请输入正确的邮箱',
      trigger: 'blur',
    }
  ]
});

const handleAdd = () => {
  userApi.saveAccount(modalForm).then((res) => {
    let result = res;
    if (result.code == 200) {
        ElMessage.success("添加成功");
        visible.value = false;
        emit('refreshList')
    }

  })
};
const handleEdit = () => {
  userApi.editAccount(modalForm.user_id,modalForm).then((res) => {
    let result = res;
    if (result.code == 200) {
        ElMessage.success("修改成功");
        visible.value = false;
        emit('refreshList')
    }

  })
};


const submit = (form) => {

 form.validate((valid, fields) => {
    
    if (valid) {
      method.value === 'edit'?handleEdit() : handleAdd()
    } else {
      console.log('error submit!', fields)
    }
 
  })
}
const visible = ref(false);
const dialogVisible = ref(false);
const title = ref('订单详情')
const route = useRoute();
const router = useRouter();


const cancelOrder = () => {

};
const confirmCancel = () => {
  dialogVisible.value = false;
  cancelOrder()

}

const init = (type, id) => {
  visible.value = true;
  method.value = type;
  modalForm.user_id = id;
  if (method.value === 'edit') {
    title.value = '编辑账户'
  } else if (method.value === 'view') {
    title.value = '新建账户'
  }else{
     title.value = '查看账户'
  }
 
  nextTick(() => {
    ruleFormRef.value.resetFields();
    if (method.value === 'edit' || method.value === 'look') {
      userApi.getAccountDetail(modalForm.user_id).then((res) => {
        let result = res.data;
        Object.assign(modalForm, result);

      })
    }
  })

}

defineExpose({
  init
});
</script>

<style lang="scss" scoped>
.barbox {
  margin: 10px 0;
  display: flex;
  align-items: center;

  .bar {
    width: 4px;
    height: 25px;
    background: var(--el-color-primary);
  }

  .name {
    margin-left: 8px;
    font-size: 16px;
  }
}
</style>