<template>
  <div class="cacp-nine cacp-pd-l">
    <div class="cacp-group__box">
      <div class="group-left">
        <cacp-complex-table
          class="cacp-pv-s cacp-ph-xl"
          ref="leftTableRef"
          :title-isinline="true"
          :data="leftTableData"
          highlight-current-row
          :actions="actions"
          :primary-col-span="24"
          :action-space="20"
          :enable-selection="false"
          :actions-width="120"
          @current-change="onCurrentChange"
          :loading="loading.code"
        >
          <template #title>
            <div class="cacp-group__title">报关单修改联系单列表</div>
          </template>
          <el-table-column width="48" fixed>
            <template #default="scope">
              <el-radio :modelValue="currentLeftData?.id" :value="scope.row.id"></el-radio>
            </template>
          </el-table-column>
          <el-table-column property="shipName" label="对照关系名称" sortable></el-table-column>
          <el-table-column property="shipCode" label="对照关系代码" sortable></el-table-column>
          <el-table-column property="areaCode" label="对照关区代码" sortable></el-table-column>
        </cacp-complex-table>
      </div>
      <div class="divider"></div>
      <div class="group-right">
        <cacp-complex-table
          class="cacp-pv-s cacp-ph-xl"
          :title-isinline="true"
          :data="currentRightData"
          :actions="rightActions"
          :primary-col-span="24"
          :action-space="20"
          :enable-selection="true"
          :actions-width="60"
          @selection-change="onSelectionChange"
          :loading="loading.user"
        >
          <template #title>
            <div class="cacp-group__title">人员列表</div>
          </template>
          <el-table-column property="userName" label="人员名称" min-width="110" sortable></el-table-column>
          <el-table-column property="userCode" label="人员代码" width="110" sortable></el-table-column>
        </cacp-complex-table>
      </div>
    </div>
  </div>

  <cacp-dialog v-model="createVisible" :title="title" :resizable="false" width="“360”" @closed="onCancel">
    <el-form :model="formData" ref="formRef" label-position="left">
      <el-form-item label="对照关系名称" prop="shipName"
        ><el-input v-model="formData.shipName"></el-input
      ></el-form-item>
      <el-form-item label="对照关系代码" prop="shipCode"
        ><el-input v-model="formData.shipCode"></el-input
      ></el-form-item>
      <el-form-item label="对照关区代码" prop="areaCode"
        ><el-input v-model="formData.areaCode"></el-input
      ></el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="onCancel">取消</el-button>
      <el-button type="primary" @click="onSubmit">确定</el-button>
    </template>
  </cacp-dialog>
  <cacp-dialog v-model="createUserVisible" title="新建人员" :resizable="false" width="“360”" @closed="onUserCancel">
    <el-form :model="formUserData" ref="formRef" label-position="left">
      <el-form-item label="人员名称" prop="userName"
        ><el-input v-model="formUserData.userName"></el-input
      ></el-form-item>
      <el-form-item label="人员代码" prop="userCode"
        ><el-input v-model="formUserData.userCode"></el-input
      ></el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="onUserCancel">取消</el-button>
      <el-button type="primary" @click="onUserSubmit">确定</el-button>
    </template>
  </cacp-dialog>
</template>
<script lang="ts" setup>
import { Plus, Delete } from '@cacp/svg-icons'
import { SuccessResultCode, type CacpComplexTable, type TableAction } from '@cacp/ui'
import { ref, onMounted, reactive, watch } from 'vue'
import type { TypicalNineCode, TypicalNineUser } from '@/types/nine'
import { ElMessage, type FormInstance } from 'element-plus'
import {
  typicalNineCode,
  typicalNineCodeDel,
  typicalNineCodeSave,
  typicalNineUser,
  typicalNineUserDel,
  typicalNineUserSave
} from '@/apis/mock'

const leftTableData = ref<Array<TypicalNineCode>>([])
const actions = <TableAction[]>[
  {
    key: '0',
    text: '新增',
    type: 'text',
    icon: Plus,
    position: 'left',
    limit: 'none',
    onclick: onAdd
  },
  {
    key: '2',
    text: '编辑',
    type: 'text',
    limit: 'one',
    onclick: onEdit
  },
  {
    key: '1',
    text: '删除',
    type: 'text',
    confirm: '确定要删除吗？',
    limit: 'one',
    onclick: onDelete
  }
]
const rightActions = <TableAction[]>[
  {
    key: '0',
    text: '新增',
    type: 'text',
    icon: Plus,
    position: 'left',
    limit: 'none',
    onclick: onUserAdd
  },
  {
    key: '1',
    text: '删除',
    type: 'text',
    icon: Delete,
    position: 'left',
    confirm: '确定要删除吗？',
    limit: 'more',
    onclick: onMutiDelete
  },
  {
    key: '1',
    text: '删除',
    type: 'text',
    command: 'delete',
    confirm: '确定要删除吗？',
    limit: 'one',
    onclick: onRightDelete
  }
]
const leftTableRef = ref<InstanceType<typeof CacpComplexTable>>()
const currentLeftData = ref<TypicalNineCode | undefined>()
const createVisible = ref(false)
const createUserVisible = ref(false)
const currentRightData = ref<Array<TypicalNineUser>>([])
let rightSelectedData: Array<TypicalNineUser> = []
const formData = ref<TypicalNineCode>({ id: '', shipName: '', shipCode: '', areaCode: '' })
const formUserData = ref<TypicalNineUser>({ id: '', userName: '', userCode: '', shipName: '', shipCode: '' })
const formRef = ref<FormInstance>()
const title = ref('')
const loading = reactive({
  code: false,
  user: false,
  from: false
})
onMounted(() => {
  onQueryCode()
  onQueryUser()
})
function onCurrentChange(val: TypicalNineCode) {
  currentLeftData.value = val
}

function onAdd() {
  title.value = '新增'
  createVisible.value = true
}

function onEdit(row: TypicalNineCode) {
  title.value = '编辑'
  formData.value = { ...row }
  createVisible.value = true
}

async function onSubmit() {
  loading.from = true
  const res = await typicalNineCodeSave(formData.value)
  if (res.code === SuccessResultCode) {
    ElMessage.success('保存成功')
    onCancel()
    onQueryCode()
    return
  }
  loading.from = false
}

function onCancel() {
  createVisible.value = false
  formData.value = { id: '', shipName: '', shipCode: '', areaCode: '' }
}

function onSelectionChange(rows: Array<TypicalNineUser>) {
  console.log(rows)
  rightSelectedData = rows
}

function onUserAdd() {
  createUserVisible.value = true
}

async function onUserSubmit() {
  loading.from = true
  const res = await typicalNineUserSave({ ...formUserData.value, shipId: currentLeftData.value.id })
  if (res.code === SuccessResultCode) {
    ElMessage.success('保存成功')
    onUserCancel()
    onQueryUser()
    return
  }
  loading.from = false
}

function onUserCancel() {
  createUserVisible.value = false
  formUserData.value = { id: '', userName: '', userCode: '', shipName: '', shipCode: '' }
}

async function onDelete(row: TypicalNineCode) {
  loading.code = true
  const res = await typicalNineCodeDel(row.id)
  if (res.code === SuccessResultCode) {
    ElMessage.success('删除成功')
    if (row.id === currentLeftData.value?.id) {
      currentLeftData.value = undefined
    }
    await onQueryCode()
  }
  loading.code = false
}

async function onRightDelete(row: TypicalNineUser) {
  loading.user = true
  const res = await typicalNineUserDel(row.id)
  if (res.code === SuccessResultCode) {
    ElMessage.success('删除成功')
    await onQueryUser()
  }
  loading.user = false
}

async function onMutiDelete() {
  loading.user = true
  const res = await typicalNineUserDel(rightSelectedData.map((v) => v.id))
  if (res.code === SuccessResultCode) {
    ElMessage.success('删除成功')
    await onQueryUser()
  }
  loading.user = false
}

async function onQueryCode() {
  loading.code = true
  const res = await typicalNineCode()
  if (res.code === SuccessResultCode) {
    leftTableData.value = res.data!
    currentLeftData.value = currentLeftData.value ?? res.data?.[0]
  }
  loading.code = false
}

async function onQueryUser() {
  loading.user = true
  const res = await typicalNineUser(currentLeftData.value?.id)
  if (res.code === SuccessResultCode) {
    currentRightData.value = res.data!
    rightSelectedData = []
  }
  loading.user = false
}

watch(
  () => currentLeftData.value,
  () => {
    onQueryUser()
  }
)
</script>
<style scoped>
.cacp-nine {
  background: #fff;
  overflow: hidden;
  height: 100%;
}
.cacp-group__box {
  max-height: 100%;
  overflow: hidden;
  display: flex;
  align-items: stretch;
}
.group-left,
.group-right {
  flex: 1;
  overflow: hidden;
}

.divider {
  border-left: 1px solid var(--el-border-color);
  margin-left: -1px;
  margin-top: 8px;
  margin-bottom: 8px;
}
</style>
