<template>
  <div>
    <a-card>
      <a-tabs :animated="false">
        <a-tab-pane :key="1" tab="二维码申请">
          <a-form-model layout="vertical" ref="ruleForm" :rules="rules" :model="form">
            <a-row :gutter="30">
              <a-col :span="6">
                <a-form-model-item label="来访人数" prop="numberOfReception">
                  <a-input-number
                    :min="1"
                    v-model="form.numberOfReception"
                    placeholder="请填写来访人数量"
                    style="width: 100%"
                  />
                </a-form-model-item>
              </a-col>
              <a-col :span="6">
                <a-form-model-item label="来访单位" prop="visitDeptName">
                  <a-input v-model="form.visitDeptName" placeholder="请填写来访单位" />
                </a-form-model-item>
              </a-col>
              <a-col :span="6">
                <a-form-model-item label="来访事由" prop="visitTheReason">
                  <a-input v-model="form.visitTheReason" placeholder="请填写事由" />
                </a-form-model-item>
              </a-col>
              <a-col :span="6">
                <a-form-model-item label="接待地点" prop="receptionSite">
                  <a-input v-model="form.receptionSite" placeholder="请填写接待地点" />
                </a-form-model-item>
              </a-col>
              <a-col :span="6">
                <a-form-model-item label="选择来访时间段" prop="beginTime">
                  <a-range-picker
                    v-model="dateValue"
                    :show-time="{ format: 'HH:mm' }"
                    format="YYYY-MM-DD HH:mm"
                    :placeholder="['开始时间', '截止时间']"
                    @ok="onOk"
                    style="width: 100%"
                  />
                </a-form-model-item>
              </a-col>
              <a-col :span="24">
                <a-button type="primary" :loading="btnLoading" @click="sumbit"> 提交 </a-button>
              </a-col>
            </a-row>
          </a-form-model>
        </a-tab-pane>
        <a-tab-pane :key="2" tab="邀请记录">
          <div class="search_wrap">
            <span style="margin-left: 20px">日期：</span>
            <a-range-picker @change="onChange" />
            <a-button style="margin: 0 20px" type="primary" @click="search">查询</a-button>
          </div>
          <PublicTable
            :columns="columns"
            :dataSource="datas"
            :tableLoading="loading"
            :total="total"
            @queryData="getDatas"
            size="middle"
          >
            <template slot="action" slot-scope="record">
              <a-popconfirm title="确定下载吗？" ok-text="确定" cancel-text="取消" @confirm="download(record.id)">
                <a>下载二维码</a>
              </a-popconfirm>
            </template>
          </PublicTable>
        </a-tab-pane>
      </a-tabs>
    </a-card>
    <QRCodeModal :QRCodeParams="QRCodeParams" />
  </div>
</template>

<script>
import moment from 'moment'
import PublicTable from '../PublicTable.vue'
import QRCodeModal from './QRCodeModal.vue'
export default {
  components: {
    PublicTable,
    QRCodeModal,
  },
  data() {
    return {
      QRCodeParams: {
        visible: false,
        downloadLoading: false,
        qrId: '',
        QRcodeImg: '',
      },
      btnLoading: false,
      dateValue: [],
      form: {
        numberOfReception: '',
        visitDeptName: '',
        visitTheReason: '',
        receptionSite: '',
        beginTime: '',
        endTime: '',
      },
      rules: {
        numberOfReception: [
          {
            required: true,
            message: '请填写来访人数量',
            trigger: 'blur',
          },
        ],
        visitDeptName: [
          {
            required: true,
            message: '请填写来访单位',
            trigger: 'blur',
          },
        ],
        visitTheReason: [
          {
            required: true,
            message: '请填写事由',
            trigger: 'blur',
          },
        ],
        receptionSite: [
          {
            required: true,
            message: '请填写接待地点',
            trigger: 'blur',
          },
        ],
        beginTime: [
          {
            required: true,
            message: '请选择来访时间段',
            trigger: 'blur',
          },
        ],
      },
      columns: [
        {
          title: '序号',
          dataIndex: '',
          width: 60,
          align: 'center',
          customRender: (text, record, index) => `${index + 1}`,
        },
        {
          title: '来访单位',
          dataIndex: 'visitDeptName',
          align: 'center',
          width: 120,
        },
        {
          title: '来访事由',
          dataIndex: 'visitTheReason',
          align: 'center',
          width: 100,
        },
        {
          title: '来访人数',
          dataIndex: 'numberOfReception',
          align: 'center',
          width: 80,
        },
        {
          title: '接待地点',
          dataIndex: 'receptionSite',
          align: 'center',
          width: 120,
        },
        {
          title: '来访时间',
          dataIndex: 'beginTime',
          align: 'center',
          width: 150,
        },
        {
          title: '操作',
          align: 'center',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' },
          width: 120,
        },
      ],
      datas: [],
      loading: false,
      total: 0,
      searchQuery: {
        beginTime: '',
        endTime: '',
      },
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      this.getDatas()
    },
    // 获取邀请记录
    async getDatas(params) {
      this.loading = true
      const url = this.$address.api.getinvitedToRecordList
      const data = {
        params,
      }
      const res = await this.$http.get(url, data)
      if (res.code === 200) {
        this.loading = false
        this.datas = res.result.records
        this.total = res.result.total
      } else {
        this.$message.error(res.message)
      }
    },
    // 二维码下载
    download(id) {
      this.QRCodeParams.downloadLoading = true
      const url = this.$address.api.downloadYaoQiCode
      window.location.href = process.env.VUE_APP_API_BASE_URL + url + '?inviteId=' + id
      setTimeout(() => {
        this.QRCodeParams.downloadLoading = false
      }, 1500)
    },
    // 申请提交
    sumbit() {
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          this.btnLoading = true
          const url = this.$address.api.invitedToRecord
          const res = await this.$http.post(url, this.form)
          if (res.code === 200) {
            this.QRCodeParams.qrId = res.result.inviteId
            this.QRCodeParams.QRcodeImg = res.result.QRCode
            this.QRCodeParams.visible = true
            this.btnLoading = false
            this.form = {}
            this.dateValue = []
            this.getDatas()
          } else {
            this.$message.error(res.message)
            this.btnLoading = false
          }
        } else {
          return false
        }
      })
    },
    // 时间段搜索
    onChange(date, dateString) {
      this.searchQuery.beginTime = dateString[0]
      this.searchQuery.endTime = dateString[1]
    },
    //邀请人来访时间段
    onOk(value) {
      this.form.beginTime = moment(value[0]).format('YYYY-MM-DD HH:mm')
      this.form.endTime = moment(value[1]).format('YYYY-MM-DD HH:mm')
    },
    handleCancel(e) {
      this.QRCodeParams.visible = false
    },
    search() {
      this.getDatas(this.searchQuery)
    },
  },
}
</script>

<style scoped>
.search_wrap {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 20px;
}
</style>
