<template>
  <el-table
    :data="
      deviceNumData.filter(
        (data) =>
          !filter_Text ||
          data.monitorDeviceName
            .toLowerCase()
            .includes(filter_Text.toLowerCase()) ||
          data.monitorDeviceCode
            .toLowerCase()
            .includes(filter_Text.toLowerCase())
      )
    "
    border
    stripe
    :header-cell-style="headClass"
    :height="Height"
  >
    <el-table-column prop="status" label="状态" width="50">
      <template #default="scope">
        <el-avatar
          class="status"
          :style="
            scope.row.status == 0
              ? 'background-color:red'
              : 'background-color:#04F21C'
          "
        ></el-avatar>
      </template>
    </el-table-column>
    <el-table-column
      prop="monitorDeviceName"
      label="监控设备名称"
      width=""
    ></el-table-column>
    <el-table-column
      prop="monitorDeviceCode"
      label="监控设备编号"
      width=""
    ></el-table-column>
    <el-table-column
      prop="loopMeterAddress"
      label="回路表计地址"
      width=""
    ></el-table-column>
    <el-table-column
      prop="ratedVoltage"
      label="额定电压"
      width=""
    ></el-table-column>
    <el-table-column
      prop="ratedCurrent"
      label="额定电流"
      width=""
    ></el-table-column>
    <el-table-column
      prop="currentLoadRate"
      label="电流负载率门限"
      width=""
    ></el-table-column>
    <el-table-column
      prop="qualityAnalysis"
      label="电能质量分析"
      width=""
    ></el-table-column>
    <el-table-column fixed="right" label="操作" width="150">
      <template #default="scope">
        <el-button
          type="text"
          size="small"
          style="color: #409eff"
          @click.prevent="editRow(scope.row)"
        >
          编辑
        </el-button>
        <el-popconfirm
          confirm-button-text="是"
          cancel-button-text="否"
          icon="el-icon-info"
          icon-color="red"
          title="确定删除?"
          @confirm="confirmEvent(scope.row)"
          @cancel="cancelEvent"
        >
          <template #reference>
            <el-button type="text" size="small" style="color: red">
              删除
            </el-button>
          </template>
        </el-popconfirm>
      </template>
    </el-table-column>
    <el-table-column fixed="right" label="变量" width="180">
      <template #default="scope">
        <el-button
          type="text"
          size="small"
          style="color: #409eff"
          @click.prevent="variableList(scope.row)"
        >
          变量列表
        </el-button>
        <el-button
          @click="clone(scope.$index, scope.row)"
          type="text"
          size="small"
          style="color: #409eff"
        >
          克隆
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <div class="listPagination1">
    <el-pagination
      v-model:currentPage="currentPage3"
      :page-sizes="[15, 20, 25, 30]"
      :page-size="15"
      layout="total, sizes, prev, pager, next, jumper"
      :total="deviceNumData.length"
      @size-change="handleSizeChange1"
      @current-change="handleCurrentChange1"
      background
    ></el-pagination>
  </div>

  <!-- 克隆 -->
  <el-dialog
    v-model="cloneDialog"
    title="变量克隆"
    width="30rem"
    :before-close="cloneHandleClose"
  >
    <div class="dialogOne">
      <div>
        克隆设备对象:
        <span>183</span>
      </div>
      <div class="content">
        <span>*</span>
        变量克隆至:
        <el-radio v-model="cloneRadio" label="1">新设备</el-radio>
        <el-radio v-model="cloneRadio" label="2">已有设备</el-radio>
      </div>
      <div class="content">
        <span>*</span>
        设备名:
        <el-input
          class="inputer"
          v-model="cloneInputName"
          placeholder="请输入设备名"
          clearable
        />
        设备编号:
        <el-input
          class="inputer"
          v-model="cloneInputCode"
          placeholder="请输入设备编号"
          clearable
        />
      </div>
      <div class="content">
        <span>*</span>
        模拟量:
        <el-input
          class="inputer"
          v-model="cloneInputModel"
          placeholder="请输入模拟量"
          clearable
        />
        状态量:
        <el-input
          class="inputer"
          v-model="cloneInputState"
          placeholder="请输入状态量"
          clearable
        />
      </div>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-checkbox
          v-model="cloneChecked"
          label="连续克隆模式"
          style="margin-right: 10px"
        ></el-checkbox>
        <el-button @click="cloneDialog = false">取消</el-button>
        <el-button type="primary" @click="cloneDialog = false">确定</el-button>
      </span>
    </template>
  </el-dialog>

  <!-- 变量列表 -->
  <el-dialog
    v-model="listDialog"
    :title="listTitleDialog + '的变量列表'"
    width="70rem"
    :before-close="listHandleClose"
  >
    <div class="dialogOne" style="overflow: hidden">
      <el-radio-group
        v-model="listTabPosition"
        @change="listTabsChange(listTabPosition)"
        style="margin-bottom: 15px; display: flex"
      >
        <el-radio-button label="model">模拟量</el-radio-button>
        <el-radio-button label="state">状态量</el-radio-button>
        <el-radio-button label="parameter">参数量</el-radio-button>
        <div style="margin-left: 10px">
          <el-button icon="el-icon-plus" type="success">新增</el-button>
          <el-button type="danger" icon="el-icon-delete">删除</el-button>
        </div>
      </el-radio-group>

      <el-input
        placeholder="搜索变量或编码"
        v-model="listInputText"
        style="width: 15rem; margin-bottom: 15px"
      >
        <template #suffix>
          <i class="el-icon-search el-input__icon"></i>
        </template>
      </el-input>

      <el-table
        :data="
          listNumberData.filter(
            (data) =>
              !listInputText ||
              data.varName
                .toLowerCase()
                .includes(listInputText.toLowerCase()) ||
              data.varCoding.toLowerCase().includes(listInputText.toLowerCase())
          )
        "
        border
        stripe
        :header-cell-style="headClass"
        @selection-change="listSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column
          type="index"
          label="序号"
          sortable
          width=""
        ></el-table-column>
        <el-table-column
          prop="varName"
          label="变量名"
          sortable
          width=""
        ></el-table-column>
        <el-table-column
          prop="varCoding"
          label="变量编码"
          sortable
          width=""
        ></el-table-column>
        <el-table-column
          prop="signalDevice"
          label="通信设备"
          sortable
          width=""
        ></el-table-column>
        <el-table-column
          prop="dataAdd"
          label="数据地址"
          sortable
          width=""
        ></el-table-column>
        <el-table-column
          prop="dataType"
          label="数据类型"
          width=""
        ></el-table-column>
        <el-table-column
          prop="coefficient"
          label="系数"
          width=""
        ></el-table-column>
        <el-table-column
          prop="saveCycle"
          label="存盘周期"
          width=""
        ></el-table-column>
        <el-table-column fixed="right" label="操作" width="">
          <template #default="scope">
            <el-button
              type="text"
              size="small"
              style="color: #409eff"
              @click.prevent="listUpdate(scope.row)"
            >
              修改
            </el-button>
            <el-button
              @click="listDelete(scope.$index, scope.row)"
              type="text"
              size="small"
              style="color: red"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="listPagination">
        <el-pagination
          v-model:currentPage="currentPage4"
          :page-sizes="[15, 20, 25, 30]"
          :page-size="15"
          layout="total, sizes, prev, pager, next, jumper"
          :total="listNumberData.length"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          background
        ></el-pagination>
      </div>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="listDialog = false">关闭</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { useStore } from 'vuex'
import { defineComponent, onMounted, ref, watchEffect } from 'vue'
import * as api from '@/api/deviceManage/powerEquip/deviceAttribute'
import { ElMessage } from 'element-plus'

//克隆弹窗基础数据定义
const cloneData = () => {
  const cloneDialog = ref(false) //克隆弹窗控制
  const cloneChecked = ref(false) //克隆复选框控制
  const cloneRadio = ref('1') //克隆单选框控制
  const cloneInputName = ref('') //克隆input名
  const cloneInputCode = ref('') //克隆input编号
  const cloneInputModel = ref('') //克隆input模拟量
  const cloneInputState = ref('') //克隆input状态量

  //克隆弹窗控制方法回调
  const cloneHandleClose = (done) => {
    done()
    //   ElMessageBox.confirm("确定要关闭弹出?").then(() => { done();}).catch(() => {// catch error});
  }
  return {
    cloneDialog,
    cloneChecked,
    cloneRadio,
    cloneInputName,
    cloneInputCode,
    cloneHandleClose,
    cloneInputModel,
    cloneInputState,
  }
}
//变量列表弹窗基础数据定义
const listData = () => {
  const listDialog = ref(false)
  const listTitleDialog = ref()
  const listHandleClose = (done) => {
    done()
  }
  const listTabPosition = ref('model')

  return { listDialog, listHandleClose, listTitleDialog, listTabPosition }
}

export default defineComponent({
  name: 'powerEquip',
  components: {},
  emits: ['updateRow'],
  props: {
    filter_Text: String,
    Height: String,
    refresh: Boolean,
  },
  setup(props, { emit }) {
    const store = useStore()
    const deviceNumData = ref([]);//列表查询值存储
    const multipleSelection=ref([]);//变量列表弹窗复选框值存储

    const {
      cloneDialog,
      cloneChecked,
      cloneRadio,
      cloneInputName,
      cloneInputCode,
      cloneHandleClose,
      cloneInputModel,
      cloneInputState,
    } = cloneData()

    const { listDialog, listHandleClose, listTitleDialog, listTabPosition } =
      listData()

    //变量列表弹窗table 复选框change事件
    const listSelectionChange = (val) => {
      multipleSelection.value = val
    }
    //变量列表弹窗tabs切换change事件
    const listTabsChange = (value) => {
      console.log(value)
    }

    //变量列表
    const variableList = (row) => {
      listTitleDialog.value = 183
      listDialog.value = true
      console.log(row)
    }
    //克隆
    const clone = (index, row) => {
      this.cloneDialog = true
      console.log(index, row)
    }

    //是否删除  ---- 是
    const confirmEvent = (row) => {
      handleDelete(row)
    }
    //是否删除  ---- 否
    const cancelEvent = () => {
      console.log('cancel!')
    }
    //查询
    function listSelect() {
      api.deviceNewsList({ siteId: store.state.siteId }).then((requset) => {
        if (requset.status === 'SUCCESS') {
          deviceNumData.value = requset.data
        } else {
          ElMessage.error(requset.msg)
        }
      })
    }
    //删除
    const handleDelete = (row) => {
      api.deviceNewsDel({ id: row.id }).then((requset) => {
        if (requset.status === 'SUCCESS') {
          ElMessage.success({
            message: '删除成功',
            type: 'success',
          })
          listSelect()
        } else {
          ElMessage.error(requset.msg)
        }
      })
    }
    //编辑
    const editRow = (row) => {
      emit('updateRow', row)
      listSelect()
    }

    watchEffect((fn, options) => {
      fn, options
      if (props.refresh == true) {
        listSelect()
      }
    })

    onMounted(() => {
      listSelect()
    })
    // 表头样式设置
    const headClass = () => {
      return 'background:#FAFAFA !important;color: black;'
    }

    const handleSizeChange = (val) => {
      console.log(`${val} items per page`)
    }
    const handleCurrentChange = (val) => {
      console.log(`current page: ${val}`)
    }

    const handleSizeChange1 = (val) => {
      console.log(`${val} items per page`)
    }
    const handleCurrentChange1 = (val) => {
      console.log(`current page: ${val}`)
    }
    return {
      headClass,
      clone, //克隆按钮事件
      variableList, //变量列表按钮事件
      editRow, //编辑按钮事件
      handleDelete, //删除按钮事件
      listSelectionChange, //变量列表
      listTabsChange, //变量列表tabs切换
      deviceNumData, //列表查询值存储
      confirmEvent, //确定是否删除事件
      cancelEvent,

      cloneDialog,
      cloneChecked,
      cloneHandleClose,
      cloneRadio,
      cloneInputName,
      cloneInputCode,
      cloneInputModel,
      cloneInputState,

      listDialog,
      listHandleClose,
      listTitleDialog,
      listTabPosition,
      currentPage4: ref(15),
      currentPage3: ref(15),
      handleSizeChange,
      handleCurrentChange,
      handleSizeChange1,
      handleCurrentChange1,

      listInputText: ref(''), //变量列表input搜索框
      multipleSelection, //变量列表弹窗复选框值存储
      listNumberData: ref([
        {
          varName: 'A相电压',
          varCoding: 'bgbsk_183_Us',
          signalDevice: '嘉定区竞园新区六里村委(综合用房)',
          dataAdd: 'YC[o]',
          dataType: '4字节浮点4321',
          coefficient: 0.001,
          saveCycle: '5分钟',
        },
        {
          varName: 'A相电压',
          varCoding: 'bgbsk_183_Us',
          signalDevice: '嘉定区竞园新区六里村委(综合用房)',
          dataAdd: 'YC[o]',
          dataType: '4字节浮点4321',
          coefficient: 0.001,
          saveCycle: '5分钟',
        },
      ]), //变量列表弹窗table值存储
    }
  },
})
</script>

<style lang="scss" scoped>
//弹出框内容样式
.dialogOne {
  div:nth-child(1) {
    margin-bottom: 30px;
  }
  .content {
    margin-bottom: 20px;
    span:nth-child(1) {
      color: red;
    }
    .inputer {
      width: 150px;
    }
  }
}
.listPagination {
  margin-top: 15px;
  margin-bottom: -30px;
  float: right;
}
.listPagination1 {
  margin-top: 15px;
  float: right;
}
</style>