import React, { useState, useEffect } from 'react';
import { Input, Popconfirm, Table, Typography,notification } from 'antd';
import request from '@/utils/request';
import apis from '@/services/apis';
import AuthButton from '@/components/AuthButton'
import { getImgURL } from '@/utils/image';
import Styles from './style.less';

const { Text } = Typography;

export default props => {
  const { history,marketingCode } = props;
  const { query } = history.location;
  const { id } = query;

  const [loading, setLoading] = useState(false);
  const [data, setData] = useState([]);
  
  function getList() {
    setLoading(true);
    // 网路请求
    request({
      ...apis.building.getMarketing,
      params: { buildingId: id },
    })
      .then(res => {
        setLoading(false);
        setData(res.records);
      })
      .catch(err => {
        setLoading(false);
        notification.error({
          message: err.message,
          description: '',
        });
      });
  }

  useEffect(() => {
    getList();
  }, []);

  // const getList=()=>{
  //   getMarketing
  // }
  const handleCancel = row => {
    request({
      ...apis.building.deleteMarketing,
      urlData:{id:row.id},
      // params: { id },
    })
      .then(res => {
        notification.error({
          message: '成功取消绑定',
          description: '',
        });
        getList()
      })
      .catch(err => {
       
        notification.error({
          message: err.message,
          description: '',
        });
      });

  };

  const columns = [
    {
      title: '头像',
      dataIndex: 'avatarurl',
      key: 'avatarurl',
      render: t => (
        <img src={getImgURL(t)} alt="" style={{ width: '96px', height: '96px', borderRadius: '4px' }} />
      ),
    },
    {
      title: '昵称',
      dataIndex: 'nickname',
      key: 'nickname',
    },
    {
      title: '手机',
      dataIndex: 'phone',
      key: 'phone',
    },
    {
      title: '性别',
      dataIndex: 'sex',
      key: 'sex',
      render: t => <span>{t==1?'男':t==2?'女':'未知'}</span>
      
    },
    {
      title: '操作',
      key: 'action',
      render: (_, row) => (
        <AuthButton name="building.marketing.delete">
          <Popconfirm title="确认执行取消操作?" onConfirm={() => handleCancel(row)}>
            <a href="#" style={{ color: 'red' }}>
              取消绑定
            </a>
          </Popconfirm>
        </AuthButton>
      ),
    },
  ];

  return (
    <div className={Styles['on-site-box']}>
      <div className={Styles['market-code']}>
        <div className={Styles['code-label']}>驻场编码: </div>
        <div className={Styles['code-input']}>
          <Text copyable>{marketingCode}</Text>
        </div>
      </div>
      <Table columns={columns} dataSource={data} loading={loading} bordered pagination={false} />
    </div>
  );
};
