<template>
  <div class="strategyList">
    <el-form size="small" inline>
      <el-form-item label="策略名称">
        <el-input v-model="form.strategyName" placeholder="输入策略名称"></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="form.strategyStatus" clearable>
          <el-option label="有效" :value="1"></el-option>
          <el-option label="无效" :value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button plain icon="el-icon-refresh" @click="reset">重置</el-button>
        <el-button type="primary" icon="el-icon-search" @click="getStrategyList">搜索</el-button>
        <el-button size="small" plain type="primary" icon="el-icon-add" @click="addClick('add')">新增</el-button>
      </el-form-item>
    </el-form>
    <div class="infoList">已选择{{deleteDatas.length}}项 <el-button v-if="deleteDatas.length>0" style="margin-left:20px" type="primary" icon="el-icon-delete" size="mini" @click="removeAll">批量删除</el-button>
    </div>
    <el-table v-loading="loading" :data="datas" :header-cell-style="{'background-color':'#E4E7ED','color':'#000'}" @selection-change="deleteDatas = $event">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="strategyName" label="策略名称"></el-table-column>
      <el-table-column prop="maskText" label="策略备注"></el-table-column>
      <el-table-column label="产品">
        <template slot-scope="scope">
          <span>{{productList.find(val => { return val.id === scope.row.primaryProductId }).productName}}</span>
        </template>
      </el-table-column>
      <el-table-column label="模板">
        <template slot-scope="scope">
          <span>{{templateList.find(val => { return val.id === scope.row.templateId }).templateName}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="strategyStatus" label="状态">
        <template slot-scope="scope">
          <span v-if="scope.row.strategyStatus===1">有效</span>
          <span v-if="scope.row.strategyStatus===0" style="color:#F56C6C">无效</span>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" icon="el-icon-document-copy" @click="addClick('copy',scope.row)">复制</el-button>
          <el-button type="text" size="small" icon="el-icon-edit" @click="addClick('edit',scope.row)">编辑</el-button>
          <el-button type="text" size="small" @click="invalid(scope.row)">失效</el-button>
          <el-button type="text" size="small" icon="el-icon-delete" @click="addClick('remove',scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination style="float:right" background layout="total, sizes, prev, pager, next, jumper" :total="total" :current-page="form.pageNum" :page-size="form.pageSize" @size-change="handleSizeChange" @current-change="handleCurrentChange"></el-pagination>
  </div>
</template>

<script>
import { post, get } from "@/api/common";
export default {
  data () {
    return {
      loading: true,
      form: {
        pageNum: 1,
        pageSize: 10,
        strategyName: "",
        strategyStatus: null
      },
      total: 0,
      datas: [],
      deleteDatas: [], //删除所选数据
      templateList: [], //模板列表
      productList: [], //产品列表
    }
  },
  mounted () {
    this.getProductList()

  },
  methods: {
    // 批量删除
    removeAll () {
      let arr = this.deleteDatas.map(val => {
        return val.id
      })
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        post('/strategytemplate/delete', { ids: arr }).then(res => {
          this.$message.success('删除成功!')
          this.getStrategyList()
        })
      })
    },
    // 获取新策略列表
    getStrategyList () {
      get('/strategytemplate/list', this.form).then(res => {
        this.loading = false
        this.datas = res.data.list
        this.total = res.data.total
        this.form.pageNum = res.data.pageNum
        this.form.pageSize = res.data.pageSize
      })

    },
    // 编辑策略
    addClick (val, item) {
      if (val === 'add') {
        this.$router.push({path: "/strategy/add"})
      } else if (val === 'edit') {
        const routeUrl = this.$router.resolve({
          path: "/strategy/add",
          query: { id: item.id, editId: 1 }
        })
        window.open(routeUrl.href, '_blank')
      } else if (val === 'remove') {
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let id = []
          id.push(item.id)
          post('/strategytemplate/delete', { ids: id }).then(res => {
            this.$message.success('删除成功!')
            this.getStrategyList()
          })
        })
      } else if (val === 'copy') {
        const routeUrl = this.$router.resolve({
          path: "/strategy/add",
          query: { id: item.id, copy: 1 }
        })
        window.open(routeUrl.href, '_blank')
      }

    },
    // 获取模板信息
    getTemplate () {
      get("/templateInfo/page", {
        pageSize: 9999,
        pageNum: 1,
      }).then((res) => {
        this.templateList = res.data.list
        this.getStrategyList()
      });
    },
    // 获取产品信息
    getProductList () {
      get("/productInfo/page", {
        pageSize: 9999,
        pageNum: 1,
      }).then((res) => {
        this.productList = res.data.list
        this.getTemplate()
      });
    },
    // 每页数量
    handleSizeChange (val) {
      this.form.pageNum = 1
      this.form.pageSize = val
      this.getStrategyList()
    },
    // 当前页
    handleCurrentChange (val) {
      this.form.pageNum = val
      this.getStrategyList()
    },
    // 数据失效处理
    invalid (item) {
      if (item.strategyStatus === 1) {
        post('/strategytemplate/update/' + item.id, { strategyStatus: 0 }).then(res => {
          this.$message.success('修改成功!')
          this.getStrategyList()
        })
      } else {
        this.$message.error('当前策略以失效!')
      }

    },
    // 重置
    reset () {
      this.form.pageNum = 1
      this.form.pageSize = 10
      this.form.strategyName = ''
      this.form.strategyStatus = null
      this.getStrategyList()
    }
  }

}
</script>

<style lang="scss" scoped>
.strategyList {
  padding: 20px !important;
  .infoList {
    width: 100%;
    height: 50px;
    line-height: 50px;
    padding-left: 20px;
    border: 1px solid #409eff;
    background-color: #e1eefc;
    font-size: 13px;
    border-radius: 10px;
    margin-top: 40px;
  }
}
</style>