import { connect } from 'react-redux';
import React, { useEffect, useState } from 'react';
import { Button, Modal, Form, Input, Divider, Spin, Select, DatePicker, Tooltip, Table } from 'antd'
import { ExclamationCircleOutlined } from '@ant-design/icons';
import { roadSpotList, roadSpotDetail, roadSpotPrepare, confirmRoadSpot, exportSpotRode } from '../actions/spotCheck';
import moment from 'moment'
import Adjustment from '../components/adjustment'
import '../components/maintenanceTable.less'



const MaintenanceSpotCheck = (props) => {
   const { dispatch, user, loading, reportDetail, reportDetailLoading, detailLoading } = props
   const [data, setData] = useState()//外层表格的数据
   const [vis, setVis] = useState(false)//模态框的显示与隐藏变量
   const [count, setCount] = useState(0)
   const [page, setPage] = useState(1)
   const [depName, setDepName] = useState('')
   const [total, setTotal] = useState(0)
   const [previewId, setPreviewId] = useState(0)
   const [reportData, setReportData] = useState([])
   const [detailList, setDetailList] = useState([])
   const [detailVisible, setDetailVisible] = useState(false)
   const [dateRange, setDateRange] = useState([]);
   const { RangePicker } = DatePicker
   const [expandedRowKeys, setExpandedRowKeys] = useState([]);
   const [isAdjustment, setIsAdjustment] = useState(false);
   const [editData, setEditData] = useState({});




   //里层列名
   const columns = [
      {
         title: '抽查日期',
         key: 'date',
         dataIndex: 'date',
         render: (_, record) => record?.date && moment(record?.date).format('YYYY-MM-DD') || '--'
      },
      {
         title: '抽查县道比例（%）',
         key: 'countyPercentage',
         dataIndex: 'countyPercentage',
      },
      {
         title: '抽查县道',
         key: 'spotCountyRoadCount',
         dataIndex: 'spotCountyRoadCount',
      },
      {
         title: '抽查乡道',
         key: 'spotTownRoadCount',
         dataIndex: 'spotTownRoadCount',
      },
      {
         title: '抽查村道',
         key: 'spotVillageRoadCount',
         dataIndex: 'spotVillageRoadCount',
      },
      {
         title: '操作',
         key: 'operation',
         dataIndex: 'operation',
         render: (_, record) =>
            <a href={`/_api/road/spot/export?token=${user?.token}&previewId=${record.id}`}>导出</a>
      },

   ]
   const queryData = (data = {}) => {
      dispatch(roadSpotList(data)).then(res => {
         if (res.success) {
            setReportData(res?.payload.data)
         }
      })
   }

   const detailData = (data = {}) => {
      dispatch(roadSpotDetail(data)).then(res => {
         if (res.success) {
            setDetailList(res?.payload.data)
         }
      })
   }



   useEffect(() => {
      queryData()
   }, [])


   const [form] = Form.useForm()


   const extractHandler = () => {
      form.validateFields(['percentValue']).then(async (values) => {
         if (Number(values.percentValue) > 0) {
            const res = await dispatch(roadSpotPrepare({ countyPercentage: values.percentValue }))
            setPreviewId(res?.payload.data?.previewId)
            form.setFieldsValue({
               'spotCountyRoadCount': res?.payload.data?.spotCountyRoadCount,
               'spotTownRoadCount': res?.payload.data?.spotTownRoadCount,
               'spotVillageRoadCount': res?.payload.data?.spotVillageRoadCount,
            })
         }
      })
   }
   const cancelHandler = () => {
      setVis(false)
      form.resetFields()
   }



   return (
      <div>

         <div style={{ display: "flex", alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 }}>
            <Button onClick={() => {
               setVis(true)
            }} type='primary' style={{ marginLeft: 10 }}> 新增 </Button>
            <div>
               <RangePicker value={dateRange[0] ? [moment(dateRange[0]), moment(dateRange[1])] : []} onChange={(date, dateString) => {
                  setDateRange(dateString)
               }} style={{ marginRight: 20 }} />
               <Button style={{ marginRight: 20 }} onClick={() => {
                  setPage(1)
                  setExpandedRowKeys([])
                  queryData({ startTime: dateRange[0], endTime: dateRange[1] })
               }} > 查询 </Button>
               <Button style={{ marginRight: 20 }} onClick={() => {
                  setDateRange([])
               }} > 重置 </Button>
            </div>
         </div>


         <Table
            columns={columns}
            dataSource={reportData}
            loading={loading}
            expandable={{
               expandedRowKeys: expandedRowKeys, // 控制哪些行展开，这里需要通过 state 管理
               // defaultExpandedRowKeys: ['0'],
               onExpand: (expanded, record) => {
                  if (expanded) {
                     setExpandedRowKeys([record?.id])
                     detailData({ previewId: record?.id })
                  } else {
                     setExpandedRowKeys([])

                  }
               },
               expandedRowRender: (record) => (
                  < Table
                     pagination={{
                        pageSize: 10,
                        defaultPageSize: 10,
                        showSizeChanger: false,
                     }}
                     loading={detailLoading}
                     style={{ margin: 0 }}
                     dataSource={detailList}
                     columns={
                        [
                           {
                              title: '道路类型', key: 'level', dataIndex: 'level', render: (_, r) => r?.road?.level ? (r?.road?.level + '道') : '--'
                           },
                           { title: '道路名称', key: 'routeName', dataIndex: 'routeName', render: (_, r) => r.road?.routeName || '--' },
                           { title: '道路代码', key: 'routeCode', dataIndex: 'routeCode', render: (_, r) => r.road?.routeCode || '--' },
                           { title: '路段序号', key: 'sectionNo', dataIndex: 'sectionNo', render: (_, r) => r.road?.sectionNo || '--' },
                           { title: '起点地名', key: 'startingPlaceName', dataIndex: 'startingPlaceName', render: (_, r) => r.road?.startingPlaceName || '--' },
                           { title: '止点地名', key: 'stopPlaceName', dataIndex: 'stopPlaceName', render: (_, r) => r.road?.stopPlaceName || '--' },
                           { title: '里程', key: 'chainageMileage', dataIndex: 'chainageMileage', render: (_, r) => r.road?.chainageMileage || '--' },
                           { title: '养护次数（次）', key: 'maintenanceCount', dataIndex: 'maintenanceCount' },
                           {
                              title: '操作',
                              key: 'action',
                              dataIndex: 'action',
                              render: (_, r) => <Button type="link" onClick={() => {
                                 setEditData({
                                    ...r, alterId: r?.road?.level == '县' ? record?.countyRoadId
                                       : r?.road?.level == '乡' ? record?.townshipRoadId
                                          : r?.road?.level == '村' ? record?.villageId : [],
                                    previewId: record?.id
                                 })
                                 setIsAdjustment(true)
                              }}> 调整 </Button >
                           },
                        ]}

                  />
               ),
            }}
            pagination={{
               total: reportData?.length || 0,
               pageSize: 10,
               current: page || 1,
               defaultPageSize: 10,
               showSizeChanger: false,
               onChange: (page, pageSize) => {
                  setPage(page)
               }
            }}
            rowKey={(record) => { return record.id }}
         // toolBarRender={false}
         // search={false}
         />


         {
            vis && <Modal visible={vis} onCancel={cancelHandler} title='养护抽查' onOk={() => {
               dispatch(confirmRoadSpot({ previewId })).then(res => {
                  if (res.success) {
                     setPage(1)
                     setExpandedRowKeys([])
                     queryData({ startTime: dateRange[0], endTime: dateRange[1] })
                     form.resetFields()
                     setVis(false)
                  }
               });


            }}>
               <Form form={form}>

                  <Form.Item
                     label={<div>抽取县道比例(%)<Tooltip title='默认抽查乡道比例为25%、抽查村道比例为10%'>
                        <ExclamationCircleOutlined style={{ marginLeft: 6 }} />
                     </Tooltip></div>}
                     name="percentValue"
                     rules={[
                        { required: true, message: '请选择抽取比例' },
                        // {
                        //    pattern: /^(100|\d{1,2})(\.\d{1,2})?$/,
                        //    message: '请输入有效的比例',
                        // },
                     ]}
                  >
                     <Select style={{}} placeholder="请选择抽取比例" options={[{ value: 50, label: '50%', }, { value: 75, label: '75%', }]} />
                  </Form.Item>

                  <Form.Item className="ant-row" style={{
                     textAlign: 'center',
                  }}>
                     <Button style={{}} type='primary' onClick={extractHandler}>开始抽取</Button>
                  </Form.Item>
                  <Form.Item label='抽查县道（条）' name='spotCountyRoadCount'>
                     <Input disabled />
                  </Form.Item>
                  <Form.Item label='抽查乡道（条）' name='spotTownRoadCount'>
                     <Input disabled />
                  </Form.Item>
                  <Form.Item label='抽查村道（条）' name='spotVillageRoadCount'>
                     <Input disabled />
                  </Form.Item>
               </Form>
            </Modal>
         }

         {
            isAdjustment &&
            <Adjustment
               editData={editData}
               onCancel={() => {
                  setEditData({})
                  setIsAdjustment(false)
               }}
               onOk={() => {
                  detailData({ previewId: expandedRowKeys[0] })
               }}
            />
         }



      </div >
   )
}
function mapStateToProps (state) {
   const { auth, roadSpotList, reportDetail, roadSpotDetail } = state
   //('state1', state)
   return {
      user: auth.user,
      loading: roadSpotList?.isRequesting,
      detailLoading: roadSpotDetail?.isRequesting,
      reportDetailLoading: reportDetail.isRequesting,
      reportDetail: reportDetail.data,

   }
}
export default connect(mapStateToProps)(MaintenanceSpotCheck);