import React, { PureComponent } from 'react';
import { Tabs, Select, Input, Button, Modal, Alert } from 'antd';
import style from 'styled-components';

import PTable from '../../components/Pro/PTable';

import {
  taskSalaryTempCopyComSalaryTemp, //澶嶅埗浼佷笟钖叕妯℃澘
  taskSalaryTempDelComSalaryTemp //鍒犻櫎浼佷笟钖叕妯℃澘
} from '../../services/api';

const { TabPane } = Tabs;
// const dateFormat = 'YYYY-MM-DD';
const { Option } = Select;
const { confirm } = Modal;

export default class Template extends PureComponent {
  constructor(props, context) {
    super(props, context);
    this.state = {
      name: '',
      effectStatus: '',
      forceUpdate: false,
      pageParm: {
        pageSize: '10',
        pageNumber: '1',
        name: '',
        effectStatus: ''
      }
    };
  }

  componentDidMount = () => {
    // this.taskComSalaryPageForPersalary();
    // this.taskSalaryTempPageComSalaryTemp();
  };

  /*********************Ajax璇锋眰********************* */
  //澶嶅埗浼佷笟钖叕妯℃澘
  taskSalaryTempCopyComSalaryTemp = comSalaryTempId => {
    taskSalaryTempCopyComSalaryTemp({ comSalaryTempId }).then(
      res => {
        console.log(res, 'res');
        this.resetting();
      },
      err => {
        console.log('err', err);
      }
    );
  };

  //鍒犻櫎浼佷笟钖叕妯℃澘
  taskSalaryTempDelComSalaryTemp = comSalaryTempId => {
    taskSalaryTempDelComSalaryTemp({ comSalaryTempId }).then(
      res => {
        console.log(res, 'res');
        this.resetting();
      },
      err => {
        console.log('err', err);
      }
    );
  };

  //浜哄憳鏈堝害宸ヨ祫鍒嗛〉鏌ヨ
  // taskComSalaryPageForPersalary = () => {
  //   taskComSalaryPageForPersalary({}).then(
  //     res => {
  //       console.log(res, 'res');
  //     },
  //     err => {
  //       console.log('err', err);
  //     }
  //   );
  // };

  //浼佷笟钖叕妯℃澘鍒楄〃鍒嗛〉鏌ヨ
  // taskSalaryTempPageComSalaryTemp = () => {
  //   taskSalaryTempPageComSalaryTemp({}).then(
  //     res => {
  //       console.log(res, 'res');
  //     },
  //     err => {
  //       console.log('err', err);
  //     }
  //   );
  // };

  //澶嶅埗浼佷笟钖叕妯℃澘
  copyTemplate = comSalaryTempId => {
    this.taskSalaryTempCopyComSalaryTemp(comSalaryTempId);
  };

  //鍒犻櫎浼佷笟钖叕妯℃澘
  deleteTemplate = (comSalaryTempId, perNum) => {
    if (perNum > 0) {
      const self = this;
      confirm({
        title: '璇ユā鏉挎湁鍏宠仈浜哄憳锛岀‘璁よ鍒犻櫎锛�',
        content: (
          <span style={{ color: 'red' }}>宸茬敓鎴愮殑鏍哥畻鏁版嵁锛屼笉浼氳鍒犻櫎銆�</span>
        ),
        okText: '纭',
        cancelText: '鍙栨秷',
        onOk() {
          console.log('OK');
          self.taskSalaryTempDelComSalaryTemp(comSalaryTempId);
        },
        onCancel() {
          console.log('Cancel');
        }
      });
    } else {
      this.taskSalaryTempDelComSalaryTemp(comSalaryTempId);
    }
  };

  //杈撳叆妗嗙殑涔﹀啓
  inputKeywordChange = e => {
    console.log(e.target.value.trim());
    this.setState({ name: e.target.value.trim() });
  };

  handleChangeEffectStatus = value => {
    console.log(`selected ${value}`);
    this.setState({
      effectStatus: value
    });
  };

  //鐐瑰嚮鎼滅储
  search = () => {
    const pageParm = { ...this.state.pageParm };
    pageParm.name = this.state.name;
    pageParm.effectStatus = this.state.effectStatus;
    this.setState({ pageParm });
  };

  //閲嶇疆
  resetting = () => {
    this.setState(
      {
        name: '', //杈撳叆妗嗙殑鍊�
        effectStatus: '',
        forceUpdate: true
      },
      () => {
        this.search();
      }
    );
  };

  //琛ㄦ牸娓叉煋
  renderTable = () => {
    const columns = [
      {
        title: '妯℃澘鍚嶇О',
        dataIndex: 'name',
        key: 'name'
      },
      {
        title: '寮€濮嬫湀浠�',
        dataIndex: 'startYears',
        key: 'startYears'
      },
      {
        title: '缁撴潫鏈堜唤',
        dataIndex: 'endYears',
        key: 'endYears'
      },
      {
        title: '鐢熸晥鐘舵€�',
        dataIndex: 'effectStatus',
        key: 'effectStatus',
        render: (text, record) => (
          <span>
            {record.effectStatus === '鏈紑濮�' && (
              <span style={{ color: '#ccc' }}>{record.effectStatus}</span>
            )}
            {record.effectStatus === '浣跨敤涓�' && (
              <span style={{ color: '#080' }}>{record.effectStatus}</span>
            )}
            {record.effectStatus === '宸茶繃鏈�' && (
              <span style={{ color: '#f00' }}>{record.effectStatus}</span>
            )}
          </span>
        )
      },
      {
        title: '浣跨敤浜哄憳',
        dataIndex: 'perNum',
        key: 'perNum',
        render: (text, record) => <span> {record.perNum}浜�</span>
      },
      {
        title: '鎿嶄綔',
        dataIndex: 'operate',
        key: 'operate',
        render: (text, record) => (
          <div>
            <Opton
              onClick={() => {
                this.props.history.push(
                  `/salarymanagement/template/add/${record.comSalaryTempId}/1`
                );
              }}
            >
              缂栬緫
            </Opton>
            <Opton
              onClick={this.copyTemplate.bind(this, record.comSalaryTempId)}
            >
              澶嶅埗
            </Opton>
            <Opton
              onClick={this.deleteTemplate.bind(
                this,
                record.comSalaryTempId,
                record.perNum
              )}
            >
              鍒犻櫎
            </Opton>
          </div>
        )
      }
    ];
    return (
      <PTable
        style={{ marginTop: 20 }}
        columns={columns}
        url='taskSalaryTempPageComSalaryTemp'
        pageParm={this.state.pageParm}
        forceUpdate={this.state.forceUpdate}
        showTotal={total => `鍏辨悳绱犲埌${total}鏉¤褰昤}
      />
    );
  };

  render() {
    return (
      <Container>
        <Tabs>
          <TabPane tab='钖叕妯℃澘绠$悊' key='1' />
        </Tabs>
        <Alert
          message={
            <div style={{ color: '#f90' }}>
              <div>
                1銆佽柂閰ā鏉匡細闇€瑕佷负浜哄憳璁剧疆钖叕妯℃澘骞惰缃浉搴旂殑瑙勫垯鍚庯紝鎵嶅彲鏍规嵁瀵瑰簲鐨勮€冨嫟鏁版嵁璁$畻鐢熸垚钖叕鏁版嵁锛岀浉鍚屾湀浠借寖鍥村唴锛屼竴涓汉浠呴檺褰掑睘涓€涓柂閰ā鏉匡紱
              </div>
              <div>
                2銆佸鍒讹細绯荤粺鑷姩澶嶅埗宸叉湁钖叕妯℃澘璁剧疆鐨勮鍒欎俊鎭紝澶嶅埗鍚庤璋冩暣钖叕妯℃澘鍚嶇О鍙婅缃浉搴斾娇鐢ㄤ汉鍛橈紱
              </div>
              <div>
                3銆佸垹闄わ細妯℃澘鍒犻櫎鍚庯紝涓嶄細褰卞搷宸茬敓鎴愮殑钖叕鏍哥畻鏁版嵁锛屼絾璇峰敖蹇负鐩稿叧浜哄憳璁剧疆鏂版ā鏉匡紝浠ラ槻鏃犳硶鐢熸垚鏂扮殑鏍哥畻鏁版嵁銆�
              </div>
            </div>
          }
          type='warning'
          showIcon
          style={{ marginBottom: '15px' }}
        />
        <div className='searchpanel'>
          <span>妯℃澘鍚嶇О锛�</span>
          <Input
            style={{ marginBottom: '10px', width: '214px' }}
            onChange={this.inputKeywordChange}
            value={this.state.name}
            placeholder='璇疯緭鍏ユā鏉垮悕绉�'
            maxLength={50}
          />
          <span className='post'>鐢熸晥鐘舵€�:</span>
          <Select
            value={this.state.effectStatus}
            style={{ width: '214px', marginRight: '17px' }}
            onChange={this.handleChangeEffectStatus}
            placeholder='璇烽€夋嫨鐢熸晥鐘舵€�'
          >
            <Option value=''>鍏ㄩ儴</Option>
            <Option value='0'>鏈紑濮�</Option>
            <Option value='1'>浣跨敤涓�</Option>
            <Option value='2'>宸茶繃鏈�</Option>
          </Select>
          <Button
            style={{ marginRight: '17px', marginBottom: '16px' }}
            type='primary'
            onClick={this.search}
          >
            鎼滅储
          </Button>
          <Button style={{ marginBottom: '16px' }} onClick={this.resetting}>
            閲嶇疆
          </Button>
          <div className='btns'>
            <Button
              type='primary'
              onClick={() => {
                this.props.history.push(`/salarymanagement/template/add/00/1`);
              }}
            >
              鏂板妯℃澘
            </Button>
          </div>
        </div>
        {this.renderTable()}
      </Container>
    );
  }
}

const Container = style.div`
  padding:10px 24px 24px;
  width:100%;
  height:100%;
  font-size: 14px;
  color: rgba(0,0,0,0.65);
  .searchpanel{
    margin-bottom:16px;
   .post{
     margin:0 8px 0 16px;
   }
 }
`;

const Opton = style.span`{
  font-size: 12px;
  color: #0F71FF;
  cursor:pointer;
  margin-right:8px;
}`;