import React,{useEffect,useState,useMemo,useRef} from 'react';
import { Form, Button, Input, Row,Table, Col, Popconfirm, InputNumber,Image,Modal,Typography, message} from 'antd';
import { DeleteOutlined,FileWordOutlined,FilePdfOutlined,FileZipOutlined,FileExcelOutlined } from '@ant-design/icons';
import { formItemLayout, btnItemLayout } from '../../../../components/crud/FormLayoutProps';
import { httpget2, httppost2,xyt_httpget2 } from '../../../../utils/request';
import apiurl from '../../../../service/apiurl';
import NormalSelect from '../../../../components/Form/NormalSelect';
import ZbForm from "./Zbform";
import moment from 'moment';
import {handleData} from "../../../../utils/tools"


const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {

 console.log("record",record);
 
  const columns = [
    {
      title: "考核类目",
      dataIndex: "name",
      key:"name",
      width: 150,
      align: "center",
      onCell: (row) => ({ rowSpan: row.rowSpan || 0 })
    },
    {
      title: '指标名称',
      key: 'indicatorName',
      dataIndex: 'indicatorName',
      width: 250,
      align: "center",
    },
    {
      title: '标准分数',
      key: 'standardScore',
      dataIndex: 'standardScore',
      width: 100,
      align: "center",
    },
    {
      title: '操作', key: 'operation1', width: 240, fixed: 'right', align: 'center',
      render: (_, record) => {
        return (
            <div>
              <Popconfirm
                title="确定要删除?"
                onConfirm={() => handleDelete(record.id)}
              >
              <a>删除</a>
            </Popconfirm>
            </div> 
        )
      },
    },
  ]

  const templateFreqOptions = [
    {
      label: "年度",
      value:1
    },
    {
      label: "季度",
      value:2
    },
    {
      label: "月度",
      value:3
    },
  ]
  const [form] = Form.useForm();
  const [standardScore1, setStandardScore] = useState('')
  const [zbOpen, setZbOpen] = useState(false)
  const [tableData, setTableData] = useState([])
  const [selectKeys, setSelectKeys] = useState([])
  const tableDataRef = useRef(null)
  tableDataRef.current = tableData;
  const newColumns = useMemo(() => {
    let data = columns;
    if (mode == "view") {
      data.pop();
      return data
    } else {
      return data;
    }
  }, [mode])
  const handleAddRow = () => {
    setZbOpen(true)
   
  };
  

  const handleDelete = (key) => {
    const newData = tableDataRef.current.filter((item) => item.id !== key);
    newData.forEach(item => {
      if (item.rowSpan) delete item.rowSpan;
    })
    const result = handleData(newData, "name")
    setTableData(result)
    setSelectKeys(newData.map(item => item.id))
    let total = newData.reduce((total,cur) => total + Number(cur.standardScore),0)
    setStandardScore(total)
  }; 


  const onfinish = (values) => {
    // 校验等级划分
    if (values.excellentScore == undefined) {
      message.error("优秀分数不能为空")
      return
    }
    if (values.goodScore == undefined) {
      message.error("良好分数不能为空")
      return
    }
    if (values.passScore == undefined) {
      message.error("合格分数不能为空")
      return
    }
    const userId =  localStorage.getItem('userId')
    const userName =  localStorage.getItem('userName')
    values.indicatorIds = selectKeys;
    values.standardScore = standardScore1;
    values.createUserId = userId
    values.createUserName = userName
    if (mode === 'edit') {
      onEdit(apiurl.rcgl.jdkh.khmbgl.edit,{...record,...values})
    }
    if (mode === 'save') {
      onSave(apiurl.rcgl.jdkh.khmbgl.save,values)
    }
  }


  const onSubmit = (data) => {
    setZbOpen(false)
    // 重新对数据做处理
    data.data.forEach(item => {
      if (item.rowSpan) delete item.rowSpan;
    })
    const result = handleData(data.data, "name")
    let total = data.data.reduce((total,cur) => total + Number(cur.standardScore),0)
    setStandardScore(total)
    setTableData(result)
    setSelectKeys(data.keys)
    // 自动填充等级划分
    form.setFieldValue("excellentScore",(total * 0.92).toFixed(2))
    form.setFieldValue("goodScore",(total * 0.85).toFixed(2))
    form.setFieldValue("passScore",(total * 0.70).toFixed(2))
 }
 
  const getZbTableData = async(id) => {
    try {
      const res = await httpget2(apiurl.rcgl.jdkh.khmbgl.info + `/${id}`)
      if (res.code == 200) {
        let total = res.data.reduce((total,cur) => total + Number(cur.standardScore),0)
        setStandardScore(total)
        setSelectKeys(res.data.map(item => item.id))
        res.data.forEach(item => {
          if (item.rowSpan) delete item.rowSpan;
        })
        const result = handleData(res.data, "name")
        setTableData(result)
      }
    } catch (error) {
      console.log(error);
      
    }
  }
  useEffect(() => {
    if (mode !== "save") { 
      getZbTableData(record.id)
    }

 }, [record,mode])

 
 
  return (
    <>
      <Form
        form={form}
        {...formItemLayout}
        onFinish={onfinish}
        initialValues={record}
      >
      <Row>
          <Col span={12}>
              <Form.Item
                label="模板名称"
                name="templateName"
                rules={[
                  {
                    required: true,
                  },
                ]}
              >
              <Input disabled={mode==='view'} style={{width:'100%'}} allowClear />
              </Form.Item>
          </Col>
          <Col span={12}>
              <Form.Item
                label="考核频次"
                name="templateFreq"
              >
              <NormalSelect disabled={mode==='view'} style={{ width: '100%' }} allowClear options={templateFreqOptions} />
              </Form.Item>
          </Col>
      </Row>
 
      <Row>
          <Col span={12}>
              <Form.Item
                label="考核内容"
              >
              <Button
                type="primary"
                disabled={mode == "view"}
                onClick={handleAddRow}
                style={{ width: '30%' }}>添加指标</Button>
              </Form.Item>
          </Col> 
        </Row>
      <div style={{display:"flex",justifyContent:"space-between"}}>
        <span style={{ marginLeft: "auto" }}>标准分数：{ standardScore1}</span>
      </div>
      <Table
          rowKey="id"
          columns={newColumns}
          dataSource={tableData}
          scroll={{ y: "calc( 100vh - 400px )"}}
          pagination={false}
        />
        <Row style={{marginTop:20}}>
          <Col span={8}>
            <Form.Item label="等级划分" >
              <Form.Item label={<span style={{fontWeight:"bold"}}>优秀</span>}  required colon={false}>
              <Form.Item name="excellentScore" noStyle>
                  <InputNumber
                    min={0}
                    max={standardScore1}
                    style={{ width: "45%" }}
                    disabled={mode == "view"}
                  />
              </Form.Item>
              <span className="ant-form-text"> 分及以上</span>
              </Form.Item>
            </Form.Item>
          </Col>
          <Col span={8}>
            <Form.Item >
            <Form.Item label={<span style={{fontWeight:"bold"}}>良好</span>} required colon={false}>
              <Form.Item name="goodScore" noStyle >
                  <InputNumber
                    min={0}
                    max={standardScore1}
                    style={{ width: "45%" }}
                    disabled={mode == "view"}
                  />
              </Form.Item>
              <span className="ant-form-text"> 分及以上</span>
              </Form.Item>
            </Form.Item>
          </Col>
          <Col span={8}>
            <Form.Item >
            <Form.Item label={<span style={{fontWeight:"bold"}}>合格</span>} required colon={false}>
              <Form.Item name="passScore" noStyle >
                  <InputNumber
                    min={0}
                    max={standardScore1}
                    style={{ width: "45%" }}
                    disabled={mode == "view"}
                  />
              </Form.Item>
              <span className="ant-form-text"> 分及以上</span>
              </Form.Item>
            </Form.Item>
          </Col>
        </Row>
        {
        mode==='view'?null:(
         
          <Form.Item wrapperCol={{span:2,offset:22}}>
            <Button type="primary" htmlType="submit" >
                  {mode === 'save' ? '保存' :
                    '修改'}
            </Button>
          </Form.Item>
       
        )
      }
      </Form>

      <Modal
        open={zbOpen}
        width={1000}
        destroyOnClose
        footer={null}
        onCancel={() => {
          setZbOpen(false)
        }}
        title="选择指标"
      >
        <ZbForm onSubmit={onSubmit} selectKeys={selectKeys} />
      </Modal>
    </>
  );
}

export default ModalForm;