2021-11-11

/*
 * @Author: zhipeng.zhao@hand-china.com
 * @Date: 2021-08-30 19:13:09
 * @LastEditors: zhipeng.zhao@hand-china.com
 * @LastEditorTime: do not edit
 * @Description:
 * @FilePath: \hzero-lov\packages\hzero-value-list\src\pages\value-set-view-config\components\LovViewList.js
 */

import React, { Component } from 'react';
import { withRouter } from 'react-router';
import { Header, Content } from 'components/Page';
import { Button } from 'components/Permission';
import { DataSet, Table, Modal, TextField, IntlField, Form, Lov } from 'choerodon-ui/pro';
import { enableRender } from 'hzero-front/lib/utils/renderer';
import { Popover, Icon } from 'choerodon-ui';
import getLovViewListDsProps from '../store/getLovViewListDsProps';
import getLovViewDetailDsProps from '../store/getLovViewDetailProps';
import getLovPreviewDsProps from '../store/getLovPreviewDsProps';
import intl from 'utils/intl';
import formatterCollections from 'utils/intl/formatterCollections';
import getLovValuedsProps from '../store/getLovValuedsProps';
import { getCurrentRole } from 'utils/utils';
import { TablePermission } from 'components/Permission';

const role = getCurrentRole().name;
const { Column } = Table;
@formatterCollections({
  code: ['hpfm.lov'],
})
class LovViewList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      ifBtnShow: 'none',
    };
  }
  componentDidMount() {
    if (role == '平台管理员' || role == 'Site Administrator') {
      this.setState({ ifBtnShow: 'inline' });
    }
  }
  //定义ds
  LovViewDetailDs = new DataSet(getLovViewDetailDsProps());
  LovViewListDs = new DataSet(getLovViewListDsProps());

  /**
   * @description: 点击跳转配置详情
   * @param {*}
   * @return {*}
   */
  handletoDetail = () => {
    this.props.history.push({
      pathname: `/hzero-32945/lov-view/detail/${this.LovViewListDs.current.data.viewHeaderId}`,
      record: this.LovViewListDs.current,
    });
  };
  /**
   * @description: 点击删除值集配置
   * @param {*}
   * @return {*}
   */
  handleDeleteLovView = () => {
    this.LovViewListDs.delete(this.LovViewListDs.current);
  };
  //预览冒泡卡片的内容
  content = (
    <>
      <div
        style={{
          width: '40px',
          height: '30px',
          textAlign: 'center',
          cursor: 'pointer',
          lineHeight: '-15px',
        }}
        onClick={this.handleDeleteLovView}
      >
        {intl.get('hzero.common.button.delete').d('删除')}
      </div>
      <div
        style={{
          width: '40px',
          height: '30px',
          textAlign: 'center',
          cursor: 'pointer',
          lineHeight: '30px',
        }}
        onClick={() => this.hanldToPreview(this.LovViewListDs.current)}
      >
        {intl.get('hzero.common.button.preview').d('预览')}
      </div>
    </>
  );

  /**
   * @description: 点击预览
   * @param {*}record
   * @return {*}
   */
  hanldToPreview = (record) => {
    const LovValueDs = new DataSet(
      getLovValuedsProps(record.get('tenantId'), record.get('viewCode'))
    );
    LovValueDs.ready().then((res) => {
      if (res) {
        this.LovViewListDs.addField('preview1', {
          lovPara: { enabledFlag: 1, tenantId: 0 },
          type: 'object',
          lovCode: LovValueDs.records[0].get('lovCode'),
          lovQueryUrl: LovValueDs.records[0].get('queryUrl'),
          lovDefineUrl: LovValueDs.records[0].get('queryUrl'),
        });
      }
    });
    this.Lov.onClick();
  };
  /**
   * @description: 复制值集
   * @param {*}record
   * @return {*}
   */
  handlecopyLovView = (record) => {
    const LovPreviewDs = new DataSet(
      getLovPreviewDsProps(
        record.get('lovName'),
        record.get('tenantId'),
        record.get('viewCode'),
        record.get('viewHeaderId')
      )
    );
    Modal.open({
      title: intl.get('hpfm.valueList.view.title.copyValue').d('复制值集视图'),
      children: (
        <Form dataSet={LovPreviewDs}>
          <Lov name="tenantObj" required></Lov>
        </Form>
      ),
      onOk: async () => LovPreviewDs.submit(),
    });
  };
  /**
   * @description: 编辑回调
   * @param {*}record
   * @return {*}
   */
  handleListRenderer = ({ record }) => {
    const btns = [];
    if (!record.get('enabledFlag')) {
      btns.push([
        <div style={{ display: 'flex' }}>
          <Popover content={intl.get('hzero.common.config').d('配置')}>
            <a
              style={{ marginRight: 60 }}
              class="action-link-item-2 hzero-permission-btn"
              onClick={this.handletoDetail}
            >
              {intl.get('hzero.common.config').d('配置')}
            </a>
          </Popover>
          <Popover content={intl.get('hzero.common.button.copy').d('复制')}>
            <a
              style={{ display: this.state.ifBtnShow, marginRight: 60 }}
              onClick={() => this.handlecopyLovView(record)}
              class="action-link-item-2 hzero-permission-btn"
            >
              {intl.get('hzero.common.button.copy').d('复制')}
            </a>
          </Popover>
          <Popover placement="bottom" content={this.content}>
            <a class="action-link-item-2 hzero-permission-btn" style={{ position: 'relative' }}>
              {intl.get('hzero.common.button.action').d('操作')}
              <Icon type="keyboard_arrow_down" />
            </a>
          </Popover>
        </div>,
      ]);
    } else {
      btns.push([
        <div style={{ display: 'flex' }}>
          <Popover content={intl.get('hzero.common.config').d('配置')}>
            <a
              style={{ marginRight: 60 }}
              class="action-link-item-2 hzero-permission-btn"
              onClick={this.handletoDetail}
            >
              {intl.get('hzero.common.config').d('配置')}
            </a>
          </Popover>
          <Popover content={intl.get('hzero.common.button.copy').d('复制')}>
            <a
              style={{ display: this.state.ifBtnShow, marginRight: 60 }}
              onClick={() => this.handlecopyLovView(record)}
              class="action-link-item-2 hzero-permission-btn"
            >
              {' '}
              {intl.get('hzero.common.button.copy').d('复制')}
            </a>
          </Popover>
          <Lov
            style={{ display: 'none' }}
            dataSet={this.LovViewListDs}
            ref={(e) => (this.Lov = e)}
            name="preview1"
          >
            {intl.get('hzero.common.button.preview').d('预览')}
          </Lov>
          <Popover content={intl.get('hzero.common.button.preview').d('预览')}>
            <a onClick={() => this.hanldToPreview(record)}>
              {intl.get('hzero.common.button.preview').d('预览')}
            </a>
          </Popover>
        </div>,
      ]);
    }

    return [<span>{btns}</span>];
  };
  /**
   * @description: 新增视图
   * @param {*}
   * @return {*}
   */
  create = () => {
    const currentRecord = this.LovViewDetailDs.create();
    const ok = () => {
      this.LovViewDetailDs.submit().then((res) => {
        if (res) {
          this.props.history.push({
            pathname: `/hzero-32945/lov-view/detail/${res.content[0].viewHeaderId}`,
            query: this.LovViewDetailDs.current,
          });
        }
      });
    };
    Modal.open({
      title: intl.get('hzero.common.view.title.create').d('新建'),
      drawerBorder: false,
      drawer: true,
      destroyOnClose: true,
      drawerTransitionName: 'slide-left',
      closable: true,
      onOk: ok,
      children: (
        <Form useColon dataSet={this.LovViewDetailDs} record={currentRecord}>
          <TextField name="viewCode" required />
          <IntlField name="viewName"></IntlField>
          <TextField name="valueField" required />
          <TextField name="displayField" required />
          <Lov name="tenantObj" required />
          <Lov name="lovObj" required />
          <div style={{ height: '200px' }}></div>
        </Form>
      ),
    });
  };
//   columns = [
//     {
//       name: 'tenantName',
//     },
//     {
//       name: 'viewCode',
//     },
//     {
//       name: 'viewName',
//     },
//     {
//       name: 'lovCode',
//     },
//     {
//       name: 'lovName',
//     },
//     // {
//     //     permissionList: [
//     //       {
//     //         code: `${this.props.match.path}.table.enabledFlag`,
//     //         type: 'table',
//     //         meaning: '值集视图配置-状态',
//     //       },
//     //     ],
//     //     title: '111111',
//     //     dataIndex: 'enabledFlag',
//     //     name:'enabledFlag'
//     //   },
//     {
//       name: 'enabledFlag',
//       renderer: ({ value }) => enableRender(value),
//       align: 'center',
//     },
//     {
//       header: intl.get('hzero.common.button.action').d('操作'),
//       renderer: this.handleListRenderer,
//       lock: 'right',
//       align: 'center',
//     },
//   ];
  render() {
    return (
      <>
        <Header title={intl.get('hpfm.lov.view.message.title.lovSetting').d('值集视图配置')}>
          <Button
            style={{ backgroundColor: 'rgb(30, 50, 85)', color: 'white' }}
            onClick={this.create}
          >
            <Icon type="add" />
            {intl.get('hzero.common.button.new').d('新建')}
          </Button>
        </Header>
        <Content>
            <Table selectionMode="none" dataSet={this.LovViewListDs} virtualSpin={true}>
              <Column name="tenantName"></Column>
              <Column name="viewCode"></Column>
              <Column name="viewName"></Column>
              <Column name="lovCode"></Column>
              <Column name="lovName"></Column>
              <Column name="enabledFlag" align='center' renderer={({ value }) => enableRender(value) }/>
              <Column
                header={intl.get('hzero.common.button.operator').d('操作')}
                align="center"
                renderer={this.handleListRenderer}
                lock="right"
              ></Column>
            </Table>
        </Content>
      </>
    );
  }
}
export default withRouter(LovViewList);