<template>
  <div>
    <el-container>
      <!--搜索-->
      <el-header class="searchBox">
        <el-form :inline="true" :model="searchForm" ref="searchForm" class="demo-form-inline">
          <el-form-item label="策略名称">
            <el-input v-model="searchForm.name" placeholder="策略名称" />
          </el-form-item>
          <el-form-item label="生效状态">
            <el-select v-model="searchForm.state" filterable placeholder="请选择">
              <el-option label="生效中" :value="1" />
              <el-option label="未生效" :value="0" />
            </el-select>
          </el-form-item>

          <el-form-item style="float: right">
            <el-button type="primary" @click="init()">搜索</el-button>
            <el-button @click="reset('searchForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </el-header>
      <!--表格-->
      <el-main class="tableBox">
        <vxe-toolbar>
          <template #buttons>
            <vxe-button icon="fa fa-plus" @click="addShow = true">新增</vxe-button>
            <vxe-button @click="init()">刷新</vxe-button>
          </template>
        </vxe-toolbar>
        <vxe-table border resizable keep-source show-overflow highlight-hover-row ref="xTable" :data="tableData" :edit-config="{trigger: 'click', mode: 'cell', showStatus: true, }" @edit-closed="editClosedEvent">
          <vxe-table-column field="name" title="策略名称" />
          <vxe-table-column field="state" title="状态" width="100">
            <template #default="{ row }">
              <span>{{row.state==0 ?'未生效':'生效中'  }}</span>
            </template>
          </vxe-table-column>

          </vxe-table-column>
          <vxe-table-column field="createTime" title="创建时间" />
          <vxe-table-column title="操作" width="220">
            <template #default="{ row }">
              <vxe-button @click="editList(row)">编辑</vxe-button>
              <vxe-button @click="del(row)">删除</vxe-button>
            </template>
          </vxe-table-column>
        </vxe-table>
        <vxe-pager :loading="loading" :current-page="searchForm.pageNum" :page-size="searchForm.pageSize" :total="searchForm.totalResult" :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']" @page-change="handlePageChange" />
      </el-main>
    </el-container>
    <!-- 新增弹窗 -->
    <el-dialog title="新增" :visible.sync="addShow" @close="closeDialog">
      <el-form :model="addForm">
        <el-form-item label="类型名称" label-width="80px">
          <el-input v-model="addForm.name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="生效状态">
          <el-radio v-model="addForm.state" :label="0">失效</el-radio>
          <el-radio v-model="addForm.state" :label="1">生效</el-radio>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="addShow = false">取 消</el-button>
        <el-button type="primary" @click="addList">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 编辑弹窗 -->
    <el-dialog title="新增" :visible.sync="editShow">
      <el-form :model="editForm">
        <el-form-item label="类型名称" label-width="80px">
          <el-input v-model="editForm.name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="生效状态">
          <el-radio v-model="editForm.state" :label="0">失效</el-radio>
          <el-radio v-model="editForm.state" :label="1">生效</el-radio>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="editShow = false">取 消</el-button>
        <el-button type="primary" @click="editClick">编辑</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { post, get } from '@/api/common'

export default {
  name: 'Index',
  data () {
    return {
      //  搜索相关内容
      searchForm: {
        name: '',
        state: null,
        pageNum: 1,
        pageSize: 10,
        totalResult: 0
      },
      // 表格数据
      loading: false,
      tableData: [],
      addShow: false,
      editShow: false,
      strategyStatus: [
        { label: '生效中', value: 1 },
        { label: '未生效', value: 0 }
      ],
      editForm: {},
      addForm: {
        name: "",
        state: "",

      }
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    init () { // 列表搜索
      // get('/strategytype/list', this.searchForm).then(res => {
      //   if (res.data) {
      //     this.tableData = res.data.list
      //     this.searchForm.totalResult = res.data.total
      //   } else {
      //     this.tableData = []
      //     this.searchForm.totalResult = 0
      //   }
      // })
    },
    //   编辑数据
    editList (item) {
      this.editShow = true
      this.editForm = item
    },
    editClick () {
      delete this.editForm._X_ROW_KEY;

      post('/strategytype/update/' + this.editForm.id, this.editForm).then(res => {

        if (res.code === 10000) {
          this.editShow = false
          this.$message.success(res.data)
          this.init()
        }
      })
    },

    editClosedEvent ({ row, column }) {  // 列表修改
      const $table = this.$refs.xTable
      const field = column.property
      const cellValue = row[field]
      // 判断单元格值是否被修改
      if ($table.isUpdateByRow(row, field)) {
        setTimeout(() => {
          let param = {}
          param[field] = cellValue
          post('/strategytype/update/' + row.id, row).then(res => {
            this.$message({
              message: res.message,
              type: 'success'
            });
          })
          // 局部更新单元格为已保存状态
          $table.reloadRow(row, null, field)
        }, 300)
      }
    },
    reset (formName) { // 重置
      this.searchForm = {
        name: '',
        state: null,
        pageNum: 1,
        pageSize: 10,
        totalResult: 0
      }
      this.init()
    },
    addList () {

      post('/strategytype/create', this.addForm).then(res => {
        if (res.code === 10000) {
          this.addShow = false
          this.addForm.name = "";
          this.$message.success(res.data)
          this.init()
          this.addShow = false
        }

      })
    },
    del (row) {
      let {
        id
      } = row
      let ids = []
      ids.push(id)
      post('/strategytype/delete', { ids: ids }).then(res => {
        if (res.code === 10000) {
          this.$message.success('删除成功')
          this.init()
        }

      })
    },
    closeDialog () {
      this.addForm.name = ""
      this.addForm.id = ""
    },
    handlePageChange ({ currentPage, pageSize }) {
      this.searchForm.pageNum = currentPage
      this.searchForm.pageSize = pageSize
      this.init()
    }
  }
}
</script>

<style lang="scss">
.searchBox {
  background-color: #fff;
  border-radius: 4px;
  box-shadow: #bfbfbf 0 0 2px;
  height: unset !important;
  padding: 10px 10px;

  form {
    margin: auto;

    .el-form-item {
      margin: 5px 5px;
    }
  }
}

.tableBox {
  margin-top: 10px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: #bfbfbf 0 0 2px;

  .block {
    .el-pagination {
      margin-top: 30px;
      float: right;
    }
  }
}
</style>