import React from 'react';
import { Form, Select, message, Button, Input, Radio } from 'antd';
import './index.less';
import NumberSelection from './numberSelection.js';

import Modal from '../../themeComponents/Modal';
import { Service, BaseStore, LMConfig } from '@zenview/micro-basic-library';
import { cache } from '@zenview/micro-utils';

const RadioGroup = Radio.Group;
const { TextArea } = Input;
const FormItem = Form.Item;
const Option = Select.Option;

export function fromLocaltype() {
  const fromLocaltype = [
    { label: '开车打电话历史告警', value: '101531', exportType: 'drivephone' },
    { label: '未系安全带历史告警', value: '101532', exportType: 'nosafetybelt' },
    { label: '套牌车分析历史告警', value: '101533', exportType: 'platevehicleanalyse' },
    { label: '机动车以图搜图', value: '1', exportType: 'vehicle' },
    { label: '非机动车以图搜图', value: '2', exportType: 'nonvehicle' },
    { label: '人脸以图搜图', value: '3', exportType: LMConfig.BSConfig.goFeatureSearch ? 'facesByIndexServer' : 'faceByAidAndVio' },
    { label: '人体以图搜图', value: '4', exportType: 'body' },
    { label: '遮阳板监测', value: '5', exportType: 'dunvisor' },
    { label: '未系全带', value: '6', exportType: 'nosafetybelt' },
    { label: '开车打电话', value: '7', exportType: 'carphone' },
    { label: '伴随人员分析', value: '8', exportType: 'followPerson' },
    { label: '人脸碰撞', value: '9', exportType: 'personCollision' },
    { label: '车辆碰撞', value: '10', exportType: 'vehicleCollision' },
  ];
  return fromLocaltype;
}

class DownloadTools extends React.Component {
  constructor(props) {
    super(props);
    this.fromLocaltype = props.fromLocaltype || fromLocaltype();
    this.state = {
      visible: false, //控制导出的显示隐藏
    };
    this.exportType = 1;
  }
  formRef = React.createRef();
  //打开导出面板
  onClick = () => {
    this.setState({ visible: true });
  };
  ChangeExportType = (e) => {
    this.exportType = e;
  };
  //提交导出结果
  onSubmit = () => {
    let { option, total = 0 } = this.props;
    if (this.exportType !== 2 && total && total > 1000) {
      message.warn('最多导出1000条');
      return false;
    }
    option.offset = 0;
    if (this.exportType === 1) {
      option.limit = 1000;
    }
    this.formRef.current.validateFields().then((values) => {
      if (values.listNumber > 1000) {
        message.warn('最多导出1000条');
        return false;
      }
      let options = {
        bizJson: {
          exportType: this.fromLocaltype.filter((item) => item.label === values.fromLocal)[0].exportType,
          queryCondition: option,
          needPic: values.isHasPic,
          limit: values.listNumber || total,
          operationCenterId: BaseStore.app.userInfo.operationCenterId,
          organizationId: BaseStore.app.userInfo.organizationId,
        },
        flowKey: 'imageExport',
        remark: values.reason || '',
      };
      Service.$http({
        headers: { Authorization: cache.getCache('token', 'session') },
        method: 'post',
        url: `/api/gam/workflow/v1/createFlow`,
        data: options,
      }).then((res) => {
        res.code === 0 ? message.success('提交成功') : message.error(res.message);
        this.onClose();
      });
    });
  };
  //取消导出申请
  onClose = () => {
    this.setState({ visible: !this.state.visible });
  };
  render() {
    const { visible } = this.state;
    const BSConfig = LMConfig.BSConfig || {};
    let { fromLocal, total = 1000 } = this.props;
    const formItemLayout = {
      labelCol: { span: 5 },
      wrapperCol: { span: 18 },
    };
    return BSConfig.microService?.approval  ? (
      <span className="download-tools-box">
        <Button type="primary" onClick={this.onClick}>
          导出
        </Button>
        <Modal visible={visible} title={'导出申请'} onOk={this.onSubmit} onCancel={() => this.onClose()} className="preset-name" okText={'提交'}>
          <Form ref={this.formRef}>
            <FormItem
              label="导出数量"
              name="listNumber"
              // initialValue={1000}
              rules={[
                {
                  required: true,
                  message: '导出数量必填并且不能大于1000',
                },
                {
                  validator: (_, value) => (value > 1000 ? Promise.reject('导出数量不能大于1000') : Promise.resolve()),
                },
              ]}
              {...formItemLayout}
            >
              <NumberSelection ChangeExportType={this.ChangeExportType} maxValue={total} />
            </FormItem>
            <FormItem label="导出图片" name="isHasPic" initialValue={true} rules={[{ required: true, message: '请选择是否导出图片' }]} {...formItemLayout}>
              <RadioGroup>
                <Radio value={true}>是</Radio>
                <Radio value={false} style={{ marginLeft: '16px' }}>
                  否
                </Radio>
              </RadioGroup>
            </FormItem>
            <FormItem label="导出类型" name="fileType" initialValue="Excel文件" rules={[{ required: true, message: '请选择导出类型' }]} {...formItemLayout}>
              <Select style={{ width: '100%' }} disabled={true} placeholder="请选择类型" showSearch={true} allowClear className="nation-select" filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}>
                <Option value="Excel文件">Excel文件</Option>
                <Option value="PDF文件">PDF文件</Option>
              </Select>
            </FormItem>
            <FormItem label="所在模块" name="fromLocal" required initialValue={this.fromLocaltype.filter((item) => item.value === fromLocal)[0].label} {...formItemLayout}>
              <Input disabled={true} />
            </FormItem>
            <FormItem
              label="导出原因"
              name="reason"
              rules={[
                { required: false, message: '请输入导出原因' },
                {
                  max: 50,
                  message: '最大长度为50',
                },
              ]}
              {...formItemLayout}
            >
              <TextArea autoSize={{ minRows: 6, maxRows: 6 }} />
            </FormItem>
          </Form>
        </Modal>
      </span>
    ) : null;
  }
}

export default DownloadTools;
