import type { CurrentUser } from "umi";
import { connect } from "umi";
import type { ConnectState } from "@/models/connect";
import {
  Button,
  Col, DatePicker,
  Drawer, Form,
  Input,
  message,
  Modal, Popconfirm, Popover,
  Row,
  Select,
  Space, Spin, Switch, Tree,
  Upload
} from "antd";
import React, { useEffect, useRef, useState } from "react";
import type { ActionType, ProColumns } from "@ant-design/pro-table";
import AddNewShop from "@/pages/supplier/supplierList/components/addNewShop";
import {
  handleSubmitData,
  handleBIDList,
  handleSaveQuotation, handleCompareSubmit, handleQualificationList,
  updateQualification, handleDeleteBIDList
} from "@/pages/supplier/supplierList/service";
import moment from "moment";
import { ExclamationCircleOutlined, FilterOutlined, PlusOutlined } from "@ant-design/icons";
import ProTable from "@ant-design/pro-table";
import {
  ModalForm,
  ProFormDatePicker,
  ProFormSelect,
  ProFormText,
  ProFormTextArea,
  ProFormUploadButton
} from "@ant-design/pro-form";
import useRequest from "@ahooksjs/use-request";
import { handleSupplierList } from "@/pages/Setting/Roles/service";
import { deleteAHYDPicture, deletePicture, uploadAHYDPicture, uploadPicture } from "@/services/picture";
import type { QualificationModel } from "@/pages/merchantManagement/supplier/Qualifications/data";
import { getFieldEnum } from "@/services/options";
import type { UploadFile } from "antd/es/upload/interface";
import { getQualificationDetail } from "@/pages/merchantManagement/supplier/Qualifications/service";
import type { PictureModel } from "@/services/options/typings";
import type { ProDescriptionsItemProps } from "@ant-design/pro-descriptions";
import ProDescriptions from "@ant-design/pro-descriptions";
import { transferImg } from "@/utils/format";
import './list.less'
import dealtSelect from '@/assets/supplier/dealtSelect.png'
import dealt from '@/assets/supplier/dealt.png'
import owner from '@/assets/supplier/owner.png'
import ownerSelect from '@/assets/supplier/ownerSelect.png'
import allBussiness from '@/assets/supplier/allBussiness.png'
import pendingBusiness from '@/assets/supplier/pendingBusiness.png'
import successBusiness from '@/assets/supplier/successBusiness.png'
import businessName from '@/assets/supplier/businessName.png'
import startTime from '@/assets/supplier/startTime.png'
import compareTime from '@/assets/supplier/compareTime.png'
import compareRate from '@/assets/supplier/compareRate.png'
import state from '@/assets/supplier/state.png'
import option from '@/assets/supplier/option.png'
import first from '@/assets/supplier/1st.png'
import second from '@/assets/supplier/2st.png'
import third from '@/assets/supplier/3st.png'
import forth from '@/assets/supplier/4st.png'
import descIcon from '@/assets/supplier/descIcon.png'
import shopSmallIcon from '@/assets/supplier/shopSmallIcon.png'
import remainderIcon from '@/assets/supplier/remainderIcon.png'
import error from "@/assets/bussinessProject/error.svg";

const { confirm } = Modal;

// 上传资质图片
const customUploadRequest = async (fileList: UploadFile[], tableId: string) => {
  if (!fileList.length) {
    message.error("您上传的图片不存在.")
    return false
  }
  const formData = new FormData();
  fileList.forEach((file: any) => {
    formData.append('files[]', file);
  });

  formData.append('TableName', 'QUALIFICATION');
  formData.append('TableId', tableId);
  const success = await uploadAHYDPicture(formData)
  if (success) {
    return true
  }
  return false
}


const SupplierList: React.FC<{ currentUser: CurrentUser | undefined }> = ({ currentUser }) => {
  const tableRef = useRef()
  // 子组件的实例对象
  const addNewShopRef = useRef<ActionType>()
  const actionRef = useRef<ActionType>()
  const actionSupplierRef = useRef<ActionType>()
  const [showDetailDrawer, setShowDetailDrawer] = useState<boolean>(false)
  const [currentItem, setCurrentItem] = useState<any>()
  const [showAddDrawer, setShowAddDrawer] = useState<boolean>(false)
  const [shopList, setShopList] = useState<any>() // 详情查到的商品列表
  const [qualification, setQualification] = useState<boolean>(false)// 上传资质的悬浮框
  const [addQualification, setAddQualification] = useState<boolean>(false)// 新增资质的悬浮框
  const qualificationFormRef = useRef()
  const [submitModal, setSubmitModal] = useState<boolean>(false)
  const [submitSupplierID, setSubmitSupplierID] = useState<number | null>()// 最后提交的时候选择的供应商id
  // 最后提交的时候 选择的供应商列表
  const [submitSelectList, setSubmitSelectList] = useState<any>()
  const [fileList, setFileList] = useState<UploadFile[]>([])
  const [showCurrentDetail, setShowCurrentDetail] = useState<boolean>(false)// 资质的详情
  const [currentRow, setCurrentRow] = useState<any>()// 当前选中的资质详情
  const { data: supplierLists } = useRequest(async () => {
    return await handleSupplierList({
      ProvinceCode: currentUser?.USER_PROVINCE,
      OwnerUnitId: currentUser?.OwnerUnitId,
    })
  })
  // 搜索的业务名称
  const [searchName, setSearchName] = useState<string>()
  // 搜索的查询时间
  const [searchTime, setSearchTime] = useState<any>()// 搜索时间
  // 搜索的配送时间
  const [deliveryTime, setDeliveryTime] = useState<any>()
  // 获取供应商列表
  const { loading, data: supplierList } = useRequest(async () => {
    return await handleSupplierList({
      ProvinceCode: currentUser?.USER_PROVINCE,
      OwnerUnitId: currentUser?.OwnerUnitId,
    })
  })
  // 资质的供应商
  const columns: ProColumns<QualificationModel>[] = [
    {
      dataIndex: 'QUALIFICATION_NAME',
      title: '资质名称',
      hideInDescriptions: true,
      hideInSearch: true,
      render: (_, record) => {
        return <a onClick={async () => {
          setCurrentRow(await getDetail(record))
          setShowCurrentDetail(true)
        }}>{_}</a>
      }
      // width: '15%',
    },
    {
      dataIndex: 'QUALIFICATION_DESC',
      title: '资质说明',
      hideInSearch: true,
    },
    {
      dataIndex: 'SUPPLIER_ID',
      title: '供应商名称',
      valueType: 'select',
      fieldProps: {
        showSearch: true,
        options: !loading ? supplierList : []
      }
    },
    {
      dataIndex: 'QUALIFICATION_TYPE',
      title: '资质类型',
      align: 'center',
      valueType: 'select',
      request: async () => {
        return await getFieldEnum({ FieldExplainField: 'QUALIFICATION_TYPE' })
      }
    },
    {
      dataIndex: 'ISSUING_DATE',
      title: '签发日期',
      align: 'center',
      hideInSearch: true,
      render: (_, record) => {
        if (record?.ISSUING_DATE) {
          return moment(record?.ISSUING_DATE).format('YYYY-MM-DD')
        }
        return _
      }
    },
    {
      dataIndex: 'QUALIFICATION_ENDDATE',
      title: '有效期至',
      align: 'center',
      sorter: true,
      hideInSearch: true,
      valueType: 'date',
      render: (_, record) => {
        if (record?.QUALIFICATION_ENDDATE && record?.QUALIFICATION_ENDDATE.toString() !== '') {
          // 资质到期时间在一个月内，内容标红显示
          if (moment().add(1, 'month').diff(moment(record?.QUALIFICATION_ENDDATE)) > 0 &&
            moment(record?.QUALIFICATION_ENDDATE).diff(moment().format('YYYY/MM/DD')) >= 0) {
            return <Space style={{ color: '#FD4B54' }}>{_}</Space>
          }
          // 资质已过期，则置灰显示
          if (moment(record?.QUALIFICATION_ENDDATE).diff(moment().format('YYYY/MM/DD')) < 0) {
            return <Space style={{ color: '#d9d9d9' }}>{_}</Space>
          }
        }
        return _
      }
    },
    {
      dataIndex: 'QUALIFICATION_ENDDATE',
      title: '到期',
      align: 'center',
      hideInTable: true,
      valueType: 'radioButton',
      hideInDescriptions: true,
      valueEnum: {
        1: { text: '一个月' },
        2: { text: '三个月' },
        3: { text: '半年' },
      },
    },
    {
      dataIndex: 'QUALIFICATION_STATE',
      title: '状态',
      align: 'center',
      valueType: 'select',
      hideInDescriptions: true,
      valueEnum: {
        1: { text: '有效', status: 'processing' },
        0: { text: '过期', status: "default" },
      },
    },
    {
      dataIndex: 'OPERATE_DATE',
      title: '更新时间',
      align: 'center',
      valueType: 'fromNow',
      hideInTable: true,
      hideInSearch: true,
    },
    {
      dataIndex: 'STAFF_NAME',
      title: '操作员',
      align: 'center',
      hideInSearch: true,
      hideInTable: true,
    },
    {
      dataIndex: 'option',
      title: '操作',
      align: 'center',
      valueType: 'option',
      hideInSearch: true,
      render: (_, record) => {
        return (
          <Space>
            {
              supplierId ? '' : <a
                onClick={async () => {
                  console.log('record', record)
                  setCurrentRow(await getDetail(record))
                  qualificationFormRef.current?.setFieldsValue({
                    ...record
                  })
                  setAddQualification(true)
                }}
              >
                编辑
              </a>
            }
          </Space>
        );
      },
    },
  ];
  // 当前查看供应商资质选中的供应商
  const [supplierId, setSupplierId] = useState<any>()
  const { RangePicker } = DatePicker;
  // 获取详情
  const getDetail = async (record: QualificationModel) => {
    const data = await getQualificationDetail(record?.QUALIFICATION_ID)
    const files = data?.ImgList ? data?.ImgList.map((n: PictureModel) => {
      return {
        uid: n.ImageId,
        name: n.ImageName,
        status: 'done',
        url: n.ImageUrl,
        deletepath: n.ImagePath
      }
    }) : []
    // setPriviewFileList(files)
    setFileList(files)
    return data
  }
  // 选项卡列表
  const [tabList, setTabList] = useState<any>(currentUser?.UserPattern === 1000 ? [
    { label: '待办事项', number: 0, value: 1, icon: dealt, selectIcon: dealtSelect },
    { label: '我的申请', number: 0, value: 2, icon: owner, selectIcon: ownerSelect },
  ] : [
    { label: '待办事项', number: 0, value: 1, icon: dealt, selectIcon: dealtSelect },
    { label: '中标项目', number: 0, value: 2, icon: owner, selectIcon: ownerSelect },
    { label: '未中标项目', number: 0, value: 3, icon: owner, selectIcon: ownerSelect },
  ])
  // 选中的标签
  const [selectTab, setSelectTab] = useState<number>(1)
  // 其他详情信息
  const [navList, setNavList] = useState<any>(
    currentUser?.UserPattern === 4000 ?
      [
        { label: '总业务', img: allBussiness, value: 0 },
        { label: '在招标', img: pendingBusiness, value: 0 },
        { label: '已完成', img: successBusiness, value: 0 }
      ] :
      [
        { label: '总业务', img: allBussiness, value: 0 },
        { label: '在招标', img: pendingBusiness, value: 0 },
        { label: '比价中', img: pendingBusiness, value: 0 },
        { label: '已完成', img: successBusiness, value: 0 }
      ]
  )
  // 待办事项的columns
  const waitColumns = [
    {
      title: <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <img style={{ width: '14px', height: '14px', marginRight: '7px' }} src={businessName} />
        <span>业务名称</span>
      </div>,
      ellipsis: true,
      dataIndex: 'BID_NAME',
      hideInSearch: true,
      align: 'left',
    },
    {
      title: <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <img style={{ width: '14px', height: '14px', marginRight: '7px' }} src={businessName} />
        <span>业务备注</span>
      </div>,
      dataIndex: 'BID_DESC',
      ellipsis: true,
      hideInSearch: true,
      align: 'left',
    },
    {
      title: <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <img style={{ width: '14px', height: '14px', marginRight: '7px' }} src={startTime} />
        <span>发起时间</span>
      </div>,
      dataIndex: 'OPERATE_DATE',
      width: 180,
      hideInSearch: true,
      align: 'center',
    },
    {
      title: <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <img style={{ width: '14px', height: '14px', marginRight: '7px' }} src={compareTime} />
        <span>比价时间</span>
      </div>,
      dataIndex: 'compareTime',
      width: 300,
      hideInSearch: true,
      align: 'left',
      render: (_, record) => {
        return <div className={'compareTimeBigDetail'}>
          <div className={'compareTimeDetail compareTime'}>
            <div style={{ background: '#F5F6F9', padding: '2px 4px', display: 'flex', alignItems: 'center', borderRadius: '6px' }}>
              <span className={'compareText'}>{`${moment(record?.START_DATE).format('YYYY-MM-DD')}~${moment(record?.END_DATE).format('YYYY-MM-DD')}`}</span>
              {
                record.BID_STATE === 9000 ? '' :
                  <div style={{ display: 'inline-block' }}>
                    {
                      record?.Remian ?
                        <div className={'compareBox'}>
                          <img className={'compareIcon'} src={remainderIcon} />
                          <span className={'compareLabel'}>还剩<span className={'compareValue'}>{record?.Remian}</span></span>
                        </div> : ''
                    }
                  </div>
              }
            </div>
          </div>
        </div>
      }
    },
    {
      title: <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <img style={{ width: '14px', height: '14px', marginRight: '7px' }} src={compareRate} />
        <span>比价进度</span>
      </div>,
      dataIndex: 'compareRate',
      width: 150,
      hideInSearch: true,
      hideInTable: selectTab !== 1,
      align: 'center',
      render: (_, record) => {
        return <div className={'compareRateBox'}>
          <div className={'compareRate'}>
            <div className={'progress'}>
              <div className={'have'} style={{ width: `${record?.BID_STATE === 9000 ? 0 : (record?.BidSupplier / record?.TotalSupplier) > 1 ? 100 : (record?.BidSupplier / record?.TotalSupplier) * 100}%` }}></div>
            </div>
            <span className={'progressText'}>{`${record?.BidSupplier}/${record?.TotalSupplier}`}</span>
          </div>
        </div>
      }
    },
    {
      title: <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <img style={{ width: '14px', height: '14px', marginRight: '7px' }} src={shopSmallIcon} />
        <span>供应商</span>
      </div>,
      dataIndex: 'SUPPLIER_NAME',
      hideInSearch: true,
      hideInTable: !(currentUser?.UserPattern === 1000 && selectTab === 2),
      align: 'left',
      width: 320,
      render: (_, record) => {
        return <div className={'compareRate'}>
          {
            record.BID_STATE === 9000 ?
              <div style={{ display: 'inline-block' }}>
                <div className={'stateSuccess'} style={{ background: '#FEF2E5' }}>
                  <div className={'stateIcon'} style={{ background: '#FB8300' }}></div>
                  <span className={'stateName'}>{record.WinSupplier}</span>
                </div>
              </div> :
              <div className={'stateHoverBox'} style={{ width: '320px' }}>
                <span style={{ width: '90%', display: 'inline-block', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{record.SUPPLIER_NAME}</span>
                <div className={'hoverShowBox'}>
                  {record.SUPPLIER_NAME}
                </div>
              </div>
          }
        </div>
      }
    },
    {
      title: <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <img style={{ width: '14px', height: '14px', marginRight: '7px' }} src={state} />
        <span>状态</span>
      </div>,
      dataIndex: 'BID_STATE',
      width: 100,
      hideInSearch: true,
      align: 'center',
      filters: true,
      onFilter: true,
      valueEnum: {
        2000: '报价中',
        3000: '比价中',
      },
      render: (_, record) => {
        return <div className={'stateBox state'}>
          <div className={'stateSmallBox'} style={{ background: record.BID_STATE === 2000 ? '' : record.BID_STATE === 3000 ? '#E9F1FB' : '#EDF0F2' }}>
            <div style={{ display: 'flex', alignItems: 'center' }}>
              <div className={'before'} style={{ background: record.BID_STATE === 2000 ? '' : record.BID_STATE === 3000 ? '#1E80FF' : '#52697D' }}></div>
              <text className={'stateName'} style={{ color: record.BID_STATE === 2000 ? '' : '#52697D' }}>{record.BID_STATE === 2000 ? '报价中' : record.BID_STATE === 3000 ? '比价中' : '已审结'}</text>
            </div>
          </div>
        </div>
      }
    },
    {
      title: <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <img style={{ width: '14px', height: '14px', marginRight: '7px' }} src={option} />
        <span>操作</span>
      </div>,
      dataIndex: '',
      hideInSearch: true,
      width: 100,
      align: 'center',
      render: (_, record) => {
        return <>
          <a onClick={() => {
            setShowDetailDrawer(true)
            setCurrentItem(record)
          }}>详情</a>
          {
            selectTab === 1 && currentUser?.UserPattern === 1000 ?
              <Popconfirm
                title="确认删除该比价申请？"
                onConfirm={async () => {
                  const data = await handleDeleteBIDList({ BIDId: record.BID_ID })
                  if (data.Result_Code === 100) {
                    message.success(data.Result_Desc)
                    tableRef.current?.reload()
                  } else {
                    message.error(data.Result_Desc)
                  }
                }}
                okText="确认"
                cancelText="取消"
              >
                <a style={{ marginLeft: '8px' }}>删除</a>
              </Popconfirm> : ''
          }
        </>
      }
    },
  ]


  // 供应商查看资质的方法
  const handleSearchQualification = (name: string) => {
    if (supplierList && supplierList.length > 0) {
      supplierList.forEach((item: any) => {
        if (item.label === name.split('（未参加）')[0]) {
          setSupplierId(item.value)
        }
      })
    }
    setQualification(true)
  }

  return (
    <div className={'page'}>
      <div className={'pageTop'}>
        <span className={'pageTitle'}>比价审批</span>
        {/* 搜索的内容 */}
        <div className={'searchBox'}>
          <Input
            style={{ width: '420px', marginRight: '8px' }}
            placeholder={'请输入业务名称/供应商名称/备注说明/商品名称/服务区名称'}
            value={searchName}
            allowClear={true}
            onChange={(e: any) => {
              setSearchName(e.target.value)
            }}
          />

          <div style={{ marginLeft: '12px' }}>
            <span>比价时间：</span>
            <RangePicker
              value={searchTime}
              style={{ width: '300px', marginRight: '8px' }}
              allowClear
              onChange={(e: any) => {
                if (e) {
                  setSearchTime([moment(e[0]._d), moment(e[1]._d)])
                } else {
                  setSearchTime(null)
                }
              }}
            />
          </div>

          <div style={{ marginLeft: '12px' }}>
            <span>配送时间：</span>
            <RangePicker
              value={deliveryTime}
              style={{ width: '300px', marginRight: '8px' }}
              allowClear
              onChange={(e: any) => {
                if (e) {
                  setDeliveryTime([moment(e[0]._d), moment(e[1]._d)])
                } else {
                  setDeliveryTime(null)
                }
              }}
            />
          </div>

          <Button type={'primary'} onClick={() => {
            // handleTableList()
            tableRef.current?.reload()
          }}>查询</Button>
        </div>
      </div>

      {/* 页面内容 */}
      <div className={'pageContent'}>
        <div className={'contentTop'}>
          <div className={'tab'}>
            {
              tabList.map((item: any) => {
                return <div className={selectTab === item.value ? 'selectTabItem tabItem' : 'tabItem'} onClick={() => {
                  setSelectTab(item.value)
                  tableRef.current?.reload()
                }}>
                  <img className={'tabIcon'} src={selectTab === item.value ? item.selectIcon : item.icon} />
                  <span className={'tabLabel'}>{item.label}
                    {
                      item.number ?
                        <span>（{item.number}）</span> : ''
                    }
                  </span>
                </div>
              })
            }
          </div>
          <Button style={{ display: currentUser?.UserPattern === 4000 ? 'none' : '' }} type={'primary'} onClick={() => {
            setShowAddDrawer(true)
          }}>新增申请</Button>
        </div>

        <div className={'nav'}>
          {
            navList.map((item: any) => {
              return <div className={'navItem'}>
                <img className={'navIcon'} src={item.img} />
                <div className={'navTextBox'}>
                  <span className={'navLabel'}>{item.label}</span>
                  <span className={'navValue'}>{item.value}</span>
                </div>
              </div>
            })
          }
        </div>
        <ProTable
          actionRef={tableRef}
          className={'proTable'}
          columns={waitColumns}
          request={async (params: any) => {
            const req = {
              SearchParameter: {
                SUPPLIER_IDS: currentUser?.UserPattern === 4000 ? currentUser?.SupplierID : '',
                SERVERPART_IDS: '',
                BID_STATES: '',
                STAFF_ID: currentUser?.UserPattern === 1000 ? currentUser?.ID : '',
                START_DATE_End: searchTime && searchTime.length > 0 ? moment(searchTime[0]).format('YYYY-MM-DD') : '',
                END_DATE_Start: searchTime && searchTime.length > 0 ? moment(searchTime[1]).format('YYYY-MM-DD') : '',
                EFFECT_STARTDATE_End: deliveryTime && deliveryTime.length > 0 ? moment(deliveryTime[1]).format('YYYY-MM-DD') : '',
                EFFECT_ENDDATE_Start: deliveryTime && deliveryTime.length > 0 ? moment(deliveryTime[0]).format('YYYY-MM-DD') : '',
                // OPERATE_DATE_Start:searchTime && searchTime.length>0?moment(searchTime[0]).format('YYYY-MM-DD'):'',
                // OPERATE_DATE_End:searchTime && searchTime.length>0?moment(searchTime[1]).format('YYYY-MM-DD'):'',
                SELLER_ID: currentUser?.UserPattern === 1000 ? currentUser?.SellerId : ''
              },
              keyWord: {
                // ,
                key: 'BID_NAME,SUPPLIER_NAME,BID_DESC,COMMODITY_NAME,SERVERPART_NAME', value: searchName || '',
              },
              PageIndex: 1,
              PageSize: 999999,
              Province_Code: currentUser?.ProvinceCode,
              ShowWholePower: true,
              sortStr: 'OPERATE_DATE desc'
            }
            const data = await handleBIDList(req)
            // 接口会返回两个list分别对应两个tab 先用一个数组把两个数组变成一个大数组 然后在里面进行切换就不用再调接口了
            let allList = []
            if (currentUser?.UserPattern === 1000) {
              allList = [data.bIDInModels, data.bIDMyModels]
            } else {
              allList = [data.bIDInModels, data.bIDWinModels, data.bIDFailModels]
            }
            // // 大数组赋值
            // setTableAllList(allList)
            // // 显示数组的初始值
            // setTableData(allList[selectTab - 1])
            // 拿到一开始有初始数据的tab数组 对他进行赋值 让它括号内的数据可以显示
            const newTableList: any = JSON.parse(JSON.stringify(tabList))
            newTableList.forEach((item: any) => {
              if (item.label === '待办事项') {
                item.number = data.bIDInModels?.length || 0
              } else if (item.label === '我的申请') {
                item.number = data.bIDMyModels?.length || 0
              } else if (item.label === '中标项目') {
                item.number = data.bIDWinModels?.length || 0
              } else if (item.label === '未中标项目') {
                item.number = data.bIDFailModels?.length || 0
              }
            })
            // 添加数字之后的tab列表赋值
            setTabList(newTableList)
            // 表格上方那个总览框的初始数据 并对齐进行赋值
            const navDetail: any = JSON.parse(JSON.stringify(navList))
            navDetail.forEach((item: any) => {
              if (item.label === '总业务') {
                item.value = data.TotalCount
              } else if (item.label === '在招标') {
                item.value = data.InBidCount
              } else if (item.label === '比价中') {
                item.value = data.SelectBidCount
              } else if (item.label === '已完成') {
                item.value = data.CompleteBidCount
              }
            })
            setNavList(navDetail)
            return { data: allList[selectTab - 1], success: true }
          }}
          search={false}
          options={false}
          scroll={{ y: 'calc(100vh - 525px)' }}
          pagination={{ pageSize: 10 }}
        >
        </ProTable>
      </div>
      {/* 编辑比价申请 */}
      <Drawer
        width="80%"
        visible={showDetailDrawer}
        onClose={() => {
          setCurrentItem(undefined);
          setShowDetailDrawer(false);
          setCurrentItem(null)
        }}
        destroyOnClose={true}
        bodyStyle={{ backgroundColor: "#f9f9f9", padding: 0 }}
        footer={
          // 当状态是9000的时候说明已经审结了 就不会显示按钮
          currentItem?.BID_STATE !== 9000 ?
            //   当用户为1000时 说明是商户 显示对应的按钮 另一个是4000的情况
            currentUser?.UserPattern === 1000 ?
              <div style={{ width: '100%', display: 'flex', justifyContent: 'flex-end' }}>
                <Button style={{ marginRight: '8px' }} onClick={() => { setShowDetailDrawer(false) }}>取消</Button>
                <Button type={'primary'} onClick={() => {
                  const submitSelect: any = []
                  const submitNameList: any = []
                  const submitList = addNewShopRef.current?.drawerDetail.SUPPLIER_NAME.split(',')
                  submitList.forEach((item: any) => {
                    if (item.indexOf('（未参加）') === -1) {
                      submitNameList.push(item)
                    }
                  })
                  if (supplierList && supplierList.length > 0) {
                    supplierList.forEach((item: any) => {
                      if (submitNameList.indexOf(item.label) !== -1) {
                        submitSelect.push({ label: item.label, value: item.value })
                      }
                    })
                  }
                  setSubmitSelectList(submitSelect)
                  setSubmitModal(true)
                  tableRef.current?.reload()
                }}>提交</Button>
                {/* </Popconfirm> */}
              </div> :
              <div style={{ width: '100%', display: 'flex', justifyContent: 'space-between' }}>
                <Button type={'primary'} onClick={() => {
                  setQualification(true)
                }}>上传资质</Button>
                <div>
                  <Button onClick={() => { setShowDetailDrawer(false) }}>取消</Button>
                  <Button type={'primary'} style={{ marginLeft: '8px' }} onClick={async () => {
                    const current = addNewShopRef.current?.drawerDetail
                    const req: any = []
                    let SUPPLIER_NAME: string = ''
                    addNewShopRef.current?.supplierList.forEach((item: any) => {
                      // if (item.value === currentUser?.SupplierID){
                      if (item.value === addNewShopRef.current?.submitSupplier) {
                        SUPPLIER_NAME = item.label
                      }
                    })
                    let isReturn: boolean = false
                    addNewShopRef.current?.editTableData.forEach((item: any) => {
                      if (!item.COMMODITY_OFFER || !item.DUTY_PARAGRAPH) {
                        isReturn = true
                      }
                      // item.BID_SUPPLIER_ID =current
                      // item.SUPPLIER_ID = currentUser?.SupplierID
                      item.SUPPLIER_ID = addNewShopRef.current?.submitSupplier
                      item.SUPPLIER_NAME = SUPPLIER_NAME
                      item.STAFF_ID = current.STAFF_ID
                      item.IMAGE_URL = item.IMAGE_URL_1
                      item.BID_RESULT = 0
                      req.push(item)
                    })
                    if (isReturn) {
                      message.error('有商品的价格或者税率没有填写！')
                    } else {
                      const data = await handleSaveQuotation(req)
                      if (data.Result_Code === 100) {
                        message.success(data.Result_Desc)
                        tableRef.current?.reload()
                        addNewShopRef.current?.handleGetDetail(addNewShopRef.current?.submitSupplier)
                      } else {
                        message.error(data.Result_Desc)
                      }
                    }
                  }}>保存</Button>
                </div>
              </div>
            : ''
        }
        closable={false}
        zIndex={99}
      >
        {/* 抽屜内显示的东西变为一个组件 往里面传参就可以 */}
        <AddNewShop ref={addNewShopRef} allSupplierList={supplierList} onRef={addNewShopRef} currentItem={currentItem} shopList={shopList} currentUser={currentUser} type={'edit'} handleSearchQualification={handleSearchQualification} />
      </Drawer>
      {/* 新增比价申请 */}
      <Drawer
        width="80%"
        visible={showAddDrawer}
        onClose={() => {
          setCurrentItem(undefined);
          setShowAddDrawer(false);
        }}
        zIndex={29}
        destroyOnClose={true}
        bodyStyle={{ backgroundColor: "#f9f9f9", padding: 0 }}
        footer={
          // 新增只有商户可以 所以直接写死 无需判断
          <div style={{ width: '100%', display: 'flex', justifyContent: 'flex-end' }}>
            <Button onClick={() => { setShowDetailDrawer(false) }}>取消</Button>
            <Button type={'primary'} style={{ marginLeft: '8px' }} onClick={() => {
              addNewShopRef.current.addNewShopFormRef.current.validateFields().then(res => {
                if (res) {
                  if (addNewShopRef.current?.editTableData && addNewShopRef.current?.editTableData.length > 0) {
                    const list: any = []
                    addNewShopRef.current?.editTableData.forEach((item: any) => {
                      list.push({
                        BID_GOODS_ID: item.BID_GOODS_ID || null,
                        BID_ID: item.BID_ID || null,
                        SELLERCOMMODITY_ID: item.SELLERCOMMODITY_ID || null,
                        COMMODITY_NAME: item.COMMODITY_NAME || null,
                        COMMODITY_UNIT: item.COMMODITY_UNIT || null,
                        COMMODITY_RULE: item.COMMODITY_RULE || null,
                        SELLER_ID: item.SELLER_ID,
                        COMMODITY_BARCODE: item.COMMODITY_BARCODE
                      })
                    })
                    let SERVERPART_IDS_Str = ''
                    let SUPPLIER_IDS_Str = ''
                    res.unitName.forEach((item: any) => {
                      if (SERVERPART_IDS_Str) {
                        SERVERPART_IDS_Str += `,${item}`
                      } else {
                        SERVERPART_IDS_Str = item
                      }
                    })

                    res.supplierName.forEach((item: any) => {
                      if (SUPPLIER_IDS_Str) {
                        SUPPLIER_IDS_Str += `,${item}`
                      } else {
                        SUPPLIER_IDS_Str = item
                      }
                    })
                    const req = {
                      BID_NAME: res.businessName,
                      EFFECT_STARTDATE: moment(res.selectTime[0]).format('YYYY-MM-DD'),
                      EFFECT_ENDDATE: moment(res.selectTime[1]).format('YYYY-MM-DD'),
                      START_DATE: moment(res.compareTime[0]).format('YYYY-MM-DD'),
                      END_DATE: moment(res.compareTime[1]).format('YYYY-MM-DD'),
                      SUPPLIER_IDS: SUPPLIER_IDS_Str,
                      SUPPLIER_NAME: addNewShopRef.current?.SERVERPARTNAME,
                      SERVERPART_IDS: SERVERPART_IDS_Str,
                      SERVERPART_NAME: addNewShopRef.current?.SUPPLIERNAME,
                      STAFF_ID: currentUser?.ID,
                      OPERATE_DATE: '',
                      BID_DESC: res.businessDesc,
                      // moment(new Date()).format('YYYY-MM-DD hh:mm:ss')
                      BID_STATE: 1000,
                      SELLER_ID: currentUser?.SellerId,
                      BIDGOODSList: list
                    }
                    handleSubmitData(req).then(rs => {
                      message.success(rs.Result_Desc);

                      if (rs.Result_Code === 100) {
                        setCurrentItem(undefined);
                        setShowAddDrawer(false);
                        // actionRef.current?.reload()
                        tableRef.current?.reload()
                      }
                    })
                  } else {
                    message.error('请选选择商品')
                  }
                }
              })
            }}>提交</Button>
          </div>
        }
        closable={false}
      >
        <AddNewShop ref={addNewShopRef} currentUser={currentUser} type={'add'} onRef={addNewShopRef} />
      </Drawer>
      {/* 上传资质时供应商有了的资质 */}
      <Modal
        title={supplierId ? '查看资质' : '上传资质'}
        zIndex={999}
        visible={qualification}
        onCancel={() => {
          setQualification(false)
          setSupplierId(null)
        }}
        footer={null}
        destroyOnClose={true}
        bodyStyle={{ padding: 0 }}
        width={1200}
        onOk={() => {

        }}>
        {/* 资质的东西 看一下资质列表 */}
        <ProTable
          rowKey="SUPPLIER_ID"
          headerTitle={"供应商列表"}
          actionRef={actionSupplierRef}
          search={false}
          options={false}
          columns={columns}
          request={async (params) => {
            const searchReq = {
              SearchParameter: {
                SUPPLIER_ID: supplierId || currentUser?.SupplierID,
                BUSINESSMAN_ID: currentUser?.OwnerUnitId,
              },
              PageIndex: 1,
              PageSize: 9999
            }
            const data = await handleQualificationList(searchReq)
            return data
          }}
          pagination={{ defaultPageSize: 10 }}
          toolbar={{
            actions: supplierId ? [] : [
              <Button
                key="new"
                icon={<PlusOutlined />}
                type="primary"
                onClick={() => {
                  setAddQualification(true);
                  qualificationFormRef.current?.setFieldsValue({
                    SUPPLIER_ID: Number(currentUser?.SupplierID)
                  })
                }}
              >
                供应商
              </Button>]
          }}
        />
      </Modal>
      {/* 提交比价的时候出现的选择供应商的悬浮框 */}
      <Modal
        title={'提交'}
        visible={submitModal}
        onCancel={() => {
          setSubmitModal(false)
          setSubmitSupplierID(null)
        }}
        destroyOnClose={true}
        bodyStyle={{ padding: 0 }}
        width={600}
        onOk={async () => {
          if (submitSupplierID) {
            const req = {
              BID_ID: currentItem.BID_ID,
              SUPPLIER_ID: submitSupplierID
            }
            const data = await handleCompareSubmit(req)
            message.success(data.Result_Desc);
            if (data.Result_Code === 100) {
              actionRef.current?.reload()
              tableRef.current?.reload()
              setSubmitModal(false)
              setSubmitSupplierID(null)
              setCurrentItem(undefined);
              setShowDetailDrawer(false);
              setCurrentItem(null)
            }
          } else {
            message.error('请选择供应商')
          }
        }}>
        <div style={{ width: '100%', height: '100%', boxSizing: 'border-box', padding: '20px' }}>
          <p>请选择供应商</p>
          <Row>
            <Col span={24}>
              <Select
                style={{ width: '100%' }}
                options={submitSelectList}
                onChange={(e: any) => {
                  setSubmitSupplierID(e)
                }}
              >
              </Select>
            </Col>
          </Row>
        </div>
      </Modal>
      {/* 上传资质里面的新增或者编辑 */}
      <ModalForm
        title={'更新资质'}
        layout={'horizontal'}
        width={1024}
        zIndex={1000}
        wrapperCol={{ span: 16 }}
        labelCol={{ span: 6 }}
        formRef={qualificationFormRef}
        visible={addQualification}
        initialValues={currentRow}
        autoFocusFirstInput
        modalProps={{
          onCancel: () => {
            setCurrentRow(null)
            setFileList([])
            setAddQualification(false)
            qualificationFormRef.current?.resetFields();
          },
          destroyOnClose: true
        }}
        // onVisibleChange={(value) => {
        //   setAddQualification(value);
        //     console.log('value',value)
        //     console.log('currentRow',currentRow)
        //   if (value) {
        //     qualificationFormRef.current?.setFieldsValue(
        //         currentRow || { QUALIFICATION_STATE: 1 },
        //     );
        //   } else {
        //     qualificationFormRef.current?.resetFields();
        //     setFileList([])
        //     setCurrentRow(undefined);
        //   }
        // }}
        onFinish={(values) => {
          let req = {
            ...values,
            QUALIFICATION_STATE: values.QUALIFICATION_STATE ? 1 : 0,
            SUPPLIER_CODE: currentUser?.SupplierID,
            BUSINESSMAN_ID: currentUser?.OwnerUnitId,
            SUPPLIER_ID: currentUser?.SupplierID,
            // SUPPLIER_NAME:'',
            STAFF_ID: currentUser?.ID,
            // STAFF_NAME:'',
            // OPERATE_DATE:''
          }
          if (currentRow) {
            // 编辑数据
            // req = { ...currentRow, ...req };
            req = Object.assign(currentRow, req);
            req = {
              ...req,
              QUALIFICATION_ENDDATE: values.QUALIFICATION_ENDDATE,
              ISSUING_DATE: values.ISSUING_DATE
            }
          }
          updateQualification(req).then((result: any) => {
            if (result.Result_Code === 100) {
              const waitUpload = fileList.filter(n => n.status !== 'done')
              if (waitUpload.length > 0) {
                customUploadRequest(waitUpload, result.Result_Data?.QUALIFICATION_ID).then((uploadSuccess: any) => {
                  if (uploadSuccess) {
                    if (actionSupplierRef.current) {
                      actionSupplierRef.current?.reload()
                    }
                    setAddQualification(false)
                    qualificationFormRef.current?.resetFields();
                    setFileList([])
                    message.success(result.Result_Desc)
                    return true
                  }
                  return false
                })
              } else {
                setAddQualification(false)
                actionSupplierRef.current?.reload()
                message.success(result.Result_Desc)
                setCurrentRow(null)
                setFileList([])
              }
            } else {
              message.error(result.Result_Desc)
            }
          })
        }}
      >
        {/* 都是资质页面的老东西 直接复制的 */}
        <div>
          <Row >
            <Col span={12}>
              <ProFormText
                name="QUALIFICATION_NAME"
                label="资质名称"
                placeholder="请输入资质名称"
                rules={[
                  {
                    required: true,
                    message: '请输入资质名称',
                  },
                ]}
              />
            </Col>
            <Col span={12}>
              <ProFormSelect
                style={{ display: 'none' }}
                name="SUPPLIER_ID"
                label="供应商名称"
                placeholder="请输入供应商名称"
                options={supplierList}
                readonly
              />
            </Col>
            <Col span={12}>
              <ProFormSelect
                name="QUALIFICATION_TYPE"
                label="资质类型"
                placeholder="请选择资质类型"
                rules={[{
                  required: true,
                  message: '请选择资质类型',
                }]}
                fieldProps={{
                  onChange: (value) => {
                  }
                }}
                request={async () => {
                  return await getFieldEnum({ FieldExplainField: 'QUALIFICATION_TYPE' })
                }}
              />
            </Col>
            <Col span={12}>
              <ProFormDatePicker
                name="ISSUING_DATE"
                label="签发日期"
                width="md"
                rules={[
                  {
                    required: true,
                    message: '请选择签发日期',
                  }
                ]}
                fieldProps={{
                  onChange: (value) => {
                  }
                }}
              />
            </Col>
            <Col span={12}>
              <ProFormDatePicker
                name="QUALIFICATION_ENDDATE"
                label={"有效期至"}
                width="md"
                // readonly={currentRow?.QUALIFICATION_TYPE === 1000}
                fieldProps={{
                  allowClear: true,
                  onChange: (value) => {
                  }
                }}
              />
            </Col>
            <Col span={12}>
              <Form.Item
                name="QUALIFICATION_STATE"
                label="是否有效"
              >
                <Switch
                  checkedChildren="是"
                  unCheckedChildren="否"
                  defaultChecked={currentRow?.QUALIFICATION_STATE === 1}
                  onChange={(value) => {
                  }}
                />
              </Form.Item>
            </Col>
            <Col span={24}>
              <ProFormTextArea
                name="QUALIFICATION_DESC"
                label={"备注说明"}
                labelCol={{ span: 3 }}
                wrapperCol={{ span: 20 }}
                placeholder={"备注说明"}
              />
            </Col>
            <Col span={24}>
              <ProFormUploadButton
                name="ImgList"
                title="选择资质文件"
                label="上传资质"
                wrapperCol={{ span: 20 }}
                labelCol={{ span: 3 }}
                rules={[
                  {
                    required: true,
                    message: '请上传资质文件',
                  }
                ]}
                fieldProps={{
                  name: 'files',
                  fileList,
                  // listType: 'picture-card',
                  className: 'upload-list-inline',
                  // accept: '.pdf',
                  multiple: true,
                  onPreview: async (file) => {
                  },
                  customRequest: ({ file, onSuccess }) => {
                    // 自定义上传，不实际发送请求
                    setTimeout(() => {
                      if (onSuccess) {
                        onSuccess({});
                      }
                    }, 0);
                  },
                  beforeUpload: (file, files) => {
                    setFileList([...fileList, ...files])
                    return false
                  },
                  onChange: async (info: any) => {
                    if (info.file.status === 'removed') {
                      // 如果在待上传列表中找到，则说明当前图片没有上传服务器，可直接删除
                      const index = fileList.findIndex(n => n.uid === info.file.uid);

                      if (!info.file?.deletepath) {
                        const newFileList = fileList.slice();
                        newFileList.splice(index, 1);
                        setFileList(newFileList)
                        return
                      }
                      confirm({
                        title: '确认删除该文件吗？',
                        icon: <ExclamationCircleOutlined />,
                        async onOk() {
                          const deleteLoading = message.loading('正在删除...')
                          // const success = await deletePicture(info.file?.deletepath, info.file?.uid, 'QUALIFICATION')
                          const success = await deleteAHYDPicture(info.file?.deletepath, info.file?.uid, 'QUALIFICATION')
                          deleteLoading()

                          if (success) {
                            const files = [...fileList]
                            files.splice(index, 1)
                            setFileList(files)
                          }
                          else {
                            message.error("删除失败")
                          }
                        },
                        onCancel() {
                        },
                      });
                    }
                  }
                }}
              />
            </Col>
          </Row>
        </div>
      </ModalForm>
      {/* 上传资质里面的详情抽屉 */}
      <Drawer
        width={600}

        visible={showCurrentDetail}
        onClose={() => {
          setCurrentRow(undefined);
          setFileList([]);
          setShowCurrentDetail(false);
        }}
        closable={false}
      >
        {currentRow?.QUALIFICATION_NAME && (<>
          <ProDescriptions<QualificationModel>
            column={1}
            title={currentRow?.QUALIFICATION_NAME}
            request={async () => ({
              data: currentRow || {},
            })}
            params={{
              id: currentRow?.QUALIFICATION_ID,
            }}
            columns={columns as ProDescriptionsItemProps<QualificationModel>[]}
          />

        </>)}
        <div >资质文件</div>
        {
          currentRow?.ImgList ?
            <Upload
              defaultFileList={transferImg(currentRow?.ImgList) as unknown as UploadFile[] || []}
              showUploadList={{
                showDownloadIcon: false,
                showRemoveIcon: false,
              }}
            /> : '-'
        }
      </Drawer>
    </div>
  )
}
export default connect(({ user }: ConnectState) => ({
  currentUser: user?.currentUser
}))(SupplierList)