<template>
    <div class="app-container calendar-list-container">
  
      <!-- 查询和其他操作 -->
      <div class="filter-container">
        <el-input clearable class="filter-item" style="width: 200px;" placeholder="请输入平台名称" v-model="listQuery.platformName"></el-input>
        <el-input clearable class="filter-item" style="width: 200px;" placeholder="请输入视频系列" v-model="listQuery.videoSeries"></el-input>
        <el-input clearable class="filter-item" style="width: 200px;" placeholder="请输入视频名称" v-model="listQuery.accountName"></el-input>
        <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">查找</el-button>
        <el-button class="filter-item" type="primary" @click="handleCreate" icon="el-icon-edit">添加</el-button>
        <el-button class="filter-item" type="primary" v-waves icon="el-icon-download" @click="handleDownLoad">导出</el-button>
      </div>
  
      <!-- 查询结果 -->
      <el-table
        size="small"
        :data="list"
        v-loading="listLoading"
        element-loading-text="正在查询中。。。"
        border
        fit
        highlight-current-row
      >
        <el-table-column type="index" label="序号" header-align="center" align="center">
        </el-table-column>
        <el-table-column align="center" min-width="100px" label="平台" prop="platformName">
        </el-table-column>
        <el-table-column align="center" min-width="100px" label="账号名称" prop="accountName">
        </el-table-column>
        <el-table-column align="center" min-width="100px" label="视频系列" prop="videoSeries">
        </el-table-column>
        <el-table-column align="center" min-width="100px" label="第几集" prop="episodeNumber">
        </el-table-column>
        <el-table-column align="center" min-width="100px" label="视频名称" prop="videoName">
        </el-table-column>
        <el-table-column align="center" label="操作" width="240px" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="small"
              @click="handleUpdate(scope.row, false)"
              >编辑</el-button
            >
            <el-button type="danger" size="mini"  @click="handleDelete(scope.row,-1)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
  
      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.page"
          :page-sizes="[10,20,30,50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
  
      <!-- 添加或修改对话框 -->
      <el-dialog
      :close-on-click-modal="false"
        :title="textMap[dialogStatus]"
        :visible.sync="dialogFormVisible"
        width="35%"
      >
        <el-form :rules="rules" ref="dataForm" :model="dataForm" status-icon label-position="left" label-width="80px">
          <el-form-item  label="平台" prop="platformName">
            <el-input style="width: 350px" v-model="dataForm.platformName"></el-input>
          </el-form-item>
          <el-form-item  label="账号名称" prop="accountName">
            <el-input style="width: 350px" v-model="dataForm.accountName"></el-input>
          </el-form-item>
          <el-form-item  label="视频系列" prop="videoSeries">
            <el-input style="width: 350px" v-model="dataForm.videoSeries"></el-input>
          </el-form-item>
          <el-form-item  label="第几集" prop="episodeNumber">
            <el-input style="width: 350px" v-model="dataForm.episodeNumber"></el-input>
          </el-form-item>
          <el-form-item  label="视频名称" prop="videoName">
            <el-input style="width: 350px" v-model="dataForm.videoName"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button v-if="dialogStatus == 'create'" type="primary" @click="createData">确定</el-button>
          <el-button v-else type="primary" @click="updateData">确定</el-button>
        </div>
      </el-dialog>
  
    </div>
  </template>
  <script>
    import {list, createItem, updateItem, deleteItem } from "@/api/yeZhanManage/mallVideo";
    import waves from "@/directive/waves"; // 水波纹指令
    import Tinymce from '@/components/Tinymce'
  
  export default {
    components: { Tinymce },
    directives: { waves },
    data() {
      return {
        list: [],
        total: 0,
        listLoading: false,
        listQuery: {
          page: 1,
          limit: 10,
          platformName: '',
          videoSeries: '',
          accountName: '',
        },
        dataForm: {
          platformName: undefined,
          accountName: undefined,
          videoSeries: undefined,
          episodeNumber: undefined,
          videoName: undefined,
        },
        dialogFormVisible: false,
        dialogStatus: '',
        textMap: {
          update: "编辑",
          create: "创建",
        },
        rules: {
          platformName: [{ required: true, message: "平台不能为空", trigger: "blur" }],
          videoSeries: [{ required: true, message: "视频系列不能为空", trigger: "blur" }],
          accountName: [{ required: true, message: "视频名称不能为空", trigger: "blur" }],
        },
      }
    },
    created() {
        this.getList();
    },
    methods: {
      handleDownLoad(){
            window.location.href = process.env.BASE_API + '/mall-video-info/export/videoInfoList?platformName=' + this.listQuery.platformName + '&accountName=' + this.listQuery.accountName + '&videoSeries=' + this.listQuery.videoSeries;
        },
      resetForm() {
        this.dataForm = {
          platformName: undefined,
          accountName: undefined,
          videoSeries: undefined,
          episodeNumber: undefined,
          videoName: undefined,
        };
      },
      handleCreate() {
        this.resetForm();
        this.dialogFormVisible = true;
        this.dialogStatus = "create";
        this.$nextTick(() => {
          this.$refs["dataForm"].clearValidate();
        });
      },
      createData() {
        this.$refs["dataForm"].validate((valid) => {
          if (valid) {
            createItem(this.dataForm)
                  .then(() => {
                    this.getList();
                    this.dialogFormVisible = false;
  
                    this.$notify({
                      title: "成功",
                      message: "创建成功",
                      type: "success",
                      duration: 2000,
                    });
                    this.getList()
                  })
          }
        });
      },
      getList() {
        this.listLoading = true
        list(this.listQuery).then(response => {
          this.list = response.data.data.items
          this.total = response.data.data.total
          this.listLoading = false
        }).catch(() => {
          this.list = []
          this.total = 0
          this.listLoading = false
        })
      },
  
      handleFilter() {
        this.listQuery.page = 1
        this.getList()
      },
  
      handleSizeChange(val) {
        this.listQuery.limit = val
        this.getList()
      },
  
      handleCurrentChange(val) {
        this.listQuery.page = val
        this.getList()
      },
  
      handleUpdate(row) {
        this.dataForm = Object.assign({}, row);
        this.dialogStatus = 'update'
        this.dialogFormVisible = true
        this.$nextTick(() => {
          this.$refs['dataForm'].clearValidate()
        })
      },
  
      updateData() {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            updateItem(this.dataForm).then(() => {
                this.dialogFormVisible = false
                this.$notify({
                  title: '成功',
                  message: '更新成功',
                  type: 'success',
                  duration: 2000
                })
                this.getList()
              })
            
          }
        })
      },
      handleDelete(row, index) {
        this.$confirm('确认删除吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteItem({ id: row.id }).then(response => {
            this.$notify({
              title: '成功',
              message: '删除成功',
              type: 'success',
              duration: 2000
            })
            this.getList()
          })
        }).catch(() => {
  
        })
  
      },
    }
  }
  </script>
  