<template>
  <div class="page-body">
    <div class="page-search row items-center">
      <div class="col row wrap q-col-gutter-md">
        <div class="col-3">
          <q-input @input="resetSearch" clearable filled v-model="msg.Title"
            label="问卷调查名称" maxlength="20" />
        </div>
        <div class="col-3">
          <q-select @input="resetSearch" filled stack-label option-value="Id" option-label="Name"
            v-model="msg.SurveyType" ref="SurveyType" :options="platList" emit-value map-options label="类型"
            :dense="false" />
        </div>
        <div class="col-3">
          <q-select @input="resetSearch" filled v-model="msg.IsShow" :options="ShowOpts"
            emit-value map-options label="是否显示" />
        </div>
      </div>
    </div>
    <div class="page-content">
      <q-table :pagination="msg" :loading="loading" no-data-label="暂无相关数据" flat
        class="sticky-right-column-table sticky-column-table" separator="none" :data="dataList" :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" size="sm" icon="add" label="新增" @click="addObj(null)" />
          </div>
        </template>
<template v-slot:body-cell-IsRequired="props">
          <q-td :props="props">
            <span v-if="props.row.IsRequired==0">否</span>
            <span v-if="props.row.IsRequired==1">是</span>
          </q-td>
        </template>
<template v-slot:body-cell-IsShow="props">
          <q-td :props="props">
            <span v-if="props.row.IsShow==0">是</span>
            <span v-if="props.row.IsShow==1">否</span>
          </q-td>
        </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="xs" icon="edit" color="accent" style="font-weight:400" label="编辑"
              @click="addObj(props.row)" />
            <q-btn flat size="xs" icon="delete" color="negative" style="font-weight:400" label="删除"
              @click="delQuestion(props.row)" />
          </q-td>
        </template>
</q-table>
<wenjuan-form v-if="isShowWenjuan" :save-obj="objOption" :ID="msg.ActivitySurveyId" @close="closeSaveForm" @success="resetSearch"></wenjuan-form>
</div>
</div>
</template>
<script>
    import wenjuanForm from '../../components/activity/wenjuan-form'
    export default {
        meta: {
            title: "问卷调查"
        },
        components: {
            wenjuanForm
        },
        data() {
            return {
                columns: [{
                    name: 'ID',
                    label: 'ID',
                    align: 'left',
                    field: 'ID'
                }, {
                    name: 'Title',
                    label: '问题名称',
                    field: 'Title',
                    align: 'left'
                }, {
                    name: 'FormTypeStr',
                    label: '问卷类型',
                    field: 'FormTypeStr',
                    align: 'left'
                }, {
                    name: 'IsRequired',
                    label: '是否必填',
                    field: 'IsRequired',
                    align: 'left'
                }, {
                    name: 'IsShow',
                    label: '是否显示',
                    field: 'IsShow',
                    align: 'left'
                }, {
                    name: 'Sort',
                    label: '排序',
                    field: 'Sort',
                    align: 'left'
                }, {
                    name: 'optioned',
                    label: '操作',
                    field: 'TId'
                }],
                dataList: [],
                loading: true,
                ShowOpts: [{
                    label: '不限',
                    value: '-1'
                }, {
                    label: '是',
                    value: '0'
                }, {
                    label: '否',
                    value: '1'
                }],
                msg: {
                    pageIndex: 1,
                    pageSize: 15,
                    rowsPerPage: 15,
                    PrizeType: 0,
                    Title: '',
                    IsShow: '-1',
                    SurveyType: 0,
                    ActivitySurveyId: 0, //活动id
                },
                platList: [],
                pageCount: 0,
                isShowWenjuan: false,
                objOption: null,
            }
        },
        created() {},
        mounted() {
            if (this.$route.query && this.$route.query.ID) {
                this.msg.ActivitySurveyId = this.$route.query.ID;
            }
            this.getPlat();
            this.getList();
        },
        methods: {
            getPlat() {
                this.apipostDS("/api/Survey/GetSurveyTypeEnumList", {}, res => {
                    if (res.data.resultCode == 1) {
                        this.platList = res.data.data;
                        let obj = {
                            Id: 0,
                            Name: '不限'
                        }
                        this.platList.unshift(obj);
                    } else {
                        this.Info(res.data.message);
                    }
                })
            },
            resetSearch() {
                this.msg.pageIndex = 1;
                this.getList();
            },
            getList() {
                this.loading = true;
                this.apipostDS("/api/Survey/GetPageList", this.msg, res => {
                    this.loading = false;
                    if (res.data.resultCode == 1) {
                        this.dataList = res.data.data.pageData;
                        this.pageCount = res.data.data.pageCount;
                    } else {
                        this.Info(res.data.message);
                    }
                })
            },
            addObj(obj) {
                if (obj) {
                    this.objOption = obj
                } else {
                    this.objOption = null
                }
                this.isShowWenjuan = true;
            },
            //删除问卷
            delQuestion(row) {
                let that = this;
                this.$q.dialog({
                    title: "提示",
                    message: '是否删除该活动信息？',
                    cancel: {
                        label: "取消",
                        flat: true
                    },
                    ok: {
                        label: "确认",
                        flat: true,
                        focus: true
                    }
                }).onOk(() => {
                    that.apipostDS(
                        "/api/Survey/DelSurvey", {
                            SurveyID: row.ID
                        },
                        res => {
                            if (res.data.resultCode == 1) {
                                that.$q.notify({
                                    icon: 'iconfont icon-chenggong',
                                    color: 'accent',
                                    timeout: 2000,
                                    message: '数据删除成功！',
                                    position: 'top'
                                })
                                that.getList();
                            } else {
                                that.$q.notify({
                                    type: 'negative',
                                    position: "top",
                                    message: res.data.message
                                })
                            }
                        },
                    );
                });
            },
            closeSaveForm() {
                this.isShowWenjuan = false;
            },
            changePage(val) {
                this.msg.pageIndex = val;
                this.getList();
            },
        },
    }
</script>

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