<template>
  <div class="content">
    <cs-search title="案件检索" :data="searchData" :span="4" direction="row" @onSearch="onSearch" @getData="onSearch" />
    <div class="index-content">
      <div class="header">
        <el-dropdown @command="handleSelect">
          <el-button type="primary">批量操作<i class="el-icon-arrow-down el-icon--right" /></el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="1">批量删除</el-dropdown-item>
            <el-dropdown-item command="2">批量恢复</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <vxe-grid v-bind="gridOptions" style="margin-top: 20px" @checkbox-change="selectChangeEvent">
        <template #operate="{row}">
          <el-button type="text" @click="resetData(row)">恢复</el-button>
          <el-button type="text" style="color: red" @click="handleDel(row)">删除</el-button>
        </template>
      </vxe-grid>
      <div style="text-align: center">
        <cs-page
          :page.sync="queryForm.page"
          :limit.sync="queryForm.size"
          :total="queryForm.total"
          @pagination="fetchData"
        />
      </div>
    </div>
  </div>
</template>

<script>
import mixin from '@/views/mixin'
import { resetDataStatusByIds, realDeleteByIds, queryCaseList } from '@/api/caseManagement'
export default {
  name: 'Index',
  mixins: [mixin],
  data() {
    return {
      // 筛选数据
      searchData: [
        { label: '案件编号', model: 'caseNo', type: 'input' },
        { label: '案件名称', model: 'caseName', type: 'input' },
        { label: '认定结果', model: 'identifyResult', type: 'selectMultiple', option: JSON.parse(sessionStorage.getItem('identify_result')) }
        // { label: '涉案人员', model: 'involvedPerson', type: 'input' },
        // { label: '最新时间', model: 'updateTime', type: 'datetimerange' }
      ],
      // 表格配置
      gridOptions: {
        ...mixin.data().gridOptions,
        // 指标名称单元格添加样式
        cellClassName: ({ column }) => {
          if (column.field === 'indexName') {
            return 'text-blue'
          }
          return null
        },
        columns: [
          { type: 'checkbox', width: '80px' },
          { title: '案件编号', field: 'caseNo' },
          { title: '案件名称', field: 'caseName' },
          { title: '行为人', field: 'caseActorName' },
          { title: '当事人', field: 'lawParty' },
          { title: '综合得分', field: 'totalScore' },
          { title: '认定结果', field: 'identifyResultName' },
          { title: '删除时间', field: 'updateTime' },
          { title: '操作', slots: { default: 'operate' }, fixed: 'right', width: '150px' }
        ],
        data: []
      },
      selectionRows: [],
      selectedRowKeys: []
    }
  },
  mounted() {
    this.tableHeight(390)
  },
  methods: {
    // 原子指标查询
    fetchData() {
      const params = JSON.parse(JSON.stringify(this.searchFormData))
      params.isDelete = true
      if (params.identifyResult && params.identifyResult.length === 0) delete params['identifyResult']
      queryCaseList(params, this.queryForm.page, this.queryForm.size).then(res => {
        this.gridOptions.data = res.data.records
        this.gridOptions.data.forEach(e => {
          const list = []
          for (const item of e.lawPartyList) {
            list.push(item.name)
          }
          e.lawParty = list.length > 0 ? list.join(',') : '无'
        })
        this.queryForm.total = res.data.total
      })
    },
    async handleSelect(val) {
      if (this.selectionRows.length === 0) {
        this.$baseMessage.error('至少选择一条数据!')
        return
      }
      const list = []
      this.selectionRows.forEach(e => {
        list.push(e.id)
      })
      if (val === '1') {
        this.$baseConfirm('确定要删除吗?', null, async() => {
          const { code, msg } = await realDeleteByIds(list)
          code === 200 ? this.$baseMessage.success(msg || '删除成功!') : this.$baseMessage.error(msg || '删除失败!')
          this.fetchData()
        })
      } else {
        const { code, msg } = await resetDataStatusByIds(list)
        if (code === 200) {
          this.$baseMessage.success(msg || '恢复成功!')
          this.fetchData()
        }
      }
    },
    // 复选框事件(保留翻页选中的数据)
    selectChangeEvent({ checked, records, reserves, row }) {
      // 勾选选中时
      if (checked) {
        // 第一次选数据，还未进行翻页时
        if (reserves.length === 0) {
          this.selectedRowKeys = records.map(v => v.id)
          this.selectionRows = records
        } else {
          // id集合，翻页存在已选中的数据时,拼接新选中的数据
          this.selectedRowKeys = [...reserves.map(v => v.id), ...records.map(v => v.id)]
          // 数据集合，翻页存在已选中的数据时,拼接新选中的数据
          this.selectionRows = [...reserves, ...records]
        }
      } else {
        // 取消选中时
        const idIndex = this.selectedRowKeys.indexOf(row.id)
        if (idIndex > -1) {
          // 删除取消选中删除指定元素id
          this.$delete(this.selectedRowKeys, idIndex)
        }

        let dataIndex = null
        for (let i = 0; i < this.selectionRows.length; i++) {
          if (this.selectionRows[i].id === row.id) {
            dataIndex = i
            break
          }
        }
        // 删除取消选中的元素整个对象
        this.$delete(this.selectionRows, dataIndex)
      }
    },
    // 恢复
    async resetData(row) {
      const { code, msg } = await resetDataStatusByIds([row.id])
      if (code === 200) {
        this.$baseMessage.success(msg || '恢复成功!')
        this.fetchData()
      }
    },
    // 删除
    handleDel(row) {
      this.$baseConfirm('确定要删除吗?', null, async() => {
        const { code, msg } = await realDeleteByIds([row.id])
        code === 200 ? this.$baseMessage.success(msg || '删除成功!') : this.$baseMessage.error(msg || '删除失败!')
        this.fetchData()
      })
    },
    // 筛选
    onSearch(data, callback) {
      this.searchFormData = Object.assign({}, data)
      this.queryForm.page = 1
      this.fetchData()
      if (callback) callback(true)
    }
  }
}
</script>

  <style scoped lang="scss">
  .content {
    height: 100%;
    .index-content {
      border-radius: 8px;
      background: white;
      padding: 20px;
      box-sizing: border-box;
      margin-top: 10px;
      height: calc(100% - 120px);
    }
    .expand-details {
      background: #F6F6F6;
      padding: 8px 20px;
      box-sizing: border-box;
    }
  }
  ::v-deep {
    .text-blue {
      color: #005AA8;
    }
    .header-blue {
      background: #F2F6FA;
    }
  }
  </style>