<!--
 * @Date: 2021-07-08 11:02:40
 * @LastEditTime: 2022-07-27 10:48:43
 * @Description: 列表查询demo
-->
<template>
    <div class="app-container">
        <!--工具栏-->
        <div class="head-container">
            <div>
                <el-button class="filter-item" size="mini" type="primary" icon="el-icon-plus"
                    @click="openSave()">关联新闻</el-button>
            </div>
        </div>

        <!--表格渲染-->
        <el-table ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%;">
            <el-table-column type="selection" width="55" />
            <el-table-column :show-overflow-tooltip="true" prop="newsId" label="新闻id" />
            <el-table-column :show-overflow-tooltip="true" prop="newsTitle" label="标题" />
            <el-table-column label="操作" width="230" align="center" fixed="right">
                <template slot-scope="scope" class="btn">
                  <el-popover placement="top" width="200" :ref="`del-${scope.$index}`">
                        <p>是否确认删除该数据？</p>
                        <div style="text-align: right; margin: 0">
                            <el-button size="mini"
                                @click="scope._self.$refs[`del-${scope.$index}`].doClose()">取消</el-button>
                            <el-button type="primary" size="mini" @click="delFn(scope, scope.$index)">确定</el-button>
                        </div>
                        <el-button slot="reference" type="text" size="mini" style="margin-left:10px">删除</el-button>
                    </el-popover>
              </template>
          </el-table-column>
        </el-table>
        <!--分页组件-->
        <pagination />
        <el-button class="filter-item" size="mini" type="primary"  @click="save()">保存</el-button>

         <!-- 新增修改弹窗 -->
         <el-dialog v-if="dialogVisible" title="热点新闻" :visible.sync="dialogVisible" append-to-body width="600px">
            <el-table ref="table" :data="dialogList" style="width: 100%;"  @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" />
                <el-table-column :show-overflow-tooltip="true" prop="id" label="新闻id" />
                <el-table-column :show-overflow-tooltip="true" prop="title" label="标题" />
            </el-table>
            <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
            </el-pagination>
            <el-button class="filter-item" size="mini" type="primary"  @click="confirm()">确定</el-button>

        </el-dialog>
    </div>
</template>
<script>
import CRUD, { presenter, header, crud } from '@crud/crud'
import pagination from '@crud/Pagination'
import { newsList, carNewsHotSave } from '@/api/homePage'

export default {
    components: { pagination },
    mixins: [presenter(), header(), crud()],
    data() {
        return {
            dialogVisible: false,
            multipleSelection: [],
            dialogList: [],
            pageNum: 1,
            total: 0,
            pageSize: 10
        }
    },
    cruds() {
        return CRUD({ title: '列表', url: '/index/carNewsHotList', query: {}})
    },
    created() {
      this.getNewsList()
    },
    methods: {
      [CRUD.HOOK.beforeRefresh]() {
        this.query.videHas = 1
      },
      handleSizeChange(val) {
        this.pageSize = val
        console.log(`每页 ${val} 条`)
      },
      handleCurrentChange(val) {
        this.pageNum = val
        console.log(`当前页: ${val}`)
      },
      handleSelectionChange(val) {
        this.multipleSelection = val
      },
      openSave() {
        this.dialogVisible = true
      },
      getNewsList() {
        let data = {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          type: 2,
          status: 2,
          videHas: 1
        }
        newsList(data).then(res => {
          this.dialogList = res.list
        })
      },
      save() {
        let newsIdList = []
        this.crud.data.forEach(ele => {
          newsIdList.push(ele.newsId)
        })
        carNewsHotSave(newsIdList).then(res => {
          this.$message({
              message: '操作成功！',
              type: 'success'
          })
          this.crud.toQuery()
        })
      },
      unique(arr) {
        const res = new Map()
        return arr.filter((arr) => !res.has(arr.newsId) && res.set(arr.newsId, 1))
      },
      confirm() {
        let data = []
        this.multipleSelection.forEach(res => {
          data.push({
            newsId: res.id,
            newsTitle: res.title,
            isDel: true
          })
        })
        let _data = [...this.crud.data, ...data]
        this.crud.data = this.unique(_data)
        this.dialogVisible = false
      },
      delFn(scope, selectedIndex) {
        this.crud.data.splice(selectedIndex, 1)
        scope._self.$refs[`del-${scope.$index}`].doClose()
      }
    }
}
</script>
