import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { FunAreaSelectPlus, FlvCom } from "../dist/index.js"
import axios from "axios"
import './App.css';
axios.defaults.baseURL = "http://192.168.10.144:8083"
export default class App extends Component {
  constructor() {
    super();
    this.state = {
      list: [],//可以设置初始值
      options: [],
      optionsTwo: [],
      valueOne: "",
      valueTwo: "",
      videoUrl: "",
      key:new Date().getTime()
    }
  }
  componentDidMount() {
    this.getOptionOne()
  }
  getdian(companyId, deviceId) {
    axios.get("/site_config/get", {
      params: {
        companyId: companyId,
        deviceId: deviceId
      }
    }).then(res => {
      var content = JSON.parse(res.data.resInfo.content)
      content = content.map(item => {
        return {
          id: item.id,
          mode: "react",
          title:"点位"+item.id,
          serviceData: this.getFenbial(JSON.parse(item.coordinate),"show")
        }
      })
      if(this.state.videoUrl !== res.data.resInfo.url){
        this.setState({ videoUrl: res.data.resInfo.url})
      }
      this.setState({ list: content ,key:new Date().getTime()})
    })
  }
  getFenbial(data, type) {
    var changeXPx = 1080, changeYPx = 1920;
    var width = document.getElementById("kuangneiCon11").offsetWidth;
    var height = document.getElementById("kuangneiCon11").offsetHeight;
    if (type === "show") {//展示
      return data.map(item => {
        return [((item[0] / changeXPx) * width).toFixed(2), ((item[1] / changeYPx) * height).toFixed(2)]
      })
    } else {//储存的时候
      return data.map(item => {
        return [((item[0] / width) * changeXPx).toFixed(2), ((item[1] / height) * changeYPx).toFixed(2)]
      })
    }

  }
  getOptionOne() {
    axios.get("/site_config/selectSite", {
      params: {
        companyId: "2fe2a70a-fa66-4233-9179-89e3531209d7"
      }
    }).then(res => {
      this.setState({ options: res.data.reInfo, valueOne: res.data.reInfo[0].companyId }, () => {
        this.getOptionTwo(res.data.reInfo[0].companyId)
      })
    })
  }
  getOptionTwo(companyId) {
    axios.get("/site_config/selectDevices", {
      params: {
        companyId: companyId
      }
    }).then(res => {
      this.setState({ optionsTwo: res.data.reInfo, valueTwo: res.data.reInfo[0].deviceId }, () => {
        this.getdian(this.state.valueOne, this.state.valueTwo)
      })
    })
  }
  changeSelect(val) {//修改完的list传到父组件中
    this.setState({
      list: val
    })
  }
  delete(selectIndex) {//删除的id会返回给父组件
    let { list } = this.state
    list = list.filter(item => item.id !== selectIndex)
    this.setState({ list: list })
  }
  err(falg, msg) {//当画布为空的时候，绘画进行行中的时候，会返回状态和错误的消息
    console.log(falg, msg)
  }
  optionsOneSelect(e) {
    this.getOptionTwo(e.target.value)
    this.setState({ valueOne: e.target.value })
  }
  optionsTwoSelect(e) {
    this.setState({ valueTwo: e.target.value }, () => {
      this.getdian(this.state.valueOne, this.state.valueTwo)
    })
  }
  baocun() {
    let { list, valueOne, valueTwo } = this.state;
    var content = list.map(item => {
      return {
        id: item.title?item.title.replace(/[^0-9]/ig,""):item.id,
        coordinate: JSON.stringify(this.getFenbial(item.serviceData))
      }
    })
    axios.post("/site_config/update", {
      companyId: valueOne,
      deviceId: valueTwo,
      content: JSON.stringify(content)
    }).then(res => {
      this.getdian(this.state.valueOne, this.state.valueTwo)
    })
  }
  wenziChange(val,index){
    let {list} = this.state;
    list[index].title = val;
    this.setState({list:list})
  }
  render() {
    let { list, options, optionsTwo, valueOne, valueTwo, videoUrl,key } = this.state
    return (
      <div>
        <div>
          <select value={valueOne} onChange={(e) => this.optionsOneSelect(e)}>
            {
              options.map(item => {
                return <option key={item.companyId} value={item.companyId}>{item.companyName}</option>
              })
            }
          </select>
          <select value={valueTwo} onChange={(e) => this.optionsTwoSelect(e)}>
            {
              optionsTwo.map(item => {
                return <option key={item.deviceId} value={item.deviceId}>{item.deviceName}</option>
              })
            }
          </select>
          <button onClick={() => { this.baocun() }}>保存</button>
        </div>
        <div id="kuangneiCon11" style={{ width: "800px", height: "500px" }}>
          <FlvCom vidoeUrl={videoUrl}></FlvCom>
          <FunAreaSelectPlus titleColor="#FFF"
          key={key}
          list={list} wenziChange={(val,index)=>this.wenziChange(val,index)}
          titleTextAlign="left"
          titleWidth="50"
          change={(val) => { this.changeSelect(val) }} delete={(selectIndex) => { this.delete(selectIndex) }} err={(falg, msg) => { this.err(falg, msg) }}></FunAreaSelectPlus>
        </div>
      </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('root'));