import React from 'react';
import { Icon } from 'antd';
import {
  genAbsolutePicUrl,
  renderProductType,
  renderVideoQuality,
  renderCategory,
  renderStatus,
  getResourceTypeName,
} from '../../utils/utils';
import { Hotax } from '../../utils/config';
import styles from './columnsMap.less';

function renderPicture(path) {
  return (
    <div className={styles.thumb}>
      <img src={genAbsolutePicUrl(path)} alt="" />
    </div>
  );
}
function renderPictureData(record) {
  const { code, name } = record;
  return (
    <div className={styles.data}>
      <p>{code}</p>
      <p>{name}</p>
    </div>
  );
}

const clMap = {
  Resource: {
    columns: [{
      title: '缩略图',
      key: 1,
      render: (_, record) => {
        const { type } = record;
        if (type === Hotax.RESOURCE_IMAGE) {
          const { path } = record;
          return (
            <div className={styles.thumb}>
              <img src={genAbsolutePicUrl(path)} alt="" />
            </div>
          );
        } else if (type === Hotax.RESOURCE_AUDIOBOOK) {
          const { img } = record;
          const { path } = img || {};
          return (
            <div className={styles.thumb}>
              <img src={genAbsolutePicUrl(path)} alt="" />
            </div>
          );
        } else {
          return (
            <Icon style={{ fontSize: 50 }} type="video-camera" />
          );
        }
      },
      width: '25%',
      align: 'center',
    }, {
      title: '编号/名称',
      key: 2,
      render: (_, record) => renderPictureData(record),
      width: '40%',
    }, {
      title: '资源类型',
      key: 3,
      dataIndex: 'type',
      render: text => getResourceTypeName(text),
      align: 'center',
    }],
  },
  Picture: {
    columns: [{
      title: '图片',
      key: 1,
      dataIndex: 'path',
      render: path => renderPicture(path),
      width: '25%',
      align: 'center',
    }, {
      title: '编号/名称',
      key: 2,
      dataIndex: 'record',
      render: (_, record) => renderPictureData(record),
    }],
  },
  PictureSingle: {
    columns: [{
      title: '图片',
      key: 1,
      dataIndex: 'path',
      render: path => renderPicture(path),
      width: '12%',
      align: 'center',
    }, {
      title: '图片编号',
      key: 2,
      dataIndex: 'code',
      width: '25%',
    }, {
      title: '图片名称',
      dataIndex: 'name',
      key: 3,
      width: '35%',
    }, {
      title: '图片格式',
      dataIndex: 'format',
      key: 4,
      width: '12%',
    }, {
      title: '图片大小',
      dataIndex: 'size',
      key: 5,
    }],
  },
  Video: {
    columns: [{
      title: '视频编号',
      key: 1,
      dataIndex: 'code',
      width: '30%',
    }, {
      title: '视频名称',
      key: 2,
      dataIndex: 'name',
      width: '40%',
    }, {
      title: '视频格式',
      key: 3,
      dataIndex: 'format',
      width: '15%',
    }, {
      title: '视频品质',
      key: 4,
      dataIndex: 'quality',
      render: text => renderVideoQuality(text),
    }],
  },
  AudioBook: {
    columns: [{
      title: '有声读物编号',
      key: 1,
      dataIndex: 'code',
      width: '40%',
    }, {
      title: '有声读物名称',
      key: 2,
      dataIndex: 'name',
    }],
  },
  Courseware: {
    columns: [{
      title: '课件编号',
      key: 1,
      dataIndex: 'code',
      width: '40%',
    }, {
      title: '课件名称',
      key: 2,
      dataIndex: 'title',
    }],
  },
  Lesson: {
    columns: [{
      title: '课编号',
      key: 1,
      dataIndex: 'code',
      width: '40%',
    }, {
      title: '课名称',
      key: 2,
      dataIndex: 'title',
    }],
  },
  Course: {
    columns: [{
      title: '课程编号',
      key: 1,
      dataIndex: 'code',
      width: '40%',
    }, {
      title: '课程名称',
      key: 2,
      dataIndex: 'name',
    }],
  },
  Support: {
    columns: [{
      title: '配套编号',
      key: 1,
      dataIndex: 'code',
      width: '40%',
    }, {
      title: '配套名称',
      key: 2,
      dataIndex: 'name',
    }],
  },
  Training: {
    columns: [{
      title: '师训编号',
      key: 1,
      dataIndex: 'code',
      width: '40%',
    }, {
      title: '师训主题',
      key: 2,
      dataIndex: 'name',
    }],
  },
  Package: {
    columns: [{
      title: '套餐包编号',
      key: 1,
      dataIndex: 'code',
      width: '40%',
    }, {
      title: '套餐包名称',
      key: 2,
      dataIndex: 'name',
    }],
  },
  Product: {
    columns: [{
      title: '产品编号',
      key: 1,
      dataIndex: 'code',
      width: '25%',
    }, {
      title: '产品名称',
      key: 2,
      dataIndex: 'name',
      width: '45%',
    }, {
      title: '产品类型',
      key: 3,
      dataIndex: 'type',
      render: text => renderProductType(text),
    }],
  },
  Merchant: {
    columns: [{
      title: '厂商编号',
      key: 1,
      dataIndex: 'code',
      width: '30%',
    }, {
      title: '厂商名称',
      key: 2,
      dataIndex: 'name',
      width: '30%',
    }, {
      title: '厂商类型',
      key: 3,
      dataIndex: 'domain',
      render: text => renderCategory(text),
    }],
  },
  Campus: {
    columns: [{
      title: '校区编号',
      key: 1,
      dataIndex: 'code',
      width: '20%',
    }, {
      title: '校区名称',
      key: 2,
      dataIndex: 'name',
      width: '40%',
    }, {
      title: '所属厂商',
      key: 3,
      dataIndex: 'merchantName',
    }],
  },
  Terminal: {
    columns: [{
      title: '终端编号',
      key: 1,
      dataIndex: 'code',
      width: '15%',
    }, {
      title: '终端名称',
      key: 2,
      dataIndex: 'name',
      width: '15%',
    }, {
      title: '所属校区',
      key: 3,
      dataIndex: 'campusName',
      width: '40%',
    }, {
      title: '所属渠道',
      key: 4,
      dataIndex: 'merchantName',
    }],
  },
  TagGroup: {
    columns: [{
      title: '标签组编号',
      key: 1,
      dataIndex: 'code',
      width: '45%',
    }, {
      title: '标签组名称',
      key: 2,
      dataIndex: 'name',
      width: '20%',
    }, {
      title: '所属渠道名称',
      key: 3,
      dataIndex: 'merchantName',
    }],
  },
  TagType: {
    columns: [{
      title: '标签类型编号',
      key: 1,
      dataIndex: 'code',
      width: '40%',
    }, {
      title: '标签类型名称',
      key: 2,
      dataIndex: 'name',
    }],
  },
  allTag: {
    columns: [{
      title: '标签名称',
      key: 1,
      dataIndex: 'name',
      width: '30%',
    }, {
      title: '标签类型',
      key: 2,
      dataIndex: 'typeCode',
      width: '15%',
    }, {
      title: '所属标签组',
      key: 3,
      dataIndex: 'groupName',
      width: '40',
    }, {
      title: '所属渠道',
      key: 4,
      dataIndex: 'merchantName',
      width: '15%',
    }],
  },
  Tag: {
    columns: [{
      title: '标签名称',
      key: 1,
      dataIndex: 'name',
      width: '25%',
    }, {
      title: '标签类型',
      key: 2,
      dataIndex: 'typeCode',
      width: '25%',
    }, {
      title: '所属厂商',
      key: 3,
      dataIndex: 'merchantName',
      width: '25%',
    }, {
      title: '标签状态',
      key: 4,
      dataIndex: 'status',
      render: text => renderStatus(text),
    }],
  },
};

export function getSelectorColumns(name) {
  return clMap[name].columns;
}