import React from 'react';
import { connect } from 'dva';
import { Button, Row, Col, Form, Input,Select,Upload,Icon,Modal,Spin,message } from 'antd';
import {
  extend,
  extendRule,
  initFilter,
  initQueryFilter,
  getOnlyPropertyData,
  extendInclude, guid
} from "../../../utils/common";
import DropDownPagination from '../../common/DropDownPaginationEx';
import EditComponent from "../../../baseComponents/EditComponent";
import FormPage from '../../FormPage';
import config from "../../../config";

const FormItem = Form.Item;
const Option = Select.Option;
const { TextArea } = Input;
class ProductSopEditPage extends EditComponent {
  constructor(props) {
    super(props);
    this.state = {
      data: {
      
      },
    };
  };
  
  onBeforeEdit(params){
    super.onBeforeEdit(params);
    const {isNew,isCopy,copySrcData}=params?params:{};
    const updateLoadFileList=[];
    if(this.state.data&&this.state.data.Nav_Files){ 
      this.state.data.Nav_Files.forEach(t=>{ 
          updateLoadFileList.push({
            uid: t.ID,
            name: t.name?t.name:(t.Nav_ImgFile?t.Nav_ImgFile.FILE_NAME:'未知文件'),
            status: t.status?t.status:'done',
            response: {Data:t.IMG_FILE_ID,file:t},
          }); 
      });
    } 
    this.setState({
      updateLoadFileList,
    })
  }
  
  onBeforeSaveHandleRecord(params){
    super.onBeforeSaveHandleRecord(params);
    const {editCode,record,srcRecord}=params?params:{};
    if(editCode==='head'){
      if(!record.Nav_Files){
        record.Nav_Files=[];
      }
      if(srcRecord.Nav_Files){
        srcRecord.Nav_Files.forEach(t=>{
          record.Nav_Files.push(getOnlyPropertyData(t));
        })
      }
      if(this.state.updateLoadFileList) {
        this.state.updateLoadFileList.forEach(t => {
          if (t.response) {
            if (record.Nav_Files.filter(t1 => t1.IMG_FILE_ID === t.response.Data).length == 0) {
              record.Nav_Files.push({
                ID: guid(),
                IMG_FILE_ID: t.response.Data,
                ORG_ID: this.props.login.OrgId,
                RESOURCE_SOP_ID:  this.state.data?this.state.data.ID:null,
                name: t.name,
                status: t.status,
              });
            }
          }
        });
      }
      if(record.Nav_Files)
        record.Nav_Files.forEach(t1=>{
        if(!this.state.updateLoadFileList|| this.state.updateLoadFileList.filter(t=>t.response&&t1.IMG_FILE_ID===t.response.Data).length==0){
          t1.IS_DELETED=true;
        }
      });
    }
  }

  handleSopClick= async function (recordId,ids){
    await this.props.dispatch({
      type: 'custom/save',
      payload: {
        ['sopViewClick'+recordId]:true,
      },
    });
  };

  handleSopShowModal = (file) => {
    this.setState({
      sopData:{ids:file.response.Data,id:file.response.Data},
      sopVisible: true
    },()=>{
      this.handleSopClick(file.response.Data,file.response.Data);
    });
  };
  handleSopCloseModal = () => {
    this.setState({
      sopVisible: false
    });
  };
  
  onRenderHeadControl(params){
    const {colConfig,record}=params;
    if(colConfig.field==='Nav_Files.Nav_ImgFile.FILE_NAME'){
      const that=this;
      const uploadSopProps = {
        name: 'file',
        action: config.serviceHost('api/PF/File/UploadFileToImage'),
        data:{OrgId:this.props.login.OrgId},
        fileList:this.state.updateLoadFileList,
        onPreview:function(file){
          that.handleSopShowModal(file);
        },
        onChange(info) {
          that.setState({
            updateLoadFileList:info.fileList,
          });
      
          if (info.file.status !== 'uploading') {
            // that.setState({
            //   updateLoadFileList:info.fileList,
            // });
        
          }
          if (info.file.status === 'done') {
            message.success(`${info.file.name} file uploaded successfully`);
          } else if (info.file.status === 'error') {
            message.error(`${info.file.name} file upload failed.`);
          }
        },
      };
      return <>
          <Modal visible={this.state.sopVisible} maskClosable={false} onCancel={this.handleSopCloseModal} footer={false} width={"86%"}>
              <FormPage formCode={'WO012'} data={this.state.sopData}/>
          </Modal>
       <Upload {...uploadSopProps}>
        <Button>
          <Icon type="upload" /> 上传图片
        </Button>
      </Upload>
      </>
    }
    return super.onRenderHeadControl(params);
  }
  

}


export default connect(({ login, loading,custom,app }) => ({ login, loading,custom,app}))(Form.create()(ProductSopEditPage));