<template>
  <div class="warn-set-modal">
    <br/>
    <el-table
      :data="tableData"
      height="100%"
      :header-cell-style="{
        background: '#BFBFBF',
        boxShadow: 'inset grey 0px -1px',
        color: '#333333',
        borderColor: '#eaeaea',
        fontSize: '20px',
        padding: '12px 0',
      }"
      :cell-style="{
        color: '#333333',
        borderColor: '#919191',
        fontSize: '18px',
        backgroundColor: '#ebebeb',
      }"
      @cell-dblclick="tabClick"
      row-key="id"
      border
      stripe
      style="width: 100%;background-color: inherit;min-height: 800px;">
      <el-table-column
        label="名称"
        prop="entityName"
        class-name="first-column"
        align="center"
        width="200px"
      />
      <el-table-column
        v-for="(item, index) in tableColumns"
        :key="index"
        :column-key="item.prop"
        :label="item.label"
        :width="item.width"
        :class-name="item.className ? item.className : 'table-meter-row'"
        align="center"
      >

        <el-table-column
          label="下限值"
          :prop="item.prop + 'warnMinValue'"
          align="center"
        >
          <template slot-scope="scope">
            <div v-if="rowId === scope.row.id">
              <el-input v-model="scope.row[item.prop + 'warnMinValue']"/>
            </div>
            <div v-else>{{ scope.row[item.prop + 'warnMinValue'] }}</div>
          </template>
        </el-table-column>
        <el-table-column
          label="上限值"
          :prop="item.prop + 'warnMaxValue'"
          align="center"
        >
          <template slot-scope="scope">
            <div v-if="rowId === scope.row.id">
              <el-input v-model="scope.row[item.prop + 'warnMaxValue']"/>
            </div>
            <div v-else>{{ scope.row[item.prop + 'warnMaxValue'] }}</div>
          </template>
        </el-table-column>

      </el-table-column>
      <el-table-column label="操作" align="center" width="140px">
        <template slot-scope="scope">
          <div style="display: flex;">
            <el-button
              v-if="rowId === scope.row.id"
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">
              确定
            </el-button>
            <el-button
              v-if="rowId === scope.row.id"
              size="mini"
              @click="handleCancel(scope.$index, scope.row)"
              style="margin-left: 8px"
            >
              取消
            </el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { findEntityByAcqId } from '@/api/CollectEntity'
import { updateThreshold } from '@/api/CollectEntityTag'
import { findTableColumnsNotStatus } from '@/api/TableConfig'

import { mapState } from 'vuex'

export default {
  name: 'WarnSetModal',
  data () {
    return {
      rowId: null,
      tableColumns: [],
      tableData: [],
    }
  },
  computed: {
    ...mapState({
      acquisitionStationId: state => state.company.acquisitionStationId,
    }),
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    //更新数据表格数据
    async fetchData() {
      await findTableColumnsNotStatus().then(res => {
        if (res && res.code === '200') {
          const columns = res.data.filter(e => e.prop !== 'second' && e.prop !== 'remark')
          const tableColumns = []
          for (const item of columns) {
            tableColumns.push({
              label: item.label,
              prop: item.prop
            })
          }
          this.tableColumns = tableColumns
        }
      })
      const params = {
        acquisitionStationId: this.acquisitionStationId
      }
      await findEntityByAcqId(params).then(res => {
        console.log('根据采集站Id查询所有采集实体 =>', res.data)
        this.tableData.length = 0
        for (const entity of res.data) {
          const obj = {
            id: entity.id,
            entityName: entity.entityName,
          }
          for (const e of entity.collectEntityTagVoList) {
            if (e.tableColumn !== 'FEEDBACK') {
              // columnsMap.set(e.tableColumn, { label: e.desc + '(' + e.unit + ')', prop: e.tableColumn })
              obj[e.tableColumn + 'warnMinValue'] = e.warnMinValue
              obj[e.tableColumn + 'warnMaxValue'] = e.warnMaxValue
              obj.tagId = e.id
              obj.tableColumn = e.tableColumn
            }
          }
          this.tableData.push(obj)
        }
      })
    },
    onTabChange (record) {
      this.currentTab = record.name
      this.handleCancel()
      // console.log('onTabChange =>', record)
    },
    tabClick(row, column, cell, event) {
      // console.log('column =>', column, 'row =>', row)
      if (this.rowId) {
        this.fetchData()
      }
      this.rowId = row.id
    },
    handleEdit(index, row) {
      console.log('handleClick =>', index, row)
      this.rowId = null
      const arr = []
      for (const key in row) {
        if (key.length > 12) {
          if (key.substring(key.length - 12) === 'warnMinValue') {
            const tableColumn = key.substring(0, key.length - 12)
            arr.push({
              collectEntityId: row.id,
              tableColumn,
            })
          }
        }
      }
      for (const params of arr) {
        params.warnMinValue = row[params.tableColumn + 'warnMinValue']
        params.warnMaxValue = row[params.tableColumn + 'warnMaxValue']
      }
      console.log('params =>', arr)
      updateThreshold(arr).then(res => {
        console.log('修改报警阈值 =>', res)
        this.fetchData()
      })
    },
    handleCancel() {
      this.rowId = null
      this.fetchData()
    },
  },
}
</script>

<style lang="less" scoped>
  .warn-set-modal {
    width: 100%;
    height: 90vh;
    font-size: 16px;
    display: flex;
    flex-direction: column;

    /deep/ .el-input__inner {
      background-color: #ebebeb;
      box-shadow: inset 0.1rem 0.1rem 0.1rem #AAA7A7, inset -0.1rem -0.1rem 0.1rem #FFFFFF;
      border: none;
      font-size: 16px;
      color: #333333;
    }

    /deep/ .el-input-group__append, .el-input-group__prepend {
      background-color: transparent;
      font-size: 14px;
      box-shadow: 0.1rem 0.1rem 0.1rem #aaa7a7, -0.05rem -0.05rem 0.05rem #FFFFFF;
      color: #333333;
      border: none;
      border-radius: 4px;
      padding: 0 10px;
      width: 1px;
      white-space: nowrap;
    }

    /deep/ .el-table {
      box-shadow: 0.05rem 0.05rem 0.1rem #AAA7A7, 0.05rem 0.05rem 0.1rem #FFFFFF;

      .cell {
        white-space: pre-line;
      }
    }

    /deep/ .el-table--border, .el-table--group {
      border-radius: 10px;
    }

    /deep/ .el-table__row {
      .first-column {
        background-color: #d9d9d9 !important;
        box-shadow: inset #BFBFBF -1px -1px !important;
      }

      .table-meter-row {
        padding: 16px 40px;
        .cell {
          padding: 0;
          background-color: #ebebeb;
          box-shadow: inset 0.1rem 0.1rem 0.1rem #AAA7A7, inset -0.1rem -0.1rem 0.1rem #FFFFFF;
        }
      }
    }

    .el-button {
      border: none;
      background-color: #d9d9d9;
      box-shadow: 0.05rem 0.1rem 0.1rem #AAA7A7, -0.05rem -0.1rem 0.1rem #FFFFFF;
      margin: 3px 0;
    }

    .el-button:active {
      border: none;
      background-color: #A20D13;
      box-shadow: inset 0.1rem 0.1rem 0.2rem #6E090C, inset -0.1rem -0.1rem 0.2rem #c7494d;
    }

    .el-button:focus, .el-button:hover {
      color: #FFF;
      border-color: transparent;
      background-color: #A20D13;
    }
  }
</style>
