import React, { useState, useEffect, useRef } from 'react';
import {
  Form,
  Input,
  Button,
  Icon,
  Typography,
  message,
  Table,
  Pagination,
  Modal,
  DatePicker,
  Card,
} from 'antd';
import router from 'umi/router';
import moment from 'moment';
import AuthButton from '@/components/AuthButton';
import withActions from '@/components/ActionList';
import EditIcon from '@/components/EditIcon';
import Navigate from '@/components/Navigate';
import apis from '@/services/apis';
import request from '@/utils/request';
import QueryTable from '@/components/QueryTable';
import { getImgURL } from '@/utils/image';
import OperButton from '@/components/OperButton';

const Video = props => {
  const ref = useRef();

  // 跳转到编辑
  const toVideoEdit = row => {
    router.push({
      pathname: '/Live/video/Edit',
      query: {
        id: row?.videoId,
      },
    });
  };

  const onPublish = row => {
    request({ ...apis.video.publish, urlData: { id: row.videoId } })
      .then(() => {
        message.success('操作成功');
        // setLoading(false);
        ref.current.reload();
      })
      .catch(err => {
        console.error(err);
        message.error('操作失败');
      });
  };

  const onDelete = row => {
    request({ ...apis.video.delete, urlData: { id: row.videoId } })
      .then(() => {
        message.success('删除成功');
        // setLoading(false);
        ref.current.reload();
      })
      .catch(err => {
        console.error(err);
        message.error('操作失败');
      });
  };

  const searchFields = [
    {
      name: 'title',
      label: '视频标题',
      placeholder: '请输入标题',
    },
  ];

  const columns = [
    {
      title: '视频标题',
      dataIndex: 'name',
      key: 'name',
      align: 'center',
      width: '20%',
      render: (x, row) => (
        <AuthButton name="video.publish" noRight={x}>
          <Navigate onClick={() => toVideoEdit(row)}>
            <Typography.Text ellipsis>{x}</Typography.Text>
          </Navigate>
        </AuthButton>
      ),
    },
    {
      title: '视频主图',
      dataIndex: 'videImg',
      key: 'videImg',
      align: 'center',
      render: (x, row) => (
        <img src={getImgURL(x)} width={128} height={72} style={{ borderRadius: '4px' }} alt="" />
      ),
    },

    {
      title: '阅读人数',
      dataIndex: 'lookNum',
      key: 'lookNum',
      align: 'center',
      render: (x, row) => x || 0,
    },
    {
      title: '归属楼盘',
      dataIndex: 'buildingName',
      key: 'buildingName',
      align: 'center',
    },

    {
      title: '权重',
      dataIndex: 'weight',
      key: 'weight',
      align: 'center',
    },
    {
      title: '操作',
      dataIndex: 'handle',
      key: 'handle',
      align: 'center',
      render: withActions((x, row) => [
        <AuthButton name="video.edit" noRight={null}>
          <OperButton onClick={() => toVideoEdit(row)}>编辑</OperButton>
          {/* <EditIcon
        type="edit"
        text="编辑"
        onClick={() => toSignupActivityEdit(row.dynamicId, row.count)}
      /> */}
        </AuthButton>,

        <AuthButton name="video.publish" noRight={null}>
          <OperButton onClick={() => onPublish(row)}>
            {row.isPublish ? '取消发布' : '发布'}
          </OperButton>
          {/* <EditIcon
            type={row.isPublish ? 'cancel' : 'publish'}
            text={row.isPublish ? '取消发布' : '发布'}
            onClick={() => sendOrPublicDynamic(row)}
          /> */}
        </AuthButton>,

        <AuthButton name="video.delete" noRight={null}>
          <OperButton.Confirm
            title="确认删除?"
            content="删除之后不可恢复"
            onClick={() => onDelete(row)}
          >
            删除
          </OperButton.Confirm>
        </AuthButton>,
      ]),
    },
  ];

  const actionRender = () => {
    return (
      <AuthButton name="video.add" noRight={null}>
        <Button type="primary" icon="plus" onClick={() => toVideoEdit()}>
          新增
        </Button>
      </AuthButton>
    );
  };

  return (
    <QueryTable
      ref={ref}
      rowKey="videoId"
      api={apis.video.list}
      searchFields={searchFields}
      columns={columns}
      actionRender={actionRender}
      // onPageChange={(pg) => setPage(pg)}
    />
  );
};

export default Video;
