<script setup lang="ts">
import type { BasicForm, ICRUD } from '@/types/form'
import AvatarCropper from '@/components/avatar/cropper.vue'
const activeName = ref('basic')
const activeName1 = ref()
const dialogVisible = ref(false)

const formData = reactive<any>({})
const formDataPass = reactive<any>({})
const formConfig = reactive<BasicForm>({
  span: 24,
  props: {
    labelPosition: 'right'
  },
  formItems: [
    {
      label: '姓名',
      value: '',
      name: 'name',
      type: 'input',
      rules: [{ required: true, message: '请输入用户名', trigger: 'blur' }]
    },
    {
      label: '签名',
      value: '',
      name: 'loginName',
      type: 'input'
    },
    {
      label: '公司',
      value: '',
      name: 'company',
      type: 'input'
    },
    {
      label: '部门',
      value: '',
      name: 'part',
      type: 'input'
    },
    {
      label: '备注',
      value: '',
      name: 'remark',
      type: 'input'
    }
  ]
})
const telConfig = reactive<BasicForm>({
  span: 24,
  props: {
    labelPosition: 'right'
  },
  formItems: [
    {
      label: '邮箱',
      value: '',
      name: 'emil',
      type: 'input'
    },
    {
      label: '手机号',
      value: '',
      name: 'phone',
      type: 'input'
    },
    {
      label: '电话',
      value: '',
      name: 'tel',
      type: 'input'
    }
  ]
})
const passFormRef = ref<any>()
const validatePass = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入密码'))
  } else {
    callback()
  }
}
const validatePass2 = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请再次输入密码'))
  } else if (value !== formDataPass.pass) {
    callback(new Error('两次输入不相同'))
  } else {
    callback()
  }
}
const passWordConfig = reactive<BasicForm>({
  span: 24,
  props: {
    labelPosition: 'right'
  },
  formItems: [
    {
      label: '原密码',
      value: '',
      name: 'old',
      type: 'input',
      props: {
        type: 'password'
      },
      rules: [{ validator: validatePass, trigger: 'blur' }]
    },
    {
      label: '新密码',
      value: '',
      name: 'pass',
      type: 'input',
      props: {
        type: 'password'
      },
      rules: [{ validator: validatePass, trigger: 'blur' }]
    },
    {
      label: '确认新密码',
      value: '',
      name: 'checkPass',
      type: 'input',
      props: {
        type: 'password'
      },
      rules: [{ validator: validatePass2, trigger: 'blur' }]
    }
  ]
})
const savePass = () => {
  passFormRef.value.submit()
}
const create = (data: any) => {
  console.log(data)
}
const update = (data: any) => {
  console.log(data)
}

const handleSave = () => {
  console.log(formConfig)
}

const circleUrl = ref('https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png')
const closeAvatarDialog = (val: string) => {
  circleUrl.value = val
  dialogVisible.value = false
}

// 图片裁剪
const goCropper = () => {
  dialogVisible.value = true
}
const CRUD: ICRUD = {
  create(data) {
    return new Promise(resolve => console.log(data))
  },
  update(data) {
    return new Promise(resolve => console.log(data))
  },
  getList() {
    return new Promise(resolve => {
      resolve({
        list: [],
        total: 2
      })
    })
  },
  delete(data) {
    return new Promise(resolve => console.log(data))
  },
  deleteBatch(data) {
    return new Promise(resolve => console.log(data))
  }
}

const logtFormConfig = reactive<BasicForm>({
  span: 24,
  formItems: [
    {
      label: '操作菜单',
      value: '',
      name: '',
      type: 'input',
      rules: [{ required: true, message: '请选输入操作菜单', trigger: 'change' }]
    },
    {
      label: '操作用户',
      value: '',
      name: 'type',
      type: 'input',
      rules: [{ required: true, message: '请输入操作用户', trigger: 'blur' }]
    }
  ]
})

const curRow = ref<any>(null)
const handleRowClick = ({ row }: { row: any }) => {
  console.log(row)
  curRow.value = row
}
const rowClassName = ({ row }: { row: any }) => {
  if (row.id === curRow.value.id) {
    return 'active'
  }
}
</script>

<template>
  <el-container class="wrap">
    <el-aside width="500px">
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>
              <div class="person-bg">
                <el-icon :size="14">
                  <UserFilled />
                </el-icon>
              </div>
              基本信息
            </span>
          </div>
        </template>
        <div class="info-wrap">
          <div class="basic-info">
            <el-avatar :size="80" />
            <div class="info">
              <h2>管理员</h2>
              <p>个人签名</p>
              <el-button type="primary" icon="CollectionTag" round>admin</el-button>
            </div>
          </div>
          <div class="info-list">
            <div class="info-item">
              <el-icon :size="20">
                <Phone />
              </el-icon>
              <span>18951655371</span>
            </div>
            <div class="info-item">
              <el-icon :size="20">
                <Iphone />
              </el-icon>
              <span>025-83672322</span>
            </div>
            <div class="info-item">
              <el-icon :size="20">
                <Message />
              </el-icon>
              <span>117575171@qq.com</span>
            </div>
            <div class="info-item">
              <el-icon :size="20">
                <Location />
              </el-icon>
              <span>方是科技</span>
            </div>
            <div class="info-item">
              <el-icon :size="20">
                <OfficeBuilding />
              </el-icon>
              <span>行政部</span>
            </div>
            <div class="info-item">
              <el-icon :size="20">
                <Coin />
              </el-icon>
              <span>租户管理员</span>
            </div>
          </div>
        </div>
      </el-card>
    </el-aside>
    <el-main class="log-main">
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>
              <div class="person-bg">
                <el-icon :size="14">
                  <EditPen />
                </el-icon>
              </div>
              资料修改
            </span>
          </div>
        </template>
        <div>
          <el-tabs v-model="activeName" class="demo-tabs">
            <el-tab-pane label="基本信息" name="basic">
              <pro-form
                :formConfig="formConfig"
                :formData="formData"
                ref="proFormRef"
                :update="update"
                :create="create"
              >
              </pro-form>
              <div class="btn-label">
                <el-button type="primary" @click="handleSave">保存</el-button>
              </div>
            </el-tab-pane>
            <el-tab-pane label="上传头像" name="avator">
              <span class="avatar">
                <el-avatar :size="150" :src="circleUrl" @click="goCropper" />
                <div>
                  <el-button type="primary" @click="handleSave">保存</el-button>
                </div>
              </span>
            </el-tab-pane>
            <el-tab-pane label="联系方式" name="phone">
              <pro-form :formConfig="telConfig" :formData="formData" ref="telFormRef" :update="update" :create="create">
              </pro-form>
              <div class="btn-label">
                <el-button type="primary" @click="handleSave">保存</el-button>
              </div>
            </el-tab-pane>
            <el-tab-pane label="修改密码" name="password">
              <pro-form
                :formConfig="passWordConfig"
                :formData="formDataPass"
                ref="passFormRef"
                :update="update"
                :create="create"
              >
              </pro-form>
              <div class="btn-label">
                <el-button type="primary" @click="savePass">保存</el-button>
              </div>
            </el-tab-pane>
            <el-tab-pane label="我的日志" name="log" class="reset-table">
              <el-tabs v-model="activeName1" type="card" class="demo-tabs">
                <el-tab-pane label="登录日志" name="login"></el-tab-pane>
                <el-tab-pane label="访问日志" name="fw"></el-tab-pane>
              </el-tabs>
              <pro-table
                :crud="CRUD"
                :formConfig="logtFormConfig"
                :row-class-name="rowClassName"
                :showToolbar="false"
                :height="'480px'"
                @cell-click="handleRowClick"
              >
                <vxe-column field="description" title="耗时"></vxe-column>
                <vxe-column field="type" title="请求参数"></vxe-column>
                <vxe-column field="type" title="返回结果"></vxe-column>
                <vxe-column field="type" title="公司"></vxe-column>
                <vxe-column field="type" title="部门"></vxe-column>
              </pro-table>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-card>
    </el-main>
  </el-container>
  <AvatarCropper
    v-if="dialogVisible"
    v-model="dialogVisible"
    :circleUrl="circleUrl"
    @closeAvatarDialog="closeAvatarDialog"
  ></AvatarCropper>
</template>

<style lang="scss" scoped>
.wrap {
  height: 100%;
  .log-main {
    padding: 0 0 0 var(--main-padding);
  }
  .reset-table {
    :deep(.el-card__body) {
      padding: 0 !important;
    }
    :deep(.el-tabs--card > .el-tabs__header) {
      margin: 0;
      border-bottom: 0;
    }
  }
  .box-card {
    height: 100%;
    .avatar {
      display: flex;
      flex-direction: column;
      margin-left: 80px;
      align-items: center;
      float: left;
      .el-button {
        margin-top: 20px;
      }
    }
  }
  .person-bg {
    color: #1890ff;
    background-color: #e6f7ff;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    text-align: center;
    vertical-align: middle;
    display: inline-block;
  }

  .info-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .basic-info {
    display: flex;
    flex-direction: column;
    align-items: center;

    .info {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 10px;

      p {
        margin: 10px 0;
      }
    }
  }

  .info-list {
    width: 380px;
    margin-top: 10px;

    .info-item {
      display: flex;
      flex-direction: row;
      align-items: center;
      margin-top: 20px;

      span {
        display: inline-block;
        margin-left: 20px;
      }
    }
  }

  .btn-label {
    margin-left: 100px;
  }
}
</style>
