<template>
  <div>
    <manager-ui
      :loading="loading"
      title="网元后门"
      :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"
      @expandChange="expandChange"
    >
      <template #expand="{scope}">
        <el-table
          :data="scope.row.children"
          style="width: 100%"
        >
          <el-table-column
            v-if="type == 2"
            prop="backdoorType"
            label="网页后门类型"
          >
            <template slot-scope="scope">
              {{ scope.row.backdoorType | toCase(staticData.backdoorTypeList,'value','label') }}
            </template>
          </el-table-column>
          <el-table-column
            v-else
            prop="trojanType"
            label="木马病毒类型"
          >
            <template slot-scope="scope">
              {{ scope.row.trojanType | toCase(staticData.trojanTypeList,'value','label') }}
            </template>
          </el-table-column>
          <el-table-column
            prop="hash"
            label="hash值"
          />
          <el-table-column
            prop="path"
            label="路径"
          />
          <el-table-column
            prop="discoverTime"
            label="发现时间"
          />
          <el-table-column
            prop="origin"
            label="来源"
          />
          <el-table-column
            prop="status"
            label="状态"
          ><template slot-scope="scope">
            {{ scope.row.status | toCase(staticData.statusList,'value','label') }}
          </template>
          </el-table-column>

          <el-table-column
            label="操作"
          >
            <template slot-scope="scope">
              <el-context-menu
                :menus="menus"
                :scope="scope"
                :default="3"
                :visibles="getVisibles(scope.row)"
                @oper="clickRow"
              />
            </template>
          </el-table-column>
        </el-table>
      </template>
      <template slot="tableTools">
        <el-button type="text" icon="el-icon-refresh" @click="operateSyn(batchRows.map(item => item.macCode))">
          同步
        </el-button>
        <el-button type="text">
          <span @click="operateActionbatch('delete')">
            <icon name="trash" />删除
          </span>
        </el-button>
      </template>
    </manager-ui>
  </div>
</template>

<script>
import { query, operateAction, operateSyn, infoQuery } from './api'
export default {
  props: ['type'],
  data() {
    return {
      loading: false,
      form: {
        status: null,
        serverIp: null,
        backdoorType: null,
        trojanType: null,
        hash: null,
        path: null
      },

      pagination: {
        current: 1,
        size: 10,
        total: 0
      },
      tableData: [],
      menus: [
        {
          text: '同步',
          command: 'syn',
          icon: 'el-icon-refresh'
        }, {
          text: '隔离',
          command: 'isolate',
          icon: 'el-icon-help',
          visible: true
        }, {
          text: '恢复隔离',
          command: 'revert',
          icon: 'el-icon-s-help',
          visible: true
        }, {
          text: '信任',
          command: 'add_trust',
          icon: 'el-icon-document-checked',
          visible: true
        }, {
          text: '取消信任',
          command: 'cancel_trust',
          icon: 'el-icon-document-delete',
          visible: true
        }, {
          text: '删除',
          command: 'delete',
          icon: 'el-icon-delete',
          iconColor: 'red'
        }
      ],
      batchRows: []
    }
  },
  computed: {
    columnItems() {
      return [
        {
          type: 'selection',
          width: 60
        }, {
          type: 'expand',
          _key: 'expand',
          render: true,
          width: 60
        },
        {
          _key: 'serverIp',
          prop: 'serverIp',
          label: '主机IP'
        }
      ].concat(this.columnItemsByType)
    },
    columnItemsByType() {
      let ownColumn = []
      if (this.type == 2) {
        ownColumn = [{
          _key: 'backdoorCount',
          prop: 'backdoorCount',
          label: '网页后门数'
        }]
      }
      if (this.type == 1) {
        ownColumn = [{
          _key: 'trojanCount',
          prop: 'trojanCount',
          label: '木马病毒数'
        }]
      }
      return ownColumn
    },
    queryItems() {
      return this.queryItemByType.concat([
        {
          type: 'select',
          span: 12,
          key: 'status',
          clearable: true,
          multiple: true,
          placeholder: '请选择处置状态',
          label: '处置状态',
          option: 'statusList',
          optionLabel: 'label',
          optionValue: 'value'
        }, {
          type: 'input',
          span: 12,
          key: 'serverIp',
          label: '主机IP'
        }, {
          type: 'input',
          span: 12,
          key: 'hash',
          label: 'hash值'
        }, {
          type: 'input',
          span: 12,
          key: 'path',
          label: '路径'
        }
      ])
    },
    queryItemByType() {
      let ownQuery = []
      if (this.type == 1) {
        ownQuery = [{
          type: 'select',
          span: 12,
          key: 'trojanType',
          clearable: true,
          multiple: true,
          placeholder: '请选择木马病毒类型',
          label: '木马病毒类型',
          option: 'trojanTypeList',
          optionLabel: 'label',
          optionValue: 'value'
        }]
      }
      if (this.type == 2) {
        ownQuery = [{
          type: 'select',
          span: 12,
          key: 'backdoorType',
          clearable: true,
          multiple: true,
          placeholder: '请选择网页后门类型',
          label: '网页后门类型',
          option: 'backdoorTypeList',
          optionLabel: 'label',
          optionValue: 'value'
        }]
      }
      return ownQuery
    },
    staticData() {
      return {
        statusList: [
          { value: '0', label: '待处理' },
          { value: '1', label: '已处理' }
        ],
        backdoorTypeList: [
          { value: '1', label: 'ASP写入后门木马' },
          { value: '2', label: 'MySql提权木马' }
        ],
        trojanTypeList: [
          { value: '1', label: 'ASP写入后门木马' },
          { value: '2', label: 'MySql提权木马' }
        ]
      }
    }
  },
  created() {
    this.search()
  },
  methods: {
    getVisibles(row) {
      return [
        row.isolate == 1,
        row.isolate == 2,
        row.trust == 1,
        row.trust == 2
      ]
    },
    // 按钮操作-开始
    clickRow(command, scope) {
      if (command === 'syn') {
        this.operateSyn('syn', [scope.row.macCode])
      } else {
        this.operateTooltip(command, [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 = {
        map: {
          macCodes: macCodes,
          action: action,
          riskIds: [1788, 1790], // 取riskId
          itemIds: [22, 21], // 去tiemId
          type: this.type
        }
      }
      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(macCodes) {
      var params = {
        map: {
          type: this.type,
          macCodes: macCodes
        }
      }
      operateSyn(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'
          })
        }
      })
    },
    // 按钮操作-结束
    resetForm() {
      this.search()
    },
    doSelectHandle: function(selection, row) {
      this.batchRows = selection
    },
    search() {
      this.loading = true
      this.form.type = this.type
      var params = {
        map: this.form,
        page: this.pagination
      }
      query(params).then((rep) => {
        this.tableData = rep.data.data.list.map(item => {
          item.children = []
          return item
        })
        this.pagination.total = rep.data.data.page.total
        this.loading = false
      }, (error) => {
        this.loading = false
        console.log(error)
      })
    },
    expandChange(row) {
      var params = {
        map: {
          type: this.type,
          macCodes: row.macCode
        }
      }
      infoQuery(params).then((rep) => {
        row.children = rep.data.data.list
      }, (error) => {
        console.log(error)
      })
    }
  }
}
</script>
