<template>
  <div>
    <manager-ui
      :loading="loading"
      title="SA资产"
      :query-model="form"
      :query-items="queryItems"
      :static-data="staticData"
      :column-items="columnItems"
      :table-data="tableData"
      :pagination="pagination"
      show-table-tools
      :show-download-btn="false"
      :show-add-btn="false"
      @searchClick="pagination.current=1;batchRows = [];search();"
      @resetForm="pagination.current=1;batchRows = [];resetForm();"
      @search="search"
      @selection-change="doSelectHandle"
    >
      <template #agentState="{scope}">
        {{ scope.row.agentState | toCase(staticData.agentStateList,'value', 'label') }}
      </template>
      <template #operate="{scope}">
        <el-context-menu
          :menus="menus"
          :scope="scope"
          :default="3"
          :visibles="[scope.row.agentState == '4',scope.row.agentState == '2']"
          @oper="clickRow"
        />
      </template>
      <template slot="tableTools">
        <el-button type="text" icon="el-icon-video-play" @click="operateActionbatch('enable')">
          启用
        </el-button>
        <el-button type="text" icon="el-icon-video-pause" @click="operateActionbatch('disable')">
          停用
        </el-button>
        <el-button type="text">
          <span @click="operateActionbatch('delete')">
            <icon name="trash" />卸载
          </span>
        </el-button>
      </template>
      <template slot="tableDropdown">
        <el-button type="text" icon="el-icon-refresh" @click="operateSyn">
          同步
        </el-button>
      </template>
    </manager-ui>
  </div>
</template>

<script>
import { query, operateAction, operateSyn } from './api'
export default {
  data() {
    return {
      loading: false,
      form: {
        agentState: null,
        serverIp: null,
        version: null
      },
      queryItems: [
        {
          type: 'select',
          span: 12,
          key: 'agentState',
          clearable: true,
          multiple: true,
          placeholder: '请选择Agent状态',
          label: 'Agent状态',
          option: 'agentStateList',
          optionLabel: 'label',
          optionValue: 'value'
        }, {
          type: 'input',
          span: 12,
          key: 'serverIp',
          label: '主机IP'
        }, {
          type: 'input',
          span: 12,
          key: 'version',
          label: 'Agent版本'
        }
      ],
      columnItems: [
        {
          type: 'selection',
          width: 60
        },
        {
          _key: 'serverIp',
          prop: 'serverIp',
          label: '主机IP'
        },
        {
          _key: 'agentState',
          prop: 'agentState',
          label: 'Agent状态',
          render: true
        },
        {
          _key: 'version',
          prop: 'version',
          label: 'Agent版本'
        },
        {
          _key: 'installTime',
          prop: 'installTime',
          label: '安装时间'
        },
        {
          _key: 'lastOnlineTime',
          prop: 'lastOnlineTime',
          label: '最近上线时间'
        },
        {
          _key: 'lastUpdateTime',
          prop: 'lastUpdateTime',
          label: '最后在线时间'
        }, {
          _key: 'operate',
          prop: 'operate',
          width: '92px',
          label: '操作',
          render: true
        }
      ],
      pagination: {
        current: 1,
        size: 10,
        total: 0
      },
      tableData: [],
      menus: [
        {
          text: '启用',
          command: 'enable',
          icon: 'el-icon-video-play',
          visible: true
        }, {
          text: '停止',
          command: 'disable',
          icon: 'el-icon-video-pause',
          visible: true
        }, {
          text: '卸载',
          command: 'delete',
          icon: 'el-icon-delete',
          iconColor: 'red'
        }
      ],
      batchRows: []
    }
  },
  computed: {
    staticData() {
      return {
        agentStateList: [
          { value: '1', label: '启用中' },
          { value: '2', label: '已启动' },
          { value: '3', label: '停用中' },
          { value: '4', label: '已停用' },
          { value: '5', label: '卸载中' },
          { value: '6', label: '已卸载' },
          { value: '7', label: '已安装' }
        ]
      }
    }
  },
  created() {
    this.search()
  },
  methods: {
    // 按钮操作-开始
    clickRow(command, scope) {
      if (command === 'enable') {
        this.operateTooltip('enable', [scope.row.macCode])
      }
      if (command === 'disable') {
        this.operateTooltip('enable', [scope.row.macCode])
      }
      if (command === 'delete') {
        this.operateTooltip('enable', [scope.row.macCode])
      }
    },
    operateActionbatch(action) {
      this.operateTooltip(action, this.batchRows.map(item => item.macCode))
    },
    operateTooltip(action, macCodes) {
      this.$confirm('确认执行此次操作？').then(() => {
        this.operateAction(action, macCodes)
      }).catch(() => {})
    },
    operateAction(action, macCodes) {
      var params = {
        sdAgentInfo: {
          macCodes: macCodes,
          action: action
        }
      }
      operateAction(params).then(resp => {
        var d = resp.data
        if (d.returnCode == '0') {
          this.$message({
            message: d.returnMsg,
            type: 'success'
          })
          this.search()
        } else {
          this.$message({
            message: d.returnMsg,
            type: 'error'
          })
        }
      }, (error) => {
        console.log(error)
      })
    },
    operateSyn() {
      operateSyn().then(resp => {
        var d = resp.data
        if (d.returnCode == '0') {
          this.$message({
            message: d.returnMsg,
            type: 'success'
          })
          this.search()
        } else {
          this.$message({
            message: d.returnMsg,
            type: 'error'
          })
        }
      })
    },
    // 按钮操作-结束
    resetForm() {
      this.search()
    },
    doSelectHandle: function(selection, row) {
      this.batchRows = selection
    },
    search() {
      var params = {
        map: this.form,
        page: this.pagination
      }
      this.loading = true
      query(params).then((rep) => {
        this.tableData = rep.data.data.list
        this.pagination.total = rep.data.data.page.total
        this.loading = false
      }, (error) => {
        this.loading = false
        console.log(error)
      })
    }
  }
}
</script>
