<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="getDataList" clearable dense filled v-model="msg.AliasName" label="昵称" maxlength="20" />
        </div> -->
        <div class="col-3 reaultPageDate">
          <q-field filled dense>
             <template v-slot:control>
              <el-date-picker v-model="dateArray" @change="getDataList()" size="mini"  value-format="yyyy-MM-dd"
                 type="daterange"  style="border:none;width:100%;"  range-separator="至"  start-placeholder="开始日期"
                 end-placeholder="结束日期" />   
            </template>
          </q-field>
        </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="tableData" :columns="columns"
        row-key="name">
        <template v-slot:top>
          <div class="col-2 q-table__title">问卷调查列表</div>
          <q-space />
          <div class="page-option">
          </div>
        </template>
        <template v-slot:body-cell-AliasName="props">
          <q-td :props="props">
            <q-avatar rounded size="sm" v-if="props.row.Photo">
              <img :src="props.row.Photo" />
            </q-avatar>
            <q-avatar rounded size="sm" color="teal-10" text-color="white" v-if="!props.row.Photo">
              {{props.row.AliasName}}</q-avatar>
            <span style="position:relative;top:3px;margin-left:2px;">{{props.row.AliasName}}</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="showDetails(props.row)" />
          </q-td>
        </template>
      </q-table>
    </div>
    <result-form v-if="isShowResult" :save-obj="objOption" @close="closeResultForm" @success="getDataList">
    </result-form>
  </div>
</template>
<script>
  import resultForm from '../../components/activity/result-form.vue'
  export default {
    meta: {
      title: "意见调查结果"
    },
    components: {
      resultForm
    },
    data() {
      return {
        msg: {
          pageIndex: 1,
          pageSize: 12,
          AliasName: '',
          StartDate: '',
          EndDate: '',
          rowsPerPage: 12,
        },
        columns: [{
            name: 'ID',
            label: '编号',
            align: 'left',
            field: 'ID'
          },
          {
            name: 'ActiveSurveyName',
            label: '问卷名称',
            field: 'ActiveSurveyName',
            align: 'left'
          },
          {
            name: 'AliasName',
            label: '用户信息',
            field: 'AliasName',
            align: 'left'
          },
          {
            name: 'CreateDateStr',
            label: '创建时间',
            field: 'CreateDateStr',
            align: 'left'
          },
          {
            name: 'optioned',
            label: '操作',
            field: 'Tid'
          }
        ],
        tableData: [],
        pageCount: 0,
        loading: false,
        dateArray: [],
        isShowResult: false,
        objOption: null,
      }
    },
    created() {
      this.getDataList();
    },
    methods: {
      getDataList() {
        this.loading = true;
        if (this.dateArray && this.dateArray.length > 0) {
          this.msg.StartDate = this.dateArray[0];
          this.msg.EndDate = this.dateArray[1];
        } else {
          this.msg.StartDate = '';
          this.msg.EndDate = '';
        }
        this.apipostDS("/api/Survey/GetResultPageList", this.msg, res => {
          this.loading = false;
          if (res.data.resultCode == 1) {
            this.tableData = res.data.data.pageData;
            this.pageCount = res.data.data.pageCount;
          } else {
            this.Info(res.data.message);
          }
        })
      },
      getList() {
        this.msg.pageIndex = 1
        this.getDataList();
      },
      changePage(val) {
        this.msg.pageIndex = val;
        this.getDataList();
      },
      showDetails(row) {
        this.apipostDS("/api/Survey/GetGuestSurveyDetails", {
          SurveyID: row.ID
        }, res => {
          if (res.data.resultCode == 1) {
            this.objOption = res.data.data;
            this.isShowResult = true;
          } else {
            this.Info(res.data.message);
          }
        })
      },
      //关闭弹窗
      closeResultForm() {
        this.isShowResult = false;
      },
    }
  }
</script>
<style scoped>
  .reaultPageDate .el-input__inner{
    background: transparent !important;
  }
  .page-search /deep/ .reaultPageDate .el-range-input {
    background: transparent !important;
    border: 0 !important;
    padding-right: 0 !important;
  }
</style>