import React, { useState, useEffect,useRef } from 'react';
import { Modal, Row, Col, Checkbox, Select,message,Switch} from 'antd';
import ProTable from '@ant-design/pro-table';
import {
  GetDeviceList,
  GetGoodsPage,
  GetGoodsTypeTree
} from '../services';
const PushFrom = (props) => {
  const [deviceData, setdeviceData] = useState([]);
  const [selectedRowsState, setSelectedRows] = useState([]);
  const [dataSource,setdataSource]= useState([]);
  const [treeData, setTreeData] = useState();
  const [DeviceIds, setDeviceIds] = useState();
  const [DeviceInfo, setDeviceInfo] = useState([]);
  const [isGlogy, setisGlogy] = useState(false);
  const actionRef = useRef();
  useEffect(() => {
    console.log(props.values)
    GetDeviceList().then((r)=>{
      setDeviceInfo(r.data)
        var data=r.data.map(x=>{
            return {value:x.id,label:x.name}
        })
        setdeviceData(data)
    })
    GetGoodsTypeTree().then((r) => {
        setTreeData(r.data);
      });
      var params={current:1,pageSize:10}
      GetGoodsData(params)
  },[props.values])
  const GetGoodsData=(params)=>{
    GetGoodsPage(params).then((r) => {
        setdataSource(r.data.data);
        //console.log(goodsData)
        //total = r.data.total;
      });
  }
 const handleChange=(value)=>{
    setDeviceIds(value)
    var params={current:1,pageSize:10,deviceId:value}
    GetGoodsData(params)
 }
 const onChange=(checked)=>{
  if(!DeviceIds){
    message.error('请先选择设备');
  }else{
    setisGlogy(checked)
 
  }
  
 }
 const columns=[
    {
        title: '编码',
        dataIndex: 'code',
        valueType: 'textarea',
        hideInTable: true,
        hideInSearch: true,
      },
      {
        title: '名称',
        dataIndex: 'name',
        valueType: 'textarea',
      },
      {
        title: '商品类型',
        dataIndex: 'goodsTypeName',
        valueType: 'treeSelect',
        fieldProps: {
          showSearch:true,
          allowClear:true,
          options: treeData
        },
      },
 ]
  return (
    <Modal
      title={'下发数据'}
      width={1040}
      visible={props.createModalVisible}
      bodyStyle={{ padding: '32px 40px 1px 48px' }}
      okText="确定"
      cancelText="取消"
      onOk={() => {
        if(!DeviceIds){
          message.error('请选择设备');
        }else{
          var de=DeviceInfo.find(x=>x.id==DeviceIds);
          var data={goodsinfo:[]};
          // if(isGlogy){
          //   data.goodstechnology=[]
          // }
          selectedRowsState.map(x=>{
            var pa={id:x.id,code:x.code,goodsTypeId:x.goodsTypeId,goodsTypeName:x.goodsTypeName,goodsUintId:x.goodsUintId,imgUrl:x.imgUrl,isAttrubute:x.isAttrubute,name:x.name,price:x.price,design:x.design,remark:x.remark}
            data.goodsinfo.push(pa);
            // if(isGlogy){
            //   //data.goodstechnology=[]
            //   if(x.goodstechnology.length>0){
            //     data.goodstechnology.push(x.goodstechnology)
            //   }
            // }
          })
          var parm={deviceId:de.id,deviceName:de.name,deviceAutoKey:de.autoKey,type:1,data:data}
          props.HandleOk(parm)
          console.log(de)
        }
      }}
      onCancel={() => {
        props.onCancel();
      }}
      destroyOnClose
    >
      <Row gutter={26} style={{marginBottom:20}}>
    <Col lg={24} md={24} sm={24}>
        选择设备：
        <Select
        
        allowClear
        style={{width: '60%'}}
        placeholder="请选择要下发设备"
        onChange={handleChange}
        options={deviceData}
        />
    </Col>
   
</Row>
{/* <Row style={{marginBottom:20}}>
  <Col lg={24} md={24} sm={24}>
    是否包含工艺：
    <Switch checkedChildren="是" unCheckedChildren="否" checked={isGlogy} value={isGlogy} onChange={onChange} />
  </Col>  
</Row> */}
<Row gutter={26}>
    <Col span={24}>
        选择数据：
        <ProTable
          headerTitle=""
          actionRef={actionRef}
          rowKey="id"
          pagination={{ defaultPageSize: 10 }}
          search={{
            labelWidth: 120,
          }}
          dataSource={dataSource}
          columns={columns}
          rowSelection={{
            onChange: (_, selectedRows) => {
              setSelectedRows(selectedRows);
            },
          }}
        >
          </ProTable>
    </Col>
</Row>
    </Modal>
  );
};

export default PushFrom;
