<template>
  <div>
    <div class="row q-my-sm">
      <q-input filled v-model="msg.Name" dense label="学习目的" class="col-3" @input="refreshPage"/>
    </div>
    <q-table
      :pagination="msg"
      :loading="loading"
      no-data-label="暂无相关数据"
      flat
      class="sticky-column-table"
      separator="none"
      :data="dataList"
      :columns="columns"
      row-key="name"
    >
      <template v-slot:top="props">
        <div class="col-2 q-table__title">学习目的</div>
        <q-space />
        <div class="page-option">
          <q-btn
            color="accent"
            size="sm"
            class="q-mr-md"
            icon="add"
            label="新增"
            @click="showForm(null)"
          />
        </div>
      </template>
      <template v-slot:body-cell-Group_Id="props">
        <q-td :props="props">
          <div>
            <q-btn
              flat
              size="xs"
              icon="edit"
              color="accent"
              style="font-weight:400"
              label="编辑"
              @click="showForm(props.row)"
            />
            <q-btn
              flat
              size="xs"
              icon="delete"
              color="negative"
              class="q-mr-xs"
              label="删除"
              @click="del(props.row.Id)"
            />
          </div>
        </q-td>
      </template>
      <template v-slot:bottom>
        <q-pagination
          class="full-width justify-end"
          v-model="msg.pageIndex"
          :max="pageCount"
          input
          color="primary"
          @input="changePage"
        />
      </template>
    </q-table>
    <studyAimForm
      v-if="showStudyAimForm"
      @success="refreshPage"
      @close="closeForm"
      :row="row"
    ></studyAimForm>
  </div>
</template>
<script>
import {
  GetLearningGoalsPage,
  RemoveLearningGoals
} from "../../api/system/index";
import studyAimForm from "../../components/system/studyAim-form";
export default {
  components: {
    studyAimForm
  },
  data() {
    return {
      showStudyAimForm: false,
      columns: [
        {
          name: "Id",
          label: "Id",
          field: "Id",
          align: "left"
        },
        {
          name: "Name",
          label: "学习目的",
          align: "left",
          field: "Name"
        },
        {
          name: "CreateByName",
          label: "创建人",
          align: "left",
          field: "CreateByName"
        },
        {
          name: "CreateTime",
          label: "创建时间",
          align: "left",
          field: "CreateTime"
        },
        {
          name: "Group_Id",
          label: "操作",
          field: "Group_Id"
        }
      ],
      msg: {
        rowsPerPage: 12,
        pageIndex: 1,
        pageSize: 12,
        Name: ""
      },
      dataList: [],
      pageCount: 0,
      loading: false,
      isShowStageForm: false,
      row: {}
    };
  },
  methods: {
    getList() {
      GetLearningGoalsPage(this.msg).then(res => {
        this.dataList = res.Data.PageData;
        this.pageCount = res.Data.PageCount;
      });
    },
    //翻页
    changePage(val) {
      this.msg.pageIndex = val;
      this.getList();
    },
    refreshPage() {
      this.msg.pageIndex = 1;
      this.getList();
    },
    showForm(row) {
      this.showStudyAimForm = true;
      this.row = row;
    },
    closeForm() {
      this.showStudyAimForm = false;
    },
    del(Id) {
      let delMsg = {
        Id: Id
      };
      this.$q
        .dialog({
          title: "提示信息",
          message: "是否确认删除？",
          cancel: true,
          persistent: true,
          ok: "确定",
          cancel: "取消"
        })
        .onOk(() => {
          RemoveLearningGoals(delMsg).then(res => {
            if (res.Code == 1) {
              this.$q.notify({
                icon: "iconfont icon-chenggong",
                color: "accent",
                timeout: 2000,
                message: "删除成功！",
                position: "top"
              });
              this.getList();
            }
          });
        });
    }
  },
  created() {
    this.getList();
  }
};
</script>
