<template>
  <el-card>
    <div>
      <span class="show-text">设备:</span>
      <el-select
        v-model="clickOpName"
        clearable
        filterable
        placeholder="请选择工位号"
        style="width: 200px;margin-right: 10px">
        <el-option
          v-for="item in OpNameList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
          size="mini"/>
      </el-select>
      <span class="show-text">信号类别:</span>
      <el-select
        v-model="dataType"
        clearable
        filterable
        placeholder="请选择信号类别"
        style="width: 200px;margin-right: 10px">
        <el-option
          v-for="item in dataTypeList"
          :key="item"
          :label="item"
          :value="item"
          size="mini"/>
      </el-select>
      <el-button
        :disabled="loading"
        icon="el-icon-search"
        plain
        style="margin-left: 10px"
        type="primary"
        @click="getTable()">查询
      </el-button>
      <el-button
        icon="el-icon-circle-plus-outline"
        plain
        style="margin-left: 14px"
        type="success"
        @click="addBind('form')">
        新增
      </el-button>
      <div class="table" style="margin-top: 10px">
        <el-table
          v-loading="loading"
          :data="tableData"
          border
          element-loading-background="rgba(0, 0, 0, 0.2)"
          element-loading-spinner="el-icon-loading"
          element-loading-text="数据加载中"
          height="70vh"
          size="mini"
          stripe
          tooltip-effect="dark">
          <el-table-column align="center" label="序号" type="index" width="80"/>
          <el-table-column align="center" label="变量名称">
            <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="90">
            <template slot-scope="scope">
              {{ scope.row.单位 }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="流程图位号" width="110">
            <template slot-scope="scope">
              {{ scope.row.测量位置 }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="数据地址" width="200">
            <template slot-scope="scope">
              <!--              {{ scope.row.数据地址 }}-->
              {{ scope.row.DbName + ' ' + scope.row.变量地址 + scope.row.变量其它 }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="变量值" width="110">
            <template slot-scope="scope">
              {{ scope.row.值 }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="是否首页显示" width="130">
            <template slot-scope="scope">
              <el-select
                v-model="scope.row.是否首页显示"
                :class="{'text-blue': scope.row.是否首页显示 === 1, 'text-gray': scope.row.是否首页显示 === 0}"
                placeholder="是否首页显示"

                @change="tableSelectChange(scope.row,'是否首页显示')">
                <el-option
                  :value="1"
                  label="是"
                  size="mini"/>
                <el-option
                  :value="0"
                  label="否"
                  size="mini"/>
              </el-select>
            </template>
          </el-table-column>
          <!-- <el-table-column align="center" label="是否统计分析" width="130">
            <template slot-scope="scope">
              <el-select
                v-model="scope.row.是否统计分析"
                :class="{'text-blue': scope.row.是否统计分析 === 1, 'text-gray': scope.row.是否统计分析 === 0}"
                placeholder="是否统计分析"
                @change="tableSelectChange(scope.row,'是否统计分析')">
                <el-option
                  :value="1"
                  label="是"
                  size="mini"/>
                <el-option
                  :value="0"
                  label="否"
                  size="mini"/>
              </el-select>
            </template>
          </el-table-column> -->
          <!-- <el-table-column align="center" label="是否参数设置" width="130">
            <template slot-scope="scope">
              <el-select
                v-model="scope.row.是否参数设置"
                :class="{'text-blue': scope.row.是否参数设置 === 1, 'text-gray': scope.row.是否参数设置 === 0}"
                placeholder="是否参数设置"
                @change="tableSelectChange(scope.row,'是否参数设置')">
                <el-option
                  :value="1"
                  label="是"
                  size="mini"/>
                <el-option
                  :value="0"
                  label="否"
                  size="mini"/>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column align="center" label="是否测试执行" width="130">
            <template slot-scope="scope">
              <el-select
                v-model="scope.row.是否测试执行"
                :class="{'text-blue': scope.row.是否测试执行 === 1, 'text-gray': scope.row.是否测试执行 === 0}"
                placeholder="是否测试执行"
                @change="tableSelectChange(scope.row,'是否测试执行')">
                <el-option
                  :value="1"
                  label="是"
                  size="mini"/>
                <el-option
                  :value="0"
                  label="否"
                  size="mini"/>
              </el-select>
            </template>
          </el-table-column> -->
          <el-table-column align="center" label="操作" width="150">
            <template slot-scope="scope">
              <el-button style="width: 60px;margin: 0;padding: 0;" type="text" @click="updateBind(scope.row)">
                修改绑定
              </el-button>
              <el-button
                style="color: #e43852;width: 60px;margin: 0;padding: 0"
                type="text"
                @click="deleteBind(scope.row)">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="block" style="margin-top: 20px;">
          <el-pagination
            v-if="!loading"
            :current-page="pageList"
            :page-size="pageSize"
            :page-sizes="[50, 100, 200, 300]"
            :total="total"
            background
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"/>
        </div>
      </div>
      <el-dialog
        :title="bindBoxTitle"
        :visible.sync="isShowBindBox"
        center
        width="50%">
        <el-form label-width="80px" style="display: flex;flex-wrap: wrap">
          <el-form-item label="设备编号">
            <el-select
              v-model="bindBoxClickOpName"
              :disabled="bindBoxTitle == '修改绑定信号'"
              filterable
              placeholder="请选设备编号"
              style="width: 200px;margin-right: 10px"
              @change="getTagList()">
              <el-option
                v-for="item in OpNameList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                size="mini"/>
            </el-select>
          </el-form-item>
          <el-form-item label="展示名称">
            <el-input
              v-model="bindBoxForm.ShowName"
              placeholder="请输入展示名称"
              style="width: 200px;margin-right: 10px"/>
          </el-form-item>
          <el-form-item label="数据单位">
            <el-input
              v-model="bindBoxForm.unit"
              placeholder="单位"
              style="width: 200px;margin-right: 10px"/>
          </el-form-item>
          <el-form-item label="变量名称">
            <el-input
              v-model="bindBoxForm.TagName"
              :disabled="true"
              placeholder="请输入变量名称"
              style="width: 200px;margin-right: 10px"/>
          </el-form-item>
          <el-form-item label="变量地址">
            <el-input
              v-model="bindBoxForm.TagPosition"
              :disabled="true"
              placeholder="请输入变量地址"
              style="width: 200px;margin-right: 10px"/>
          </el-form-item>
        </el-form>
        <div style="margin-top: 20px">
          <span>变量名称:</span>
          <el-input v-model="searchTagName" prefix-icon="el-icon-search" style="width: 200px" @input="getTagList()"/>

          <span>流程图位号:</span>
          <el-input v-model="lctPosName" prefix-icon="el-icon-search" style="width: 200px" @input="getTagList()"/>
        </div>
        <el-table
          :data="tagTableData"
          border
          element-loading-background="rgba(0, 0, 0, 0.2)"
          element-loading-spinner="el-icon-loading"
          element-loading-text="数据加载中"
          height="30vh"
          highlight-current-row
          size="mini"
          tooltip-effect="dark"
          @current-change="clickTagRow">
          <el-table-column align="center" label="序号" type="index" width="80"/>
          <el-table-column align="center" label="设备编号" width="100">
            <template slot-scope="scope">
              {{ scope.row.工位号 }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="变量名称" min-width="300">
            <template slot-scope="scope">
              {{ scope.row.TagName }}
            </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="数据来源" width="90">
            <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="变量地址" width="90">
            <template slot-scope="scope">
              {{ scope.row.DbName + ' ' + scope.row.变量地址 + scope.row.变量其它 }}
            </template>
          </el-table-column>
        </el-table>
        <span slot="footer" class="dialog-footer">
          <el-button style="height: 40px;width: 100px" @click="isShowBindBox = false">取 消</el-button>
          <el-button
            v-if="bindBoxTitle=='新增绑定信号'"
            style="height: 40px;width: 100px"
            type="primary"
            @click="submitAddBind">新 增</el-button>
          <el-button
            v-if="bindBoxTitle=='修改绑定信号'"
            style="height: 40px;width: 100px"
            type="primary"
            @click="submitUpdateBind">修 改</el-button>
        </span>
      </el-dialog>
    </div>
  </el-card>
</template>

<script>
export default {
  data() {
    return {
      bindBoxTitle: '',
      isShowBindBox: false,
      bindBoxClickOpName: '',
      searchTagName: '',
      lctPosName: '',
      bindBoxForm: {
        AID: '',
        ShowName: '',
        unit: '',
        TagID: '',
        TagName: '',
        TagPosition: ''
      },
      OpNameList: [],
      clickOpName: '',
      loading: false,
      tableData: [],
      tagTableData: [],
      dataType: '',
      dataTypeList: [],
      value: 100,
      total: 0, // 总条数
      pageSize: 50, // 每页显示条数
      pageList: 1 // 后台获取页,
    }
  },
  created() {
    this.getOpName()
    this.getDataTypeList()
  },
  methods: {
    // 查询工位号
    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.getTable()
        }
      })
    },
    // 读取工位点位
    getTable() {
      var param = []
      param.push(['工位号', this.clickOpName])
      param.push(['信号类型', this.dataType])
      param.push(['PageCurrent', this.pageList])
      param.push(['PageSize', this.pageSize])
      param.push(['PageCount', '1111', 'int', '1'])
      param.push(['ItemCount', '1111', 'int', '1'])
      var Data = this.CreateData('11', 'WEB_变量设置_分页_查询', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data.length !== 0) {
          // this.tableData = response.data.result
          this.WebApi_ReadDevice(response.data.result).then(tagIdList => {
        this.tableData = []
            this.tableData = tagIdList
          })
        }
        this.total = parseInt(response.data.output[0].ItemCount)
        this.loading = false
      })
    },
    submitAddBind() {
      if (this.bindBoxForm.TagID == '') {
        this.$message({
          message: '请选择变量',
          type: 'warning'
        })
        return
      }
      if (this.bindBoxForm.ShowName == '') {
        this.$message({
          message: '请输入展示名称',
          type: 'warning'
        })
        return
      }
      var param = []
      param.push(['展示名称', this.bindBoxForm.ShowName])
      param.push(['单位', this.bindBoxForm.unit])
      param.push(['TagID', this.bindBoxForm.TagID])
      param.push(['设备编号', this.bindBoxClickOpName])
      var Data = this.CreateData('12', 'WEB_基础_参数画面_新增绑定', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data[0].result == 1) {
          this.$message.success('新增成功！')
          this.isShowBindBox = false
          this.getTable()
        }
      })
    },
    submitUpdateBind() {
      if (this.bindBoxForm.TagID == '') {
        this.$message({
          message: '请选择变量',
          type: 'warning'
        })
        return
      }
      if (this.bindBoxForm.ShowName == '') {
        this.$message({
          message: '请输入展示名称',
          type: 'warning'
        })
        return
      }
      var param = []
      param.push(['AID', this.bindBoxForm.AID])
      param.push(['展示名称', this.bindBoxForm.ShowName])
      param.push(['单位', this.bindBoxForm.unit])
      param.push(['TagID', this.bindBoxForm.TagID])
      var Data = this.CreateData('12', 'WEB_基础_参数画面_修改绑定', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data[0].result == 1) {
          this.$message.success('修改成功！')
          this.isShowBindBox = false
          this.getTable()
        }
      })
    },
    addBind() {
      this.searchTagName = ''
      this.lctPosName = ''
      this.bindBoxForm.AID = ''
      this.bindBoxForm.ShowName = ''
      this.bindBoxForm.unit = ''
      this.bindBoxForm.TagID = ''
      this.bindBoxForm.TagName = ''
      this.bindBoxForm.TagPosition = ''
      this.bindBoxTitle = '新增绑定信号'
      this.bindBoxClickOpName = this.OpNameList[0].value
      this.getTagList()
      this.isShowBindBox = true
    },
    updateBind(row) {
      this.searchTagName = ''
      this.lctPosName = ''
      this.bindBoxForm.AID = row.AID
      this.bindBoxForm.ShowName = row.参数名称
      this.bindBoxForm.unit = row.单位
      this.bindBoxForm.TagID = row.TagID
      this.bindBoxForm.TagName = row.TagName
      this.bindBoxForm.TagPosition = row.DbName + ' ' + row.变量地址 + row.变量其它
      this.bindBoxClickOpName = row.设备编号
      this.bindBoxTitle = '修改绑定信号'
      this.getTagList()
      this.isShowBindBox = true
    },
    deleteBind(row) {
      // 弹窗二次确认是否删除
      this.$confirm('是否删除此绑定记录?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        confirmButtonClass: 'confirm-confirm-button',
        cancelButtonClass: 'confirm-cancel-button',
        type: 'warning'
      }).then(() => {
        var param = []
        param.push(['AID', row.AID])
        var Data = this.CreateData('12', 'WEB_基础_参数画面_删除绑定', param)
        this.ExecDatabase(Data).then(response => {
          if (response.data[0].result == 1) {
            this.$message.success('删除成功！')
            this.getTable()
          }
        })
      })
    },
    // 根据工位号读取TagID列表
    getTagList() {
      if (this.bindBoxTitle == '新增绑定信号') {
        this.bindBoxForm.TagID = ''
        this.bindBoxForm.TagName = ''
        this.bindBoxForm.TagPosition = ''
      }
      this.tagTableData = []
      var param = []
      param.push(['工位号', this.bindBoxClickOpName])
      param.push(['TagName', this.searchTagName])
      param.push(['流程图位号', this.lctPosName])
      var Data = this.CreateData('11', 'WEB_SignalTable_工位号_查询', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data.length !== 0) {
          this.tagTableData = response.data
        }
      })
    },
    clickTagRow(val) {
      if (val) {
        this.bindBoxForm.TagID = val.TagID
        this.bindBoxForm.TagName = val.TagName
        this.bindBoxForm.TagPosition = val.DbName + ' ' + val.变量地址 + val.变量其它
      }
    },
    // 读取信号类别
    getDataTypeList() {
      var param = []
      var Data = this.CreateData('11', 'WEB_基础_参数画面_类型_查询', param)
      this.ExecDatabase(Data).then(response => {
        this.dataTypeList = []
        if (response.data.length !== 0) {
          for (const item of response.data) {
            this.dataTypeList.push(item.类型名称)
          }
        }
      })
    },
    tableSelectChange(row, dataName) {
      var value = row[dataName]
      var param = []
      param.push(['AID', row.AID])
      param.push(['修改项', dataName])
      param.push(['值', 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.getTable()
            this.$message.success(response.data[0].msg)
          } else {
            this.$message.error(response.data[0].msg)
          }
        }
      })
    },
    // 分页
    handleSizeChange(val) {
      this.pageList = 1
      this.pageSize = val
      this.getTable()
    },
    handleCurrentChange(val) {
      this.pageList = val
      this.getTable()
    }
  }
}
</script>
<style lang="scss" scoped>
.table {
  width: 100%;
  background-color: #fff;
}

.backStatus {
  width: 30px;
  height: 30px;
  border: 3px solid #9f9f9f;
  box-shadow: 0 0 5px #787878;
  border-radius: 50%;
  margin: 0 auto;
}

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

.text-blue {
  ::v-deep .el-input__inner {
    color: #097e00 !important;
  }
}

.text-gray {
  ::v-deep .el-input__inner {
    color: #ff9a02 !important;
  }
}

::v-deep .el-form-item {
  margin-bottom: 0;
}
</style>
