// 业务消息授权
import React from 'react';
import { Row, Col, Card, Input, Button, Table, Select, message, Icon, Divider, Popconfirm } from 'antd';
import store from 'store';
import "assets/less/index.less";
import { $http } from 'containers/config/https';
import NewBusinessAuthorization from './component/NewBusinessAuthorization.jsx';

import 'assets/css/common.css';
import './style/index.less';

let { Option } = Select;

export default class BusinessMessageAuthorization extends React.Component {
  constructor() {
    super();
    this.state = {
      code: undefined,
      describe: undefined,
      tableData: [],
      hospID: undefined,
      tableWidth: 0,
      hospSelectData: [],
      rowID: "",
      businessAuthorizationList: []
    };
    this.columns = [
      {
        key: 1,
        title: '消息代码',
        dataIndex: 'code',
        align: "center",
        width: '15%'
      },
      {
        key: 2,
        title: '消息描述',
        dataIndex: 'descripts',
        align: "center",
        width: '10%'
      },
    ]
    this.columnsChild = [
      {
        key: 1,
        title: '医院描述',
        dataIndex: 'hospDesc',
        align: "center",
        width: '150px'
      },
      {
        key: 2,
        title: '消息描述',
        dataIndex: 'busMsgDesc',
        align: "center",
        width: '130px'
      },
      {
        key: 3,
        title: '短信消息',
        dataIndex: 'SMSMsg',
        align: "center",
        width: '130px'
      }, {
        key: 4,
        title: '短信主体代码',
        dataIndex: 'SMSMsgAppCode',
        align: "center",
        width: '130px'
      }, {
        key: 5,
        title: '短信主体模板代码',
        dataIndex: 'SMSMsgTemplateCode',
        align: "center",
        width: '130px'
      },
      {
        key: 6,
        title: '公众号消息',
        dataIndex: 'pubAccMsg',
        align: "center",
        width: '130px'
      },
      {
        key: 7,
        title: '公众号主体代码',
        dataIndex: 'PBMsgAppCode',
        align: "center",
        width: '130px'
      },
      {
        key: 8,
        title: '公众号模板代码',
        dataIndex: 'PBMsgTemplateCode',
        align: "center",
        width: '130px'
      },{
        key: 9,
        title: '小程序消息',
        dataIndex: 'minProgramMsg',
        align: "center",
        width: '130px'
      },
      {
        key: 10,
        title: '小程序主体代码息',
        dataIndex: 'MPMsgAppCode',
        align: "center",
        width: '130px'
      },
      {
        key: 11,
        title: '小程序模板代码',
        dataIndex: 'MPMsgTemplateCode',
        align: "center",
        width: '130px'
      },
      {
        key: 12,
        title: '支付宝消息',
        dataIndex: 'aliPayMsg',
        align: "center",
        width: '130px'
      },
      {
        key: 13,
        title: '支付宝主体代码',
        dataIndex: 'ALMsgAppCode',
        align: "center",
        width: '130px'
      },
      {
        key: 14,
        title: '支付宝主体模板代码',
        dataIndex: 'ALMsgTemplateCode',
        align: "center",
        width: '130px'
      },
      {
        key: 15,
        title: 'APP消息',
        dataIndex: 'appMsg',
        align: "center",
        width: '130px'
      },
      {
        key: 16,
        title: 'APP主体代码',
        dataIndex: 'AppMsgAppCode',
        align: "center",
        width: '130px'
      },
      {
        key: 17,
        title: 'APP主体模板代码',
        dataIndex: 'AppMsgTemplateCode',
        align: "center",
        width: '130px'
      },
       {
        title: '操作',
        key: 18,
        fixed:'right',
        align: "center",
        width: '150px',
        render: (text, record) => (
          <span>
            <Icon type="edit" style={{ color: '#108EE9' }}></Icon>
            <span className='span' onClick={() => this.handleAdd(record)}>编辑</span>
            {/* 分割线 */}
            <Divider type="vertical" />
            <Icon type="delete" style={{ color: 'rgba(240,65,52,1)' }}></Icon>
            <Popconfirm title="删除不可恢复，你确定要删除吗?" onConfirm={() => this.handleDelete(record)} >
              <span className='span' style={{ color: 'rgba(240,65,52,1)' }}>删除</span>
            </Popconfirm>
          </span>
        ),
      }
    ]
  }

  // 删除
  handleDelete(record) {
    // console.log(record)
    let data = {
      params: [{
        id: record.id,
      }]
    }
    $http.post('urlADS', this, {
      code: '03100172',
      data: data,
      success: function (res) {
        // console.log(res)
        if (+res.errorCode === 0) {
          message.success('删除成功');
          // 刷新列表数据
          this.getBusinessAuthorizationList();
        }
      }
    })
  }

  componentDidMount() {
    this.getHospSelectData();
    this.handleQuery();
  }

  // 查询条件 --- 代码
  onChangeCode = (e) => {
    this.setState({ code: e.target.value });
  }

  // 查询条件 --- 描述
  onChangeDescribe = (e) => {
    this.setState({ describe: e.target.value });
  }

  // 查询
  handleQuery = () => {
    this.getTableData();
  }

  getTableData = () => {
    let { code, describe } = this.state;
    let data = {
      params: [{
        code,
        desc: describe
      }]
    };
    $http.post('urlS', this, {
      code: '03100169',
      data: data,
      success: function (res) {
        if (+res.errorCode === 0) {
          this.setState({ tableData: res.result.rows })
        } else {
          this.setState({ tableData: [] })
        }
      }
    })
  }

  // 病区、病人行操作
  handleOnClickRowPublic = (record) => {
    return {
      // 单击行选中
      onClick: () => {
        this.setState({ rowID: record.id }, () => {
          this.getBusinessAuthorizationList();
        });
      }
    }
  }

  handleSetRowClassNamePublic = (record) => {
    return record.id === this.state.rowID ? 'clickRowStyle' : '';
  }

  getHospSelectData = () => {
    let data = {
      params: [{}]
    };
    $http.post('urlS', this, {
      code: '03100168',
      data: data,
      success: function (res) {
        if (+res.errorCode === 0 && res.hospital) {
          this.setState({ hospSelectData: res.hospital })
        } else {
          this.setState({ hospSelectData: [] })
        }
      }
    })
  }

  handleHospChange = e => {
    this.setState({ hospID: e }, () => {
      this.getBusinessAuthorizationList();
    })
  }

  // 获取业务授权列表
  getBusinessAuthorizationList = () => {
    let { hospID, rowID } = this.state;
    if (rowID === '') {
      message.error("请选择消息列表");
      return
    }
    let data = {
      params: [{
        hospID,
        busMessageID: rowID
      }]
    };
    $http.post('urlS', this, {
      code: '03100170',
      data: data,
      success: function (res) {
        if (+res.errorCode === 0) {
          this.setState({ businessAuthorizationList: res.result.rows })
        } else {
          this.setState({ businessAuthorizationList: [] })
        }
      }
    })
  }

  onRef = ref => {
    this.childRef = ref;
  }

  handleAdd = (obj) => {
    if (this.state.rowID === '') {
      message.error("请选择消息列表");
      return
    }
    console.log('fatherrowID', this.state.rowID)
    let { tableData, rowID } = this.state
    this.childRef.showModal(obj, rowID);
  }

  render() {
    let { code, describe, tableData, hospID, hospSelectData, businessAuthorizationList } = this.state;

    let hospOption = hospSelectData && hospSelectData.map((item, index) => {
      return (<Option key={index} value={item.id} title={item.descripts} seatchprop={item.descripts + '^' + item.descriptsSPCode}>{item.descripts}</Option>)
    })
    return (
      <div className="business-message-authorization">
        <Row>
          <Col span={8}>
            <Card
              size="small"
              title={<div className="card-title-left-icon"><div></div>业务消息列表</div>}
            >
              <div className="bma-left" style={{ height: store.getState().tableHeight.y + 204 + 'px' }}>
                <div className="bma-left-btn">
                  代码：<Input title="输入内容后可回车检索" placeholder="请输入( Enter )" value={code} style={{ width: '150px', marginRight: '20px' }} onChange={this.onChangeCode} onPressEnter={this.handleQuery} />
                  描述：<Input title="输入内容后可回车检索" placeholder="请输入( Enter )" value={describe} style={{ width: '150px', marginRight: '20px' }} onChange={this.onChangeDescribe} onPressEnter={this.handleQuery} />
                  <Button style={{ marginRight: '15px', background: 'rgba(255,255,255,1)' }} onClick={this.handleQuery}>查询</Button>
                </div>
                <div className="bma-left-table" style={{ height: "calc(100% - 57px)" }}>
                  <Table
                    dataSource={tableData}
                    columns={this.columns}
                    rowKey={record => record.id}
                    onRow={this.handleOnClickRowPublic}
                    rowClassName={this.handleSetRowClassNamePublic}
                    pagination={false}
                    bordered
                  />
                </div>
              </div>
            </Card>
          </Col>
          <Col span={16}>
            <div style={{ paddingLeft: '6px', position: 'relative' }}>
              <Card
                size="small"
                title={<div className="card-title-left-icon"><div></div>业务授权列表</div>}
              >
                <div className="bma-left" style={{ height: store.getState().tableHeight.y + 204 + 'px', overflow: 'auto' }}>
                  <div className="bma-left-btn">
                    医院： <Select value={hospID} onChange={this.handleHospChange} style={{ width: '150px' }} placeholder="请选择" showSearch optionFilterProp="seatchprop" allowClear>
                      {hospOption}
                    </Select>
                    <Button style={{ marginRight: '15px', background: 'rgba(247,128,93,1)', float: "right", color: "#fff" }} onClick={this.handleAdd}>新增</Button>
                  </div>
                  <div className="bma-left-table" style={{ height: "calc(100% - 57px)" }}>
                    <Table scroll={{ x: 2230 }} dataSource={businessAuthorizationList} columns={this.columnsChild} pagination={false} bordered />
                  </div>
                </div>
              </Card>
              <div style={{ width: '6px', background: 'rgba(240, 242, 245, 1)', position: 'absolute', top: 0, left: 0, height: '100%' }}></div>
            </div>
          </Col>
        </Row>
        <NewBusinessAuthorization onRef={this.onRef} getBusinessAuthorizationList={this.getBusinessAuthorizationList} />
      </div>
    )
  }
}