<template>
    <HcCard>
        <template #header>
            <div class="w-40">
                <el-select v-model="searchForm.postType" placeholder="选择岗位类型" clearable size="large">
                    <el-option v-for="item in postOptions" :key="item.value" :label="item['label']" :value="item['value']"/>
                </el-select>
            </div>
            <div class="w-64 ml-3">
                <el-input v-model="searchForm.name" size="large" placeholder="请输入名称搜索" clearable @keyup="keyUpEvent"/>
            </div>
            <div class="ml-3">
                <el-button type="primary" @click="searchClick" size="large">
                    <HcIcon name="search-2"/>
                    <span>搜索</span>
                </el-button>
            </div>
        </template>
        <template #extra>
            <el-button type="primary" @click="addClick" size="large">
                <HcIcon name="add"/>
                <span>创建账户</span>
            </el-button>
            <el-button type="danger" @click="cancelClick" size="large" :disabled="tableCheckedKeys.length <= 0">
                <HcIcon name="delete-bin-2"/>
                <span>注销账户</span>
            </el-button>
        </template>
        <HcTable :column="tableColumn" :datas="tableData" isCheck @selection-change="tableSelectionChange">
            <template #name="{row}">{{ row['name'] }}</template>
            <template #text="{row}">{{ row['text'] }}</template>
            <template #color="{row}">{{ row['color'] }}</template>
            <template #action="{row, index}">
                <el-button size="small" type="primary" @click="eidtModal">编辑</el-button>
            </template>
        </HcTable>
        <template #action>
            <HcPages :pages="searchForm" @change="pageChange"></HcPages>
        </template>

        <!--新增编辑弹窗-->
        <HcDialog bgColor="#ffffff" isToBody :show="addModal" :title="modalTitle" @close="addModalClose" widths="51rem">
            <HcCardItem ui="hac-bg-grey">
                <template #header>
                    <div class="hac-card-title">基础信息</div>
                </template>
                <el-form ref="formUserRef" :model="formUserModel" :rules="formUserRules" size="large" label-width="auto" label-position="left">
                    <el-form-item label="登录账号:" prop="account">
                        <el-input v-model="formUserModel.account" placeholder="" autocomplete="new-password"/>
                    </el-form-item>
                    <el-form-item label="密码:" prop="newPassword">
                        <el-input v-model="formUserModel.newPassword" placeholder="请输入密码" autocomplete="new-password" show-password type="password"/>
                    </el-form-item>
                    <el-form-item label="确认密码:" prop="newPassword1">
                        <el-input v-model="formUserModel.newPassword1" placeholder="请输入确认密码" autocomplete="new-password" show-password type="password"/>
                    </el-form-item>
                </el-form>
            </HcCardItem>
            <HcCardItem ui="hac-bg-grey" class="mt-2">
                <template #header>
                    <div class="hac-card-title">详细信息</div>
                </template>
                <el-form ref="formUserRef" :model="formUserModel" :rules="formUserRules" label-position="left" label-width="auto" size="large">
                    <el-form-item label="用户姓名:" prop="real_name">
                        <el-input v-model="formUserModel.real_name"/>
                    </el-form-item>
                    <el-form-item prop="phone" label="手机号码:">
                        <el-input v-model="formUserModel.phone" placeholder="请输入绑定手机"/>
                    </el-form-item>
                    <el-form-item label="身份证号:">
                        <el-input v-model="formUserModel.idNumber" placeholder=""/>
                    </el-form-item>
                    <el-form-item label="机构信息:" prop="real_name">
                        <el-select v-model="value" placeholder="选择部门" size="large">
                            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"/>
                        </el-select>
                        <el-select v-model="value" class="ml-2" placeholder="选择岗位" size="large">
                            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"/>
                        </el-select>
                        <el-select v-model="value" class="ml-2" placeholder="是否为部门负责人" size="large">
                            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"/>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="日单价:">
                        <el-input v-model="formUserModel.roleName" placeholder=""/>
                    </el-form-item>
                    <el-form-item label="启用状态:">
                        <el-select v-model="formUserModel.state" class="block" placeholder="" size="large">
                            <el-option v-for="item in stateoptions" :key="item.value" :label="item.label" :value="item.value"/>
                        </el-select>
                    </el-form-item>
                </el-form>
            </HcCardItem>
            <template #footer>
                <div class="dialog-footer">
                    <el-button size="large" @click="addModal = false">
                        <HcIcon name="close"/>
                        <span>取消</span>
                    </el-button>
                    <el-button :loading="sureSignUserLoading" hc-btn type="primary" @click="sureSignUserClick">
                        <HcIcon name="check"/>
                        <span>确定创建</span>
                    </el-button>
                </div>
            </template>
        </HcDialog>
    </HcCard>
</template>

<script setup>
import {ref, watch} from "vue";
import {isPhone} from "js-fast-way"

const value = ref('')

const searchForm = ref({
    postType: '', name: '',
    current: 1, size: 20, total: 0
})

//分页被点击
const pageChange = ({current, size}) => {
    searchForm.value.current = current
    searchForm.value.size = size
}
const postOptions = ref([
    {label: '所有', value: '1'},
    {label: '财务', value: '2'},
    {label: '总经理', value: '3'},
    {label: '会计', value: '4'},

])

const options = ref([
    {label: 'xx', value: '1'},
    {label: 'aa', value: '2'},
    {label: 'cc', value: '3'},
    {label: 'bb', value: '4'},
])

const searchClick = () => {

}
const keyUpEvent = () => {

}
const tableColumn = [
    {key: 'name', name: '用户名称'},
    {key: 'name', name: '账号ID'},
    {key: 'name', name: '密码'},
    {key: 'text', name: '所属部门'},
    {key: 'text', name: '岗位'},
    {key: 'text', name: '创建日期'},
    {key: 'text', name: '启用状态'},
    {key: 'action', name: '操作', width: 100}
]
const tableData = ref([
    {name: '名称1', text: '文本1', color: 'red'},
    {name: '名称2', text: '文本2', color: 'blue'},
    {name: '名称3', text: '文本3', color: '无'}
])
const tableCheckedKeys = ref([]);
const tableSelectionChange = (rows) => {
    tableCheckedKeys.value = rows
    if (tableCheckedKeys.value.length > 1) {
        window.$message.warning('只能选择一条数据')
    }
}
const addModal = ref(false)
const modalTitle = ref('新增')
const eidtModal = () => {
    modalTitle.value = '编辑'
    addModal.value = true
}
//弹窗关闭
const addModalClose = () => {
    console.log('弹窗关闭')
    addModal.value = false
}
const addClick = () => {
    addModal.value = true
}
//基础信息表单
const formUserRef = ref(null)
const formUserModel = ref({})
const formUserRules = {
    phone: {
        required: true,
        validator: (rule, value, callback) => {
            if (!value) {
                callback(new Error('请输入手机号'))
            } else if (!isPhone(value)) {
                callback(new Error('手机号码格式错误'))
            } else {
                callback()
            }
        },
        trigger: "blur"
    },
    account: {
        required: true,
        validator: (rule, value, callback) => {
            if (!value) {
                callback(new Error('请输入登录账号'))
            } else {
                callback()
            }
        },
        trigger: "blur"
    },
    newPassword: {
        required: true,
        validator: (rule, value, callback) => {
            if (!value) {
                callback(new Error('请输入新密码'))
            } else {
                callback()
            }
        },
        trigger: "blur"
    },
    newPassword1: {
        required: true,
        validator: (rule, value, callback) => {
            if (!value) {
                callback(new Error('请确认新密码'))
            } else {
                callback()
            }
        },
        trigger: "blur"
    },

}
const stateoptions = ref([
    {label: '启用', value: '1'},
    {label: '停用', value: '2'},

])
const cancelClick = () => {
    window?.$messageBox?.alert('您确定要注销[xxx] 的账户信息吗? 一旦注销数据将彻底清除，请谨慎操作？', '注销提醒', {
        showCancelButton: true,
        confirmButtonText: '确认注销',
        cancelButtonText: '取消',
        type: 'warning',
        callback: (action) => {
            if (action === 'confirm') {
                console.log(11111);
            }
        }
    })
}

const sureSignUserLoading = ref(false)
const sureSignUserClick = () => {

}

</script>

<style lang="scss" scoped>

</style>
