<!--
 * @Description:专家信息维护
 * @Date: 2022-08-01 09:25:01
 * @LastEditors: xuch
 * @LastEditTime: 2022-08-08 17:03:30
 * @Author:xuch
-->
<script lang="ts" setup>
import { ref, reactive, onMounted, nextTick } from 'vue';
import { ElMessageBox, ElMessage, FormRules } from 'element-plus';

onMounted(() => {
  console.log('onMounted');
  getTableList()
})

const pageNum = ref(1);

const total = ref(0);

const pageSize = ref(20);

const tableData = ref([]);

const column: any[] = [
  {
    prop: 'id',
    label: '序号',
    width: '80px',
    fixed: 'left'
  },
  {
    prop: 'name',
    label: '专家姓名',
    width: '150px',
    fixed: 'left'
  },
  {
    prop: 'IDCard',
    label: '证件号码',
    width: '250px',
  },
  {
    prop: 'phone',
    label: '联系电话',
    width: '200px',
  },
  {
    prop: 'mail',
    label: '邮箱',
    width: '300px'
  },
  {
    prop: 'profession',
    label: '所属领域',
    width: '250px'
  },
  {
    prop: 'department',
    label: '所属单位',
    width: 'auto'
  },
  {
    label: '操作',
    align: 'left',
    width: '150px',
    buttons: [
      {
        title: '修改',
        hide: false,
        eventName: function (row) { handleEdit(row) }
      },
      {
        title: '删除',
        hide: false,
        eventName: function (row) { handleDelete(row) }
      }
    ]
  }
];

const rightButtons = ref([
  {
    text: '新增专家信息',
    type: 'primary',
    eventName: function () { handleNewInfo() }
  }
]);

const tableBtnClick = (btn, row) => {
  btn.eventName(row);
};

const sizeChange = function (val: number) {
  pageSize.value = val;
  pageNum.value = 1;
  getTableList();
};

const currentChange = function (val: number) {
  pageNum.value = val;
  getTableList();
};

/**
 * @description: 获取表格数据
 * @param:
 * @return: tableData
 */
const getTableList = () => {
  console.log('getTableList');
  // @ts-ignore
  tableData.value = Array.from({ length: 22 }).map((_, index) => {
    return {
      id: index + 1,
      name: `超级管理员${index + 1}`,
      IDCard: `110101199003**2172${index + 1}`,
      phone: `138888888${index + 1}`,
      mail: `${index + 1}bug@juduw.vu`,
      profession: `web安全${index + 1}`,
      department: `浙江御安${index + 1}`,
    }
  })
  total.value = tableData.value.length;
};

/**
 * @description: 修改专家信息操作
 * @param:
 * @return:
 */
function handleEdit(row) {
  console.log('修改专家信息操作', row);

  for (const key in formColumns) {
    if (formColumns[key].disabled === false) {
      formColumns[key].disabled = true;
    }
  }

  dialogProps.title = '修改专家'
  // isEdit.value = true
  dialogProps.showDialog = true
}

/**
 * @description: 删除专家信息操作
 * @param:
 * @return:
 */
const handleDelete = (row) => {
  console.log('删除专家信息操作', row);
};

/**
 * @description: 新增专家信息操作
 * @param:
 * @return:
 */
const handleNewInfo = () => {
  console.log('新增专家信息操作');
  dialogProps.title = '新增专家'

  for (const key in formColumns) {
    if (formColumns[key].disabled === true) {
      formColumns[key].disabled = false;
    }
  }

  // 重置表单
  if (dialogForm.value) {
    dialogForm.value.resetForm(dialogForm.value.ruleFormRef);
  }

  // Object.assign(formData, [])

  dialogProps.showDialog = true;
};

let dialogForm = ref();

let dialogProps = reactive({
  showDialog: false,
  title: '',
  size: 'big'
});

/**
 * @description:新建专家信息 弹窗表单
 * @return {*}
 * @author: xuch
 */
const formData = reactive({
  name: '', //姓名
  IDCard: '', //证件号码
  phone: '', //联系电话
  mail: '', //邮箱
  account: '', //账号
  password: '', //密码
  profession: '', //所属领域
  department: '' //所属单位
});

let isEdit = ref(false);
/**
 * @description: 新建专家信息 弹窗表单输入项
 * @return {*}
 * @author: xuch
 */
const formColumns = reactive([
  {
    key: 'name',
    type: 'input',
    label: '姓名',
    col: 12,
    placeholder: '请输入',
    clearable: true,
    // disabled: isEdit.value,
    disabled: false,
  },
  {
    key: 'IDCard',
    type: 'input',
    label: '证件号码',
    col: 12,
    placeholder: '请输入',
    clearable: true,
    disabled: false,
  },
  {
    key: 'phone',
    type: 'input',
    label: '联系电话',
    col: 12,
    placeholder: '请输入',
    clearable: true
  },
  {
    key: 'mail',
    type: 'input',
    label: '邮箱',
    col: 12,
    placeholder: '请输入',
    clearable: true
  },
  {
    key: 'account',
    type: 'input',
    label: '账号',
    col: 12,
    placeholder: '请输入',
    clearable: true
  },
  {
    key: 'password',
    type: 'input',
    label: '密码',
    col: 12,
    placeholder: '请输入',
    clearable: true
  },
  {
    key: 'profession',
    type: 'input',
    label: '所属领域',
    col: 12,
    placeholder: '请输入',
    clearable: true
  },
  {
    key: 'department',
    type: 'input',
    label: '姓名',
    col: 12,
    placeholder: '所属单位',
    clearable: true
  },
]);

/**
 * @description:新建专家信息 弹窗表单校验规则
 * @return {*}
 * @author: xuch
 */
const rules = reactive<FormRules>({
  name: [
    {
      required: true,
      message: '请输入姓名',
      trigger: 'blur'
    }
  ],
  phone: [
    {
      required: true,
      message: '请输入联系电话',
      trigger: 'blur'
    }
  ],
  mail: [
    {
      required: true,
      message: '请输入邮箱',
      trigger: 'blur'
    }
  ],
  account: [
    {
      required: true,
      message: '请输入账号',
      trigger: 'blur'
    }
  ],
  password: [
    {
      required: true,
      message: '请输入密码',
      trigger: 'blur'
    }
  ],
});

/**
 * @description: 打开弹窗时进行的操作
 * @return {*}
 * @author: xuch
 */
let handleDialogOpen = () => {
  nextTick(() => {
    dialogForm.value.resetForm();
  });
};

/**
 * @description: 弹窗提交数据时的处理
 * @return {*}
 * @author: xuch
 */
const handleDialogEvent = function (data) {
  if (data.eventName == 'errorSubmit') return;
  //  调用接口提交表单数据
  console.log('formData', formData);
};

/**
 * @description:弹窗确认操作
 * @return {*}
 * @author: xuch
 */
const handleConfirm = function () {
  dialogForm.value.submitForm(dialogForm.value.ruleFormRef);
};

/**
 * @description:弹窗取消操作
 * @return {*}
 * @author: xuch
 */
const handleCancel = function () {
  dialogProps.showDialog = false;
};

</script>

<template>
  <div>
    <YaPageContent :tableData="tableData" :tableColumns="column" :rightButtons="rightButtons"
      @tableBtnClick="tableBtnClick" :currentPage="pageNum" :pageSize="pageSize" :total="total" @sizeChange="sizeChange"
      @currentChange="currentChange">
    </YaPageContent>

    <ya-dialog :dialogProps="dialogProps" @open="handleDialogOpen()">
      <template #content>
        <ya-form @handleEvent="handleDialogEvent" :formColumns="formColumns" labelWidth="100px" :formData="formData"
          :rules="rules" :ref="
            (el) => {
              if (el) dialogForm = el;
            }
          ">
        </ya-form>
      </template>
      <template #footer>
        <ya-button @click="handleCancel">取消</ya-button>
        <ya-button type="primary" @click="handleConfirm">确定</ya-button>
      </template>
    </ya-dialog>
  </div>
</template>

<style scoped lang="scss">
</style>
