<template>
  <div class="chart-container">
    <div class="filter">
      <div class="timeQuery">
        <el-button size="small" :loading="loading" @click="insert">新增</el-button>
      </div>
    </div>

    <div class="content">
      <div class="tableContent">
        <vxe-table
          id="xTable"
          ref="xTable"
          :loading="loading"
          auto-resize
          border
          resizable
          highlight-current-row
          show-overflow
          :header-cell-style="styleStr"
          max-height="90%"
          :cell-style="styleTableStr"
          align="center"
          :data="tableData">
          <vxe-table-column field="name" title="自定义报表名称" width="12%"></vxe-table-column>
          <vxe-table-column field="dq" title="短期配置(点位)" width="8%"></vxe-table-column>
          <vxe-table-column field="cdq" title="超短期配置(点位)" width="8%"></vxe-table-column>
          <vxe-table-column field="rp" title="实际功率配置" :formatter="rpFormat" width="14%"></vxe-table-column>
          <vxe-table-column field="nwp" title="nwp配置" :formatter="nwpFormat" width="14%"></vxe-table-column>
          <vxe-table-column field="env" title="实时环境数据配置" :formatter="envFormat" width="14%"></vxe-table-column>
          <vxe-table-column field="interval" title="时间间隔" :formatter="intervalFormat" width="12%"></vxe-table-column>
          <!-- <vxe-table-column field="isUpdate" title="是否修改" min-width="60"></vxe-table-column> -->
          <vxe-table-column field="timingRealTime" title="是否定时查询" :formatter="yesOrNoFormat"
                            width="8%"></vxe-table-column>
          <vxe-table-column width="150px" align="center" title="操作">
            <template v-slot="{ row }">
              <el-button
                style="padding: 3px 4px 3px 4px;margin: 2px"
                size="mini"
                icon="el-icon-edit"
                @click="editRowEvent(row)">编辑
              </el-button>
              <el-button
                type="danger"
                style="padding: 3px 4px 3px 4px;margin: 2px"
                size="mini"
                icon="el-icon-delete"
                @click="remove(row)">删除
              </el-button>
            </template>
          </vxe-table-column>
        </vxe-table>
        <!--                    <el-pagination-->
        <!--                    @size-change="handleSizeChange"-->
        <!--                    @current-change="handleCurrentChange"-->
        <!--                    :current-page="currentPage"-->
        <!--                    :page-sizes="[5, 10, 20, 40]"-->
        <!--                    :page-size="pageSize"-->
        <!--                    layout="total, sizes, prev, pager, next, jumper"-->
        <!--                    :total="tableData.length">-->
        <!--                    </el-pagination>-->
      </div>
    </div>
    <el-dialog
      title="导出内容配置"
      :visible.sync="dialogVisible"
      width="50%">
      <div class="drag-box-item">
        <el-form v-loading="tableLoading" ref="form" :model="form" :rules="rules"
                 style="margin-top: 20px;margin-right: 20px">
          <el-row style="gutter:30" class="row-bg el-row-two" justify="space-between">
            <el-col :span="12">
              <el-form-item label="短期：" prop="dq" label-width="150px" style="min-width: 110px">
                <el-select v-model="form.dq" filterable placeholder="请选择" style="width: 100%">
                  <el-option
                    v-for="item in this.dqOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"/>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="超短期：" prop="cdq" label-width="150px" style="min-width: 110px">
                <el-select v-model="form.cdq" filterable placeholder="请选择" style="width: 100%">
                  <el-option
                    v-for="item in this.cdqOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"/>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row style="gutter:30" class="row-bg el-row-two" justify="space-between">
            <el-col :span="12">
              <el-form-item label="nwp点位：" prop="nwpPoint" label-width="150px" style="min-width: 110px">
                <el-select v-model="form.nwpPoint" filterable placeholder="请选择" style="width: 100%">
                  <el-option
                    v-for="item in this.dqOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"/>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="nwp属性：" prop="nwpField" label-width="150px" style="min-width: 110px">
                <el-select v-model="form.nwpField" clearable multiple filterable placeholder="请选择" style="width: 100%">
                  <el-option
                    v-for="item in this.nwpOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"/>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row style="gutter:30" class="row-bg el-row-two" justify="space-between">
            <el-col :span="12">
              <el-form-item label="实际功率：" prop="rp" label-width="150px" style="min-width: 110px">
                <el-select v-model="form.rp" clearable multiple filterable placeholder="请选择" style="width: 100%">
                  <el-option
                    v-for="item in this.rpOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"/>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="环境数据：" prop="env" label-width="150px" style="min-width: 110px">
                <el-cascader
                  :options="eqOptions"
                  :props="props"
                  v-model="form.env"
                  clearable></el-cascader>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row style="gutter:30" class="row-bg el-row-two" justify="space-between">
            <el-col :span="12">
              <el-form-item label="时间间隔：" prop="interval" label-width="150px" style="min-width: 110px">
                <el-select v-model="form.interval" filterable placeholder="请选择" style="width: 100%">
                  <el-option
                    v-for="item in this.intervalOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"/>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="是否定时：" prop="timingRealTime" label-width="150px" style="min-width: 110px">
                <el-select v-model="form.timingRealTime" filterable placeholder="请选择" style="width: 100%">
                  <el-option
                    v-for="item in this.yesOrNoOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"/>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row style="gutter:30" class="row-bg el-row-two" justify="space-between">
            <el-col :span="24">
              <el-form-item label="自定义报表名称：" prop="name" label-width="150px" style="min-width: 110px">
                <el-input v-model="form.name" placeholder="必填项" maxlength="32"/>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
    <el-button @click="cancel" style="color: #1f2d3d">取 消</el-button>
    <el-button type="primary" style="color: #1f2d3d" @click="save(form,'form')">保 存</el-button>
  </span>
    </el-dialog>


  </div>
</template>

<script>
import draggable from 'vuedraggable'

export default {
  name: 'InverterTable',
  components: {draggable},
  data() {
    const nwpRule = (rule, value, callback) => {
      if (this.form.nwpField != null && this.form.nwpField != '') {
        if (this.form.nwpPoint == '' || this.form.nwpPoint == null)
          callback(new Error('nwp点位未填写不能填写nwp属性！！！'))
      }
      callback()
    }
    const nameRule = (rule, value, callback) => {
      if (this.form.name == null || this.form.name == '') {
        callback(new Error('自定义表名不能为空！！！'))
      } else {
        for (let i = 0; i < this.tableData.length; i++) {
          if (this.form.id == '' || this.form.id == undefined) {
            // 新增
            if ((this.form.name == this.tableData[i].name)) {
              callback(new Error('自定义表名不能重复'))
            }
          } else {
            // 修改
            if (this.form.id != this.tableData[i].id) {
              if (this.form.name == this.tableData[i].name) {
                callback(new Error('上报对象编号不能重复'))
              }
            }
          }
        }
      }
      callback()
    }
    return {
      styleStr:{},
      styleTableStr:{},
      tableLoading: false,
      loading: false,
      tableData: [],
      props: {multiple: true},
      dialogVisible: false,
      form: {},

      dqOptions: [
        {value: '', label: ''},
        {value: '1', label: '第1天'},
        {value: '2', label: '第2天'},
        {value: '3', label: '第3天'}
      ],
      cdqOptions: [
        {value: '', label: ''},
        {value: '1', label: '第1点'},
        {value: '2', label: '第2点'},
        {value: '3', label: '第3点'},
        {value: '4', label: '第4点'},
        {value: '5', label: '第5点'},
        {value: '6', label: '第6点'},
        {value: '7', label: '第7点'},
        {value: '8', label: '第8点'},
        {value: '9', label: '第9点'},
        {value: '10', label: '第10点'},
        {value: '11', label: '第11点'},
        {value: '12', label: '第12点'},
        {value: '13', label: '第13点'},
        {value: '14', label: '第14点'},
        {value: '15', label: '第15点'},
        {value: '16', label: '第16点'},
      ],
      nwpOptions: [
        {value: 't', label: '温度'},
        {value: 'rh', label: '湿度'},
        {value: 'pressure', label: '气压'},
        {value: 'swr', label: '短波辐射'},
        {value: 'lwr', label: '长波辐射'},
        {value: 'directRadiation', label: '直辐射'},
        {value: 'diffuseRadiation', label: '散辐射'},
        {value: 'senf', label: '热感通量'},
        {value: 'ws10', label: '10米风速'},
        {value: 'ws30', label: '30米风速'},
        {value: 'ws50', label: '50米风速'},
        {value: 'ws70', label: '70米风速'},
        {value: 'ws80', label: '80米风速'},
        {value: 'ws90', label: '90米风速'},
        {value: 'ws100', label: '100米风速'},
        {value: 'ws170', label: '170米风速'},
        {value: 'wd10', label: '10米风向'},
        {value: 'wd30', label: '30米风向'},
        {value: 'wd50', label: '50米风向'},
        {value: 'wd70', label: '70米风向'},
        {value: 'wd80', label: '80米风向'},
        {value: 'wd90', label: '90米风向'},
        {value: 'wd100', label: '100米风向'},
        {value: 'wd170', label: '170米风向'}
      ],
      rpOptions: [
        {value: 'realValue', label: '实际功率'},
        {value: 'ableValue', label: '可用功率'},
        {value: 'theoryValue', label: '理论功率'}
      ],
      intervalOptions: [
        {value: 1, label: '1分钟'},
        {value: 5, label: '5分钟'},
        {value: 15, label: '15分钟'}
      ],
      yesOrNoOptions: [
        {value: '1', label: '是'},
        {value: '0', label: '否'},
      ],
      electricField: {},
      equipments: [],
      eqOptions: [],
      rules: {
        nwpField: [{required: true, validator: nwpRule}],
        // rp: '',
        // eq: '',
        // env: '',
        interval: [{required: true, message: '不能为空', trigger: 'blur'}],
        timingRealTime: [{required: true, message: '不能为空', trigger: 'blur'}],
        name: [{required: true, validator: nameRule}]
      },
      equipmentAttributes: []
    }
  },
  created() {
    this.getEqOptions()
    if(sessionStorage.getItem('styleSwitch') === 'blue'){
      this.styleStr = {background:'black',color:'white',border:'white'}
      this.styleTableStr = {background:'black',color:'white'}
    }
  },
  methods: {

    getEqOptions() {
      this.$axios.get("customReportForm/findEqOptions").then(res => {
        const option = res.data
        this.eqOptions = []
        for (let i = 0; i < option.length; i++) {
          this.eqOptions.push(
            {
              value: option[i].eq.id,
              label: option[i].eq.name,
              children: []
            }
          )

          for (let j = 0; j < option[i].eqf.length; j++) {
            this.eqOptions[i].children.push(
              {
                value: option[i].eqf[j].fieldName,
                label: option[i].eqf[j].explanation,
              }
            )
          }
        }
        this.$axios.get("customReportForm/findEquipmentAttributeByEqType").then(res => {
          this.equipmentAttributes = res.data
          this.getAll()
        })

      })


    },
    getAll() {
      this.loading = true
      this.$axios.get("customReportForm/findAll").then(res => {
        this.tableData = res.data
        this.loading = false
      })
    },
    cancel() {

      this.dialogVisible = false
    },
    save(saveForm, formName) {

      var env = '';

      var temp = ''
      for (let i = 0; i < saveForm.env.length; i++) {
        if (temp != saveForm.env[i][0]) {
          env += saveForm.env[i][0] + ','
          temp = saveForm.env[i][0]
        }
        env += saveForm.env[i][1] + ','
        if (i + 1 < saveForm.env.length && temp != saveForm.env[i + 1][0]) {
          env += '|'
        }
      }


      this.$refs[formName].validate((valid) => {
        if (valid) {
          const savebody = {
            id: saveForm.id,
            rp: saveForm.rp.toString(),
            name: saveForm.name,
            dq: saveForm.dq,
            cdq: saveForm.cdq,
            nwp: saveForm.nwpPoint != '' ? saveForm.nwpPoint + ',' + saveForm.nwpField : '',
            env: env,
            interval: saveForm.interval,
            isUpdate: true,
            timingRealTime: saveForm.timingRealTime
          }

          this.$axios.post("customReportForm/save", savebody).then(res => {
            this.dialogVisible = false
            this.form = {}
            this.getAll()
            this.$XModal.message({status: 'warning', message: "保存成功！！！"})
          })
        } else {

        }
      })


    },
    nwpFormat({cellValue}) {
      var arr = cellValue.split(",")

      for (let i = 0; i < arr.length; i++) {
        for (let j = 0; j < this.nwpOptions.length; j++) {
          if (arr[i] == this.nwpOptions[j].value) {
            arr[i] = this.nwpOptions[j].label
          }
        }
      }
      return arr.toString()
    },
    rpFormat({cellValue}) {
      var arr = cellValue.split(",")

      for (let i = 0; i < arr.length; i++) {
        for (let j = 0; j < this.rpOptions.length; j++) {
          if (arr[i] == this.rpOptions[j].value) {
            arr[i] = this.rpOptions[j].label
          }
        }
      }
      return arr.toString()
    },
    intervalFormat({cellValue}) {

      for (let j = 0; j < this.intervalOptions.length; j++) {
        if (cellValue == this.intervalOptions[j].value) {
          cellValue = this.intervalOptions[j].label
        }
      }
      return cellValue
    },
    yesOrNoFormat({cellValue}) {

      for (let j = 0; j < this.yesOrNoOptions.length; j++) {
        if (cellValue == this.yesOrNoOptions[j].value) {
          cellValue = this.yesOrNoOptions[j].label
        }
      }
      return cellValue
    },
    envFormat({cellValue}) {
      var arr = cellValue.split(",")
      for (let i = 0; i < arr.length; i++) {

        for (let j = 0; j < this.eqOptions.length; j++) {
          if (arr[i] == this.eqOptions[j].value) {
            arr[i] = this.eqOptions[j].label

          }
          if (arr[i].indexOf('|') == 0) {
            var a = arr[i].split("|")
            if (a[1] == this.eqOptions[j].value) {
              arr[i] = this.eqOptions[j].label
            }
          }
        }
        for (let j = 0; j < this.equipmentAttributes.length; j++) {
          if (arr[i] == this.equipmentAttributes[j].fieldName) {
            arr[i] = this.equipmentAttributes[j].explanation
          }
        }
      }
      return arr.toString()
    },
    editRowEvent(row) {

      var a = []
      var arr = row.env.split("|")
      for (let i = 0; i < arr.length; i++) {
        var ar = arr[i].split(",")
        for (let j = 1; j < ar.length; j++) {
          if (ar[j] != '') {
            a.push([ar[0], ar[j]])
          }

        }
      }

      this.form = {
        id: row.id,
        name: row.name,
        cdq: row.cdq+"",
        dq: row.dq+"",
        nwpPoint: row.nwp != '' ? row.nwp.split(",")[0] : '',
        nwpField: row.nwp != '' ? row.nwp.substring(2, row.nwp.length).split(",") : '',
        rp: row.rp != '' ? row.rp.split(",") : '',
        env: row.env != '' ? a : '',
        interval: row.interval,
        isUpdate: 1,
        timingRealTime: row.timingRealTime
      }
      this.dialogVisible = true
    },
    remove(row) {
      this.$XModal.confirm(`您确定要删除?`).then(type => {
        if (type === 'confirm') {
          this.$axios.delete('/customReportForm/' + row.id).then(response => {
            this.$XModal.message({status: 'warning', message: "删除成功！！！"})
            this.getAll()
          })
        }
      })
    },
    insert() {
      this.dialogVisible = true
      this.form = {
        dq: '',
        cdq: '',
        nwpPoint: '',
        nwpField: '',
        rp: '',
        eq: '',
        env: '',
        interval: '',
        isUpdate: 1,
        timingRealTime: '',
        name: ''
      }
    }
  }
}
</script>

<style scoped>
/*.chart-container {*/
  /*position: relative;*/
  /*width: 100%;*/
  /*height: calc(100vh - 50px);*/
/*}*/

/*.filter {*/
  /*position: relative;*/
  /*display: flex;*/
  /*padding: 20px 0 10px 15px;*/
  /*font-size: 12px;*/
  /*line-height: 11px;*/
  /*color: white;*/
  /*width: 100%;*/
  /*background-color: transparent;*/
  /*height: 10%;*/
/*}*/

/*input {*/
  /*background: transparent;*/
  /*border: none;*/
  /*color: white;*/
/*}*/


/*.timeQuery {*/
  /*margin-left: 0%;*/
  /*background: transparent;*/
/*}*/

/*.el-button {*/
  /*background: transparent;*/
  /*color: white;*/
/*}*/

/*.filter >>> input {*/
  /*background: transparent;*/
  /*border: none;*/
  /*color: white;*/
/*}*/

/*.tableContent {*/
  /*width: 100%;*/
  /*height: calc(80vh - 50px);*/
/*}*/

/*.tableContent >>> td {*/
  /*border: 1px solid #ffffff;*/
/*}*/

/*.content {*/
  /*width: 100%;*/
  /*background-color: transparent;*/
  /*height: 90%;*/
  /*padding-left: 5px;*/
  /*padding-right: 5px;*/
/*}*/

/*.content >>> .el-tabs__item {*/
  /*color: white;*/
/*}*/

/*.content >>> .el-tabs__item.is-active {*/
  /*color: #409EFF;*/
/*}*/

/*.content >>> .vxe-button.type--button.is--circle {*/
  /*padding: 0 .5em;*/
  /*min-width: 34px;*/
  /*border-radius: 10%;*/
  /*border: none;*/
  /*background: transparent;*/
  /*color: white;*/
/*}*/


.item-title {
  padding: 8px 8px 8px 12px;
  font-size: 14px;
  line-height: 1.5;
  color: #24292e;
  font-weight: 600;
}

.drag-box-item {
  /*margin:10px;*/
  flex: 1;
  height: 100%;
  max-width: 100%;
  min-width: 100%;
  background-color: #eff1f5;
  margin-right: 16px;
  border-radius: 6px;
  border: 1px #e1e4e8 solid;
}

.grid > > tr {
  border: 1px solid;
}

.el-carousel__indicators .el-carousel__indicators--horizontal .el-carousel__indicators--labels {
  text-align: right;
}
</style>
<style>
.gridTable {
  margin-top: 3%;
  z-index: 1000;
}

.tableContent .el-carousel__indicators--labels {
  left: 0;
  right: 0;
  height: 3%;
  -webkit-transform: none;
  transform: none;
  text-align: center;
  position: absolute;
  top: 0px;
}
</style>

