<template>

  <div>
    <el-container>
      <!--表格-->
      <el-main class="tableBox">

        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <template>
              <el-button type="primary" plain icon="fa fa-plus" @click="toAdd" size="mini">新增</el-button>
              <el-button type="primary" plain @click="init()" size="mini">刷新</el-button>
            </template>
          </el-col>
        </el-row>

        <el-table :data="tableData" ref="xTable" highlight-current-row>
          <el-table-column prop="name" label="名称" />
          <el-table-column prop="tag" label="标识" />

          <el-table-column prop="createTime" label="创建时间" />
          <el-table-column prop="operDetail" label="操作">
            <template slot-scope="scope">
              <el-button @click="toEdit(scope.row.id)" type="text" icon="el-icon-edit">编辑</el-button>
              <el-button @click="del(scope.row.id)" type="text" icon="el-icon-delete">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <pagination v-show="total>0" :total="total" :page.sync="searchForm.pageNo" :limit.sync="searchForm.pageSize" @pagination="init" />
      </el-main>
    </el-container>
  </div>
</template>

<script>
import { del } from "@/api/common";
import { listItem, listSchemeGlobal } from './api'
import getTime from "@/utils/getTime.js";
export default {
  name: "Index",
  data () {
    return {
      total: 100,
      //搜索相关
      searchForm: {
        pageNo: 1,
        pageSize: 10,
        totalResult: 0,
      },
      // 表格数据
      loading: false,
      tableData: [],
      strategyStatus: [
        { label: "生效", value: 1 },
        { label: "无效", value: 0 },
      ],
      userName: "",
    };
  },
  created () {

    console.log("用户：", this.$store.state.user.name);
    this.userName = this.$store.state.user.name;

  },
  mounted () {
    this.init();
  },
  methods: {
    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 () {
      listSchemeGlobal(this.searchForm).then(res => {
        this.tableData = res.data.list;
        this.total = res.data.total;
        this.searchForm.totalResult = res.data.total;
        this.tableData.forEach((item) => {
          item.createTime = getTime(item.createTime);
        });
        console.log(111)
      })
    },

    toAdd () {
      this.$router.push("/schemeGlobal/itemEdit?");
    },
    toEdit (id) {
      this.$router.push("/schemeGlobal/itemEdit?ids=" + id);
    },
    del (id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // const $table = this.$refs.xTable;
          // $table.remove(row);
          del("/strategy/global-info/delete", { ids: id }).then(
            (res) => {

              this.init()
            }
          );
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

  },
};
</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>
