<template>
  <el-drawer
    title="问卷回答列表"
    :visible.sync="viewDrawer"
    append-to-body
    size="100%"
  >
    <avue-crud
      :option="option"
      :table-loading="loading"
      :data="data"
      :page.sync="page"
      ref="crud"
      @search-change="searchChange"
      @current-change="currentChange"
      @size-change="sizeChange"
      @refresh-change="refreshChange"
      @search-reset="searchReset"
    >

    </avue-crud>
  </el-drawer>
</template>

<script>
import {
  getQueryEmploymentSurveyUserBySurveyId,
} from '@/api/manage/survey'

const initPages = {
  pageSize: 10,
  currentPage: 1,
  total: 100,
}
export default {
  props: {
    visible: Boolean,
    rowData: {default: null, type: Function},
  },
  computed: {
    viewDrawer: {
      get() {
        return this.visible;
      },
      set(val) {
        this.$emit("update:visible", val);
      },
    },
    option() {
      return {
        size: 'medium',
        dateBtn: false,
        addBtn: false,
        editBtn: false,
        delBtn: false,
        height: "auto",
        reserveSelection: false,
        border: true,
        columnBtn: false,
        refreshBtn: false,
        menu: false,
        tip: false,
        selection: true,
        searchMenuSpan: 6,
        align: 'center',
        column: [
          {
            label: '应答人',
            prop: 'replyName',
            search: true,
          }, {
            label: '回复内容',
            prop: 'replyContent',
          }, {
            label: '用户电话',
            prop: 'replyPhone',
            search: true,
          }, {
            label: '手机号',
            prop: 'surveyContent',
            search: true,
          }, {
            label: '创建人',
            prop: 'createUser',
          }, {
            label: '创建时间',
            prop: 'createTime',
          },
        ]
      }
    }
  },
  watch: {
    viewDrawer(val) {
      val ? this.onPageLoad() : null
    }
  },
  data() {
    return {
      loading: false,
      data: [],
      page: Object.assign({}, initPages),
      query: {}
    }
  },
  created() {

  },
  methods: {
    onPageLoad() {
      if (!this.rowData) return
      console.log('row2', this.rowData)
      this.onLoad()
    },
    searchChange(params, done) {
      this.query = params;
      this.page.currentPage = 1;
      this.onLoad();
      done();
    },
    currentChange(val) {
      this.page.currentPage = val
      this.onLoad()
    },
    sizeChange(val) {
      this.page.currentPage = 1
      this.page.pageSize = val
      this.onLoad()
    },
    refreshChange() {
      this.page.currentPage = 1;
      this.onLoad()
    },
    searchReset() {
      this.query = {};
      this.page.currentPage = 1
      this.onLoad();
    },
    onLoad() {
      if (!this.rowData) return
      return new Promise(async (resolve, reject) => {
        let params = {
          surveyId: this.rowData.id,
          current: this.page.currentPage,
          size: this.page.pageSize,
          ...this.query,
        }
        this.loading = true
        let resData = await getQueryEmploymentSurveyUserBySurveyId(params)
        if (resData.data.code === 200) {
          const {current, records, total, size} = resData.data.data
          this.data = records;
          this.page.total = total;
          this.loading = false;
          resolve()
        } else {
          reject()
        }
      })
    }
  }
}
</script>

<style>

</style>
