<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <a-form :form="form" slot="detail">
<!--        <a-row>       </a-row>-->
        <a-col :span="8">
          <div>
            <div id="myChart1" :style="{height: '400px'}" style="display: inline-block;width: 100%;margin-bottom:24px;"></div>
          </div>
        </a-col>
        <a-col :span="8">
          <div>
            <div id="myChart2" :style="{height: '400px'}" style="display: inline-block;width: 100%;margin-bottom:24px;"></div>
          </div>
        </a-col>
        <a-col :span="8">
          <div>
            <div id="myChart3" :style="{height: '400px'}" style="display: inline-block;width: 100%;margin-bottom:24px;"></div>
          </div>
        </a-col>
        <a-col :span="8">
          <div>
            <div id="myChart4" :style="{height: '400px'}" style="display: inline-block;width: 100%;margin-bottom:24px;"></div>
          </div>
        </a-col>
        <a-col :span="8">
          <div>
            <div id="myChart5" :style="{height: '400px'}" style="display: inline-block;width: 100%;margin-bottom:24px;"></div>
          </div>
        </a-col>
        <a-col :span="8">
          <div>
            <div id="myChart6" :style="{height: '400px'}" style="display: inline-block;width: 100%;margin-bottom:24px;"></div>
          </div>
        </a-col>
      </a-form>
    </j-form-container>
  </a-spin>
</template>

<script>

  import { httpAction, getAction } from '@api/manage'
  import pick from 'lodash.pick'
  import { validateDuplicateValue } from '@/utils/util'
  import JFormContainer from '@/components/jeecg/JFormContainer'
  import JDate from '@/components/jeecg/JDate'
  import JDictSelectTag from "@/components/dict/JDictSelectTag"
  import JSelectDevice from '@comp/jeecgbiz/JSelectDevice'

  export default {
    name: 'BuDeviceOnlineChartForm',
    components: {
      JFormContainer,
      JDate,
      JDictSelectTag,
      JSelectDevice,
    },
    props: {
      //流程表单data
      formData: {
        type: Object,
        default: ()=>{},
        required: false
      },
      //表单模式：true流程表单 false普通表单
      formBpm: {
        type: Boolean,
        default: false,
        required: false
      },
      //表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      },
    },
    data () {
      return {
        form: this.$form.createForm(this),
        model: {},
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        confirmLoading: false,
        validatorRules: {
        },
        url: {
          add: "/device/buDeviceOnline/add",
          edit: "/device/buDeviceOnline/edit",
          queryById: "/device/buDeviceOnline/queryById",
          chartStatistics: "device/buDeviceOnline/getChartSensor",
        }
      }
    },
    computed: {
      formDisabled(){
        if(this.formBpm===true){
          if(this.formData.disabled===false){
            return false
          }
          return true
        }
        return this.disabled
      },
      showFlowSubmitButton(){
        if(this.formBpm===true){
          if(this.formData.disabled===false){
            return true
          }
        }
        return false
      }
    },
    created () {
      //如果是流程中表单，则需要加载流程表单data
      this.showFlowData();
    },
    methods: {
      add () {
        this.edit({});
      },
      edit (record) {
        this.chartStatistics(record,"1");
        // this.form.resetFields();
        // this.model = Object.assign({}, record);
        // this.visible = true;
        // this.$nextTick(() => {
        //   this.form.setFieldsValue(pick(this.model,'time','deviceName','remindType','remind'))
        // })
      },
      //渲染流程表单数据
      showFlowData(){
        if(this.formBpm === true){
          let params = {id:this.formData.dataId};
          getAction(this.url.queryById,params).then((res)=>{
            if(res.success){
              this.edit (res.result);
            }
          });
        }
      },
      // submitForm () {
      //   const that = this;
      //   // 触发表单验证
      //   this.form.validateFields((err, values) => {
      //     if (!err) {
      //       that.confirmLoading = true;
      //       let httpurl = '';
      //       let method = '';
      //       if(!this.model.id){
      //         httpurl+=this.url.add;
      //         method = 'post';
      //       }else{
      //         httpurl+=this.url.edit;
      //          method = 'put';
      //       }
      //       let formData = Object.assign(this.model, values);
      //       console.log("表单提交数据",formData)
      //       httpAction(httpurl,formData,method).then((res)=>{
      //         if(res.success){
      //           that.$message.success(res.message);
      //           that.$emit('ok');
      //         }else{
      //           that.$message.warning(res.message);
      //         }
      //       }).finally(() => {
      //         that.confirmLoading = false;
      //       })
      //     }
      //
      //   })
      // },
      popupCallback(row){
        this.form.setFieldsValue(pick(row,'time','deviceName','remindType','remind'))
      },
      chartStatistics(data,level){
          this.$http.get(this.url.chartStatistics, { params: {name:data.deviceName, time:data.time, level:level,
                  item: "功率因数"} }).then(res => {
                  this.initChart("myChart1",res.result,'电压数据');
              })
          this.$http.get(this.url.chartStatistics, { params: {name:data.deviceName, time:data.time, level:level,
                  item: "功率因数"} }).then(res => {
                  this.initChart("myChart2",res.result,'电流数据');
              })
          this.$http.get(this.url.chartStatistics, { params: {name:data.deviceName, time:data.time, level:level,
                  item: "环境温湿度"} }).then(res => {
                  this.initChart("myChart3",res.result,'温度数据');
              })
          this.$http.get(this.url.chartStatistics, { params: {name:data.deviceName, time:data.time, level:level,
                  item: "环境温湿度"} }).then(res => {
                  this.initChart("myChart4",res.result,'湿度数据');
              })
          this.$http.get(this.url.chartStatistics, { params: {name:data.deviceName, time:data.time, level:level,
                  item: "环境噪声"} }).then(res => {
                  this.initChart("myChart5",res.result,'噪声数据');
              })
          this.$http.get(this.url.chartStatistics, { params: {name:data.deviceName, time:data.time, level:level,
                  item: "烟雾浓度"} }).then(res => {
                  this.initChart("myChart6",res.result,'烟雾数据');
              })
      },
      initChart(id,data,title){
        let myChart = this.$echarts.getInstanceByDom(document.getElementById(id));
        if (!myChart) {
          myChart = this.$echarts.init(document.getElementById(id));
        }
        let xData= [];
        let uData= [];
        let vData= [];
        let wData= [];
        let yData= [];
        function functionCount(data) {
          let ser = [];
          if (title.indexOf("电压") !== -1){
            for (let j=0; j<data.length; j++){
              xData.push(data[j].time);
              uData.push(data[j].udy);
              vData.push(data[j].vdy);
              wData.push(data[j].wdy);
            }
            let item1 = { name: 'U相电压', data: uData, type: 'line', smooth: true }
            let item2 = { name: 'V相电压', data: vData, type: 'line', smooth: true }
            let item3 = { name: 'W相电压', data: wData, type: 'line', smooth: true }
            ser.push(item1);
            ser.push(item2);
            ser.push(item3);
          }else if (title.indexOf("电流") !== -1){
            for (let j=0; j<data.length; j++){
              xData.push(data[j].time);
              uData.push(data[j].udl);
              vData.push(data[j].vdl);
              wData.push(data[j].wdl);
            }
            let item1 = { name: 'U相电流', data: uData, type: 'line', smooth: true }
            let item2 = { name: 'V相电流', data: vData, type: 'line', smooth: true }
            let item3 = { name: 'W相电流', data: wData, type: 'line', smooth: true }
            ser.push(item1);
            ser.push(item2);
            ser.push(item3);
          }else if (title.indexOf("温度") !== -1){
            for (let j=0; j<data.length; j++){
              xData.push(data[j].time);
              yData.push(data[j].wsd);
            }
            let item1 = { name: '温度', data: yData, type: 'line', smooth: true }
            ser.push(item1);
          }else if (title.indexOf("湿度") !== -1){
            for (let j=0; j<data.length; j++){
              xData.push(data[j].time);
              yData.push(data[j].sd);
            }
            let item1 = { name: '湿度', data: yData, type: 'line', smooth: true }
            ser.push(item1);
          }else if (title.indexOf("噪声") !== -1){
            for (let j=0; j<data.length; j++){
              xData.push(data[j].time);
              yData.push(data[j].zs);
            }
            let item1 = { name: '噪声', data: yData, type: 'line', smooth: true }
            ser.push(item1);
          }else if (title.indexOf("烟雾") !== -1){
            for (let j=0; j<data.length; j++){
              xData.push(data[j].time);
              yData.push(data[j].smoke);
            }
            let item1 = { name: '烟雾', data: yData, type: 'line', smooth: true }
            ser.push(item1);
          }
          return ser;
        }
        const myOptions = {
          title:{
            left:'center',
            text:title
          },
          tooltip: {
            trigger: 'axis',
          },
          xAxis: {
            type: 'category',
            data: xData,
          },
          yAxis: {
            type: 'value',
            min: function (data) {
              return data.min - 1;
            },
            max: function (data) {
              return data.max + 1;
            }
          },
          series: functionCount(data)
        };
        myChart.setOption(myOptions,true)
      },





    }
  }
</script>