<template>
    <div class="app-container calendar-list-container">
  
      <!-- 查询和其他操作 -->
      <div class="filter-container">
        <el-select v-model="listQuery.type" clearable placeholder="请选择积分类型" style="top: -4px;width: 200px;">
          <el-option
                  :key="item.type"
                  v-for="item in allTypeList"
                  :label="item.name"
                  :value="item.type"
                >
                </el-option>
        </el-select>
        <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">查找</el-button>
  
      </div>
  
      <!-- 查询结果 -->
      <el-table
        size="small"
        :data="list"
        v-loading="listLoading"
        @selection-change="handleSelectionChange"
        element-loading-text="正在查询中。。。"
        border
        fit
        highlight-current-row
      >
        <!-- <el-table-column type="selection" width="55px"> </el-table-column> -->
        <el-table-column type="index" label="序号" header-align="center" align="center">
        </el-table-column>
  
        <el-table-column align="center" min-width="100px" label="积分类型" prop="integralCategory">
        </el-table-column>
  
        <el-table-column align="center" min-width="200px" label="积分名称" prop="integralName">
        </el-table-column>
  
        <el-table-column align="center" min-width="80px" label="积分规则代码" prop="integralSeq">
        </el-table-column>
        <el-table-column align="center" min-width="80px" label="积分" prop="integral">
        </el-table-column>
        <el-table-column align="center" min-width="80px" label="规则状态">
          <template slot-scope="props">
            <el-tag type="success" v-if="props.row.flag == 1">启用</el-tag>
            <el-tag type="danger" v-if="props.row.flag == 0">禁用</el-tag>
          </template>
        </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
            >
          </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
        :title="textMap[dialogStatus]"
        :visible.sync="dialogFormVisible"
        width="70%"
      >
        <el-form :rules="rules" ref="dataForm" :model="dataForm" status-icon label-position="left" label-width="100px" style='width:700px; margin-left:50px;'>
         <el-form-item  label="积分" prop="integral">
              <el-input v-model="dataForm.integral"></el-input>
            </el-form-item>
              <el-form-item
              label="规则状态"
              prop="flag"
            >
              <el-select
                v-model="dataForm.flag"
                filterable
                placeholder="请选择"
                style="width: 350px"
              >
                <el-option
                  :key="item.type"
                  v-for="item in flagList"
                  :label="item.name"
                  :value="item.type"
                >
                </el-option>
              </el-select>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="updateData">确定</el-button>
        </div>
      </el-dialog>
  
    </div>
  </template>
  
  <style>
    .demo-table-expand {
      font-size: 0;
    }
    .demo-table-expand label {
      width: 200px;
      color: #99a9bf;
    }
    .demo-table-expand .el-form-item {
      margin-right: 0;
      margin-bottom: 0;
    }
  </style>
  
  <script>
    import {pointRulesTypeList, getPointRulesList, updatePointRulesItem} from "@/api/pointManage";
    import waves from "@/directive/waves"; // 水波纹指令
    import Tinymce from '@/components/Tinymce'
  
  export default {
    name: 'pointRulesList',
    components: { Tinymce },
    directives: { waves },
    data() {
      return {
        allTypeList:[
            {
                type:'highTechnology',
                name:'高科技'
            },
            {
                type:'fastExtinction',
                name:'快销'
            },
            {
                type:'manufacturingIndustry',
                name:'制造业'
            },
            {
                type:'all',
                name:'全部'
            },
        ],
        flagList:[
        {
            type:1,
            name:'启用'
          },
          {
            type:0,
            name:'禁用'
          },
        ],
        list: [
            {
                id:1,
                integralCategory:'类型1',
                integralName:'名称1',
                integralSeq:'代码1',
                integral:'100',
                flag:1
            },
             {
                id:2,
                integralCategory:'类型2',
                integralName:'名称2',
                integralSeq:'代码2',
                integral:'200',
                flag:0
            },
             {
                id:3,
                integralCategory:'类型3',
                integralName:'名称3',
                integralSeq:'代码3',
                integral:'300',
                flag:1
            },
            {
                id:4,
                integralCategory:'类型1',
                integralName:'名称1',
                integralSeq:'代码1',
                integral:'100',
                flag:1
            },
             {
                id:5,
                integralCategory:'类型2',
                integralName:'名称2',
                integralSeq:'代码2',
                integral:'200',
                flag:0
            },
             {
                id:6,
                integralCategory:'类型3',
                integralName:'名称3',
                integralSeq:'代码3',
                integral:'300',
                flag:1
            },
        ],
        delarr: [],
        multipleSelection: [],
        total: 0,
        listLoading: false,
        listQuery: {
          page: 1,
          limit: 10,
          type: '',
          title: '',
        },
        dataForm: {
          integral: undefined,
          flag: undefined,
        },
        dialogFormVisible: false,
        dialogStatus: '',
        textMap: {
          update: "编辑",
          create: "创建",
        },
        rules: {
            integral: [{ required: true, message: "积分不能为空", trigger: "blur" }],
            flag: [{ required: true, message: "请选择规则状态", trigger: "blur" }],
        },
      }
    },
    created() {
  
      // getPointRulesType();
      // this.getList();
    },
    methods: {
      getPointRulesType() {
        pointRulesTypeList().then(response => {
          this.allTypeList = response.data.data;
        }).catch(() => {
          this.allTypeList = []
        });
      },
       
      getList() {
        this.listLoading = true
        getPointRulesList(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) {
            // updatePointRulesItem(this.dataForm).then(() => {
                this.dialogFormVisible = false
                this.$notify({
                  title: '成功',
                  message: '更新成功',
                  type: 'success',
                  duration: 2000
                })
                // this.getList()
            //   }) 
          }
        })
      },
  
    
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
    }
  }
  </script>
  <style>
    .ad-avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .ad-avatar-uploader .el-upload:hover {
      border-color: #409EFF;
    }
    .ad-avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      line-height: 178px;
      text-align: center;
    }
    .ad-avatar {
      display: block;
    }
  </style>
  