<template>
  <div class="newService">
    <div class="newService-head flex-wrap">
      <div class="manageTitle">{{ title }}</div>
      <div class="icons flex-wrap">
        <div class="icons-list start">
          <span class="icons-list-box"></span>
          <span class="icons-list-text">启用</span>
        </div>
        <div class="icons-list stop">
          <span class="icons-list-box"></span>
          <span class="icons-list-text">停用</span>
        </div>
        <div class="icons-list error">
          <span class="icons-list-box"></span>
          <span class="icons-list-text">异常</span>
        </div>
      </div>
    </div>
    <div class="newService-content flex-wrap">
      <div class="newService-content-left">
        <div class="newService-content-left-top">
          <div class="flex head">
            <div class="title">机器列表</div>
            <!-- <el-button @click="handleAdd" class="serButton" size="small">新增</el-button> -->
          </div>
          <div class="search">
            <el-input size="small" placeholder="请输入内容" clearable prefix-icon="el-icon-search" v-model="searchs">
            </el-input>
          </div>
        </div>
        <div class="newService-content-left-bottom">
          <template v-if="dataList.length">
            <el-scrollbar ref="scroll" style="height: 100%">
              <div v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
                <div v-for="(item,index) in dataList" :key="index" @click.stop="handleClick(item,index)" :class="index == activeIndex ? 'active':''" class="contents flex">
                  <div class="left">
                    <span :class="item.deploystate == 0? 'error' : 'success'" class="box"></span>
                    <el-tooltip class="item" effect="dark" :content="item.deployNodeName" placement="top">
                      <span class="txt">{{ item.deployNodeName }}</span>
                    </el-tooltip>
                  </div>
                  <div v-show="activeIndex == index" class="right">
                    <template v-if="!flag && item.deployNodeID">
                      <!-- <span @click.stop="handleStart" v-if="!item.deploystate" class="start">启用</span>
                      <span @click.stop="handleStop" v-else class="stop">停用</span>
                      <span @click.stop="handleRest(item)" class="rest">重置</span> -->
                    </template>
                    <!-- <span @click.stop="handleError" class="error">删除</span> -->
                  </div>
                </div>
              </div>
            </el-scrollbar>
          </template>
          <template v-else>
            <el-empty description="暂无数据"></el-empty>
          </template>
        </div>
      </div>
      <div class="newService-content-left">
        <div class="newService-content-left-top">
          <div class="flex head">
            <div class="title">服务列表</div>
            <!-- <el-button @click="handleAdd" class="serButton" size="small">新增</el-button> -->
          </div>
          <div class="search">
            <el-input size="small" placeholder="请输入内容" clearable prefix-icon="el-icon-search" v-model="search">
            </el-input>
          </div>
        </div>
        <div class="newService-content-left-bottom">
          <template v-if="dataLists.length">
            <el-scrollbar ref="scroll" style="height: 100%">
              <div v-loading="loadings" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
                <div v-for="(item,index) in dataLists" :key="index" @click.stop="handleClicks(item,index)" :class="index == activeIndexs ? 'active':''" class="contents flex">
                  <div class="left">
                    <span :class="item.runState ? 'success' : 'error'" class="box"></span>
                    <el-tooltip class="item" effect="dark" :content="item.serviceName" placement="top">
                      <span class="txt">{{ item.serviceName }}</span>
                    </el-tooltip>
                  </div>
                  <div v-show="activeIndexs == index" class="right">
                      <template v-if="item.serviceType == 4">
                        <span @click.stop="handleStart" v-if="item.runState == 0" class="start">启用</span>
                        <span @click.stop="handleStop" v-if="item.runState == 1 || item.runState == ''" class="stop">停用</span>
                        <span @click.stop="handleRest(item)" class="rest">重置</span>
                      </template>
                      <template v-else>
                        <span @click.stop="handleRest(item)" class="rest">重置</span>
                      </template>
                    <!-- <span @click.stop="handleError" class="error">删除</span> -->
                  </div>
                </div>
              </div>
            </el-scrollbar>
          </template>
          <template v-else>
            <el-empty description="暂无数据"></el-empty>
          </template>
        </div>
      </div>
      <div class="newService-content-right">
        <div style="height: calc(100% - 280px);" class="data-table">
          <el-table  :data="filteredTableData"   stripe :show-summary="showSummary" border ref="table"  class="table infinite-list" style="width: 100%; overflow: auto" >
            <el-table-column v-for="(item, index) in tableColsCopy" :sortable="item.needSort ? true : false" :key="index" :prop="item.columnName" :label="item.columnLabel" >
              <template #header>
                <span class="colTips">
                  <el-tooltip :content="item.columnDescribe" placement="top">
                    <span>{{ item.columnLabel }}</span>
                  </el-tooltip>
                </span>
                <span v-if="item.needFilters">
                  <el-popover placement="bottom" trigger="click" @show="popoverShowHandler(item.columnName)" @hide="popoverHideHandler">
                    <i slot="reference" :class="[
                        'filter-arrow',
                        'el-icon-arrow-down',
                        arrowClass(item.columnName),
                      ]" />
                    <el-form>
                      <el-form-item :label="item.columnLabel">
                        <el-select v-model="filterValues[item.columnName]" size="small" placeholder="筛选" default-first-option filterable clearable>
                          <el-option v-for="(option, optionIndex) in tableDataFilters[
                              item.columnName
                            ]" :key="option.value + optionIndex" :value="option.value" :label="option.text" />
                        </el-select>
                      </el-form-item>
                    </el-form>
                  </el-popover>
                </span>
              </template>
            </el-table-column>
            <!-- <el-table-column fixed="right" label="操作">
              <template slot-scope="scope">
                <div class="hd-td">
                  <el-button type="text" @click="handleEdit(scope.row)" size="small" class="rmScs">编辑</el-button>
                  <el-button class="rmSc" type="text" @click="handleRemove(scope.row)" size="small">删除</el-button>
                </div>
              </template>
            </el-table-column> -->
          </el-table>
        </div>
      </div>
    </div>
    <Dialog :flag="rmFlag">
      <div class="airportInfoDialog">
        <div class="title del-title">删除</div>
        <div class="content del-content">
          <span class="el-icon-error error r10"></span>您是否确认删除<span class="error l10">{{ dataObj.serviceName }}</span>
          ？
        </div>
        <div class="foot right Delfoot">
          <el-button size="medium" class="r24" @click="tableRemove" type="danger">删除</el-button>
          <el-button size="medium" @click="rmFlag = false">取消</el-button>
        </div>
      </div>
    </Dialog>
  </div>
</template>

<script>
import Table from '@/views/newTable/index.vue'
import Dialog from "@/layout/components/Dialog/index.vue"
import { Query, newData, modifyData, moveData, start, stop } from "@/api/webApi"
import pf from '@/layout/mixin/publicFunc'
import * as _ from 'lodash'
export default {
  name: 'NewService',
  props: {
        //表格高度
    tableHeight: {
      type: [String, Number],
      default: 0,
    },
        // 是否显示合计行
    showSummary: {
      type: Boolean,
      default: false,
    },
  },
  mixins: [pf],
  components: { Table, Dialog },
  data () {
    return {
      title: '运维监控',
      search: '',
      searchs: '',
      arrs: [],
      arrss: [],
      flag: true,
      rmFlag: false,
      formInline: {
        serviceName: '',
        serviceType: '',
        workId: '',
        loopCount: '',
        frequencyCount: '',
        frequencyUnit: '',
        taskValid: '',
        taskInvalid: '',
        taskType: '',
        cronExpress: ''
      },
      serviceType: [
        {
          label: '接收',
          value: 1
        },
        {
          label: '采集',
          value: 4
        }
      ],
      activeIndex: null,
      activeIndexs: null,
      pageIndex: 0,
      pageSize: 9999,
      dataContent: {},
      queryId: '',
      dataObj: {},
      dataObjs: {},
      dataType: 'edit',
      noMore: false,
      loading: false,
      loadings: false,
      dataId: 8,
      msgContent: {},
      msgContents: {},
      jqList: [],
      tableColsCopy: [
      {
        "queryTemplateColumnSetID": 1982,
        "serviceOutPutId": 203,
        "columnName": "library_name",
        "columnLabel": "算法名称",
        "columnDescribe": null,
        "needSort": null,
        "needFilters": null,
        "needShow": 1,
        "needGroup": null,
        "dataType": null,
        "listqueryTemplateID": null,
        "needCount": null,
        "orderNumber": null,
        "columnKey": null,
        "is_search": null,
        "default_query_parameters": null,
        "groupName": null,
        "nameLength": null
        },
        {
          "queryTemplateColumnSetID": 1983,
          "serviceOutPutId": 203,
          "columnName": "library_type",
          "columnLabel": "算法类型 1. java 2. js 脚本 3. 数据库 ",
          "columnDescribe": null,
          "needSort": null,
          "needFilters": null,
          "needShow": 1,
          "needGroup": null,
          "dataType": null,
          "listqueryTemplateID": null,
          "needCount": null,
          "orderNumber": null,
          "columnKey": null,
          "is_search": null,
          "default_query_parameters": null,
          "groupName": null,
          "nameLength": null
        },
        {
          "queryTemplateColumnSetID": 1984,
          "serviceOutPutId": 203,
          "columnName": "datasource_id",
          "columnLabel": "数据源ID",
          "columnDescribe": null,
          "needSort": null,
          "needFilters": null,
          "needShow": 1,
          "needGroup": null,
          "dataType": null,
          "listqueryTemplateID": null,
          "needCount": null,
          "orderNumber": null,
          "columnKey": null,
          "is_search": null,
          "default_query_parameters": null,
          "groupName": null,
          "nameLength": null
        },
      ],
      tableData: [],
      filteredTableData: [],
      search: '',
      filterText: '',
      flag: true,
      flags: true,
      formInline: {
        role_name: '',
        comment: ''
      },
      formInlines: {
        role_name: '',
        comment: ''
      },
      activeIndex: null,
      pageIndex: 0,
      pageSize: 9999,
      pageIndexs: 0,
      pageSizes: 9999,
      dataContent: {},
      queryId: '',
      dataObj: {},
      dataType: 'edit',
      noMore: false,
      loading: false,
      treeData: [
        {
          auth_name: '所有权限',
          auth_id: 0,
          children: [],
          up_auth_id: -1
        }
      ],
      treeCheckId: '',
      treeCheckObj: {},
      defaultProps: {
        children: 'children',
        label: 'auth_name'
      },
      defaultArrProps: {
        children: 'children',
        label: 'user_group_name'
      },
      checkGroup: [],
      checkArrs: [],
      checkDatas: [],
      checkGroups: [],
      multipleTable: [],
      rmFlag: false,
      msgUserId: '',
      userId: '',
      userGroupArr: [],
      userArr: [],
      loading1: false
    }
  },
  computed: {
    dataLists () {
      return this.arrss.filter(data => !this.searchs || data.serviceName.toLowerCase().includes(this.searchs.toLowerCase()))
    },
    dataList () {
      return this.arrs.filter(data => !this.search || data.deployNodeName.toLowerCase().includes(this.search.toLowerCase()))
    },
    checkStatus () {
      return function (formInline) {
        return (formInline.serviceType && formInline.taskType) || (formInline.serviceType && formInline.taskType == 0) ? false : true
      }
    }
  },
  created () {
    const { title, qid } = this.$route.meta
    this.title = title
    this.queryId = qid
    this.getQuery(SERVICE_ID.getJqId)
  },
  updated () {
    this.scrollDown()
  },
  methods: {
    async getQuery (id) {
      try {
        this.loading = true;
        const { code, returnData } = await Query({
          serviceId: id,
          page: ++this.pageIndex,
          pageSize: this.pageSize,
          dataContent: this.dataContent,
          event: '0'
        })
        if (code == 0) {
          if (returnData.length === 0) {
            this.pageIndex--;
            this.noMore = true;
          }
          this.arrs.push(...returnData)
          if (this.dataType == 'add') {
            const item = this.arrs[this.arrs.length - 1]
            if (Object.keys(item).length) {
              this.dataObj = item
              this.flag = false
              this.msgContent = item
            }
          }
          this.loading = false;
        } else {
          this.pageIndex--;
          this.loading = false;
        }
      } catch (error) {
        this.pageIndex--;
        this.loading = false;
      }
    },
    async getQuerys (id,cont) {
      try {
        this.loadings = true;
        const { code, returnData } = await Query({
          serviceId: id,
          page: 1,
          pageSize: this.pageSizes,
          dataContent: {workId:cont},
          event: '0'
        })
        if (code == 0) {
          if (returnData.length === 0) {
            this.pageIndexs--;
            this.noMore = true;
          }
          this.arrss = []
          this.arrss.push(...returnData)
          if (this.dataType == 'add') {
            const item = this.arrss[this.arrss.length - 1]
            if (Object.keys(item).length) {
              this.dataObjs = item
              this.flags = false
              this.msgContents = item
            }
          }
          console.log( this.arrss)
          this.loadings = false;
        } else {
          this.pageIndexs--;
          this.loadings = false;
        }
      } catch (error) {
        this.pageIndexs--;
        this.loadings = false;
      }
    },
    async getMsgList (id,cont) {
      try {
        const { code, returnData } = await Query({
          serviceId: id,
          page: 1,
          pageSize: 99,
          dataContent:{ service_id: cont},
        })
        if (code == 0) {
          this.filteredTableData = returnData
        }
      } catch (error) {
        this.filteredTableData = []
      }
    },
    load () {
      if (!this.noMore) {
        this.getQuery(this.queryId);
      }
    },
    scrollDown () {
      if (this.$refs['scroll'] && this.dataType == 'add') {
        this.$refs['scroll'].wrap.scrollTop = this.$refs['scroll'].wrap.scrollHeight
      }
    },
    resetTable () {
      this.pageIndex = 0;
      this.noMore = false;
      this.arrs = [];
    },
    //服务列表-新增
    handleAdd () {
      const datas = this.arrs.filter(item => item.deployNodeName == '新建机器')
      if (datas && datas.length) {
        return
      }
      this.dataType = 'add'
      this.flag = false
      this.dataObj.deployNodeName = '新建机器'
      this.arrs.push({ deployNodeName: '新建机器' })
      this.activeIndex = this.arrs.length - 1
      for (const key in this.formInline) {
        if (Object.hasOwnProperty.call(this.formInline, key)) {
          this.formInline[key] = null
        }
      }
      this.msgContent = {}
    },
    //服务列表-点击
    handleClick (item, index) {
      this.dataType = 'edit'
      this.dataObj = _.cloneDeep(item)
      this.formInline = _.cloneDeep(item)
      this.activeIndex = index
      this.flag = false
      this.msgContent = item
      this.getQuerys(SERVICE_ID.sysAllMenuId,item.deployNodeID)
    },
    //机器列表-点击
    handleClicks (item, index) {
      this.dataType = 'edit'
      this.dataObjs = _.cloneDeep(item)
      this.formInline = _.cloneDeep(item)
      this.activeIndexs = index
      this.flags = false
      this.msgContents = item
      this.getMsgList(8,item.serviceID)
    },
    //服务列表-启用
    handleStart () {
      this.$message.warning('开发中')
      // if (this.dataObj.deployNodeID && this.dataType == 'edit') {
      //   this.dataObj.runState = 1
      //   this.controlService(1, this.dataObj)
      // } else if (this.dataType == 'add' && this.arrs[this.arrs.length - 1].deployNodeID) {
      //   this.arrs[this.arrs.length - 1].runState = 1
      //   this.controlService(1, this.arrs[this.arrs.length - 1])
      // }
      // else {
      //   this.$message.error('请先添加当前服务后再操作')
      // }
    },
    //服务列表-停用
    handleStop () {
      this.$message.warning('开发中')
      // if (this.dataObj.deployNodeID && this.dataType == 'edit') {
      //   this.dataObj.runState = 0
      //   this.controlService(0, this.dataObj)
      // } else if (this.dataType == 'add' && this.arrs[this.arrs.length - 1].deployNodeID) {
      //   this.arrs[this.arrs.length - 1].runState = 0
      //   this.controlService(0, this.arrs[this.arrs.length - 1])
      // }
      // else {
      //   this.$message.error('请先添加当前服务后再操作')
      // }
    },
    //服务列表-重置
    handleRest (item) {
      this.$message.warning('开发中')
      // this.controlService(0, item)
    },
    //服务列表-保存
    async handleSave () {
      if (this.dataObj.deployNodeID && this.dataType == 'edit') {
        const { code } = await this.getChangeList(this.queryId, this.formInline, 2, 'deployNodeID')
        if (code) {
          this.$message.success('操作成功')
          this.resetTable()
          this.getQuery(this.queryId)
        } else {
          this.$message.success('操作失败')
        }
      } else if (this.dataType == 'add' && this.arrs[this.arrs.length - 1].deployNodeID) {
        this.formInline.deployNodeID = this.arrs[this.arrs.length - 1].deployNodeID
        const { code } = await this.getChangeList(this.queryId, this.formInline, 2, 'deployNodeID')
        if (code) {
          this.$message.success('操作成功')
          this.resetTable()
          this.getQuery(this.queryId)
        } else {
          this.$message.success('操作失败')
        }
      } else if (this.dataType == 'add') {
        const { code } = await this.getChangeList(this.queryId, this.formInline, 1)
        if (code) {
          this.$message.success('操作成功')
          this.resetTable()
          this.getQuery(this.queryId)
        } else {
          this.$message.success('操作失败')
        }
      }
      else {
        this.$message.error('请先选中服务后再操作')
      }
    },
    async tableRemove () {
      if (this.dataObj.deployNodeID && this.dataType == 'edit') {
        const { code } = await this.getChangeList(this.queryId, this.dataObj, 3)
        if (code) {
          this.$message.success('操作成功')
          this.resetTable()
          this.getQuery(this.queryId)
        } else {
          this.$message.success('操作失败')
        }
        this.msgContent = {}
        this.activeIndex = null;
        this.dataObj = {};
        for (const key in this.formInline) {
          if (Object.hasOwnProperty.call(this.formInline, key)) {
            this.formInline[key] = null
          }
        }
        this.flag = true
      } else if (this.dataType == 'add' && this.arrs[this.arrs.length - 1].deployNodeID) {
        const { code } = await this.getChangeList(this.queryId, this.arrs[this.arrs.length - 1], 3)
        if (code) {
          this.$message.success('操作成功')
          this.resetTable()
          this.getQuery(this.queryId)
        } else {
          this.$message.success('操作失败')
        }
        this.msgContent = {
          service_id: ''
        }
        this.activeIndex = null;
        this.dataObj = {};
        for (const key in this.formInline) {
          if (Object.hasOwnProperty.call(this.formInline, key)) {
            this.formInline[key] = null
          }
        }
        this.flag = true
        this.dataType = 'edit'
      }
      else {
        this.arrs.splice(this.activeIndex, 1)
        this.activeIndex = null
        this.flag = true
        this.dataObj = {}
      }
      this.rmFlag = false
    },
    //服务列表-删除
    handleError () {
      this.rmFlag = true
    },
    //服务列表-增/删/改
    async generalDataReception (event, data) {
      try {
        const params = {
          serviceId: this.queryId,
          dataContent: data,
          event: `${event}`,
        };
        const { code } =
          event == 1
            ? await newData(params)
            : event == 2
              ? await modifyData(params)
              : await moveData(params);
        if (code == 0) {
          this.$message.success("操作成功");
          this.resetTable();
          this.getQuery(this.queryId);
        } else {
          this.$message.error("操作失败");
        }
      } catch (error) {
        this.$message.error("操作失败");
      }
    },

    //服务启停
    async controlService (event, data) {
      try {
        const params = {
          serviceId: data.deployNodeID
        };
        const { code } =
          event == 1
            ? await start(params)
            : await stop(params);
        if (code == 0) {
          this.$message.success('操作成功')
          this.resetTable()
          this.getQuery(this.queryId)
          // this.generalDataReception(2, data)
        } else {
          this.$message.error("操作失败");
        }
      } catch (error) {
        this.$message.error("操作失败");
      }
    },
  }
}
</script>

<style lang="scss" scoped>
@import "./css/index.scss";
</style>
