<template>
  <div class="communicate">
    <div class="comTop">
      <div class="comTopLeft">
        <el-input
          placeholder="搜索设备或编号"
          v-model="filterText"
          class="comTopLeftInput"
          @input="Select()"
        >
          <template #suffix>
            <i class="el-icon-search el-input__icon"></i>
          </template>
        </el-input>
        <el-button
          class="search-button"
          icon="el-icon-plus"
          type="success"
          @click="Insert()"
        >
          新增
        </el-button>
      </div>

      <div class="comRight">
        <el-upload
          class="upload-demo"
          :action="fileUrl + 'device/deviceImport'"
          :on-progress="handleProgress"
          :on-success="handleUpAvatar"
          multiple
          :limit="1"
          :headers="{
            accessToken: [accessToken],
          }"
          :file-list="fileList"
          style="float: right"
        >
          <el-button size="small" type="primary">导入</el-button>
        </el-upload>
        <el-button type="primary" @click="DataReportExport()">导出</el-button>
      </div>
    </div>

    <div class="comContent">
      <el-table
        :data="tableData"
        border
        stripe
        :header-cell-style="headClass"
        :height="Height"
        v-loading="loading"
      >
        <el-table-column
          prop="deviceStatus"
          align="center"
          label="状态"
          width="50"
        >
          <template #default="scope">
            <el-avatar
              class="status"
              :style="
                scope.row.deviceStatus == 1
                  ? 'background-color:red'
                  : 'background-color:#04F21C'
              "
            ></el-avatar>
          </template>
        </el-table-column>

        <el-table-column
          prop="deviceName"
          label="设备名称"
          align="center"
          width="150"
        ></el-table-column>
        <el-table-column
          prop="deviceCode"
          label="设备编号"
          align="center"
          width=""
        ></el-table-column>
        <el-table-column
          prop="siteName"
          label="所属站点"
          align="center"
          width=""
        ></el-table-column>
        <el-table-column
          prop="statusTime"
          label="最后通信时间"
          align="center"
          width=""
        ></el-table-column>
        <el-table-column
          prop="offlineDuration"
          label="离线时长"
          align="center"
          width=""
        ></el-table-column>
        <el-table-column
          prop="onlineDuration"
          label="在线时长"
          align="center"
          width=""
        ></el-table-column>
        <el-table-column
          prop="deviceAddress"
          label="设备地址"
          align="center"
          width=""
        ></el-table-column>
        <el-table-column align="center" label="操作" width="200">
          <template #default="scope">
            <el-button
              type="text"
              size="small"
              style="color: #409eff"
              @click.prevent="Update(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>
            <el-button
              @click="clone(scope.row)"
              type="text"
              size="small"
              style="color: #409eff"
            >
              克隆
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="listPagination">
        <el-pagination
          v-model:currentPage="currentPage"
          :page-sizes="[15, 20, 25, 30]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          background
        ></el-pagination>
      </div>
    </div>
    <div>
      <insert-Update
        :dialogBool="dialogBool"
        :dialogTitle="dialogTitle"
        :dataList="dataList"
        @show="showValue"
      ></insert-Update>

      <clone-Dialog
        :clone_Dialog="cloneDialogBool"
        @closeNo="closeNo"
        @Select="Select"
        :DialogArray="DialogArray"
      ></clone-Dialog>
    </div>
  </div>
</template>
<script>
import { useStore } from 'vuex'
import { defineComponent, onMounted, ref } from 'vue'
import insertUpdate from './dialog/insert_update.vue'
import cloneDialog from './dialog/cloneDialog.vue'

import * as api from '@/api/deviceManage/powerEquip/communicateEquip'
import { ElMessage } from 'element-plus'

export default defineComponent({
  name: 'powerEquip',
  components: {
    cloneDialog,
    insertUpdate,
  },
  props: {
    Height: String,
  },
  setup() {
    const store = useStore()
    store
    const pageSize = ref(15)
    const currentPage = ref(1)
    const total = ref(0)
    const filterText = ref('')
    const tableData = ref([])
    const activeName = ref('powerEquip')
    const dialogBool = ref(false)
    const dialogTitle = ref('')
    const dataList = ref({})
    const loading = ref(true)

    const cloneDialogBool = ref(false)
    const DialogArray = ref([])

    const fileUrl = ref(window.PLATFROM_CONFIG.baseUrl)
    const fileList = ref([])
    const accessToken = ref(store.state.user.accessToken)

    const handleProgress = (file, fileList) => {
      file
      if (
        !(
          fileList.raw.type ===
            'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' ||
          fileList.raw.type === 'application/vnd.ms-excel'
        )
      ) {
        ElMessage({
          message: '上传文件只能是 xls 和 xlsx 格式!',
          type: 'error',
        })
        return false
      } else {
        return true
      }
    }

    const handleUpAvatar = (res, file) => {
      console.log(res, file)
      fileList.value = []
      ElMessage.success({
        message: '导入成功',
        type: 'success',
      })
      Select()
    }

    //导出
    const DataReportExport = () => {
      api
        .deviceExport({
          deviceName: filterText.value,
        })
        .then((requset) => {
          if (requset.status === 'SUCCESS') {
            window.location.href = window.PLATFROM_CONFIG.fileUrl + requset.data
            ElMessage.success({
              message: '导出成功',
              type: 'success',
            })
          } else {
            ElMessage.error(requset.msg)
          }
        })
    }

    //克隆
    const clone = (row) => {
      DialogArray.value = row
      cloneDialogBool.value = true
    }

    //克隆弹窗关闭
    const closeNo = (value) => {
      cloneDialogBool.value = value
    }

    //查询
    function Select() {
      loading.value = true
      api
        .correspondDeviceList({
          size: pageSize.value,
          current: currentPage.value,
          deviceName: filterText.value,
        })
        .then((requset) => {
          if (requset.status === 'SUCCESS') {
            total.value = requset.data.total
            tableData.value = requset.data.records
            loading.value = false
          } else {
            ElMessage.error(requset.msg)
          }
        })
    }

    //新增
    const Insert = () => {
      dialogBool.value = true
      dialogTitle.value = '新增'
      dataList.value = {
        deviceCode: '',
        deviceName: '',
        floor: 1,
        siteId: '',
        deviceAddress: '',
        deviceType: 1,
        sim: '',
      }
    }

    //修改
    const Update = (row) => {
      dialogBool.value = true
      dialogTitle.value = '修改'
      console.log(row)
      dataList.value = {
        deviceCode: row.deviceCode,
        deviceName: row.deviceName,
        floor: row.floor,
        siteId: row.siteId,
        deviceAddress: row.deviceAddress,
        deviceType: row.deviceType,
        sim: row.sim,
      }
    }

    //新增修改弹窗控制
    const showValue = (value) => {
      dialogBool.value = value
      Select()
    }

    //是否删除  ---- 是
    const confirmEvent = (row) => {
      Delete(row)
    }
    //是否删除  ---- 否
    const cancelEvent = () => {
      console.log('cancel!')
    }
    //删除
    const Delete = (row) => {
      api.correspondDeviceDel({ id: row.id }).then((requset) => {
        if (requset.status === 'SUCCESS') {
          ElMessage.success({
            message: '删除成功',
            type: 'success',
          })
          Select()
        } else {
          ElMessage.error(requset.msg)
        }
      })
    }
    const handleSizeChange = (val) => {
      pageSize.value = val
      Select()
    }
    const handleCurrentChange = (val) => {
      currentPage.value = val
      Select()
    }
    // 表头样式设置
    const headClass = () => {
      return 'background:#FAFAFA !important;color: black;'
    }

    onMounted(() => {
      Select()
    })
    return {
      headClass,
      handleCurrentChange,
      handleSizeChange,

      clone, //克隆按钮事件
      closeNo, //克隆弹窗关闭事件
      DataReportExport, //导出
      Insert,
      Update,
      Delete,
      Select,
      confirmEvent,
      cancelEvent,
      showValue,

      pageSize,
      currentPage,
      total,
      filterText,
      tableData,
      activeName,

      DialogArray,
      cloneDialogBool,

      dialogBool,
      dialogTitle,
      dataList,
      loading,

      fileList,
      fileUrl,
      accessToken,
      handleProgress,
      handleUpAvatar,
    }
  },
})
</script>

<style lang="scss" scoped>
//first样式
.communicate {
  margin: 15px;
  //顶部左侧样式
  .comTop {
    display: flex;
    height: 32px;
    line-height: 32px;
    .comTopLeft {
      width: 70%;
      .goBack {
        margin-right: 15px;
      }
      .comTopLeftTitle {
        font-size: 14px;
        margin-right: 10px;
      }
      .comTopLeftInput {
        width: 15rem;
      }
      .el-input__icon {
        color: #409eff;
      }
      .el-input__inner:hover {
        border-color: #409eff;
      }
      .el-input__inner:focus {
        border-color: #409eff;
      }
      .search-button {
        margin-left: 1rem;
      }
    }

    //顶部右侧样式
    .comRight {
      width: 30%;
      button {
        margin-left: 1rem;
        float: right;
      }
    }
  }
  .comContent {
    margin-top: 15px;
  }
}

.listPagination {
  margin-top: 15px;
  float: right;
}
</style>