import React from 'react';
import Taro from '@tarojs/taro';
import { View } from '@tarojs/components';
import { Button, Popup, CellGroup, Cell, Field } from '@antmjs/vantui';
import { deleteTaIssue, postIssueRejct } from '@/services/taissue';
import { warn } from '@/utils/message';

export default (props) => {

  const { issue } = props;

  const [loading2, setLoading2] = React.useState(false);
  const [loading3, setLoading3] = React.useState(false);
  const [show, setShow] = React.useState(false);
  const [processResult, setProcessResult] = React.useState();
  
  const onDelete = () => {
    Taro.showModal({
      title: '删除',
      content: '确定进行删除操作?',
      success (res) {
        if (res.confirm) {
          setLoading2(true)
          deleteTaIssue(issue.issueId).then(() => {
            setLoading2(false);
            Taro.navigateBack({delta: 1});
          }).catch(() => {
            setLoading2(false);
          })
        }
      }
    })
  }

  const onReject = () => {
    try {
      warn(!processResult, '请填写退单理由')
    } catch (e) {
      return;
    }

    setShow(false);

    const data = {
      processResult,
      issueId: issue.issueId,
    }

    setLoading3(true)
    postIssueRejct(data).then(() => {
      setLoading3(false);
      Taro.navigateBack({delta: 1});
    }).catch(() => {
      setLoading3(false);
    })
  }
  
  return (
    <>
      <Popup position="bottom" show={show} onClose={() => setShow(false)}>
        <CellGroup>
          <Cell title="退单理由" />
          <Field
            type="textarea"
            placeholder="请输入退单理由"
            value={processResult}
            autosize={{ minHeight: '240px' }}
            onChange={e => setProcessResult(e.detail)}
          />
          <View style={{display: 'flex', justifyContent: 'space-around'}}>
            <Button plain type="default" onClick={() => setShow(false)}>取消</Button>
            <Button plain type="primary" onClick={onReject}>确定</Button>
          </View>
        </CellGroup>
      </Popup>
      <View style={{marginTop: '20px', display: 'flex'}}>
        <Button
          plain
          hairline
          type="danger"
          loading={loading2}
          disabled={loading3}
          style={{ flex: 1 }}
          onClick={onDelete}
        >删除</Button>
        <Button
          plain
          hairline
          type="info"
          loading={loading3}
          disabled={loading2}
          style={{ flex: 1, marginLeft: 'var(--main-space)' }}
          onClick={() => setShow(true)}
        >退单</Button>
      </View>
    </>
  )
}
