<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="user_name">
              <el-input v-model="modalForm.user_name" style="width: 240px" placeholder="请输入昵称" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="手机号：" prop="mobile">
              <el-input v-model.number="modalForm.mobile" style="width: 240px" placeholder="请输入手机号" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="用户状态：" prop="user_status">
              <el-select style="width:240px" v-model="modalForm.user_status" placeholder="请选择用户状态" clearable>
                        <el-option label="正常" :value="1" />
                        <el-option label="禁用" :value="2" />
                    </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="register_source">
                <span v-if="modalForm.register_source==1">App</span>
                <span v-else-if="modalForm.register_source==2">公众号</span>
                <span v-else>-</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="是否是会员：" prop="is_member">
                <span v-if="modalForm.is_member===0">否</span>
                <span v-else-if="modalForm.is_member===1">是</span>
                <span v-else>-</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="信息是完善：" prop="is_info_complete">
                <span v-if="modalForm.is_info_complete">是</span>
                <span v-else>否</span>
             
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20" v-if="method!='view'">
          <el-col :span="8">
            <el-form-item label="算算次数：" prop="single_submit_count">
              <span>{{modalForm.single_submit_count}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="算算支付次数：" prop="single_pay_count">
              <span>{{modalForm.single_pay_count}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="会员购买次数：" prop="member_buy_count">
              <span>{{modalForm.member_buy_count}}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20" v-if="method!='view'">
          <el-col :span="8">
            <el-form-item label="头像：" prop="avatar">
              <el-avatar :size="50" :src="modalForm.avatar" style="margin-top: -10px;"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="年龄：" prop="age">
              <span>{{modalForm.age}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="性别：" prop="sex">
              <span v-if="modalForm.sex==0">未知</span>
              <span v-else-if="modalForm.sex==1">男</span>
              <span v-else-if="modalForm.sex==2">女</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20" v-if="modalForm.is_member==1">
          <el-col :span="8">
            <el-form-item label="会员到期时间：" prop="member_expire_date">
              <span>{{formatDate(modalForm.member_expire_date)}}</span>
            </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 rules = reactive({
  class_name:[
    {
      required: true,
      message: '请输入分类名称',
      trigger: 'blur',
    }
  ],
  sort:[
    {
      required: true,
      message: '请输入排序序号',
      trigger: 'blur',

   },
  
    {
      type: 'number',
      message: '请输入数字',
      trigger: 'blur'
    }
  ],

  class_brief:[
    {
      required: true,
      message: '请输入分类简介',
      trigger: 'blur',
    }
  ]
});
const handleAdd = () => {
  userApi.saveUser(modalForm).then((res) => {
    let result = res;
    if (result.code == 200) {
        ElMessage.success("添加成功");
        visible.value = false;
        emit('refreshList')
    }

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

  })
};


const submit = async(form) => {
  await 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();
    modalForm.class_brief = '';
    if (method.value === 'edit' || method.value === 'look') {
      userApi.getUserDetail(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>