<template>
  <div class="dashboard-container">
    <div class="search-content">
      <el-select
            v-model="searchData.monitorSystemName"
            placeholder="请选择监测系统名称"
            style="width: 220px; padding: 0 10px"
            filterable
          >
            <el-option
              v-for="item in monitorNameData"
              :key="item.monitorSystemName"
              :label="item.monitorSystemName"
              :value="item.monitorSystemName"
            />
          </el-select>          
      <!-- <el-select style="width: 220px;" clearable placeholder="请选择状态" v-model="searchData.status">
        <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select> -->
      <div class="search-btn">        
        <div class="search" @click="searchBtn()">查询</div>
        <div class="reset" @click="reset()">重置</div>
      </div>
    </div>
    
    <div class="table-content">
      <div style="width: 100%;height: 30px;">
        <div class="btn" style="margin-right: 20px;" @click="addRoleBtn()">
          <span class="icon font_family">&#xe604;</span>
          新增
        </div>
        <div class="btn" @click="toDelete()">
            <span class="icon font_family">&#xe607;</span>
            批量删除
          </div>
      </div>
      <el-table ref="multipleTable" :data="tableData" @selection-change="handleSelectionChange" tooltip-effect="dark" style="width: 100%">
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column prop="clientId" label="监测系统编码">
        </el-table-column>
        <el-table-column prop="monitorSystemName" label="监测系统名称">
        </el-table-column>
        <!-- <el-table-column prop="status" label="状态" width="80">
          <template slot-scope="scope">
            <div class="startUsing" v-if="scope.row.status == 1">在线</div>
            <div class="Deactivate" v-else>离线</div>
          </template>
        </el-table-column> -->
        <!-- <el-table-column prop="remark" label="备注">
        </el-table-column> -->
        <el-table-column prop="createTime" label="创建时间">
        </el-table-column>
        <el-table-column prop="userName" label="操作" width="200">
          <template slot-scope="scope">
            <div class="operateBtn">
              <div @click="updateRole(scope.row)">修改</div>
              <div @click="delRole(scope.row)">删除</div>
              <div @click="lookDetail(scope.row)">详情查看</div>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <detaileDialog v-if="detaildData.dialogVisible" :detaildData="detaildData"></detaileDialog>
      <addRoleDialog v-if="addRoleData.dialogVisible" :addRoleData="addRoleData" @addRoleBtn1="addRoleBtn1"></addRoleDialog>
      <updataRoleDialog v-if="updateRoleData.dialogVisible" :updateRoleData="updateRoleData"
        @updateRoleBtn="updateRoleBtn"></updataRoleDialog>
      <div class="pagination">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 15, 20]"
          :page-size="searchData.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { monitorList,monitorNameList ,monitorDetail,toAddmonit,toUpdateMonitor,toSliceMonitor} from '@/api/monitor'
import detaileDialog from './components/detaileDialog.vue'
import addRoleDialog from './components/addRoleDialog.vue'
import updataRoleDialog from './components/upDateRoleDialog.vue'

export default {
  name: 'home',
  computed: {
    ...mapGetters([
      'name',
    ])
  },
  components: {
    detaileDialog,
    addRoleDialog,
    updataRoleDialog
  },
  data() {
    return {
      tableData: [],
      deleteArray:[],
      monitorNameData:[],
      total: 0,
      searchData: {
        pageNum: 1,
        pageSize: 10,
        monitorSystemName: '',
        status: '',
      },
      detaildData: {
        dialogVisible: false,
        data: {}
      },
      addRoleData: {
        dialogVisible: false,
        data: {}
      },
      updateRoleData: {
        dialogVisible: false,
        data: {}
      },
      statusOptions: [
        {
          label: '在线',
          value: '1'
        },
        {
          label: '离线',
          value: '2'
        }
      ],
      roleOptions: [

      ]
    }
  },
  created() {
    this.getRoleList(this.searchData)
    this.getMonitoreName()
  },
  methods: {
    handleSelectionChange(val){
      this.deleteArray = val.map((item) => item.id);
    },
    getMonitoreName(){
        let params={}
        monitorNameList(params).then(response=>{
            this.monitorNameData=response.data
        })
    },
    getRoleList(params) {
        monitorList(params).then(res => {
        if (res.code == 200) {
          this.total = res.data.total
          this.tableData = res.data.records
        } else {
          this.$message({
            type: 'error',
            message: res.msg
          });
        }
      })
    },
    updateRole(scope) {
      monitorDetail(scope.id).then(res => {
        if (res.code == 200) {
          this.updateRoleData.data = res.data
      this.updateRoleData.dialogVisible = true
        }
      })
    },
    handleSizeChange(val) {
      this.searchData.pageSize = val
      this.getRoleList(this.searchData)
    },
    handleCurrentChange(val) {
      this.searchData.pageNum = val
      this.getRoleList(this.searchData)
    },
    searchBtn() {
      this.getRoleList(this.searchData)
    },
    reset() {
      this.searchData = {
        pageNum: 1,
        pageSize: 10,
        roleName: '',
        status: '',
        roleId: ''
      }
      this.getRoleList(this.searchData)
    },   
    updateRoleBtn(payload) {
      toUpdateMonitor(payload).then(res => {
        if (res.code == 200) {
          this.$message({
            type: 'success',
            message: '修改成功!'
          });
          this.updateRoleData.dialogVisible = false
          this.getRoleList(this.searchData)
        } else {
          this.$message({
            type: 'error',
            message: res.msg
          });
        }
      }
      )
    },
    //删除角色
    delRole(scope) {
      this.deleteArray.push(scope.id)
      this.toDelete()
    },
    toDelete(){
      if(this.deleteArray.length==0){
        this.$message({
              type: 'error',
              message:  '请先选择需要删除的数据'
            });
      }else{
        this.$confirm('确定要删除吗?', '信息提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        toSliceMonitor(this.deleteArray).then(res => {
          if (res.code == 200) {
            this.getRoleList(this.searchData)
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          } else {
            this.$message({
              type: 'error',
              message: res.msg
            });
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
      }
    },
    //添加角色
    addRoleBtn1(payload) {
      toAddmonit(payload).then(res => {        
        if (res.code == 200) {
          this.$message({
            type: 'success',
            message: '添加成功！'
          });
          this.getRoleList(this.searchData)
          this.addRoleData.dialogVisible = false
        }
      })
    },
    addRoleBtn() {
      this.addRoleData.dialogVisible = true
    },
    //查看详情
    lookDetail(scope) {
        monitorDetail(scope.id).then(res => {
        if (res.code == 200) {
          this.detaildData.data = res.data
          this.detaildData.dialogVisible = true
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }

  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}

.dashboard-container {
  .search-content {
    width: 100%;
    height: 74px;
    background-color: #fff;
    display: flex;
    align-items: center;
    padding-left: 10px;

    .el-input {
      margin: 0 10px;
    }

    .el-select {
      margin: 0 10px;
    }

    .search-btn {
      display: flex;
      align-items: center;
      height: 100%;      
      margin-left: 10px;

      div {
        // margin: 0 6px;
        display: inline-block;
        width: 80px;
        height: 40px;
        border-radius: 2px;
        font-size: 14px;
        line-height: 40px;
        text-align: center;
      }

      div:hover {
        cursor: pointer;
      }

      .search {
        margin-right: 10px;
        background-color: #2766DD;
        color: #F7F8FB;
      }

      .search:hover {
        background-color: #4D85F4;
      }

      .reset {
        color: #333334;
        border: 1px solid #D7D7D7;
      }

      .reset:hover {
        color: #1F9FFF;
        border: 1px solid #1F9FFF;
      }
    }
  }

  .table-content {
    margin-top: 15px;
    width: 100%;
    background-color: #fff;
    padding: 0 20px 20px;

    .btn {
      margin: 15px 20px 15px 0;
      cursor: pointer;
      float: left;
      text-align: center;
      width: 98px;
      height: 34px;
      border-radius: 2px;
      border: 1px solid #ABC7FD;
      line-height: 34px;
      font-weight: 400;
      font-size: 14px;
      color: #2250C8;
      background-color: #E7EEFF;
    }

    .btn:hover {
      color: #FFFFFF;
      background-color: #2250C8;
      border: 1px solid #2250C8;
    }

    .btn:active {
      color: #FFFFFF;
      background-color: #194DA4;
      border: 1px solid #194DA4;
    }

    .startUsing {
        width: 54px;
        height: 24px;
        margin: 14.5px auto 0;
        line-height: 24px;
        text-align: center;
        font-size: 12px;
        color: #00974D;
        border-radius: 4px;
        background-color: #E7FAF0;
        border: 1px solid #BEFDDD;
      }

      .Deactivate {
        width: 54px;
        height: 24px;
        margin: 14.5px auto 0;
        line-height: 24px;
        text-align: center;
        font-size: 12px;
        color: #FF9933;
        border-radius: 4px;
        background-color: #FFF3E8;
        border: 1px solid #FDE6CF;
      }

    .operateBtn {
      display: flex;
      justify-content: center;
      color: #2866DD;

      div {
        font-size: 14px;
        margin: 0 5px;
        cursor: pointer;
      }
    }

    .pagination {
      margin: 10px 0;
      width: 100%;
      height: 20px;

      .el-pagination {
        float: right;
        margin: 10px 0;
      }
    }
  }

}
</style>
