import React, { useEffect, useState } from 'react';
import { Table, Collapse, Space } from 'antd';
import { connect } from 'dva';
import router from 'umi/router';
import { querySubmitList } from '@/services/bomAuth';

const { Panel } = Collapse;

function Auth(props) {
  const { dispatch, typeOptions, currentUser, project } = props;
  const [loading, setLoading] = useState(false);
  const [data, setData] = useState({
    list: [],
    pagination: {},
  });

  const queryData = async page => {
    setLoading(true);
    try {
      const res = await querySubmitList(currentUser.ID, { current_page: page?.current || 1 });
      setData(res.data);
    } catch (error) {}
    setLoading(false);
  };

  const columns = [
    {
      title: '流程名称',
      dataIndex: 'name',
    },
    {
      title: '清单名称',
      dataIndex: 'version_name',
    },
    // {
    //   title: '所属项目',
    //   dataIndex: 'project_id',
    //   render: project_id => {
    //     let p = project.list.find(p => p.id == project_id);
    //     if (p) return `${p.project_name}(${p.project_full_code})`;
    //   },
    // },
    {
      title: '所属节点',
      render: record => record.TemplateNodeInfo.label,
    },
    {
      title: '分类',
      render: item => typeOptions.find(cur => cur.id == item.classify_id)?.name,
    },
    {
      title: '待审批人',
      width: '15%',
      dataIndex: 'audit_comment',
      // render: item => {
      //   let style = { color: getColor(item.audit_status) };
      //   let txt = '';
      //   switch (item.audit_status) {
      //     case 0:
      //       txt = '未提交';
      //       break;
      //     case 1:
      //       txt = '待审批';
      //       break;
      //     case 2:
      //       txt = '已拒绝';
      //       break;
      //     case 3:
      //       txt = '已通过';
      //       break;
      //     case 4:
      //       txt = '已提交';
      //       break;
      //   }
      //   if (item.status == 1) txt = '已失效';
      //   return <span style={style}>{txt}</span>;
      // },
    },
    {
      title: '操作',
      width: '20%',
      render: item => (
        <Space>
          <a onClick={() => loadNode(item)}>加载</a>
        </Space>
      ),
    },
  ];

  const loadNode = item => {
    //调用接口获取version信息
    dispatch({
      type: 'auth/queryVersionByNode',
      payload: { template_node_id: item.TemplateNodeInfo.Id },
      callback: versionList => {
        let version;
        let parentVersion = versionList.find(v => v.id == item.version_id);
        if (parentVersion && parentVersion.children) {
          version = parentVersion.children.find(v => v.id == item.id);
        } else {
          version = versionList.find(v => v.id == item.id);
        }
        localStorage.excelItem = JSON.stringify(version);
        router.push(`/home/detail/${item.project_id}/${item.template_id}`);
      },
    });
  };

  //监测当前用户，有值时调用列表接口
  useEffect(() => {
    if (!currentUser.ID) return;
    queryData();
  }, [currentUser]);

  useEffect(() => {
    //分类列表
    dispatch({ type: 'auth/queryClassify' });
  }, []);

  return (
    <div>
      <Table
        loading={loading}
        columns={columns}
        dataSource={data.list}
        pagination={data.pagination}
        onChange={queryData}
      />
    </div>
  );
}
const getColor = audit_status => {
  let color = '';
  switch (audit_status) {
    case 2:
      // 审批拒绝
      color = '#f5222d';
      break;
    case 3:
      // 审批成功
      color = '#7cb305';
      break;
    case 4:
      // 历史清单
      color = '#9b9b9b';
      break;

    default:
      break;
  }
  return color;
};

export default connect(({ auth, loading, user }) => ({
  typeOptions: auth.typeOptions,
  currentUser: user.currentUser,
  loading,
}))(Auth);