import React, {Component} from 'react';

import {
  Button,
  Tabs,
  Modal
} from 'antd';

import TopShixuninformation from './Shixuninformation';

import Configuration from './Configuration';

import LearningSettings from './LearningSettings';

import axios from 'axios';

import './css/TPMsettings.css';

const {TabPane} = Tabs;

// 处理整点 半点


export default class TPMsettings extends Component {
  constructor(props) {
    super(props)
    this.state = {}
  }


  componentDidMount() {

    let id = this.props.match.params.shixunId;

    let Url = `/shixuns/` + id + `/settings.json`;

    axios.get(Url).then((response) => {
      // alert(response.data.shixun.choice_standard_scripts)
      if (response.status === 200) {
        this.setState({
          data: response.data
        })
        if (response.data.shixun.multi_webssh === true) {
          this.setState({
            SelectTheCommandtype: true
          })
        } else {
          this.setState({
            SelectTheCommandtype: false
          })
        }
        if (response.data.shixun.scope_partment.length > 0) {
          this.setState({
            scopetype: true
          })
        }
      }

    });


    let departmentsUrl = `/shixuns/departments.json`;
    axios.get(departmentsUrl).then((response) => {
      if (response.status === 200) {
        if (response.data.message === undefined) {
          this.setState({
            departmentslist: response.data.shools_name
          });
        }
      }
    }).catch((error) => {
      console.log(error)
    });


  }

  operateshixuns = (value) => {
    this.setState({
      operateshixunstype: true,
      delType: value
    })
  }

  hideoperateshixuns = () => {
    this.setState({
      operateshixunstype: false
    })
  }


  shixunsdel = () => {
    let id = this.props.match.params.shixunId;
    let cul = `/shixuns/` + id + `.json`;

    axios.delete(cul).then((response) => {
      if (response.data.status === 1) {
        this.props.showSnackbar("操作成功");
        this.setState({
          operateshixunstype: false,
        });

        window.location.href = "/shixuns";
      }
    }).catch((error) => {
      console.log(error)
    })
  }

  shixunsclose = () => {
    let id = this.props.match.params.shixunId;
    let cul = `/shixuns/` + id + `/close.json`;
    axios.post(cul).then((response) => {
      if (response.data.status === 1) {
        this.props.showSnackbar("操作成功");
        this.setState({
          operateshixunstype: false,
        });

        window.location.href = "/shixuns/" + id + "/challenges";
      }
    }).catch((error) => {
      console.log(error)
    })
  }

  render() {

    return (

      <div>
        <style>
          {
            `
              .ant-tabs-bar{
                  width: 1200px;
                  margin: 0 auto;
                  background: #fff;
                  border-bottom: 0px;
                  margin-top: 30px!important;
              }
              `
          }
        </style>
        <Tabs tabBarExtraContent={
          <div className={"mb20 mr20"}>

            {
              this.props.identity < 5 && this.state.data && this.state.data.shixun.status == 0 ?
                <Button type="primary" ghost className={"Permanentban mr20"} onClick={() => this.operateshixuns(1)}>
                  删除实训
                </Button>
                : ""
            }
            {
              this.props.identity == 1 && this.state.data && this.state.data.shixun.status == 2 ?
                <Button type="primary" ghost className={"Permanentban mr20"} onClick={() => this.operateshixuns(1)}>
                  删除实训
                </Button> : ""
            }
            {
              this.props.identity === 1 && this.state.data && this.state.data.shixun.status == 2 ?
                <Button type="primary" ghost className={"Permanentban"} onClick={() => this.operateshixuns(2)}>
                  永久关闭
                </Button> : ""
            }
          </div>
        }>
          <TabPane tab="基本信息" key="1">
            <TopShixuninformation
              {...this.state}
              {...this.props}
            />
          </TabPane>
          <TabPane tab="权限配置" key="2">
            <Configuration
              {...this.state}
              {...this.props}
            />
          </TabPane>
          <TabPane tab="学习页面设置" key="3">
            <LearningSettings
              {...this.state}
              {...this.props}
            />
          </TabPane>
        </Tabs>
        <Modal
          keyboard={false}
          title="提示"
          visible={this.state.operateshixunstype}
          closable={false}
          footer={null}
        >
          <div className="task-popup-content">
            {this.state.delType === 1 ? <p className="task-popup-text-center font-16 pb20">是否确认删除 ？</p> :
              <p className="task-popup-text-center font-16 pb20">关闭后,<br/>用户不能再开始挑战了是否确认关闭 ？</p>}
          </div>
          <div className="task-popup-submit clearfix">
            <a onClick={this.hideoperateshixuns} className="task-btn fl">取消</a>
            {this.state.delType === 1 ? <a className="task-btn task-btn-orange fr" onClick={this.shixunsdel}>确定</a> :
              <a className="task-btn task-btn-orange fr" onClick={this.shixunsclose}>确定</a>}
          </div>
        </Modal>
      </div>

    );
  }
}