<template>
  <div>
    <BasicTable @register="registerTable">
      <template #toolbar>
        <!-- <PermissionBtn @btnEvent="buttonClick"></PermissionBtn> -->
        <!-- <a-button type="primary" :disabled="processDisabled"  @click="buttonClick('process')">处理</a-button>
        <a-button type="primary" :disabled="getCarDisabled" @click="buttonClick('getcar')">提车</a-button> -->
      </template>
      <template #bodyCell="{ column, record, index, text }">
        <template v-if="column.key === 'action'">
          <TableAction
            :actions="[
              {
                label: '详情',
                onClick: () => {
                  showInfo(record)
                },
              },
            ]"
          />
        </template>
      </template>
    </BasicTable>
    <a-modal width="100%" wrap-class-name="reportviolations-show-info-modal" v-model:open="showInfoModalOpen" :title="modalType == 'process'? '处理': '详情'" :maskClosable="false" :footer="null" :destroyOnClose="true" @cancel="modalClose">
      <ShowInfoModal :modalType="modalType" :modalData="modalData" :carTypeOptions="carTypeOptions" @closeModal="closeModal"/>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted, reactive, watch, createVNode, unref, computed, h } from 'vue';
  import { Modal, message } from 'ant-design-vue';
  import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
  import { BasicTable, useTable, TableAction } from '@/components/Table';
  import { PermissionBtn } from '@/components/PermissionBtn/index';
  import { LoadAllPage, Get } from '@/api/illegalconstruction/reportviolations'
  import { Add } from '@/api/illegalconstruction/getcar'
  import { columns, searchFormSchema, statusOptions, violationTypeOptions, carTypeOptions } from './util';
  import ShowInfoModal from './ShowInfoModal/index.vue'
import dayjs from 'dayjs';

  const showInfoModalOpen = ref(false)
  const modalType = ref()
  const modalData = ref({})
  const getCarRemark = ref('')

  const processDisabled = ref()
  const getCarDisabled = ref()

  // 表格
  const [registerTable, { reload, getSelectRows, getPaginationRef }] = useTable({
    title: '上报违法列表',
    api: LoadAllPage,
    columns: columns,
    formConfig: {
      labelWidth: 120,
      schemas: searchFormSchema,
      showAdvancedButton: false,
    },
    showIndexColumn: false,
    rowSelection: {
      type: 'radio',
      onChange: (record,list) => {
        processDisabled.value = list[0].Status == 0? false: true
        getCarDisabled.value = list[0].Status == 1? false: true

      }
    },
    useSearchForm: true,
    bordered: true,
    showTableSetting: true,
    handleSearchInfoFn(info) {
      return info;
    },
    actionColumn: {
      width: 100,
      title: '操作',
      dataIndex: 'action',
    },
    beforeFetch: (params) => {
      const { begindate, enddate } = params
      return {
        ...params,
        begindate: begindate
          ? dayjs(begindate).startOf('day').format('YYYY-MM-DD HH:mm:ss')
          : undefined,
        enddate: enddate
          ? dayjs(enddate).endOf('day').format('YYYY-MM-DD HH:mm:ss')
          : undefined,
      }
    }
  });
  const showInfo = (record) => {
    modalType.value = 'showInfo'
    Get({id: record.Id}).then(res => {
      modalData.value = res
      showInfoModalOpen.value = true
    })
  }
  // 按键分类
  const buttonClick = async (type) => {
    switch (type) {
      case 'process':
        let select = getSelectRows()
        if (select.length !== 1) {
          message.warning('请选择一条数据');
          return;
        }
        modalType.value = 'process'
        Get({id: select[0].Id}).then(res => {
          modalData.value = res
          showInfoModalOpen.value = true
        })
        
        break;
      case 'getcar':
        let selectList = getSelectRows()
        if (selectList.length !== 1) {
          message.warning('请选择一条数据');
          return;
        }
          Modal.confirm({
            title: '正在发起提车，请输入提车备注',
            content: h('input',{
              class: 'getCarRemarkInput',
              onChange: (e) => getCarRemark.value = e.target.value
            }),
            onOk: async () => {
              try{
                const result = await Add({ violationReportId: selectList[0].Id, remark: getCarRemark.value })
                if(result){
                  message.success('发起提车成功');
                  reload()
                }
                getCarRemark.value = ''
              } catch (error){
                getCarRemark.value = ''
              }
            },
            onCancel() {
              getCarRemark.value = ''
            },
          })
        break;
    }
  };
  const closeModal = (isReload=false) => {
    showInfoModalOpen.value = false
    if(isReload){
      reload()
    }
  }
  const getLabel = (type, value) => {
    let result: any[] = [];
    let label = '';
    switch (type) {
      case 'Status':
        result = statusOptions;
        break;
      case 'ViolationType':
        result = violationTypeOptions;
        break;
    }
    result.forEach((item) => {
      if (item.value == value) {
        label = item.label;
      }
    });
    return label;
  };

</script>
<style lang="scss">
.reportviolations-show-info-modal {
  .ant-modal {
    max-width: 100%;
    top: 0;
    padding-bottom: 0;
    margin: 0;
  }
  .ant-modal-content {
    display: flex;
    flex-direction: column;
    height: calc(100vh);
  }
  .ant-modal-body {
    flex: 1;
  }
}
.getCarRemarkInput{
  border: 1px solid;
  width: 100%;
  height: 35px;
  border-radius: 5px;
  padding: 0px 10px;
  border-color: #000;
  transition: 0.2s;
  color: #000 !important;
  &:focus{
    border-color: #6db8ff;
  }
}
</style>