<template>
  <div class="app-container">
    <!--搜索-->
    <el-form :inline="true" :model="searchForm" ref="searchForm" class="demo-form-inline">
      <el-form-item label="策略名称">
        <el-input v-model="searchForm.strategyName" name="searchForm.strategyName" placeholder="策略名称" size="mini" />
      </el-form-item>
      <el-form-item label="策略类型">
        <el-select v-model="searchForm.strategyType" filterable placeholder="请选择" size="mini">
          <el-option label="基本" :value="0" />
          <el-option label="活动" :value="1" />
          <el-option label="测试" :value="2" />
        </el-select>
      </el-form-item>
      <el-form-item label="生效状态">
        <el-select v-model="searchForm.strategyStatus" filterable placeholder="请选择" size="mini">
          <el-option label="生效中" :value="1" />
          <el-option label="未生效" :value="0" />
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="init()" size="mini">搜索</el-button>
        <el-button @click="reset('searchForm')" size="mini">重置</el-button>
      </el-form-item>
    </el-form>

    <el-form>
      <el-form-item>
        <el-button @click="toAdd" size="mini" type="primary" plain icon="el-icon-plus">新增</el-button>
        <el-button @click="init()" size="mini" icon="el-icon-delete">刷新</el-button>
        <el-button @click="value5 = true" size="mini" icon="fa fa-plus" type="primary">历史记录</el-button>
      </el-form-item>
    </el-form>

    <!--表格-->
    <el-table :data="tableData">
      <el-table-column prop="strategyName" label="策略名称"></el-table-column>
      <el-table-column prop="maskText" label="策略备注" align="center"></el-table-column>
      <el-table-column prop="strategyType" label="策略类型" align="center">
        <template slot-scope="scope">
          {{ strategyType[scope.row.strategyType].label }}
        </template>
      </el-table-column>
      <el-table-column prop="strategyStatus" label="状态" align="center">
        <template slot-scope="scope">
          <el-switch :value="scope.row.strategyStatus" :active-value="1" :inactive-value="0"></el-switch>
        </template>
      </el-table-column>

      <el-table-column prop="templateId" label="使用模板" align="center">
        <template slot-scope="scope">
          {{ scope.row.templateName }}
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" align="center"></el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">

          <el-button @click="toEdit(scope.row.id)" icon="el-icon-edit" size="mini" type="text">编辑</el-button>
          <el-button @click="toCopy(scope.row.id)" size="mini" icon="el-icon-set-up" type="text">复制</el-button>
          <el-button @click="del(scope.row.id)" size="mini" icon="el-icon-delete" type="text">删除</el-button>

        </template>
      </el-table-column>
    </el-table>

    <!-- 历史记录 -->
    <vxe-modal v-model="value5" width="60%" title="历史记录">
      <template #default>
        <vxe-toolbar>
          <template #buttons>
            <vxe-input v-model="schemelogParam.notes" type="search" clearable placeholder="搜索操作记录"></vxe-input>
            <vxe-input v-model="schemelogParam.userName" type="search" clearable placeholder="搜索操作人"></vxe-input>
            <vxe-button @click="searchEvent" content="搜索"></vxe-button>
          </template>
        </vxe-toolbar>

        <vxe-table auto-resize height="600" :data="schemelog">
          <vxe-table-column field="createTime" title="时间"></vxe-table-column>
          <vxe-table-column field="notes" title="操作记录">
            <template slot-scope="props">
              <div v-html="props.row.notes"></div>
            </template>
          </vxe-table-column>
          <vxe-table-column field="userName" title="操作人"></vxe-table-column>
        </vxe-table>
        <vxe-pager :loading="loading" :current-page="schemelogParam.pageNum" :page-size="schemelogParam.pageSize" :total="schemelogParam.totalResult" :layouts="[
                'PrevPage',
                'JumpNumber',
                'NextPage',
                'FullJump',
                'Sizes',
                'Total',
              ]" @page-change="handlePageChangeChannelog" />
      </template>
    </vxe-modal>

  </div>
</template>

<script>
import { post, get, del } from "@/api/common";
import getTime from "@/utils/getTime.js";
export default {
  name: "Index",
  data () {
    return {
      //  搜索相关内容
      searchForm: {
        channelKey: "",
        strategyName: "",
        strategyType: "",
        strategyStatus: "",
        pageNo: 1,
        pageSize: 10,
        totalResult: 0,
      },
      // 表格数据
      loading: false,
      tableData: [],
      templateList: [],
      strategyStatus: [
        {
          label: "生效中",
          value: "1",
        },
        {
          label: "未生效",
          value: "0",
        },
      ],
      strategyType: [
        {
          label: "基本策略",
          value: "0",
        },
        {
          label: "活动策略",
          value: "1",
        },
        {
          label: "测试策略",
          value: "2",
        },
      ],

      value5: false,
      pushdata: false,
      pushdataDate: "",
      schemelog: [],
      schemelogList: [],
      filterName1: "",
      schemelogParam: {
        pageNum: 1,
        pageSize: 10,
        totalResult: 0,
      },
    };
  },
  mounted () {
    get('/template/template-info/page', {
      'pageSize': 100,
      'pageNum': 1
    }).then(res => {
      // console.log(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
      console.log(this.templateList)
    })
    this.init()

    this.init();
  },
  methods: {

    pagination (page) {
      this.pageNo = page.page;
      // 重新获取列表数据
      this.init();
    },

    toEdit (id) {
      this.$router.push("/schemeV2/schemeAdd?ids=" + id);
    },
    //转时间
    getTimeStr (timeStamp) {
      var now = new Date(timeStamp),
        y = now.getFullYear(),
        m = ("0" + (now.getMonth() + 1)).slice(-2),
        d = ("0" + now.getDate()).slice(-2);
      return y + "-" + m + "-" + d + " " + now.toTimeString().substr(0, 8);
    },

    init () {
      get("/strategy/strategy-info/page", {
        pageSize: 100,
        pageNo: 1,
      }).then((res) => {
        this.total = res.data.total;
        this.tableData = res.data.list;
        this.tableData.forEach((item) => {
          item.createTime = getTime(item.createTime);
        });
      });
    },

    reset (formName) {
      // 重置
      this.searchForm = {}
      // get('/strategyInfoNew/page', {}).then(res => {
      //   this.tableData = res.data.list
      // })
    },
    toAdd () {
      this.$router.push("/schemeV2/schemeAdd");
    },
    toCopy (id) {
      this.$router.push("/schemeV2/schemeAdd?copyId=" + id);
    },
    del (ids) {
      console.log(ids)
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // const $table = this.$refs.xTable;
          // $table.remove(row);
          del("/strategy/strategy-info/delete", { ids }).then((res) => {
            this.init();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handlePageChange ({ currentPage, pageSize }) {
      this.searchForm.pageNum = currentPage;
      this.searchForm.pageSize = pageSize;
      this.init();
    },
    handlePageChangeChannelog ({ currentPage, pageSize }) {
      this.schemelogParam.pageNum = currentPage;
      this.schemelogParam.pageSize = pageSize;
      get("/record/strategy-record/page", this.schemelogParam).then((res) => {
        this.schemelog = res.data.list;
        this.schemelogParam.totalResult = res.data.total;
      });
    },
    searchEvent () {
      get("/record/strategy-record/page", this.schemelogParam).then((res) => {
        this.schemelog = res.data.list;
        this.schemelogParam.totalResult = res.data.total;
      });
    },
  },
};
</script>

<style lang="scss">
</style>
