import React, {useEffect, useState} from 'react';
import {Modal, Button, List, message} from 'antd';
import { useStore } from '../index';
import { getConfigApi, SaveParams } from '../api';
import styles from '../index.less';

interface Data {
  data: SaveParams
  loading: boolean
}
export default function Index() {
  const { statusData, setStatusData } = useStore();
  const [data, setData] = useState<Data>({data: {}, loading: false});
  function handleCancel() {
    setStatusData({...statusData, shop: false, id: undefined});
  }

  useEffect(() => {
    if (statusData.shop && statusData.id) {
      setData({...data, loading: true});
      getConfigApi(statusData.id)
      .then(res => {
        setData({data: res.data || {}, loading: false});
        message.success(res.result);
      })
      .catch(e => {
        setData({data: {}, loading: false});
        message.error(e.message);
      });
    }
  }, [statusData.shop]);

  return (
    <Modal
      destroyOnClose
      title={<div className={styles.lineWrap}><span className={styles.line} /><span className={styles.lineText}>适用门店</span></div>}
      visible={statusData.shop}
      maskClosable={false}
      onCancel={handleCancel}
      footer={[]}
      className={styles.modal}
    >
      <List
        size="large"
        loading={data.loading}
        style={{height: '300px', overflow: 'scroll'}}
        dataSource={data.data?.shopList || []}
        renderItem={(item: any) => <List.Item style={{justifyContent: 'center'}}>{item.shopName}</List.Item>}
      />
      <div
        style={{
            textAlign: 'center',
            marginTop: 12,
            height: 32,
            lineHeight: '32px',
          }}
      ><Button type="primary" onClick={handleCancel}>返回</Button>
      </div>
    </Modal>
  );
}