<template>
  <div>
    <template>
      <el-dialog title="回收站" :close-on-click-modal="false" :visible.sync="visible" class="JNPF-dialog JNPF-dialog_center" lock-scroll :width="formData.generalWidth" append-to-body>
        <el-table v-loading="listLoading" :data="tableData" border :height="400" @selection-change="handleSelectionChange" @row-click="editCurrentClick" style="width: 100%">
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column label="序号" align="center" width="50">
            <template slot-scope="scope">
              {{ scope.$index + 1 + size * (current - 1) }}
            </template>
          </el-table-column>
          <el-table-column prop="operator" label="操作人" align="center"></el-table-column>
          <el-table-column prop="createTime" label="删除时间" align="center"></el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="editCurrentClick(scope.row)">详情</el-button>
              <el-button type="text" size="small" @click="recycleClick(scope.row)">恢复</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="margin-top: 9px; float: left">
          <el-button type="primary" size="mini" @click="toggleSelection()">批量恢复</el-button>
          <el-button type="primary" size="mini" @click="toggleSelectionDelete()">彻底删除</el-button>
        </div>
        <template>
          <pagination :total="total" :page.sync="current" :limit.sync="size" @pagination="init()" />
        </template>
        <el-dialog class="JNPF-dialog JNPF-dialog_center" title="详细信息" :visible.sync="innerVisible" append-to-body>
          <el-table :data="innerData" border :height="200" style="width: 100%">
            <template v-for="(item, index) in innerList">
              <el-table-column v-if="item.value" :label="item.label" align="center">
                <template slot-scope="scope">
                  {{ item.value }}
                </template>
              </el-table-column>
            </template>
          </el-table>
        </el-dialog>
      </el-dialog>
    </template>
  </div>
</template>

<script>
import { recycleModelDelete, recycleModelList, recycleModelrecovery } from '@/api/onlineDev/visualDev'
import { deepClone } from '@/utils'
export default {
  name: 'recycleList',
  props: ['modelId'],
  data() {
    return {
      visible: false,
      innerVisible: false,
      listLoading: false,
      tableData: [],
      current: 1,
      size: 10,
      total: 0,
      SelectionList: [],
      innerData: [],
      innerList: [],
      formData: {}
    }
  },
  methods: {
    //初始化数据
    init(formData) {
      this.formData = deepClone(formData)
      this.visible = true
      this.listLoading = true
      let parmes = {
        current: this.current,
        size: this.size,
        modelId: this.modelId
      }
      recycleModelList(parmes).then((res) => {
        this.tableData = res.data.data.records
        this.total = res.data.data.total
        this.listLoading = false
      })
    },
    //多选
    handleSelectionChange(val) {
      if (val && val.length) {
        this.SelectionList = val.map((i) => {
          return i.id
        })
      } else {
        this.SelectionList = []
      }
    },
    //批量恢复
    toggleSelection() {
      if (!this.SelectionList.length) return this.$message({ message: '至少选择一条数据', type: 'warning' })

      recycleModelrecovery(this.SelectionList).then((res) => {
        if (res.data.code === 200) {
          this.$message({ message: '恢复成功', type: 'success' })
          this.init()
          this.$emit('recycleDataList')
        }
      })
    },
    toggleSelectionDelete() {
      if (!this.SelectionList.length) return this.$message({ message: '至少选择一条数据', type: 'warning' })

      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          recycleModelDelete(this.SelectionList).then((res) => {
            if (res.data.code === 200) {
              this.$message({ message: '操作成功', type: 'success' })
              this.init()
            }
          })
        })
        .catch(() => {})
    },
    //恢复
    recycleClick(row) {
      recycleModelrecovery([row.id]).then((res) => {
        if (res.data.code === 200) {
          this.$message({ message: '恢复成功', type: 'success' })
          this.init()
          this.$emit('recycleDataList')
        }
      })
    },
    //行点击事件
    editCurrentClick(val) {
      this.innerData = []
      if (val.dataView) {
        try {
          const toObj = JSON.parse(val.dataView)
          if (Array.isArray(toObj) && toObj.length) {
            this.innerList = toObj
            this.innerData.unshift({})
            this.innerVisible = true
          }
        } catch {
          if (Array.isArray(val.dataView) && val.dataView.length) {
            this.innerData.unshift({})
            this.innerList = val.dataView
          }
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.JNPF-dialog_center {
  >>> .el-dialog__body {
    padding: 20px !important;
  }
}
</style>
