<template>
  <div style="padding:20px">
    <el-form :inline="true" :model="searchForm" size="small">
      <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-select>
      </el-form-item>
      <el-form-item label="类型">
        <el-select v-model="searchForm.type" filterable placeholder="请选择">
          <el-option label="A/B策略" :value="1" />
          <el-option label="地域投放" :value="2" />
          <el-option label="活动投放" :value="3" />
          <el-option label="智能投放" :value="4" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="init()">搜索</el-button>
        <el-button @click="reset('searchForm')">重置</el-button>
        <el-button type="primary" plain @click="toAdd">新增</el-button>
      </el-form-item>
    </el-form>
    <div style="margin:30px 0">
      <el-table max-height="700" border highlight-current-row :data="tableData" :header-cell-style="{ 'background-color': '#E4E7ED', color: '#000' }" style="width: 100%;">
        <el-table-column prop="name" label="策略名称" />
        <el-table-column prop="content" label="策略备注" />
        <el-table-column label="策略类型">
          <template slot-scope="scope">
            <span v-if="scope.row.type === 1">ab策略</span>
            <span v-if="scope.row.type === 3">活动投放</span>
            <span v-if="scope.row.type === 4">智能投放</span>
            <span v-if="scope.row.type === 2">地域投放</span>
          </template>
        </el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <span style="color: rgb(100, 194, 56)" v-if="scope.row.state === 1">生效中</span>
            <span style="color:#b9b9b9" v-if="scope.row.state === 0">未生效</span>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" />
        <el-table-column fixed="right" label="操作" width="150px">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="toAdd(scope.row)">编辑</el-button>
            <el-button type="text" size="small" @click="del(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="block">
      <el-pagination style="float: right" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="searchForm.pageNum" :page-sizes="[10, 20, 30, 40, 50]" layout="total, sizes, prev, pager, next, jumper" :total="searchForm.totalResult" :page-size="searchForm.pageSize">
      </el-pagination>
    </div>
  </div>
</template>

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


export default {
  name: 'Index',
  data () {
    return {
      //  搜索相关内容
      searchForm: {
        name: '',
        state: null,
        pageNum: 1,
        pageSize: 10,
        type: ""
      },
      // 表格数据
      loading: false,
      tableData: [],
      templateList: [],
    }
  },
  mounted () {
    this.init()
    get('/templateInfo/page', { 'pageSize': 100, 'pageNum': 1 }).then(res => {
      res.data.list.map(res => {
        res.templatePhoto = process.env.VUE_APP_BASE_IMG_URL + res.templatePhoto
        res.label = res.templateName
        res.value = res.id
      })
      this.templateList = res.data.list
    })

  },
  methods: {
    handleSizeChange (val) {
      this.searchForm.pageSize = val
      this.searchForm.pageNum = 1
      this.init()
    },
    handleCurrentChange (val) {
      this.searchForm.pageNum = val
      this.init()
    },
    init () { // 列表搜索
      get('/strategysenior/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
        }

      })
    },

    reset (formName) { // 重置
      this.searchForm = {
        name: '',
        state: null,
        pageNum: 1,
        pageSize: 10,
        totalResult: 0
      }
      this.init()
    },
    toAdd (e) {
      console.log(e)
      const routeUrl = this.$router.resolve({ path: '/newSchemeProinfo/schemeAb', query: { id: e.id, type: e.type } })
      window.open(routeUrl.href, '_blank')
    },
    del (row) {
      this.$confirm('此操作将永久删除该策略, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const $table = this.$refs.xTable
        $table.remove(row)
        post('/strategysenior/delete', { 'ids': [row.id] }).then(res => {
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    handlePageChange ({ currentPage, pageSize }) {
      this.searchForm.pageNum = currentPage
      this.searchForm.pageSize = pageSize
      this.init()
    }
  }
}
</script>
7
<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;
      // color: #b9b9b9;
    }
  }
}
</style>
