<template>
  <div class="page-body">
    <div class="page-search row items-center">
      <div class="col row wrap q-mr-lg q-col-gutter-md">
        <div class="col-3">
          <q-input @input="resetSearch" clearable standout="bg-primary text-white" class="col-6 q-pr-lg q-pr-lg"
            v-model="msg.Title" label="问卷名称" maxlength="20" @clear="resetSearch" />
        </div>
      </div>
    </div>
    <div class="page-content">
      <q-table :pagination="msg" :loading="loading" no-data-label="暂无相关数据" flat class="sticky-tow-column-table"
        separator="none" :data="data" :columns="columns" row-key="name">
        <template v-slot:top>
          <div class="col-2 q-table__title">问卷调查管理</div>
          <q-space />
          <div class="page-option">
            <q-btn color="accent" class="q-mr-md" size="sm" icon="add" label="新增" @click="editSurveyMain(null)" />
          </div>
        </template>
        <template v-slot:bottom>
          <q-pagination class="full-width justify-end" v-model="msg.pageIndex" color="primary" :max="pageCount"
            :input="true" @input="changePage" />
        </template>
        <template v-slot:body-cell-optioned="props">
          <q-td :props="props">
            <q-btn flat size="small" icon="edit" color="accent" style="font-weight: 400" label="编辑"
              @click="editSurveyMain(props.row)" />
            <q-btn flat size="small" icon="iconfont icon-View" color="accent" style="font-weight: 400" label="问卷详情"
              @click="gotoSurveyQuestion(props.row)" />
            <q-btn flat size="small" icon="edit" color="accent" style="font-weight: 400" label="生成二维码"
              @click="createSurveyMainCode(props.row)">
              <q-popup-proxy>
                <div style="width: 185px; padding: 10px; border-radius: 8px">
                  <q-img :src="qrCodelUrl">
                    <template v-slot:loading>
                      <div class="text-subtitle1 text-white">Loading...</div>
                    </template>
                  </q-img>
                </div>
              </q-popup-proxy>
            </q-btn>
            <q-btn flat size="small" icon="delete" color="negative" style="font-weight: 400" label="删除"
              @click="delSurveyMain(props.row)" />
          </q-td>
        </template>
      </q-table>
      <surveyMain-form v-if="isShowForm" :save-obj="surveyMainObjOption" @close="refreshPage" @success="refreshPage">
      </surveyMain-form>
    </div>
  </div>
</template>
<script>
  import {
    queryEducationSurveyMainPage,
    deleteEducationSurveyMain,
  } from "../../api/common/common";
  import {
    queryQrCodeImage, //问卷调查二维码生成
  } from "../../api/school/index";
  import surveyMainForm from "../../components/system/surveyMain-form";
  export default {
    meta: {
      title: "问卷调查管理",
    },
    components: {
      surveyMainForm,
    },
    data() {
      return {
        currentUrl: "",
        columns: [{
            name: "Title",
            label: "问卷名称",
            field: "Title",
            align: "left",
          },
          {
            name: "QuestionCount",
            label: "题目数量",
            field: "QuestionCount",
            align: "left",
          },
          {
            name: "CreateByName",
            label: "创建人",
            field: "CreateByName",
            align: "left",
          },
          {
            name: "CreateTime",
            label: "创建时间",
            field: "CreateTime",
            align: "left",
          },
          {
            name: "UpdateTime",
            label: "最近一次修改时间",
            field: "UpdateTime",
            align: "left",
          },
          {
            name: "optioned",
            label: "操作",
            field: "Id",
          },
        ],
        data: [],
        loading: true,
        msg: {
          pageIndex: 1,
          pageSize: 12,
          rowsPerPage: 12,
          Title: "",
        },
        pageCount: 0,
        isShowForm: false, //是否显示新增修改问卷
        surveyMainObjOption: null,
        qrCodelUrl: "",
      };
    },
    mounted() {
      this.currentUrl = this.$route.path;
      this.resetSearch();
    },
    methods: {
      //跳转到问卷问题列表
      gotoSurveyQuestion(item) {
        this.OpenNewUrl('/system/survey', {
          MainId: item.Id
        })
      },
      //点击生成二维码
      createSurveyMainCode(item) {
        let codeMsg = {
          pUrl: "system/surveyStudent",
          StudentId: 0,
          StuName: "",
          MainId: item.Id,
        };
        queryQrCodeImage(codeMsg).then((res) => {
          if (res.Code == 1) {
            this.qrCodelUrl = "data:image/png;base64," + res.Data;
            codeMsg = {};
          }
        });
      },
      //删除问卷调查
      delSurveyMain(item) {
        var that = this;
        this.$q
          .dialog({
            title: "提示信息",
            message: "是否确定删除？",
            cancel: true,
            persistent: true,
            ok: "确定",
            cancel: "取消",
          })
          .onOk(() => {
            let delMsg = {
              Id: item.Id,
            };
            deleteEducationSurveyMain(delMsg).then((res) => {
              if (res.Code == 1) {
                that.$q.notify({
                  icon: "iconfont icon-chenggong",
                  color: "accent",
                  timeout: 2000,
                  message: "操作成功",
                  position: "top",
                });
                that.refreshPage();
              }
            });
          });
      },
      //刷新页面
      refreshPage() {
        this.isShowForm = false;
        this.surveyMainObjOption = null;
        this.getSurveyMainPage();
      },
      //新增修改问卷
      editSurveyMain(obj) {
        if (obj != null) {
          this.surveyMainObjOption = obj;
        }
        this.isShowForm = true;
      },
      //重新查询
      resetSearch() {
        this.msg.pageIndex = 1;
        this.getSurveyMainPage();
      },
      //翻页
      changePage(val) {
        this.msg.pageIndex = val;
        this.getSurveyMainPage();
      },
      //获取问卷分页列表
      getSurveyMainPage() {
        this.loading = true;
        queryEducationSurveyMainPage(this.msg)
          .then((res) => {
            this.loading = false;
            this.data = res.Data.PageData;
            this.pageCount = res.Data.PageCount;
          })
          .catch(() => {
            this.loading = false;
          });
      },
    },
  };

</script>
<style lang="sass">
  @import url('~assets/css/table.sass')

</style>
