<template>
  <el-dialog
    v-model="show" title="导出PPT" width="800"
    destroy-on-close
  >
    <el-form
      ref="queryRef" :model="queryParams"
      label-width="150" :rules="rules"
    >
      <el-form-item label="会员综合分析" prop="ppt1BeginYear">
        <el-date-picker
          v-model="queryParams.ppt1BeginYear"
          type="year"
          value-format="YYYY"
          style="width: 150px;"
          :clearable="false"
          :disabled-date="disablesDate"
        />
        年
        <span style="padding: 0 20px;"> ~ </span>
        <el-date-picker
          v-model="queryParams.ppt1EndYear"
          type="year"
          :clearable="false"
          value-format="YYYY"
          style="width: 150px;"
          :disabled-date="disablesDate"
        />
        年
      </el-form-item>
      <el-form-item label="业务收入情况" prop="ppt2Year">
        <el-date-picker
          v-model="queryParams.ppt2Year"
          type="year"
          value-format="YYYY"
          style="width: 150px;"
        />
        年
        <span style="padding: 0 20px;"> ~ </span>
        <el-select v-model="queryParams.ppt2BeginMonth" style="width: 150px;">
          <el-option v-for="val in monthList" :key="val" :label="`${val}月`" :value="val" />
        </el-select>
        月
        <span style="padding: 0 20px;"> ~ </span>
        <el-select v-model="queryParams.ppt2EndMonth" style="width: 150px;">
          <el-option v-for="val in monthList" :key="val" :label="`${val}月`" :value="val" />
        </el-select>
        月
      </el-form-item>
      <el-form-item label="业务数量对比情况" prop="ppt3Year">
        <el-date-picker
          v-model="queryParams.ppt3Year"
          type="year"
          :clearable="false"
          value-format="YYYY"
          style="width: 150px;"
        />
        年
        <span style="padding: 0 20px;"> ~ </span>
        <el-select v-model="queryParams.ppt3BeginMonth" style="width: 150px;">
          <el-option v-for="val in monthList" :key="val" :label="`${val}月`" :value="val" />
        </el-select>
        月
        <span style="padding: 0 20px;"> ~ </span>
        <el-select v-model="queryParams.ppt3EndMonth" style="width: 150px;">
          <el-option v-for="val in monthList" :key="val" :label="`${val}月`" :value="val" />
        </el-select>
        月
      </el-form-item>
      <el-form-item label="TOP10排名对比" prop="ppt4Year">
        <el-date-picker
          v-model="queryParams.ppt4Year"
          type="year"
          :clearable="false"
          value-format="YYYY"
          style="width: 150px;"
        />
        年
        <span style="padding: 0 20px;"> ~ </span>
        <el-select v-model="queryParams.ppt4BeginMonth" style="width: 150px;">
          <el-option v-for="val in monthList" :key="val" :label="`${val}月`" :value="val" />
        </el-select>
        月
        <span style="padding: 0 20px;"> ~ </span>
        <el-select v-model="queryParams.ppt4EndMonth" style="width: 150px;">
          <el-option v-for="val in monthList" :key="val" :label="`${val}月`" :value="val" />
        </el-select>
        月
      </el-form-item>
      <el-form-item label="业务增长省份情况表" prop="ppt5Year">
        <el-date-picker
          v-model="queryParams.ppt5Year"
          type="year"
          :clearable="false"
          value-format="YYYY"
          style="width: 150px;"
        />
        年
        <span style="padding: 0 20px;"> ~ </span>
        <el-select v-model="queryParams.ppt5BeginMonth" style="width: 150px;">
          <el-option v-for="val in monthList" :key="val" :label="`${val}月`" :value="val" />
        </el-select>
        月
        <span style="padding: 0 20px;"> ~ </span>
        <el-select v-model="queryParams.ppt5EndMonth" style="width: 150px;">
          <el-option v-for="val in monthList" :key="val" :label="`${val}月`" :value="val" />
        </el-select>
        月
      </el-form-item>
      <el-form-item label="各省业务排名情况" prop="ppt7Year">
        <el-date-picker
          v-model="queryParams.ppt7Year"
          type="year"
          :clearable="false"
          value-format="YYYY"
          style="width: 150px;"
        />
        年
        <span style="padding: 0 20px;"> ~ </span>
        <el-select v-model="queryParams.ppt7BeginMonth" style="width: 150px;">
          <el-option v-for="val in monthList" :key="val" :label="`${val}月`" :value="val" />
        </el-select>
        月
        <span style="padding: 0 20px;"> ~ </span>
        <el-select v-model="queryParams.ppt7EndMonth" style="width: 150px;">
          <el-option v-for="val in monthList" :key="val" :label="`${val}月`" :value="val" />
        </el-select>
        月
      </el-form-item>
    </el-form>
    <br>
    <div style="text-align: center">
      <el-button type="warning" @click="handlePPT">导出PPT</el-button>
    </div>
  </el-dialog>
</template>

<script setup>
import { reactive } from '@vue/runtime-core'
import { ref, toRefs, getCurrentInstance } from 'vue'
import dayjs from 'dayjs'
const { proxy } = getCurrentInstance()
const show = ref(false)
const monthList = ref(['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'])
const data = reactive({
  queryParams: {}
})
const rules = ref({
  ppt1BeginYear: [
    { required: true, message: '请选择', trigger: 'blur' }
  ],
  ppt2Year: [
    { required: true, message: '请选择', trigger: 'blur' }
  ],
  ppt3Year: [
    { required: true, message: '请选择', trigger: 'blur' }
  ],
  ppt4Year: [
    { required: true, message: '请选择', trigger: 'blur' }
  ],
  ppt5Year: [
    { required: true, message: '请选择', trigger: 'blur' }
  ],
  ppt7Year: [
    { required: true, message: '请选择', trigger: 'blur' }
  ]
})

const { queryParams } = toRefs(data)

function open() {
  const nowMonth = dayjs().month() == 0 ? 12 + '' : dayjs().month() + ''
  queryParams.value = {
    ppt1BeginYear: '2020',
    ppt1EndYear: (dayjs().year() - 1) + '',
    ppt2Year: dayjs().year() + '',
    ppt3Year: dayjs().year() + '',
    ppt4Year: dayjs().year() + '',
    ppt5Year: dayjs().year() + '',
    ppt7Year: dayjs().year() + '',
    
    ppt2BeginMonth: '1',
    ppt2EndMonth: nowMonth,
    ppt3BeginMonth: '1',
    ppt3EndMonth: nowMonth,
    ppt4BeginMonth: '1',
    ppt4EndMonth: nowMonth,
    ppt5BeginMonth: '1',
    ppt5EndMonth: nowMonth,
    ppt7BeginMonth: '1',
    ppt7EndMonth: nowMonth
  }
  console.log(queryParams.value)
  show.value = true
}


async function handlePPT() {
  await proxy.$refs['queryRef'].validate()
  await proxy.download('/common/home/getPPT', {
    ...queryParams.value
  }, `业务综合分析PPT${new Date().getTime()}.pptx`)
}

function disablesDate(time) {
  const beginTime = dayjs('2019/01/01').valueOf()
  const endTime = dayjs(dayjs().year() + '/01/01').valueOf()
  return time.getTime() < beginTime || time.getTime() >= endTime
}


defineExpose({
  open
})


</script>

<style lang="scss" scoped>
.router {
  margin-right: 20px;
}
:deep(.el-button--info){
  background-color: #920f20;
  border:1px solid #920f20
}

</style>