<template>
  <a-row :gutter="8" :wrap="false">
    <a-col flex="auto">
      <a-card title="电话关爱对象列表">
        <template #extra>
          <a-button type="primary" @click="showModal">新增</a-button>
        </template>
        <a-table :columns="columns" :data-source="listData" bordered="true" :loading="loading"
          :pagination="paginationState" :scroll="{ x: 'max-content' }" @change="onTableChange">
          <template #bodyCell="{ index, column, record }">
            <template v-if="column.key === 'serialNumber'">
              <span>{{ index + 1 }}</span>
            </template>
            <template v-if="'action' === column.key">
              <x-action-button @click="$refs.editDialogRef.handleCreate(record)">
                <span>编辑</span>
              </x-action-button>
            </template>
          </template>
        </a-table>
      </a-card>
    </a-col>
  </a-row>
  <a-modal v-model:open="visibleOpen" title="添加联系人" @ok="handleOk" :width="800">
    <a-card>
      <a-form ref="formRef" :model="contactForm" :rules="formRules" >
        <a-row :gutter="24">
          <!-- 姓名 -->
          <a-col :span="12">
            <a-form-item label="姓名" name="name">
              <a-input v-model:value="contactForm.name" placeholder="请输入姓名" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="联系方式" name="phone">
              <a-input v-model:value="contactForm.phone" placeholder="请输入联系方式" />
            </a-form-item>
          </a-col>
          <!-- 性别 -->
          <a-col :span="12">
            <a-form-item label="性别" name="gender">
              <a-radio-group v-model:value="contactForm.gender">
                <a-radio value="1">男</a-radio>
                <a-radio value="2">女</a-radio>
              </a-radio-group>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="年龄" name="age" >
              <a-input-number v-model:value="contactForm.age" placeholder="请输入年龄" style="width: 100%;" />
            </a-form-item>
          </a-col>
          <!-- 证件号码 -->
          <a-col :span="12">
            <a-form-item label="证件号码" name="identityNo">
              <span style="display: inline-flex; width: 100%;">
                <a-select v-model:value="contactForm.identityType" style="width: 100px; margin-right: 8px;">
                  <a-select-option v-for="item in dicsStore.dictOptions.CARD_TYPE" :key="item.dval" :value="item.dval">
                    {{ item.introduction }}
                  </a-select-option>
                </a-select>
                <a-input v-model:value="contactForm.identityNo" placeholder="请输入证件号码" style="flex: 1;"
                  @change="extractBirthDateFromIdCard" />
              </span>
            </a-form-item>
          </a-col>

          <!-- 出生日期 -->
          <a-col :span="12">
            <a-form-item label="关系" name="relationType">
              <a-input v-model:value="contactForm.relationType" placeholder="请输入关系" style="width: 100%;" />
            </a-form-item>
          </a-col>

          <!-- 关爱巡访电话 -->
          <a-col :span="12">
            <a-form-item label="工作类型" name="workCondition">
              <a-input v-model:value="contactForm.workCondition" placeholder="请输入工作类型" />
            </a-form-item>
          </a-col>

          <!-- 家庭地址 -->
          <a-col :span="12">
            <a-form-item label="家庭地址" name="areaCodes">
              <AreaCascader v-model:value="contactForm.areaCodes" @change="onAreaChange" ref="areaCascaderRef" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="详细地址" name="address">
              <a-input v-model:value="contactForm.address" placeholder="请输入详细地址" />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-card>
  </a-modal>
</template>

<script setup>
import { message, Modal } from 'ant-design-vue'
import { ref } from 'vue'
import apis from '@/apis'
import { config } from '@/config'
import { usePagination } from '@/hooks'
import { useI18n } from 'vue-i18n'
import { useDicsStore } from '@/store'
import AreaCascader from '@/components/AreaCascader/index.vue'
import { useForm, useModal } from '@/hooks'
const { formRecord, formData: contactForm, formRef, formRules, resetForm } = useForm()
import dayjs from 'dayjs'
defineOptions({
  name: 'allocation',
})
const props = defineProps({
  formData: {
    type: Object,
    default: () => ({})
  }
});
const visibleOpen = ref(false)
const dicsStore = useDicsStore()
formRules.value = {
  name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
}
const columns = [
  {
    title: '序号',
    dataIndex: 'serialNumber',
    key: 'serialNumber',
    align: 'center',
    width: 80,
  },
  {
    title: '名字',
    dataIndex: 'name',
    key: 'name',
    align: 'center',
    width: 120,
  },

  // --- 联系方式 ---
  {
    title: '联系方式',
    dataIndex: 'phone',
    key: 'phone',
    align: 'center',
    width: 130,
  },
  {
    title: '关系',
    dataIndex: 'relationType',
    key: 'relationType',
    align: 'center',
    width: 130,
  },
  {
    title: '性别',
    dataIndex: 'gender',
    key: 'gender',
    align: 'center',
    width: 80,
  },
  {
    title: '身份证号',
    dataIndex: 'identityNo',
    key: 'identityNo',
    align: 'center',
    width: 180,
  },
  {
    title: '紧急联系人',
    dataIndex: 'isEmergency',
    key: 'isEmergency',
    align: 'center',
    width: 120,
  },

  {
    title: '工作类型',
    dataIndex: 'workCondition',
    key: 'workCondition',
    align: 'center',
    width: 130,
  },
  {
    title: '家庭地址',
    dataIndex: 'areaCodes',
    key: 'areaCodes',
    align: 'center',
    width: 80,
  },
  {
    title: '详细地址',
    dataIndex: 'address',
    key: 'address',
    align: 'center',
    width: 100,
  },
  {
    title: '操作',
    dataIndex: 'action',
    key: 'action',
    align: 'center',
    width: 120,
    fixed: 'right',
  }
];
const { t } = useI18n() // 解构出t方法
const { listData, loading, showLoading, hideLoading, paginationState, resetPagination, searchFormData } = usePagination()
const editDialogRef = ref()
getPageList()

async function getPageList() {
  try {
    const { pageSize, current } = paginationState
    const { success, data, total } = await apis.contacts
      .getProjectList({
        pageSize,
        current: current,
        customerId: props.formData.customerId
      })
      .catch(() => {
        throw new Error()
      })

    if (config('http.code.success') === success) {
      listData.value = data
      paginationState.total = total || 0
    }
  } catch (error) {

  }
}
/**核销 */
const checkHandler = (record) => {
  Modal.confirm({
    title: '即将核销是否继续',
    content: t('button.confirm'),
    okText: t('button.confirm'),
    onOk: async () => {
      const params = {
        ...record,
        status: 'success'
      }
      const { success } = await apis.productOrder.updateItem(params.id, params).catch(() => {
        // throw new Error()
      })
      if (config('http.code.success') === success) {
        // resolve()
        message.success('核销成功')
        await getPageList()
      }
    },
  })
}
/**
 * 删除
 */
function handleDelete({ id }) {
  Modal.confirm({
    title: t('pages.system.user.delTip'),
    content: t('button.confirm'),
    okText: t('button.confirm'),
    onOk: () => {
      return new Promise((resolve, reject) => {
        ; (async () => {
          try {
            const { success } = await apis.productOrder.delItem(id).catch(() => {
              throw new Error()
            })
            if (config('http.code.success') === success) {
              resolve()
              message.success(t('component.message.success.delete'))
              await getPageList()
            }
          } catch (error) {
            reject()
          }
        })()
      })
    },
  })
}
const showModal = () => {
  visibleOpen.value = true;
};
function onAreaChange(value, labels) {
  formData.value.areaLabels = [...labels]
}
/**
 * 分页
 */
function onTableChange({ current, pageSize }) {
  paginationState.current = current
  paginationState.pageSize = pageSize
  getPageList()
}

/**
 * 搜索
 */
function handleSearch() {
  resetPagination()
  getPageList()
}
/**
 * 重置
 */
function handleResetSearch() {
  searchFormData.value = {}
  resetPagination()
  getPageList()
}
/**
 * 编辑完成
 */
async function onOk() {
  await getPageList()
}

</script>

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