<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 dense filled v-model="msg.Title" label="问卷调查名称" maxlength="20" />
        </div>
        <div class="col-3">
          <q-select @input="resetSearch" filled dense stack-label option-value="Id" option-label="Name"
            v-model="msg.PrizeType" ref="SurveyType" :options="platList" 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-StartDateStr="props">
          <q-td :props="props">
            <div>{{props.row.StartDateStr}}</div>
            <div>{{props.row.EndDateStr}}</div>
          </q-td>
        </template>
        <template v-slot:body-cell-PrizeAddress="props">
          <q-td :props="props">
            <div style="max-width: 150px; overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;">
              {{props.row.PrizeAddress}}
              <q-tooltip :offset="[10, 10]">
                {{props.row.PrizeAddress}}
              </q-tooltip>
            </div>
          </q-td>
        </template>
        <template v-slot:body-cell-Description="props">
          <q-td :props="props">
            <div style="max-width: 200px; overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;">
              {{props.row.Description}}
              <q-tooltip :offset="[10, 10]">
                {{props.row.Description}}
              </q-tooltip>
            </div>
          </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="iconfont icon-view" color="accent" style="font-weight:400" label="配置学员"
            @click="Gochild(props.row)" />
            <q-btn flat size="xs" icon="iconfont icon-view" color="accent" style="font-weight:400" label="配置"
            @click="GoYijian(props.row)" />
            <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>
      <quesactive-form v-if="isShowWenjuan" :save-obj="objOption" @close="closeSaveForm" @success="resetSearch">
      </quesactive-form>
    </div>
  </div>
</template>
<script>
  import quesactiveForm from '../../components/activity/quesactive-form'
  export default {
    meta: {
      title: "意见调查表配置"
    },
    components: {
      quesactiveForm
    },
    data() {
      return {
        columns: [{
            name: 'ID',
            label: 'ID',
            align: 'left',
            field: 'ID'
          },
          {
            name: 'Title',
            label: '问卷标题',
            field: 'Title',
            align: 'left'
          },
          {
            name: 'StartDateStr',
            label: '时间',
            field: 'StartDateStr',
            align: 'left'
          },
          {
            name: 'PrizeTypeStr',
            label: '领奖方式',
            field: 'PrizeTypeStr',
            align: 'left'
          },
          {
            name: 'PrizeAddress',
            label: '领奖地址',
            field: 'PrizeAddress',
            align: 'left'
          },
          {
            name: 'Description',
            label: '奖品说明',
            field: 'Description',
            align: 'left'
          },
          {
            name: 'SurveyNum',
            label: '问卷调查份数',
            field: 'SurveyNum',
            align: 'left'
          },
          {
            name: 'optioned',
            label: '操作',
            field: 'TId'
          }
        ],
        dataList: [],
        loading: true,
        msg: {
          pageIndex: 1,
          pageSize: 12,
          PrizeType: 0,
          Title: '',
          rowsPerPage: 12,
        },
        platList: [],
        pageCount: 0,
        isShowWenjuan: false,
        objOption: null,
      }
    },
    created() {

    },
    mounted() {
      this.GetPrizeTypeEnumList();
      this.getList();
    },
    methods: {
      GetPrizeTypeEnumList() {
        this.apipostDS("/api/Survey/GetPrizeTypeEnumList", {}, res => {
          if (res.data.resultCode == 1) {
            this.platList = res.data.data;
            let obj = {
              Id: 0,
              Name: '不限'
            }
            this.platList.unshift(obj);
          } else {
            this.$q.notify({
              type: 'negative',
              position: "top",
              message: res.data.message
            })
          }
        })
      },
      resetSearch() {
        this.msg.pageIndex = 1;
        this.getList();
      },
      getList() {
        this.loading = true;
        this.apipostDS("/api/Survey/GetActivitySurveyPageList", 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.$q.notify({
              type: 'negative',
              position: "top",
              message: 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/DelActivitySurvey", {
              ID: 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();
      },
      // 跳转到配置学员详情页
      Gochild(row){
        this.OpenNewUrl('/activity/configurationstudentsList',{
            ID: row.ID
        });
      },
      //跳转到意见调查表
      GoYijian(row) {
        this.OpenNewUrl('/activity/questionnaireList', {
          ID: row.ID
        });
      }
    },
  }
</script>

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