<template>
  <div class="default-main">
    <el-row :gutter="20">
      <el-col :span="24" :lg="24" :xl="24" :md="24" :xs="24" :sm="24">
        <el-card class="el-card is-hover-shadow" header="职务列表">
          <!-- style="height:calc(100vh - 107px);"-->
          <el-row>
            <el-col :span="24">
              <!-- 表格顶部菜单 -->
              <TableHeader :buttons="['refresh', 'add', 'edit', 'delete']" quick-search-placeholder="通过职务名称模糊搜索"
                @action="baTable.onTableHeaderAction" />

              <Table @action="baTable.onTableAction" />
            </el-col>

            <!-- 表单 -->
            <PopupForm ref="formRef" />

          </el-row>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="24">
        <div class="mt-20 mb-20 pl-20 pr-20 pt-20 el-card is-hover-shadow" header="wesocket">
          <div>
            <span>webSocket测试：</span>

            <div class="mt-20">
              <el-button type="primary" @click="onConnect">链接</el-button>
              <el-button type="danger" @click="onCloseWebSocket">断开</el-button>
              <el-button type="primary" @click="onSendWebSocket">发送</el-button>
            </div>
            <div class="mt-20 mb-20">
              <el-row>
                <el-col :span="8">
                  <el-upload class="upload-demo" drag :action="uploadUrl" multiple :show-file-list="true"
                    v-model:file-list="fileList"
                    accept="image/gif, image/jpg, image/jpeg, image/bmp, image/png, image/webp,.pdf"
                    @success="onSuccess" @remove="onRemove">

                    <div class="el-upload__text">
                      拖拽文件到这里或 <em>点击上传</em>
                    </div>
                    <template #tip>
                      <div class="el-upload__tip">
                        <el-alert title="限定jpg/png/pdf格式，且在25M以内的文件" show-icon type="info" :closable="false" />
                      </div>
                    </template>
                  </el-upload>
                </el-col>
                <el-col :span="8">
                  <el-image fit="cover" :src="socket.messageData.previewUrl"></el-image>
                </el-col>

                <el-col :span="8">
                    <qrcode-vue :value="state.uploadUrl" :size="state.size" level="H" />
                </el-col>

              </el-row>

            </div>
            <div class="mt-20 mb-20">
              <el-input v-model="socket.messageData.info" type="textarea" rows="8" placeholder=""></el-input>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
import { provide, ref, reactive, toRefs, onMounted, watch, onBeforeUnmount } from 'vue'
import baTableClass from '/@/utils/baTable'
import Table from '/@/components/table/index.vue'
import TableHeader from '/@/components/table/header/index.vue'
import PopupForm from './popupForm.vue'
import { sysPos } from '/@/api/controllerUrls'
import { defaultOptButtons } from '/@/components/table'
import { baTableApi } from '/@/api/common'
import socketClass from '/@/utils/socketTools'
import { fileUploadUrl } from '/@/api/common'
import { uuid } from '/@/utils/random'
import { useAdminInfo } from '/@/stores/adminInfo'
import { ElForm, UploadUserFile } from 'element-plus'
import QrcodeVue from 'qrcode.vue'


const admininfo = useAdminInfo()

const state=reactive({
    uploadUrl: 'http://192.168.8.100:1818/#/mobileUpload?formId=1236994335981637',
    size: 180
})

const baTable = new baTableClass(
    new baTableApi(sysPos),
    {
        column: [
            { type: 'selection', align: 'center', operator: false },
            { label: '名称', prop: 'name', align: 'center', operator: false },
            { label: '唯一编码', prop: 'code', align: 'center', operator: false },
            { label: '排序', prop: 'sort', align: 'center', operator: false },
            { label: '备注', prop: 'remark', align: 'center', operator: false },
            {
                label: '操作',
                align: 'center',
                width: '100',
                render: 'buttons',
                buttons: defaultOptButtons(['edit', 'delete']),
                operator: false,
            },
        ],
        dblClickNotEditColumn: [undefined, 'status'],
    },
    {
        defaultItems: {},
    },
    {
        // 提交前
        onSubmit: (params: { formEl: InstanceType<typeof ElForm> }) => {
            var items = cloneDeep(baTable.form.items!)

            // 表单验证通过后执行的api请求操作
            let submitCallback = () => {
                baTable.form.submitLoading = true
                baTable.api
                    .postData(baTable.form.operate!, items)
                    .then((res) => {
                        baTable.onTableHeaderAction('refresh', {})
                        baTable.form.submitLoading = false
                        baTable.form.operateIds?.shift()
                        if (baTable.form.operateIds?.length! > 0) {
                            baTable.toggleForm('edit', baTable.form.operateIds)
                        } else {
                            baTable.toggleForm()
                        }
                        baTable.runAfter('onSubmit', { res })
                    })
                    .catch((err) => {
                        baTable.form.submitLoading = false
                    })
            }

            if (params.formEl) {
                baTable.form.ref = params.formEl
                params.formEl.validate((valid) => {
                    if (valid) {
                        submitCallback()
                    }
                })
            } else {
                submitCallback()
            }
            return false
        },
    }
)

const uploadUrl = ref(fileUploadUrl())

const fileList = ref<UploadUserFile[]>([])

provide('baTable', baTable)

let socket = new socketClass()
const onConnect = () => {
    socket._config.userName=admininfo.accountName
    socket._config.userId=admininfo.id
    socket.initSocket()
}
const onCloseWebSocket = () => {
    socket.closeSocket()

}
const onSendWebSocket = () => {}

const onSuccess = (result: any, file: any, fileList: any) => {
    let message = {
        id: uuid(),
        send: admininfo.accountName,
        sendUserId: admininfo.id,
        receiverUserId: 1253901153419333,
        info: result.data.previewUrl,
        type: 1,
    }
    socket.onSend(message)
}

const onRemove = () => {}



onMounted(() => {
    baTable.mount()
    baTable.getIndex()
})

onBeforeUnmount(() => {
    console.log('onBeforeUnmount')
    socket.closeSocket()
})
</script>

<script lang="ts">
import { defineComponent } from 'vue'
import { cloneDeep, String } from 'lodash'
export default defineComponent({
    name: 'organizational/post',
})
</script>


<style scoped>
</style>

function res(res: any) {
  throw new Error('Function not implemented.')
}
