/*
 * @Description:
 * @Author: zangsuyun
 * @Date: 2021-03-13 09:54:26
 * @LastEditors: wufan
 * @LastEditTime: 2021-05-30 10:44:49
 * @Copyright: © 2020 杭州杰竞科技有限公司 版权所有
 */

import React from "react";
import {
  Row,
  Modal,
  Button,
  message,
  Table,
  Select,
  Radio,
  Input,
  Tabs,
  Tooltip,
  TreeSelect,
} from "antd";
import { PageControl } from "@/components";
import TableSelectedData from "@/components/TableSelectedData";
import CourseService from "@/domains/course-domain/CourseService";
import KnowledgeAPI from "@/data-source/knowledge/request-api";
import User from "@/common/js/user";
import "./LiveList.less";

import _ from "underscore";
import dealTimeDuration from "../../course-manage/utils/dealTimeDuration";

const { Search } = Input;
const { TabPane } = Tabs;
const courseStateShow = {
  UN_START: {
    code: 1,
    title: "待开课",
    color: "#FFB129",
  },
  STARTING: {
    code: 2,
    title: "上课中",
    color: "#238FFF",
  },
  FINISH: {
    code: 3,
    title: "已完成",
    color: "#3BBDAA",
  },
  EXPIRED: {
    code: 4,
    title: "未成功开课",
    color: "#999",
  },
};

class AddCourse extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      liveDataSource: [],
      liveSize: 10,
      liveQuery: {
        current: 1,
        excludeUsed: true,
        courseType: "LIVE",
        storeId: User.getStoreId(),
        toRefKnowledgeCategoryId: this.props.categoryId,
      },
      liveTotalCount: 0,
      selectLive: [], //弹窗内已选择的直播课程

      videoDataSource: [],
      videoSize: 10,
      videoQuery: {
        current: 1,
        courseType: "VOICE",
        excludeUsed: true,
        storeId: User.getStoreId(),
        toRefKnowledgeCategoryId: this.props.categoryId,
      },
      videoTotalCount: 0,
      selectVideo: [], //弹窗内已选择的视频课程

      pictureDataSource: [],
      pictureSize: 10,
      pictureQuery: {
        current: 1,
        excludeUsed: true,
        courseType: "PICTURE",
        storeId: User.getStoreId(),
        toRefKnowledgeCategoryId: this.props.categoryId,
      },
      pictureTotalCount: 0,
      selectPicture: [], //弹窗内已选择的图文课程
      categoryList: [],
    };
  }
  componentDidMount() {
    this.handleFetchLiveList();
    this.handleFetchVideoList();
    this.handleFetchPictureList();
    this.queryCategoryTree();
  }

  // 查询分类树
  queryCategoryTree = (categoryName) => {
    let query = {
      storeId: User.getStoreId(),
      withCount: false,
    };
    KnowledgeAPI.getCategoryTree(query).then((res) => {
      const { categoryList = [] } = res.result;
      this.setState({
        categoryList: this.renderTreeNodes(categoryList),
      });
    });
  };

  renderTreeNodes = (data) => {
    let newTreeData = data.map((item) => {
      item.title = (
        <span>
          <span className="icon iconfont" style={{ color: "#FBD140" }}>
            &#xe7f1;&nbsp;
          </span>
          {item.categoryName}
        </span>
      );
      item.key = item.id;
      if (item.sonCategoryList) {
        item.children = this.renderTreeNodes(item.sonCategoryList);
      }
      return item;
    });
    return newTreeData;
  };

  // 获取直播课列表
  handleFetchLiveList = () => {
    const { liveQuery, liveSize } = this.state;

    const params = {
      ...liveQuery,
      size: liveSize,
    };

    // CourseService.getLiveCloudCoursePage(params).then((res) => {
    KnowledgeAPI.knowledgeLiveCoursePage(params).then((res) => {
      const { result = {} } = res;
      const { records = [], total = 0 } = result;
      this.setState({
        liveDataSource: records,
        liveTotalCount: Number(total),
      });
    });
  };

  // 获取视频课列表
  handleFetchVideoList = () => {
    const { videoQuery, videoSize } = this.state;

    const params = {
      ...videoQuery,
      size: videoSize,
    };

    // CourseService.videoSchedulePage(query).then((res) => {
    KnowledgeAPI.knowledgeMediaCoursePage(params).then((res) => {
      const { result = {} } = res || {};
      const { records = [], total = 0 } = result;
      this.setState({
        videoDataSource: records,
        videoTotalCount: Number(total),
      });
    });
  };

  // 获取图文课列表
  handleFetchPictureList = () => {
    const { pictureQuery, pictureSize } = this.state;

    const params = {
      ...pictureQuery,
      size: pictureSize,
    };

    // CourseService.pictureSchedulePage(query).then((res) => {
    KnowledgeAPI.knowledgeMediaCoursePage(params).then((res) => {
      const { result = {} } = res || {};
      const { records = [], total = 0 } = result;
      this.setState({
        pictureDataSource: records,
        pictureTotalCount: Number(total),
      });
    });
  };

  onShowLiveSizeChange = (current, size) => {
    if (current == size) {
      return;
    }
    this.setState(
      {
        liveSize: size,
      },
      () => {
        this.handleFetchLiveList();
      }
    );
  };

  onShowVideoSizeChange = (current, size) => {
    if (current == size) {
      return;
    }
    this.setState(
      {
        videoSize: size,
      },
      () => {
        this.handleFetchVideoList();
      }
    );
  };

  onShowPictureSizeChange = (current, size) => {
    if (current == size) {
      return;
    }
    this.setState(
      {
        pictureSize: size,
      },
      () => {
        this.handleFetchPictureList();
      }
    );
  };

  liveColumns = () => {
    const columns = [
      {
        title: (
          <span>
            <span>课程信息</span>
            <Tooltip
              title={<div>已加入该分类的课程不支持重复选择，因此不显示。</div>}
            >
              <i
                className="icon iconfont"
                style={{
                  marginLeft: "5px",
                  cursor: "pointer",
                  color: "#bfbfbf",
                  fontSize: "14px",
                  fontWeight:"400"
                }}
              >
                &#xe61d;
              </i>
            </Tooltip>
          </span>
        ),
        width: 371,
        key: "course",
        dataIndex: "courseName",
        render: (val, record) => {
          let hasCover = false;
          return (
            <div className="record__item">
              {record.courseMediaVOS.map((item, index) => {
                if (item.contentType === "COVER") {
                  hasCover = true;
                  return <img className="course-cover" src={item.mediaUrl} />;
                }
              })}
              {!hasCover && (
                <img
                  className="course-cover"
                  src={"https://image.xiaomaiketang.com/xm/YNfi45JwFA.png"}
                />
              )}
              <div>
                {record.courseName.length > 17 ? (
                  <Tooltip title={record.courseName}>
                    <div className="course-name">{record.courseName}</div>
                  </Tooltip>
                ) : (
                  <div className="course-name">{record.courseName}</div>
                )}
                <div>
                  <span
                    className="course-status"
                    style={{
                      color: courseStateShow[record.courseState].color,
                      border: `1px solid ${
                        courseStateShow[record.courseState].color
                      }`,
                    }}
                  >
                    {courseStateShow[record.courseState].title}
                  </span>
                </div>
              </div>
            </div>
          );
        },
      },
      {
        title: "上课时间",
        width: 110,
        key: "couseCatalog",
        dataIndex: "couseCatalog",
        render: (val, item) => {
          return (
            <span className="course-time">
              {formatDate("YYYY-MM-DD", parseInt(item.startTime))} <br></br>
              {formatDate("H:i", parseInt(item.startTime))}~
              {formatDate("H:i", parseInt(item.endTime))}
            </span>
          );
        },
      },

      {
        title: "课程分类",
        // width: "10%",
        key: "couseCatalog",
        dataIndex: "couseCatalog",
        render: (val, record) => {
          return (
            <div className="categoryName">
              {record.categoryOneName}
              {record.categoryTwoName ? `-${record.categoryTwoName}` : ""}
            </div>
          );
        },
      },
    ];

    return columns;
  };

  videoColumns = () => {
    const columns = [
      {
        title: (
          <span>
            <span>课程信息</span>
            <Tooltip
              title={<div>已加入该分类的课程不支持重复选择，因此不显示。</div>}
            >
              <i
                className="icon iconfont"
                style={{
                  marginLeft: "5px",
                  cursor: "pointer",
                  color: "#bfbfbf",
                  fontSize: "14px",
                  fontWeight:"400"
                }}
              >
                &#xe61d;
              </i>
            </Tooltip>
          </span>
        ),
        key: "scheduleName",
        dataIndex: "scheduleName",
        width: 371,
        render: (val, record) => {
          const { coverUrl, mediaCourseUrl } = record;
          return (
            <div className="record__item">
              {/* 上传了封面的话就用上传的封面, 没有的话就取视频的第一帧 */}
              <img
                className="course-cover"
                src={
                  coverUrl ||
                  `${mediaCourseUrl}?x-oss-process=video/snapshot,t_0,m_fast`
                }
              />
              {record.courseName.length > 25 ? (
                <Tooltip title={record.courseName}>
                  <div className="course-name">{record.courseName}</div>
                </Tooltip>
              ) : (
                <div className="course-name">{record.courseName}</div>
              )}
            </div>
          );
        },
      },
      {
        title: "课程时长",
        key: "videoDuration",
        width: 80,
        dataIndex: "videoDuration",
        render: (text, item) => {
          return <span>{text ? dealTimeDuration(text) : "-"}</span>;
        },
      },
      {
        title: "课程分类",
        key: "categoryName",
        dataIndex: "categoryName",
        render: (val, record) => {
          return (
            <div className="record__item">
              {record.categoryOneName}
              {record.categoryTwoName ? `-${record.categoryTwoName}` : ""}
            </div>
          );
        },
      },
    ];
    return columns;
  };

  pictureColumns = () => {
    const columns = [
      {
        title: (
          <span>
            <span>课程信息</span>
            <Tooltip
              title={<div>已加入该分类的课程不支持重复选择，因此不显示。</div>}
            >
              <i
                className="icon iconfont"
                style={{
                  marginLeft: "5px",
                  cursor: "pointer",
                  color: "#bfbfbf",
                  fontSize: "14px",
                  fontWeight:"400"
                }}
              >
                &#xe61d;
              </i>
            </Tooltip>
          </span>
        ),
        key: "scheduleName",
        dataIndex: "scheduleName",
        width: 371,
        render: (val, record) => {
          const { coverUrl } = record;
          return (
            <div className="record__item">
              {/* 上传了封面的话就用上传的封面, 没有的话就取视频的第一帧 */}
              <img
                className="course-cover"
                src={
                  coverUrl ||
                  "https://image.xiaomaiketang.com/xm/YNfi45JwFA.png"
                }
              />
              {record.courseName.length > 25 ? (
                <Tooltip title={record.courseName}>
                  <div className="course-name">{record.courseName}</div>
                </Tooltip>
              ) : (
                <div className="course-name">{record.courseName}</div>
              )}
            </div>
          );
        },
      },
      {
        title: "课程分类",
        key: "categoryName",
        dataIndex: "categoryName",
        render: (val, record) => {
          return (
            <div className="record__item">
              {record.categoryOneName}
              {record.categoryTwoName ? `-${record.categoryTwoName}` : ""}
            </div>
          );
        },
      },
    ];
    return columns;
  };

  selectLiveList = (record, selected) => {
    let { selectLive } = this.state;
    let _list = [];
    if (
      selected ||
      !_.find(selectLive, (item) => item.liveCourseId == record.liveCourseId)
    ) {
      _list = _.uniq(
        selectLive.concat([record]),
        false,
        (item) => item.liveCourseId
      );
    } else {
      _list = _.reject(
        selectLive,
        (item) => item.liveCourseId === record.liveCourseId
      );
    }
    this.setState({ selectLive: _list });
  };

  selectVideoList = (record, selected) => {
    console.log(record);
    let { selectVideo } = this.state;
    let _list = [];
    if (selected || !_.find(selectVideo, (item) => item.id == record.id)) {
      _list = _.uniq(selectVideo.concat([record]), false, (item) => item.id);
    } else {
      _list = _.reject(selectVideo, (item) => item.id === record.id);
    }
    this.setState({ selectVideo: _list });
  };

  selectPictureList = (record, selected) => {
    console.log(record);
    let { selectPicture } = this.state;
    let _list = [];
    if (selected || !_.find(selectPicture, (item) => item.id == record.id)) {
      _list = _.uniq(selectPicture.concat([record]), false, (item) => item.id);
    } else {
      _list = _.reject(selectPicture, (item) => item.id === record.id);
    }
    this.setState({ selectPicture: _list });
  };

  callback(key) {
    console.log(key);
  }

  handleChangVideoFilter = (key, value) => {
    const { videoQuery } = this.state;
    videoQuery[key] = value;
    videoQuery.current = 1;
    this.setState(
      {
        videoQuery,
      },
      () => {
        this.handleFetchVideoList();
      }
    );
  };

  handleChangLiveFilter = (key, value) => {
    const { liveQuery } = this.state;
    liveQuery[key] = value;
    liveQuery.current = 1;
    this.setState(
      {
        liveQuery,
      },
      () => {
        this.handleFetchLiveList();
      }
    );
  };

  handleChangPictureFilter = (key, value) => {
    const { pictureQuery } = this.state;
    pictureQuery[key] = value;
    pictureQuery.current = 1;
    this.setState(
      {
        pictureQuery,
      },
      () => {
        this.handleFetchPictureList();
      }
    );
  };
  handAddCourse = () => {
    const { selectVideo, selectLive, selectPicture } = this.state;
    const batchAddList = [];
    if (selectVideo.length) {
      batchAddList.push({
        categoryId: this.props.categoryId,
        refIds: _.pluck(selectVideo, "id"),
        storeId: User.getStoreId(),
        type: "VOICE",
        createId: User.getStoreUserId(),
      });
    }
    if (selectLive.length) {
      batchAddList.push({
        categoryId: this.props.categoryId,
        refIds: _.pluck(selectLive, "liveCourseId"),
        storeId: User.getStoreId(),
        type: "LIVE",
        createId: User.getStoreUserId(),
      });
    }
    if (selectPicture.length) {
      batchAddList.push({
        categoryId: this.props.categoryId,
        refIds: _.pluck(selectPicture, "id"),
        storeId: User.getStoreId(),
        type: "PICTURE",
        createId: User.getStoreUserId(),
      });
    }

    KnowledgeAPI.addDifTypeKnowledge({ batchAddList }).then(({ success }) => {
      if (success) {
        message.success("新增成功");
        this.props.onClose();
        this.props.onChange();
        this.props.updateCategoryTree();
      }
    });
  };

  renderFooter = () => {
    const {selectVideo,selectPicture,selectLive} =this.state
    return (
      <div>
        <Button onClick={this.props.onClose}>取消</Button>
        <Button disabled={!(selectLive.length || selectVideo.length || selectPicture.length)} type="primary" onClick={this.handAddCourse}>
          确定
        </Button>
      </div>
    );
  };

  render() {
    const {
      liveDataSource,
      liveSize,
      liveQuery,
      liveTotalCount,
      selectLive,
      videoDataSource,
      videoSize,
      videoQuery,
      videoTotalCount,
      selectVideo,
      pictureDataSource,
      pictureSize,
      pictureQuery,
      pictureTotalCount,
      selectPicture,
      categoryList,
    } = this.state;

    const LiveSelection = {
      selectedRowKeys: _.pluck(selectLive, "liveCourseId"),
      onSelect: this.selectLiveList,
      onSelectAll: (selected, _selectedRows, changeRows) => {
        let _list = [];
        if (selected) {
          _list = _.uniq(
            selectLive.concat(changeRows),
            false,
            (item) => item.liveCourseId
          );
        } else {
          _list = _.reject(selectLive, (item) =>
            _.find(
              changeRows,
              (data) => data.liveCourseId === item.liveCourseId
            )
          );
        }
        this.setState({ selectLive: _list });
      },
    };

    const VideoSelection = {
      selectedRowKeys: _.pluck(selectVideo, "id"),
      onSelect: this.selectVideoList,
      onSelectAll: (selected, _selectedRows, changeRows) => {
        let _list = [];
        if (selected) {
          _list = _.uniq(
            selectVideo.concat(changeRows),
            false,
            (item) => item.id
          );
        } else {
          _list = _.reject(selectVideo, (item) =>
            _.find(changeRows, (data) => data.id === item.id)
          );
        }
        this.setState({ selectVideo: _list });
      },
    };

    const PictureSelection = {
      selectedRowKeys: _.pluck(selectPicture, "id"),
      onSelect: this.selectPictureList,
      onSelectAll: (selected, _selectedRows, changeRows) => {
        console.log(changeRows);
        let _list = [];
        if (selected) {
          _list = _.uniq(
            selectPicture.concat(changeRows),
            false,
            (item) => item.id
          );
        } else {
          _list = _.reject(selectPicture, (item) =>
            _.find(changeRows, (data) => data.id === item.id)
          );
        }
        this.setState({ selectPicture: _list });
      },
    };

    return (
      <Modal
        visible={true}
        width={720}
        title="新增课程"
        footer={this.renderFooter()}
        onCancel={this.props.onClose}
        className="add-course-modal"
      >
        <Tabs defaultActiveKey="VIDEO" onChange={this.callback} centered>
          <TabPane tab="视频课" key="VIDEO">
            <div className="live-list">
              <div>
                <Row type="flex" justify="space-between" align="top">
                  <div>
                    <span style={{ lineHeight: "32px" }}>课程名称：</span>
                    <Search
                      // value={courseName}
                      style={{ width: "calc(100% - 75px)" }}
                      placeholder="搜索课程名称"
                      onSearch={(value) => {
                        this.handleChangVideoFilter("courseName", value);
                      }}
                      enterButton={
                        <span className="icon iconfont">&#xe832;</span>
                      }
                    />
                  </div>
                  <div style={{ width: "50%" }}>
                    <span className="shelf-status">课程分类：</span>
                    <TreeSelect
                      style={{ width: "calc(100% - 75px)" }}
                      dropdownStyle={{ maxHeight: 400, overflow: "auto" }}
                      treeData={categoryList}
                      placeholder="请选择课程类型"
                      allowClear
                      onChange={(value) => {
                        this.handleChangVideoFilter("categoryId", value);
                      }}
                    />
                  </div>
                </Row>
              </div>
              <TableSelectedData
                selectedNum={
                  selectVideo.length + selectLive.length + selectPicture.length
                }
                clearSelectedData={() => {
                  this.setState({
                    selectVideo: [],
                    selectLive: [],
                    selectPicture: [],
                  });
                }}
              />
              <Table
                rowKey={(record) => record.id}
                dataSource={videoDataSource}
                columns={this.videoColumns()}
                size="middle"
                rowSelection={VideoSelection}
                pagination={false}
                bordered
                className="video-list-table"
                style={{ maxHeight: 359, overflow: "scroll" }}
              />

              <div className="box-footer">
                {videoTotalCount > 0 && (
                  <PageControl
                    current={videoQuery.current - 1}
                    pageSize={videoSize}
                    total={videoTotalCount}
                    toPage={(page) => {
                      const _query = { ...videoQuery, current: page + 1 };
                      this.setState(
                        {
                          videoQuery: _query,
                        },
                        () => {
                          this.handleFetchVideoList();
                        }
                      );
                    }}
                    onShowSizeChange={this.onShowVideoSizeChange}
                  />
                )}
              </div>
            </div>
          </TabPane>
          <TabPane tab="直播课" key="LIVE">
            <div className="live-list">
              <div>
                <Row type="flex" justify="space-between" align="top">
                  <div>
                    <span style={{ lineHeight: "32px" }}>课程名称：</span>
                    <Search
                      // value={courseName}
                      style={{ width: "calc(100% - 75px)" }}
                      placeholder="搜索课程名称"
                      // onChange={(e) => {
                      //   this.handleChangLiveFilter(
                      //     "courseName",
                      //     e.target.value
                      //   );
                      // }}
                      onSearch={(value) => {
                        this.handleChangLiveFilter("courseName", value);
                      }}
                      enterButton={
                        <span className="icon iconfont">&#xe832;</span>
                      }
                    />
                  </div>
                  <div style={{ width: "50%" }}>
                    <span className="shelf-status">课程分类：</span>
                    <TreeSelect
                      style={{ width: "calc(100% - 75px)" }}
                      dropdownStyle={{ maxHeight: 400, overflow: "auto" }}
                      treeData={categoryList}
                      placeholder="请选择课程类型"
                      allowClear
                      onChange={(value) => {
                        this.handleChangLiveFilter("categoryId", value);
                      }}
                    />
                  </div>
                </Row>
              </div>
              <TableSelectedData
                selectedNum={
                  selectVideo.length + selectLive.length + selectPicture.length
                }
                clearSelectedData={() => {
                  this.setState({
                    selectVideo: [],
                    selectLive: [],
                    selectPicture: [],
                  });
                }}
              />
              <Table
                bordered
                size="middle"
                pagination={false}
                columns={this.liveColumns()}
                rowSelection={LiveSelection}
                // loading={loading}
                dataSource={liveDataSource}
                style={{ maxHeight: 359, overflow: "scroll" }}
                rowKey={(row) => row.liveCourseId}
              />
              {liveTotalCount > 0 && (
                <div className="box-footer">
                  <PageControl
                    current={liveQuery.current - 1}
                    pageSize={liveSize}
                    total={parseInt(liveTotalCount)}
                    toPage={(page) => {
                      const _query = { ...liveQuery, current: page + 1 };
                      this.setState(
                        {
                          liveQuery: _query,
                        },
                        () => {
                          this.handleFetchLiveList();
                        }
                      );
                    }}
                    onShowSizeChange={this.onShowLiveSizeChange}
                  />
                </div>
              )}
            </div>
          </TabPane>
          <TabPane tab="图文课" key="PICTURE">
            <div className="live-list">
              <div>
                <Row type="flex" justify="space-between" align="top">
                  <div>
                    <span style={{ lineHeight: "32px" }}>课程名称：</span>
                    <Search
                      style={{ width: "calc(100% - 75px)" }}
                      placeholder="搜索课程名称"
                      onSearch={(value) => {
                        this.handleChangPictureFilter("courseName", value);
                      }}
                      enterButton={
                        <span className="icon iconfont">&#xe832;</span>
                      }
                    />
                  </div>
                  <div style={{ width: "50%" }}>
                    <span className="shelf-status">课程分类：</span>
                    <TreeSelect
                      style={{ width: "calc(100% - 75px)" }}
                      dropdownStyle={{ maxHeight: 400, overflow: "auto" }}
                      treeData={categoryList}
                      placeholder="请选择课程类型"
                      allowClear
                      onChange={(value) => {
                        this.handleChangPictureFilter("categoryId", value);
                      }}
                    />
                  </div>
                </Row>
              </div>
              <TableSelectedData
                selectedNum={
                  selectVideo.length + selectLive.length + selectPicture.length
                }
                clearSelectedData={() => {
                  this.setState({
                    selectVideo: [],
                    selectLive: [],
                    selectPicture: [],
                  });
                }}
              />
              <Table
                bordered
                size="middle"
                pagination={false}
                columns={this.pictureColumns()}
                rowSelection={PictureSelection}
                // loading={loading}
                dataSource={pictureDataSource}
                style={{ maxHeight: 359, overflow: "scroll" }}
                rowKey={(row) => row.id}
              />
              {pictureTotalCount > 0 && (
                <div className="box-footer">
                  <PageControl
                    current={pictureQuery.current - 1}
                    pageSize={pictureSize}
                    total={parseInt(pictureTotalCount)}
                    toPage={(page) => {
                      const _query = { ...pictureQuery, current: page + 1 };
                      this.setState(
                        {
                          pictureQuery: _query,
                        },
                        () => {
                          this.handleFetchPictureList();
                        }
                      );
                    }}
                    onShowSizeChange={this.onShowPictureSizeChange}
                  />
                </div>
              )}
            </div>
          </TabPane>
        </Tabs>
      </Modal>
    );
  }
}
export default AddCourse;
