<template>
  <PageWrapper dense contentFullHeight fixedHeight>
    <div class="table-box">
      <BasicTable @register="registerTable">
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'action'">
            <TableAction
              :actions="[
                {
                  label: '操作',
                  onClick: () => {
                    getCaseDetail(record)
                  },
                },
              ]"
            />
          </template>
        </template>
      </BasicTable>
    </div>
    <a-modal
      width="70%"
      v-model:open="infoModal" 
      title="线索详情"
      :destroyOnClose="true"
      :okText="'关闭'"
      :okType="'danger'"
      @ok="submit" 
      @cancel="closeInfoModal">
        <InfoModal :infoData="infoData" :infoResult="infoResult" v-model:shppath="shppath"/>
    </a-modal>
  </PageWrapper>
</template>
<script lang="ts" setup>
import { PageWrapper } from '@/components/Page';
import { onMounted, ref, h } from 'vue';
import { LoadCaseInfoListForUpdate,LoadCaseInfoById,UpdateCaseInfo,LoadCaseHistoryInfoList } from '@/api/demo/system';
import { BasicTable,useTable,TableAction } from '@/components/Table';
import { columns, searchFormSchema } from './caseclose.data';
import InfoModal from './InfoModal/index.vue'
import { message, Modal } from 'ant-design-vue'
import { CloseSingleCaseInfo } from '@/api/demo/system'

const infoModal = ref(false)
const historyModal = ref(false)
const historyCaseId = ref()
const infoData = ref({})
const infoResult = ref({})
const shppath = ref()
const closeCaseRemark = ref('')
const [registerTable, { setTableData, reload, clearSelectedRowKeys, setPagination, setLoading }] =
  useTable({
    title: '线索汇总',
    api: LoadCaseInfoListForUpdate,
    columns,
    rowKey: 'id',
    formConfig: {
      labelWidth: 120,
      schemas: searchFormSchema,
    },
    // 使用搜索表单
    useSearchForm: true,
    showTableSetting: true,
    bordered: true,
    actionColumn: {
      width: 100,
      title: '操作',
      dataIndex: 'action',
      fixed: 'right',
    },
  });
const getCaseDetail = (record) => {
  LoadCaseInfoById({id: record.id}).then(res => {
    // console.log(res)
    // infoResult.value = {}
    infoData.value = res
    infoModal.value = true
  })
}
const getHistoryList = (record) => {
  // LoadCaseHistoryInfoList({key:record.id}).then(res => {
    historyCaseId.value = record.id
    historyModal.value = true

  //   console.log(res)
  // })
  
}
const submit = () => {
  Modal.confirm({
    title: '请输入关闭原因',
    content: h('input',{
      class: 'reSubmitInput',
      onChange: (e) => closeCaseRemark.value = e.target.value
    }),
    onOk: async () => {
      if(closeCaseRemark.value.trim().length <=0){
        message.warning('关闭原因不能为空')
        return Promise.reject() 
      }
      try{
        const result = await CloseSingleCaseInfo({id:infoData.value.id , closereason: closeCaseRemark.value})
        if(result){
          message.success('关闭线索成功');
          reload()
          closeInfoModal()
        }
        closeCaseRemark.value = ''
      } catch (error){
        closeCaseRemark.value = ''
      }
    },
    onCancel() {
      closeCaseRemark.value = ''
    },
  })
  
  // UpdateCaseInfo(infoResult.value,shppath.value).then(res => {
  //   console.log(res)
  //   message.success('修改成功')
  //   closeInfoModal()
  //   reload()
  // })
}
const closeInfoModal = () => {
  infoModal.value = false
  infoResult.value = {}
  shppath.value = ''
}
const closeHistoryModal = () => {
  historyModal.value = false
}
</script>
<style lang="less" scoped>
</style>
<style lang="scss">
.reSubmitInput{
  border: 1px solid;
  width: 100%;
  height: 35px;
  border-radius: 5px;
  padding: 0px 10px;
  border-color: #000;
  transition: 0.2s;
  &:focus{
    border-color: #6db8ff;
  }
}
</style>
