import React, { useMemo, useRef, useCallback, useState } from 'react';
import { Button, Avatar, Radio, Modal, message } from 'antd';
import moment from 'moment';
import apis from '@/services/apis';
import request from '@/utils/request';
import AuthButton from '@/components/AuthButton';
import QueryTable from '@/components/QueryTable';
import BuildingSelect from '@/components/SelectButton/BuildSelect';
import OperButton from '@/components/OperButton';
import withActions from '@/components/ActionList';
import { router } from 'umi';
import { getImgURL } from '@/utils/image';
import Navigate from '@/components/Navigate';

export default props => {
  const ref = useRef();
  const toEdit = useCallback(row => {
    //跳转到编辑页面
    router.push({
      pathname: '/course/Edit',
      query: {
        curriculumId: row?.curriculumId || undefined,
      },
    });
  }, []);

  const onDelete = data => {
    request({
      ...apis.course.deleteCourse,
      urlData: { id: data.curriculumId },
      // data: { ...data, isPublish: 0 },
    }).then(res => {
      message.info('删除成功');
      ref.current.reload(); //
    });
  };

  onDelete;

  const confirm = data => {
    // {...data,isPublish}
    if (data.isPublish === 1) {
      const titleCourse = data.isPublish ? '确认取消发布此课程吗？' : '确认发布此课程吗？';
      Modal.confirm({
        title: titleCourse,
        okText: '确认',
        cancelText: '取消',
        onOk() {
          request({
            ...apis.course.alterCourse,
            urlData: { id: data.curriculumId },
            data: { ...data, isPublish: 0 },
          }).then(res => {
            message.info('操作成功');
            ref.current.reload(); //
          });
        },
      });
    } else {
      const titleCourse = data.isPublish ? '确认取消发布此课程吗？' : '确认发布此课程吗？';
      Modal.confirm({
        title: titleCourse,
        okText: '确认',
        cancelText: '取消',
        onOk() {
          request({
            ...apis.course.alterCourse,
            urlData: { id: data.curriculumId },
            data: { ...data, isPublish: 1 },
          }).then(res => {
            message.info('操作成功');
            ref.current.reload(); //
          });
        },
      });
    }
  };

  const searchFields = [
    {
      name: 'name',
      label: '课程标题',
      placeholder: '请输入课程标题',
    },
    {
      name: 'roleId',
      label: '阅读对象',
      placeholder: '请选阅读对象',
      type: 'select',
      options: [
        { label: '经纪人', value: '1' },
        { label: '置业顾问', value: '2' },
        { label: '置业顾问&经纪人', value: '3' },
      ],
    },
  ];
  const tableColumns = [
    {
      title: '课程标题',
      dataIndex: 'name',
      key: 'name',
      align: 'center',
      render: (text, row) => (
        <Button type="link" onClick={() => toEdit(row)}>
          {text}
        </Button>
      ),
    },
    {
      title: '课程主图',
      dataIndex: 'curriculumImg',
      key: 'curriculumImg',
      align: 'center',
      render: (_, record) => (
        <img src={getImgURL(record.curriculumImg)} style={{ width: '165px', height: '104px' }} />
      ),
      // render:(_,record)=>(record.curriculumImg)==''?<img src={require(record)}/>:<img src={getImgURL(record.curriculumImg)} style={{ width: '165px', height: '104px' }} />
    },
    {
      title: '阅读人数',
      dataIndex: 'lookNum',
      key: 'lookNum',
      align: 'center',
      render: x => x || 0,
    },
    {
      title: '阅读对象',
      dataIndex: 'roleId',
      key: 'roleId',
      align: 'center',
      render: text => (text === '2' ? '置业顾问' : text === '1' ? '经纪人' : '置业顾问&经纪人'),
    },

    {
      //权重---
      title: '权重',
      dataIndex: 'weight',
      key: 'weight',
      align: 'center',
      // render: (_, record) => <><span>{record.numear = '20'}</span></>,
    },
    {
      title: '操作',
      dataIndex: 'isPublish',
      key: 'isPublish',
      //isPublish
      align: 'center',
      render: withActions(
        (_, row) => [
          <AuthButton name="course.publish" noRight={null}>
            <OperButton onClick={() => confirm(row)}>
              {row.isPublish === 0 ? '发布' : '取消发布'}
            </OperButton>
          </AuthButton>,

          <AuthButton name="course.edit" noRight={null}>
            <OperButton onClick={() => toEdit(row)}>编辑</OperButton>
          </AuthButton>,
          <AuthButton name="courseg.delete" noRight={null}>
            <OperButton.Confirm
              title="确认删除?"
              content="删除之后不可恢复"
              onClick={() => onDelete(row)}
            >
              删除
            </OperButton.Confirm>
          </AuthButton>,
        ],
        { noMargin: true },
      ),
    },
  ];
  const actionRender = () => {
    return (
      <AuthButton name="course.add" noRight={null}>
        <Button type="primary" icon="plus" onClick={() => toEdit()}>
          新增
        </Button>
      </AuthButton>
    );
  };

  return (
    <>
      <QueryTable
        ref={ref}
        rowKey="curriculumId"
        api={apis.course.Tablecourse}
        columns={tableColumns}
        searchFields={searchFields}
        actionRender={actionRender}
      />
    </>
  );
};