
<template>
  <div class="ems-dashboard-editor-container" style="background-color: #ffffff" v-loading="loading">
    <el-form :inline="true" class="select-container">
        <el-form-item label="站点选择">
          <el-select v-model="siteId" placeholder="请选择换电站名称" :loading="loading" loading-text="正在加载数据" @change="onSearch">
            <el-option :label="item.siteName" :value="item.siteId" v-for="(item,index) in siteList" :key="index+'zdxeSelect'"></el-option>
          </el-select>
        </el-form-item>
      <el-form-item>
<!--        <el-button type="primary" @click="onSearch" native-type="button">搜索</el-button>-->
        <el-button @click="onReset" native-type="button">重置</el-button>
      </el-form-item>
    </el-form>
    <el-button type="primary" @click="addDevice" native-type="button">新增设备</el-button>
    <el-table
      class="common-table"
      :data="tableData"
      stripe
      max-height="600px"
      style="width: 100%;margin-top: 25px">
      <el-table-column
        prop="siteId"
        label="站点ID">
      </el-table-column>
      <el-table-column
        prop="siteName"
        label="站点名称">
      </el-table-column>
      <el-table-column
        prop="deviceId"
        label="设备ID"
      >
      </el-table-column>
      <el-table-column
        prop="deviceName"
        label="设备名称">
      </el-table-column>
      <el-table-column
        prop="deviceType"
        label="设备类型">
      </el-table-column>
      <el-table-column
        prop="communicationStatus"
        label="通信状态">
        <template slot-scope="scope">
          <span>{{$store.state.ems.communicationStatusOptions[scope.row.communicationStatus]}}</span>
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="150">
        <template slot-scope="scope">
<!--          <el-button-->
<!--            @click="toDetail(scope.row.id)"-->
<!--            type="primary"-->
<!--            size="mini">-->
<!--            查看详情-->
<!--          </el-button>-->
          <el-button
            @click="editDevice(scope.row)"
            type="warning"
            size="mini">
            编辑
          </el-button>
          <el-button
            type="danger"
            @click="deleteDevice(scope.row)"
            size="mini">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-show="tableData.length>0"
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageNum"
      :page-size="pageSize"
      :page-sizes="[10, 20, 30, 40]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalSize"
      style="margin-top:15px;text-align: center"
    >
    </el-pagination>
    <el-dialog :visible.sync="dialogTableVisible" class="ems-dialog" title=" 详细信息" :close-on-click-modal="false" :before-close="handleClosed">
      <div class="descriptions-main" style="padding: 0" >
        <el-descriptions direction="vertical" :column="2" :colon="false" border>
          <el-descriptions-item v-for="(item,index) in detailData" :key="index+'descriptions'" labelClassName="descriptions-label" contentClassName="descriptions-direction" :span="1" :label="item.label">{{item.value}}</el-descriptions-item>
        </el-descriptions>
      </div>
    </el-dialog>
    <add-device ref="addDevice" :mode="mode" :id="editDeviceId" @update="getData" @clear="clearEditDeviceData"/>
  </div>
</template>

<script>
import {getDeviceInfoList,getDeviceDetailInfo,deleteService} from'@/api/ems/site'
import {getAllSites} from '@/api/ems/zddt'
import {formatNumber} from "@/filters/ems";
import AddDevice from "./AddDevice.vue";
export default {
  name: "Sblb",
  components:{AddDevice},
  data() {
    return {
      loading:false,
      searchLoading:false,
      mode:'',//新增、编辑设备
      editDeviceId:'',//编辑设备id
      siteId:'',
      siteList:[],
      tableData:[],
      pageSize:10,//分页栏当前每个数据总数
      pageNum:1,//分页栏当前页数
      totalSize:0,//table表格数据总数
      dialogTableVisible:false,
      detailData:[
        {label:'设备ID',value:'',attr:'deviceId'},
        {label:'设备名称',value:'',attr:'deviceName'},
        {label:'设备类型',value:'',attr:'deviceType'},
        {label:'通信状态',value:'',attr:'communicationStatus'},
        {label:'TCP设备的IP地址',value:'',attr:'ipAddress'},
        {label:'TCP端口号',value:'',attr:'ipPort'},
        {label:'串口路径',value:'',attr:'serialPort'},
        {label:'波特率',value:'',attr:'baudRate'},
        {label:'数据位',value:'',attr:'dataBits'},
        {label:'停止位',value:'',attr:'stopBits'},
        {label:'校验位',value:'',attr:'parity'},
        {label:'设备描述',value:'',attr:'description'},
        {label:'设备类别',value:'',attr:'deviceCategory'},
        {label:'上级设备ID',value:'',attr:'parentId'},
        {label:'设备唯一标识符',value:'',attr:'deviceId'},
      ],
      detailformatAttr:{
        'deviceType':'deviceTypeOptions',
        'communicationStatus':'communicationStatusOptions',
      }
    }
  },
  methods:{
    clearEditDeviceData(){
      this.mode = '';
      this.editDeviceId=''
    },
    //  新增设备 展示弹窗
    addDevice(){
      this.mode = 'add';
      this.$refs.addDevice.dialogTableVisible = true
    },
    // 编辑设备
    editDevice(row){
      this.mode = 'edit';
      this.editDeviceId = row.id
      this.$refs.addDevice.dialogTableVisible = true;
    },
    //删除设备
    deleteDevice(row){
      this.$confirm(`确认要设备${row.deviceName}吗?`, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        showClose:false,
        closeOnClickModal:false,
        type: 'warning',
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            instance.confirmButtonLoading = true;
            deleteService(row.id).then(response => {
              response.code === 200 && done();
            }).finally(() => {
              instance.confirmButtonLoading = false;
            })
          } else {
            done();
          }
        }
      }).then(() => {
        //只有在废弃成功的情况下会走到这里
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
        this.getData()
        //调用接口 更新表格数据
      }).catch(() => {
        //取消关机
      });
    },
    handleClosed(done){
      this.detailData.forEach((item)=>{item.value = ''})
      done()
    },
    toDetail(id){
      this.loading = true
      getDeviceDetailInfo(id).then(response => {
        const data = response?.data || {};
        this.detailData.forEach(item=>{
          if(this.detailformatAttr[item.attr]){
            item.value=formatNumber(this.$store.state.ems[this.detailformatAttr[item.attr]][data[item.attr]]);
          }else{
            item.value=formatNumber(data[item.attr]);
          }

        })
        this.dialogTableVisible = true
      }).finally(() => {this.loading = false})

    },
    // 分页
    handleSizeChange(val) {
      this.pageSize = val;
      this.$nextTick(()=>{
        this.getData()
      })
    },
    handleCurrentChange(val) {
      this.pageNum = val
      this.$nextTick(()=>{
        this.getData()
      })
    },
    // 搜索
    onSearch(){
      this.pageNum =1//每次搜索从1开始搜索
      this.getData()
    },
    // 重置
    onReset(){
      this.siteId=''
      this.pageNum =1//每次搜索从1开始搜索
      this.getData()
    },
    // 获取数据
    getData(){
      this.loading=true
      const {siteId,pageNum,pageSize} =this
      getDeviceInfoList({siteId,pageNum,pageSize}).then(response => {
        this.tableData=response?.rows || [];
        this.totalSize = response?.total || 0
      }).finally(() => {this.loading=false})
    },
    //获取站点列表
    getZdList(){
      this.searchLoading=true
      getAllSites().then(response => {
        this.siteList = response?.data || []
      }).finally(() => {this.searchLoading=false})
    }
  },
  mounted() {
    this.onReset()
    this.getZdList()
  }
}
</script>

<style scoped lang="scss">

</style>
