import React, { useState, useEffect, useCallback } from 'react';
import {
  Table,
  Input,
  Select,
  Checkbox,
  Pagination,
  Button,
  Dialog,
  Form
} from '@alifd/next';
import IceContainer from '@icedesign/container';
import PageHead from '@/components/page-head';
import styles from './index.module.scss';
import lodashFind from 'lodash.find';
import { ajax } from '@/utils';
const FormItem = Form.Item;
const formItemWidth = '500px';
const dialogDefaultItem = {
  dialogTitle: '添加品牌',
  isv_check: true,
  bizCode: '',
  brandName: '',
  brandStory: '',
  brandDescription: 'brandDescription',
  brandDesigner: 'designer',
  brandFeatures: {},
  brandLocation: '',
  brandNameCn: 'brandNameCn_2',
  brandNameEn: 'brandNameEn_2',
  brandPicUrl: 'picUrl',
  brandWebsite: 'websit'
};
const defaultSubmitData = {
  attributes: { isv_check: true },
  brandSDO: {
    brandCompany: 'company',
    brandDescription: 'brandDescription',
    brandDesigner: 'designer',
    brandFeatures: {},
    brandLastModifier: 'yufeng_laster_modifier',
    brandLocation: 'alibaba',
    brandName: '111',
    brandNameCn: 'brandNameCn_2',
    brandNameEn: 'brandNameEn_2',
    brandPicUrl: 'picUrl',
    brandStatus: 1,
    brandStory: 'story',
    brandWebsite: 'websit'
  }
};
const GoodsTable = ({ tenantName, title }) => {
  const [current, setCurrent] = useState(1);
  const [isLoading, setLoading] = useState(false);
  const [data, setData] = useState([]);
  const [dialogVisible, setDialogVisible] = useState(false);
  const [dialogData, setDialogData] = useState({ ...dialogDefaultItem });
  useEffect(() => {
    fetchData();
  }, []);

  const fetchData = useCallback(async () => {
    await setLoading(true);
    try {
      const responseData = await ajax({
        api: tenantName + 'GetBrand',
        method: 'get',
        data: {
          tenantKey: window._TENANT || ''
        }
      });

      await setLoading(false);
      if (responseData.success) {
        await setData(responseData.result);
        console.log('newdata', data);
      } else {
      }
    } catch (e) {}
  });
  const addOrEditBrand = async values => {
    // console.log(values);
    const submitData = { ...defaultSubmitData };
    submitData.attributes.isv_check = values.isv_check;
    delete values.isv_check;
    submitData.brandSDO = { ...submitData.brandSDO, ...values };
    submitData.tenantKey = window._TENANT || '';
    submitData.bizCode = values.bizCode;
    try {
      const apiUrl =
        dialogData.id !== undefined
          ? tenantName + 'EditBrand'
          : tenantName + 'AddBrand';
      const responseData = await ajax({
        api: apiUrl,
        method: 'post',
        type: 'json',
        data: JSON.stringify(submitData),
        contentType: 'application/json'
      });
      setDialogVisible(false);
      if (responseData.success) {
        location.reload();
      } else {
        Dialog.alert({
          title: '操作失败！',
          content: responseData.message || `系统错误请稍后再试~`
        });
      }
    } catch (e) {
      setDialogVisible(false);
      Dialog.alert({
        title: '操作失败！',
        content: `系统错误请稍后再试~`
      });
    }
    // async;
  };

  const renderAddBrandDialog = () => {
    setDialogData({ ...dialogDefaultItem });
    setDialogVisible(true);
  };
  const handleDelete = () => {
    Dialog.confirm({
      title: '提示',
      content: '确认删除吗',
      onOk: () => {
        fetchData(10);
      }
    });
  };

  // const handleDetail = () => {
  //   Dialog.confirm({
  //     title: '提示',
  //     content: '暂不支持查看详情'
  //   });
  // };

  const renderOper = () => {
    return (
      <div>
        {/* <Button type="primary" className={styles.btn} onClick={handleDetail}>
          详情
        </Button> */}
        <Button type="normal" warning onClick={handleDelete} disabled>
          删除
        </Button>
      </div>
    );
  };
  const renderBrandName = (value, index, record) => {
    return (
      <div>
        <h4>{record.brandName}</h4>

        <p>
          <span>中文：</span>
          <span>{record.brandNameCn}</span>
        </p>
        <p>
          <span>英文：</span>
          <span>{record.brandNameEn}</span>
        </p>
      </div>
    );
  };
  const renderDialogWithData = dialogItem => {
    return (
      <Dialog
        title={dialogItem.dialogTitle}
        visible={dialogVisible}
        footer={false}
        // style={{ width: '60%' }}
        onClose={() => setDialogVisible(false)}
      >
        <Form labelAlign="top">
          <FormItem label="业务身份:">
            <Input
              placeholder="请输入业务身份，全局唯一"
              id="bizCode"
              name="bizCode"
              defaultValue={dialogItem.bizCode}
              style={{ width: formItemWidth }}
            />
          </FormItem>

          <FormItem label="品牌名称:">
            <Input
              placeholder="品牌名称"
              id="brandName"
              name="brandName"
              defaultValue={dialogItem.brandName}
              style={{ width: formItemWidth }}
            />
          </FormItem>

          <FormItem label="品牌公司:">
            <Input
              placeholder="品牌公司"
              id="brandCompany"
              name="brandCompany"
              defaultValue={dialogItem.brandCompany}
              style={{ width: formItemWidth }}
            />
          </FormItem>
          <FormItem label="品牌地址:">
            <Input
              placeholder="品牌地址"
              id="brandLocation"
              name="brandLocation"
              defaultValue={dialogItem.brandLocation}
              style={{ width: formItemWidth }}
            />
          </FormItem>
          <FormItem label="品牌故事:">
            <Input.TextArea
              placeholder="品牌故事"
              id="brandStory"
              name="brandStory"
              defaultValue={dialogItem.brandStory}
              style={{ width: formItemWidth }}
            />
          </FormItem>
          <FormItem>
            <Checkbox
              defaultChecked={dialogItem.isv_check}
              id="check"
              name="isv_check"
            >
              是否 ISV
            </Checkbox>
          </FormItem>

          <FormItem>
            <Form.Submit type="primary" onClick={addOrEditBrand}>
              提交
            </Form.Submit>
          </FormItem>
        </Form>
      </Dialog>
    );
  };
  return (
    <div className={styles.container}>
      {renderDialogWithData(dialogData)}
      <PageHead
        title="品牌管理"
        buttonText="添加"
        onClick={renderAddBrandDialog}
      />
      <IceContainer>
        <Table loading={isLoading} dataSource={data} hasBorder={false}>
          <Table.Column title="品牌图" dataIndex="brandPicUrl" />
          <Table.Column
            title="品牌名称"
            dataIndex="brandName"
            cell={renderBrandName}
          />
          <Table.Column title="品牌故事" dataIndex="brandStory" />
          <Table.Column title="操作人" dataIndex="brandCreator" />
          <Table.Column
            title="创建时间"
            dataIndex="brandCreateTime"
            cell={value => {
              const date = new Date(value);
              return (
                date.getFullYear() +
                '/' +
                (date.getMonth() + 1) +
                '/' +
                date.getDate() +
                ' ' +
                date.getHours() +
                ':' +
                date.getMinutes()
              );
            }}
          />
          <Table.Column
            title="状态"
            dataIndex="brandStatus"
            cell={value => {
              return value === 1 ? '审核通过' : '待审核';
            }}
          />
          <Table.Column
            title="操作"
            width={200}
            dataIndex="oper"
            cell={renderOper}
          />
        </Table>
      </IceContainer>
    </div>
  );
};
export default GoodsTable;