<template>
  <el-card>
    <div class="main">
      <span class="show-text">设备:</span>
      <el-select v-model="clickOpName" clearable filterable placeholder="请选择工位号" style="width: 200px;margin-right: 10px"
        @change="getAllData()">
        <el-option v-for="item in OpNameList" :key="item.value" :label="item.label" :value="item.value" size="mini" />
      </el-select>
      <el-tabs v-model="activeName" style="margin-top: 10px" type="card">
        <el-tab-pane label="参数设置" name="active1">
          <div>
            <el-button :disabled="loading" icon="el-icon-search" plain style="margin-left: 48vw" type="primary"
              @click="getTable()">查询
            </el-button>
          </div>
          <div class="tableList">
            <div class="item">
              <el-table v-loading="loading" :data="tableData1" border element-loading-background="rgba(0, 0, 0, 0.2)"
                element-loading-spinner="el-icon-loading" element-loading-text="数据加载中" height="70vh" size="mini"
                tooltip-effect="dark">
                <el-table-column align="center" label="序号" width="80">
                  <template slot-scope="scope">
                    {{ scope.row.排序 }}
                  </template>
                </el-table-column>
                <el-table-column align="center" label="绑定名称">
                  <template slot-scope="scope">
                    {{ scope.row.TagName }}
                  </template>
                </el-table-column>
                <el-table-column align="center" label="变量地址" width="100">
                  <template slot-scope="scope">
                    {{ scope.row.DbName + ' ' + scope.row.变量地址 + scope.row.变量其它 }}
                  </template>
                </el-table-column>
                <el-table-column align="center" label="变量类型" width="100">
                  <template slot-scope="scope">
                    {{ scope.row.变量类型 }}
                  </template>
                </el-table-column>
                <el-table-column align="center" label="变量单位" width="90">
                  <template slot-scope="scope">
                    {{ scope.row.测量单位 }}
                  </template>
                </el-table-column>
                <el-table-column align="center" label="变量值">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.值" style="text-align: center"
                      @keydown.enter.native="SaveParameterData(scope.row)" />
                  </template>
                </el-table-column>
                <el-table-column align="center" label="写入" width="60">
                  <template slot-scope="scope">
                    <el-tooltip class="item" effect="dark" content="写入定义数据" placement="top">
                      <el-button plain type="primary" style="padding: 0;margin: 0 0 0 10px;width: 25px;height: 25px;"
                        icon="el-icon-edit" circle @click="SaveParameterData(scope.row)"></el-button>
                    </el-tooltip>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div class="item">
              <el-table v-loading="loading" :data="tableData2" border element-loading-background="rgba(0, 0, 0, 0.2)"
                element-loading-spinner="el-icon-loading" element-loading-text="数据加载中" height="70vh" size="mini"
                tooltip-effect="dark">
                <el-table-column align="center" label="序号" width="80">
                  <template slot-scope="scope">
                    {{ scope.row.排序 }}
                  </template>
                </el-table-column>
                <el-table-column align="center" label="绑定名称">
                  <template slot-scope="scope">
                    {{ scope.row.TagName }}
                  </template>
                </el-table-column>
                <el-table-column align="center" label="变量地址" width="100">
                  <template slot-scope="scope">
                    {{ scope.row.DbName + ' ' + scope.row.变量地址 + scope.row.变量其它 }}
                  </template>
                </el-table-column>
                <el-table-column align="center" label="变量类型" width="100">
                  <template slot-scope="scope">
                    {{ scope.row.变量类型 }}
                  </template>
                </el-table-column>
                <el-table-column align="center" label="变量单位" width="90">
                  <template slot-scope="scope">
                    {{ scope.row.测量单位 }}
                  </template>
                </el-table-column>
                <el-table-column align="center" label="变量值">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.值" style="text-align: center"
                      @keydown.enter.native="SaveParameterData(scope.row)" />
                  </template>
                </el-table-column>
                <el-table-column align="center" label="写入" width="60">
                  <template slot-scope="scope">
                    <el-tooltip class="item" effect="dark" content="写入定义数据" placement="top">
                      <el-button plain type="primary" style="padding: 0;margin: 0 0 0 10px;width: 25px;height: 25px;"
                        icon="el-icon-edit" circle @click="SaveParameterData(scope.row)"></el-button>
                    </el-tooltip>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>

        </el-tab-pane>
        <el-tab-pane label="时序设置" name="active2">
          <div class="topLabel">
            <div class="item">
              <span>设定步数：</span>
              <el-input v-model="itemData.processStep" style="width: 100px"
                @keydown.enter.native="SaveParameterData2({ TagID: itemData.processStepP, 值: itemData.processStep })" />
            </div>
            <div class="item">
              <span>停止步号：</span>
              <el-input v-model="itemData.stopStep" style="width: 100px"
                @keydown.enter.native="SaveParameterData2({ TagID: itemData.stopStepP, 值: itemData.stopStep })" />
            </div>
            <div class="item">
              <span>实际阀门数：</span>
              <el-input v-model="itemData.valveCount" style="width: 100px"
                @keydown.enter.native="SaveParameterData2({ TagID: itemData.valveCountP, 值: itemData.valveCount })" />
            </div>
            <div class="item">
              <span style="position: relative;top: 7px;">当前步数：{{ itemData.nowStep }}</span>
              <!-- <el-input
                v-model="itemData.nowStep"
                style="width: 100px"
                @keydown.enter.native="SaveParameterData2({TagID:itemData.nowStepP,值:itemData.nowStep})"/> -->
            </div>
            <div class="item">
              <el-button plain type="primary" @click="flushSh">读取</el-button>
              <!--              <el-button plain type="success" @click="saveSh">保存</el-button>-->
            </div>
          </div>
          <div class="dataList">
            <div class="topRow">
              <div v-for="index in 14" class="item all-item">
                {{ index }}
              </div>
            </div>
            <div class="topRow2">
              <div class="item all-item" style="width: 140px">
                动作时间
              </div>
              <div v-for="item in listDataTable" class="item all-item" @click="clickSX(item)">
                {{ item.值 }}s
              </div>
            </div>
            <div v-for="rowItem in listData" class="row">
              <div class="name">{{ rowItem.参数名称 }}</div>
              <div :style="{ color: getSXItemText(rowItem.第1步.值, rowItem.排序)[1] }" class="item all-item"
                @click="clickSX(rowItem.第1步)">
                {{ getSXItemText(rowItem.第1步.值, rowItem.排序)[0] }}
              </div>
              <div :style="{ color: getSXItemText(rowItem.第2步.值, rowItem.排序)[1] }" class="item all-item"
                @click="clickSX(rowItem.第2步)">
                {{ getSXItemText(rowItem.第2步.值, rowItem.排序)[0] }}
              </div>
              <div :style="{ color: getSXItemText(rowItem.第3步.值, rowItem.排序)[1] }" class="item all-item"
                @click="clickSX(rowItem.第3步)">
                {{ getSXItemText(rowItem.第3步.值, rowItem.排序)[0] }}
              </div>
              <div :style="{ color: getSXItemText(rowItem.第4步.值, rowItem.排序)[1] }" class="item all-item"
                @click="clickSX(rowItem.第4步)">
                {{ getSXItemText(rowItem.第4步.值, rowItem.排序)[0] }}
              </div>
              <div :style="{ color: getSXItemText(rowItem.第5步.值, rowItem.排序)[1] }" class="item all-item"
                @click="clickSX(rowItem.第5步)">
                {{ getSXItemText(rowItem.第5步.值, rowItem.排序)[0] }}
              </div>
              <div :style="{ color: getSXItemText(rowItem.第6步.值, rowItem.排序)[1] }" class="item all-item"
                @click="clickSX(rowItem.第6步)">
                {{ getSXItemText(rowItem.第6步.值, rowItem.排序)[0] }}
              </div>
              <div :style="{ color: getSXItemText(rowItem.第7步.值, rowItem.排序)[1] }" class="item all-item"
                @click="clickSX(rowItem.第7步)">
                {{ getSXItemText(rowItem.第7步.值, rowItem.排序)[0] }}
              </div>
              <div :style="{ color: getSXItemText(rowItem.第8步.值, rowItem.排序)[1] }" class="item all-item"
                @click="clickSX(rowItem.第8步)">
                {{ getSXItemText(rowItem.第8步.值, rowItem.排序)[0] }}
              </div>
              <div :style="{ color: getSXItemText(rowItem.第9步.值, rowItem.排序)[1] }" class="item all-item"
                @click="clickSX(rowItem.第9步)">
                {{ getSXItemText(rowItem.第9步.值, rowItem.排序)[0] }}
              </div>
              <div :style="{ color: getSXItemText(rowItem.第10步.值, rowItem.排序)[1] }" class="item all-item"
                @click="clickSX(rowItem.第10步)">
                {{ getSXItemText(rowItem.第10步.值, rowItem.排序)[0] }}
              </div>
              <div :style="{ color: getSXItemText(rowItem.第11步.值, rowItem.排序)[1] }" class="item all-item"
                @click="clickSX(rowItem.第11步)">
                {{ getSXItemText(rowItem.第11步.值, rowItem.排序)[0] }}
              </div>
              <div :style="{ color: getSXItemText(rowItem.第12步.值, rowItem.排序)[1] }" class="item all-item"
                @click="clickSX(rowItem.第12步)">
                {{ getSXItemText(rowItem.第12步.值, rowItem.排序)[0] }}
              </div>
              <div :style="{ color: getSXItemText(rowItem.第13步.值, rowItem.排序)[1] }" class="item all-item"
                @click="clickSX(rowItem.第13步)">
                {{ getSXItemText(rowItem.第13步.值, rowItem.排序)[0] }}
              </div>
              <div :style="{ color: getSXItemText(rowItem.第14步.值, rowItem.排序)[1] }" class="item all-item"
                @click="clickSX(rowItem.第14步)">
                {{ getSXItemText(rowItem.第14步.值, rowItem.排序)[0] }}
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </el-card>
</template>

<script>

export default {
  data() {
    return {
      itemData: {
        valveCount: 0, // 实际阀门数
        processStep: 0, // 设定步数
        stopStep: 0, // 停止步号
        nowStep: 0, // 当前步数
        valveCountP: 0, // 实际阀门数地址
        processStepP: 0, // 设定步数地址
        stopStepP: 0, // 停止步号地址
        nowStepP: 0 // 当前步数地址
      },
      listDataTable: [],
      listData: [],
      activeName: 'active1',
      OpNameList: [],
      clickOpName: '',
      loading: false,
      tableData1: [],
      tableData2: []
    }
  },
  created() {
    // this.getOpName()
    this.$prompt('请输入登陆密码校验后访问此模块', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      inputType: 'password' // 将输入框类型设置为密码框
    }).then(({ value }) => {
      var param = []
      param.push(['personnel_Number', this.$store.state.user.id])
      param.push(['personnel_Password', value])
      var Data = this.CreateData('11', 'WEB_模块查询_人员验证', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data.length !== 0) {
          if (response.data[0].result === 1) {
            this.getOpName()
            this.$message.success(response.data[0].msg)
          } else {
            this.$message.error(response.data[0].msg)
            this.$router.push('/')
          }
        }
      })
    }).catch(() => {
      this.$message({
        type: 'info',
        message: '取消登入'
      })
      this.$router.push('/')
    })
  },
  methods: {
    flushSh() {
      this.getSXTable()
      this.getSXItemData()
    },
    saveSh() {
      this.$message.success('保存成功！')
    },
    getAllData() {
      this.getTable()
      setTimeout(() => {
        this.getSXTable()
        this.getSXItemData()
      }, 200)
    },
    // 查询工位号
    getOpName() {
      var param = []
      param.push(['Personnel_Number', this.$store.state.user.id])
      var Data = this.CreateData('11', '工位与名称_查询', param)
      this.ExecDatabase(Data).then(response => {
        this.OpNameList = []
        for (const item of response.data) {
          this.OpNameList.push({ label: item.公司 + item.工位号, value: item.工位号 })
        }
        if (this.OpNameList.length > 0) {
          this.clickOpName = this.OpNameList[0].value
        }
        this.getAllData()
      })
    },
    getSXTable() {
      this.listData = []
      this.listDataTable = []
      var param = []
      param.push(['工位号', this.clickOpName])
      var Data = this.CreateData('11', 'WEB_参数修改_时序_查询', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data.length !== 0) {
          // 将数据拆分，参数名称 == 动作时间 的拆到顶部数组去
          const reqData = []
          for (const item of response.data) {
            for (const key in item) {
              if (key.indexOf('步') != -1) {
                if (item[key]) {
                  reqData.push({ TagID: item[key] })
                }
              }
            }
          }

          this.WebApi_ReadDevice(reqData).then(tagIdList => {
            for (const item of response.data) {
              for (const key in item) {
                if (key.indexOf('步') != -1) {
                  if (item[key]) {
                    item[key] = tagIdList.find(obj => obj.TagID === item[key])
                    if (item.参数名称 == '动作时间') {
                      this.listDataTable.push(item[key])
                    }
                  }
                }
              }
              if (item.参数名称 != '动作时间') {
                this.listData.push(item)
              }
            }
            // this.listData = response.data
          })
        }
      })
    },
    getSXItemData() {
      this.itemData.valveCount = ''
      this.itemData.processStep = ''
      this.itemData.stopStep = ''
      this.itemData.nowStep = ''
      this.itemData.valveCountP = ''
      this.itemData.processStepP = ''
      this.itemData.stopStepP = ''
      this.itemData.nowStepP = ''
      var param = []
      param.push(['工位号', this.clickOpName])
      var Data = this.CreateData('11', 'WEB_参数修改_时序_顶部参数_查询', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data.length !== 0) {
          const reqData = []
          reqData.push({ TagID: response.data[0].实际阀门数 })
          reqData.push({ TagID: response.data[0].设定步号 })
          reqData.push({ TagID: response.data[0].停止步号 })
          reqData.push({ TagID: response.data[0].当前步数 })

          this.WebApi_ReadDevice(reqData).then(tagIdList => {
            this.itemData.valveCount = tagIdList[0].值
            this.itemData.processStep = tagIdList[1].值
            this.itemData.stopStep = tagIdList[2].值
            this.itemData.nowStep = tagIdList[3].值
            this.itemData.valveCountP = tagIdList[0].TagID
            this.itemData.processStepP = tagIdList[1].TagID
            this.itemData.stopStepP = tagIdList[2].TagID
            this.itemData.nowStepP = tagIdList[3].TagID
          })
        }
      })
    },
    getTable() {
      this.loading = true
      this.tableData1 = []
      this.tableData2 = []
      var param = []
      param.push(['工位号', this.clickOpName])
      param.push(['信号类型', '参数设置'])
      var Data = this.CreateData('11', 'WEB_基础_参数画面_各模块_查询', param)
      this.ExecDatabase(Data).then(response => {
        this.loading = false
        if (response.data.length !== 0) {
          this.WebApi_ReadDevice(response.data).then(tagIdList => {
            const data = tagIdList
            for (let i = 0; i < data.length; i++) {
              // table1 2 各分一半的数据存入
              data[i].排序 = i + 1
              if ((i + 1) <= data.length / 2) {
                this.tableData1.push(data[i])
              } else {
                this.tableData2.push(data[i])
              }
            }
          })
        }
      })
    },
    SaveParameterData(row) {
      // 弹窗提示是否保存参数 再次按回车键保存
      this.$confirm('是否确认修改此变量值,再次按回车提交修改', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.WebApi_WriteDevice([{ TagId: row.TagID, TagValue: row.值 }]).then(isOk => {
          if (isOk === 'OK') {
            this.getTable()
            this.$message({
              type: 'success',
              message: '修改成功!'
            })
          } else {
            this.$message.error('修改失败！' + isOk)
          }
        })
      })
    },
    SaveParameterData2(row) {
      // 弹窗提示是否保存参数 再次按回车键保存
      this.$confirm('是否确认修改此变量值,再次按回车提交修改', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.WebApi_WriteDevice([{ TagId: row.TagID, TagValue: row.值 }]).then(isOk => {
          if (isOk === 'OK') {
            this.getSXItemData()
            this.$message({
              type: 'success',
              message: '修改成功!'
            })
          } else {
            this.$message.error('修改失败！' + isOk)
          }
        })
      })
    },
    clickSX(row) {
      // 弹出输入框传入初始值，然后保存
      this.$prompt('请输入新值', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputValue: row.值
      }).then(({ value }) => {
        this.WebApi_WriteDevice([{ TagId: row.TagID, TagValue: value }]).then(isOk => {
          if (isOk === 'OK') {
            this.$message({
              type: 'success',
              message: '修改成功!'
            })
            this.getSXTable()
          } else {
            this.$message.error('修改失败！' + isOk)
          }
        })
      })
    },
    // 根据排序 与 数值 来返回对应显示的文本
    getSXItemText(value, index) {
      if (index <= 10) {
        if (value == 1) {
          return ['开', '#ff9a02']
        } else if (value == 0) {
          return ['关', '#aaa9a9']
        } else {
          return [value, '#000']
        }
      } else {
        return [value, '#000']
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.main {
  .topLabel {
    display: flex;
    justify-content: space-around;
    width: 75vw;

    .item {
      margin: 0 5px;
    }

    ::v-deep .el-input__inner {
      text-align: center;

    }
  }

  .dataList {
    margin: 20px 0 20px 40px;
    width: 1600px;

    .topRow {
      display: flex;
      margin-left: 140px;

      .item {
        height: 40px;
        line-height: 40px;
      }
    }

    .topRow2 {
      display: flex;

      //margin-left: 120px;
      .item {
        height: 40px;
        line-height: 40px;
        border: none;
        border-radius: 0px;
        box-shadow: 0 0 0 rgba(0, 0, 0, .3);
      }
    }

    .row {
      display: flex;

      .name {
        width: 140px;
        height: 40px;
        font-size: 22px;
        line-height: 40px;
        text-align: center;
      }
    }
  }
}

.all-item {
  border: 1px solid #7b7e87;
  font-size: 22px;
  width: 100px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, .3);
  -webkit-user-select: none;
}

.all-item:hover {
  box-shadow: 0 0 10px rgba(3, 37, 142, 1);
  background-color: rgb(171, 193, 255);
}

.tableList {
  display: flex;
  margin-top: 10px;

  .item {
    width: 50%;
  }
}

::v-deep .el-table .el-input__inner {
  text-align: center;
}
</style>
