<script lang="ts" setup>
import {
  useFormGroup,
  Validators
} from '@idux/cdk'
import Toast from '@/components/toast'
import TspApi from '@/pages/tsp/tsp-api.ts'
import ComboboxTable from '@/components/combobox-table/ComboboxTable.vue'
import { TableColumn } from '@idux/components/table'
import UserApi from '@/pages/sys/user/user-api.ts'

const show = ref(false)
const formGroup = useFormGroup<TspTypes.AddParam>({
  pointName: [ undefined, Validators.required ],
  streetName: [ undefined, Validators.required ],
  microdistrict: [ undefined, Validators.required ],
  propertyManagement: [ undefined, Validators.required ],
  // videoUrl: [ undefined, Validators.required ],
  managerId: [ undefined, Validators.required ],
})
const emit = defineEmits([ 'submited' ])

const managerTableColumns: TableColumn<TspTypes.TspData>[] = [
  {
    title: '用户名称',
    dataKey: 'nickname',
  },
  {
    title: '账号',
    dataKey: [ 'account', 'username' ],
  },
]

function managerDataSource(params: {
  pageIndex: number,
  pageSize: number,
  keywords?: string
}) {
  return UserApi.paging({current: params.pageIndex, size: params.pageSize, nickname: params.keywords})
      .then(res => res.data)
}

const gutter = [ 40, 0 ]

function submit() {
  console.log('submit', formGroup.getValue())
  if (formGroup.valid.value) {
    TspApi.add({...formGroup.getValue(), status: 'ZhengChang'})
        .then(_ => {
          Toast.success('添加成功')
          formGroup.reset()
          emit('submited')
        })
  } else {
    formGroup.markAsDirty()
    Toast.error('请填写完整信息')
  }
  return false
}

defineExpose({
  open() {
    show.value = true
  }
})

</script>

<template>
  <IxModal v-model:visible="show" cancel-text="取消" header="添加收纳点" ok-text="提交" type="default" width="40rem" @cancel="formGroup.reset()" @close="formGroup.reset()" @ok="submit">
    <IxForm :colonless="false" :control="formGroup" :control-col="{span: 19}" :label-col="5" label-align="end" style="height: 23.4rem">
      <IxFormItem :gutter="gutter" label="收纳点名称" messageTooltip>
        <IxInput control="pointName" placeholder="请输入收纳点名称"/>
      </IxFormItem>
      <IxFormItem :gutter="gutter" label="所属街道" messageTooltip>
        <IxInput control="streetName" placeholder="请输入街道名称"/>
      </IxFormItem>
      <IxFormItem :gutter="gutter" label="所属小区" messageTooltip>
        <IxInput control="microdistrict" placeholder="请输入小区名称"/>
      </IxFormItem>
      <IxFormItem :gutter="gutter" label="所属物业" messageTooltip>
        <IxInput control="propertyManagement" placeholder="请输入物业名称"/>
      </IxFormItem>
      <!--<IxFormItem :gutter="gutter" label="视频地址" messageTooltip>
        <IxInput control="videoUrl" placeholder="请输入视频地址"/>
      </IxFormItem>-->
      <IxFormItem :gutter="gutter" label="负责人" messageTooltip>
        <ComboboxTable :columns="managerTableColumns" :get-datasource="managerDataSource"
            control="managerId"
            get-key="id" get-label="nickname" placeholder="请选择负责人" search-form-placeholder="请输入负责人名称"/>
      </IxFormItem>
    </IxForm>
  </IxModal>
</template>

<style lang="stylus" scoped>

</style>
