import PageContent from '@/components/PageContent';
import PreviewFile from '@/components/PreviewFile';
import { subtypeDictionaries } from '@/utils/constants';
import { GetTokenFromUrl, connectUserModel, getToken } from '@/utils/utils';
import { connect } from '@umijs/max';
import { Button, Card, Modal, Row, Table, Tabs, Upload, message } from 'antd';
import dayjs from 'dayjs';
import React, { Fragment } from 'react';
import cardStyle from './Card.less';
import styles from './index.less';

const { TabPane } = Tabs;
const { confirm } = Modal;

const opsPermissionTabsMap = new Map([
  ['合同资料', 'func-01-ops-DeviceList-00-00'],
  ['监造资料', 'func-01-ops-DeviceList-01-00'],
  ['出厂检验', 'func-01-ops-DeviceList-01-01'],
  ['包装', 'func-01-ops-DeviceList-02-00'],
  ['装箱单', 'func-01-ops-DeviceList-02-01'],
  ['质量证书', 'func-01-ops-DeviceList-02-02'],
  ['原产地证明', 'func-01-ops-DeviceList-02-03'],
  ['安装手册', 'func-01-ops-DeviceList-02-04'],
  ['到货签收单', 'func-01-ops-DeviceList-03-00'],
  ['开箱报告', 'func-01-ops-DeviceList-03-01'],
  ['随机资料', 'func-01-ops-DeviceList-03-02'],
  ['安装指导资料', 'func-01-ops-DeviceList-04-00'],
  ['安装过程资料', 'func-01-ops-DeviceList-04-01'],
  ['调试指导资料', 'func-01-ops-DeviceList-05-00'],
  ['单体调试记录表', 'func-01-ops-DeviceList-05-01'],
  ['其它资料', 'func-01-ops-DeviceList-05-02'],
]);

const buildPermissionTabsMap = new Map([
  ['合同资料', 'func-01-build-5-dev-00-00'],
  ['监造资料', 'func-01-build-5-dev-01-00'],
  ['出厂检验', 'func-01-build-5-dev-01-01'],
  ['包装', 'func-01-build-5-dev-02-00'],
  ['装箱单', 'func-01-build-5-dev-02-01'],
  ['质量证书', 'func-01-build-5-dev-02-02'],
  ['原产地证明', 'func-01-build-5-dev-02-03'],
  ['安装手册', 'func-01-build-5-dev-02-04'],
  ['到货签收单', 'func-01-build-5-dev-03-00'],
  ['开箱报告', 'func-01-build-5-dev-03-01'],
  ['随机资料', 'func-01-build-5-dev-03-02'],
  ['安装指导资料', 'func-01-build-5-dev-04-00'],
  ['安装过程资料', 'func-01-build-5-dev-04-01'],
  ['调试指导资料', 'func-01-build-5-dev-05-00'],
  ['单体调试记录表', 'func-01-build-5-dev-05-01'],
  ['其它资料', 'func-01-build-5-dev-05-02'],
]);

// @connect(({ equipmentProcurementList, loading, user }) => ({
//   list: equipmentProcurementList.list,
//   folders: equipmentProcurementList.folders,
//   loading: loading.models.equipmentProcurementList,
//   permission: user.currentUser.Permission,
// }))
class Index extends React.Component {
  constructor(props) {
    super(props);
    const { fileType, list } = props;
    this.state = {
      typeNum:
        subtypeDictionaries[fileType] && subtypeDictionaries[fileType][0].type,
      subtypeMap: [],
      list,
    };
  }

  componentDidMount() {
    console.log(this.props);

    const { dispatch } = this.props;
    const { billId, projectId, deviceCode, fileType, ops } = this.props;
    if (ops == '1') {
      dispatch({
        type: 'equipmentProcurementList/getOpsFileType',
        projectId,
        fileType,
        callback: (res) => {
          let arr = [];
          res &&
            res.forEach((folder) => {
              subtypeDictionaries[fileType].forEach((element) => {
                if (
                  folder.Type != 0 &&
                  folder.Type == fileType &&
                  element.type == folder.SubType
                )
                  arr.push(element);
              });
            });
          // console.log(arr);
          this.setState({
            subtypeMap: arr,
            typeNum: arr[0].type || this.state.typeNum,
          });
        },
      });
    }

    dispatch({
      type: 'equipmentProcurementList/getFileList',
      payload: {
        billId: 0,
        deviceCode,
        fileType,
        projectId,
        ops: ops == '1' ? 1 : undefined,
      },
    });
  }

  componentWillReceiveProps(nextProps, prevState) {
    const { list } = nextProps;
    this.setState({
      list,
    });
  }

  OnDeleteFile = (fileId) => {
    const { dispatch } = this.props;
    const {
      match: {
        params: { billId, deviceCode, fileType, projectId, ops },
      },
    } = this.props;
    confirm({
      title: '提醒',
      content: '确认删除该文件，删除后无法复原',
      okText: '确认',
      cancelText: '取消',
      onOk() {
        dispatch({
          type: `equipmentProcurementList/removeFile`,
          payload: {
            FileId: fileId,
            billId: 0,
            deviceCode,
            fileType,
            projectId,
            ops: ops == '1' ? 1 : undefined,
          },
        });
      },
    });
  };

  OnDeletePurchaseBillFile = (fileId) => {
    const {
      dispatch,
      match: {
        params: { billId },
      },
    } = this.props;
    dispatch({
      type: 'purchaseBill/removeById',
      payload: {
        // ID: billId,
        ID: 0,
        FileId: fileId,
      },
    });
  };

  columns = [
    {
      title: '文件名称',
      dataIndex: 'Name',
      render: (text, item) => <PreviewFile name={item.Name} src={item.Url} />,
    },
    {
      title: '上传人',
      dataIndex: 'Creator',
      render: (text) => {
        return text && text.CName;
      },
    },
    {
      title: '上传时间',
      dataIndex: 'CreatedTime',
      render: (text) => {
        return text ? dayjs(text).format('YYYY年MM月DD日  HH:mm:ss') : null;
      },
    },
    {
      title: '操作',
      width: '20%',
      render: (record) => (
        <Fragment>
          <a
            style={{ color: '#7BFFFB' }}
            onClick={() => this.checkFile(record)}
          >
            下载
          </a>
          {this.showJurisdiction('func-01-build-5-1-06') && (
            <>
              &nbsp;&nbsp;
              <a
                style={{ color: '#7BFFFB' }}
                onClick={() => this.OnDeleteFile(record.ID)}
              >
                删除
              </a>
            </>
          )}
        </Fragment>
      ),
    },
  ];

  checkFile = (record) => {
    if (window.InvokeUnityFileOpener) {
      window.InvokeUnityFileOpener(record.Url);
    } else {
      window.location.href = `${record.Url}`;
    }
  };

  showJurisdiction = (item) => {
    if (item === undefined) {
      return false;
    }
    return this.props.user?.Permission[item];
  };

  callback = (key) => {
    this.setState({
      typeNum: key,
    });
  };

  GetOpsTabs = (subtype, fileType, folders) => {
    const { list, loading } = this.props;
    const { subtypeMap } = this.state;
    const typeNum = this.state.typeNum || -1;
    // const data = list && list.BillFiles && list.BillFiles.filter(each => each.Subtype == typeNum);
    return subtypeMap.map((item) => {
      if (!this.showJurisdiction(opsPermissionTabsMap.get(item.value)))
        return null;
      const num =
        list &&
        list.BillFiles &&
        list.BillFiles.filter((each) => each.Subtype == item.type);
      return (
        <TabPane
          tab={`${item.value} (${(num && num.length) || 0})`}
          key={item.type}
        >
          <Table
            bordered
            rowKey="ID"
            columns={this.columns}
            loading={loading}
            dataSource={num}
            pagination={false}
          />
        </TabPane>
      );
    });
  };

  render() {
    console.log('=--------', this.props);
    const { loading } = this.props;
    const { dispatch, billId, deviceCode, fileType, projectId, ops } =
      this.props;
    const { list, folders } = this.props;

    const token = getToken() || GetTokenFromUrl();
    const typeNum = this.state.typeNum || -1;
    // const data = list && list.BillFiles && list.BillFiles.filter(each => each.Subtype == typeNum);
    const uploadProps = {
      name: 'files',
      action: `/api/v1/purchase_bill/device_file/0/${deviceCode}/${fileType}/${typeNum}?projectId=${projectId}&${
        ops == '1' ? 'ops=1' : undefined
      }`,
      // action: `/api/v1/purchase_bill/device_file/${billId}/${deviceCode}/${fileType}/${typeNum}?projectId=${projectId}`,
      showUploadList: false,
      headers: {
        'JWT-TOKEN': token,
      },
      onChange(info) {
        if (info.file.status !== 'uploading') {
          // console.log(info.file, info.fileList);
        }
        if (info.file.status === 'done') {
          var res = info.file.response;
          if (res.code !== 200) return message.error(res.msg);
          message.success(`${info.file.name} 文件上传成功`);
          dispatch({
            type: 'equipmentProcurementList/getFileList',
            payload: {
              billId: 0,
              deviceCode,
              fileType,
              projectId,
              ops: ops == '1' ? 1 : undefined,
            },
          });
        } else if (info.file.status === 'error') {
          message.error(`${info.file.name} 文件上传失败`);
        }
      },
    };
    return (
      <PageContent>
        <Card bordered={false} className={cardStyle.CardCon}>
          {(this.showJurisdiction('func-01-ops-1-5-06') ||
            this.showJurisdiction('func-01-build-5-1-05')) && (
            <Row>
              <Upload {...uploadProps} className={styles.upload}>
                <Button type="primary">上传</Button>
              </Upload>
            </Row>
          )}
          {subtypeDictionaries[fileType] ? (
            <Tabs
              animated={false}
              // activeKey={typeNum + ''}
              onChange={this.callback}
              style={{ paddingTop: -20 }}
            >
              {ops == '1'
                ? this.GetOpsTabs(subtypeDictionaries, fileType, folders)
                : subtypeDictionaries[fileType].map((item) => {
                    if (
                      !this.showJurisdiction(
                        buildPermissionTabsMap.get(item.value),
                      )
                    )
                      return null;

                    const num =
                      list &&
                      list.BillFiles &&
                      list.BillFiles.filter(
                        (each) => each.Subtype == item.type,
                      );
                    return (
                      <TabPane
                        tab={`${item.value} (${(num && num.length) || 0})`}
                        key={item.type}
                      >
                        <Table
                          bordered
                          rowKey="ID"
                          columns={this.columns}
                          loading={loading}
                          dataSource={num}
                          pagination={false}
                        />
                      </TabPane>
                    );
                  })}
            </Tabs>
          ) : (
            <Table
              bordered
              rowKey="ID"
              columns={this.columns}
              loading={loading}
              dataSource={
                list &&
                list.BillFiles &&
                list.BillFiles.filter((item) => item.Type == fileType)
              }
              pagination={false}
              style={{ paddingTop: 20 }}
            />
          )}
        </Card>
      </PageContent>
    );
  }
}
const HOCIndex = connect(({ equipmentProcurementList, loading }) => {
  return {
    list: equipmentProcurementList.list,
    folders: equipmentProcurementList.folders,
    loading: loading.models.equipmentProcurementList,
  };
})(Index);

export default connectUserModel('user', '@@initialState')(HOCIndex);