<template>
  <q-card class>
    <q-card-section class="q-pa-none scroll" style="max-height: 80vh">
      <q-stepper v-model="step" header-nav ref="stepper" color="primary" animated class="no-shadow">
        <q-step
          :name="1"
          title="下载模板"
          icon="settings"
          :done="step > 1"
          :header-nav="step > 1"
          class="text-center q-pa-sm"
        >
          <kyb-btn
            label="点击下载导入的Excel模板"
            type="a"
            icon="vertical_align_bottom"
            outline
            color="primary"
            :href="importTempUrl"
            target="_blank"
          />
        </q-step>
        <q-step :name="2" title="上传导入文件" icon="settings" :done="step > 2" :header-nav="step > 2">
          <div class="text-center q-pa-sm">请上传已编辑好的文件：</div>
          <kyb-upload v-model="fileId" accept-type="xlsx,xls,json" />
        </q-step>
        <q-step
          :name="3"
          title="检查导入数据"
          icon="create_new_folder"
          :done="step > 3"
          :header-nav="step > 3"
        >
          <div class="text-center q-pa-sm">
            文件共包含
            <span class="text-primary" v-text="data.totalNum"></span>
            条
          </div>
          <table class="show-line">
            <tr class="header">
              <td>
                <q-icon
                  size="1.5em"
                  :name="selectedAll?'check_box':'check_box_outline_blank'"
                  @click="selectAllItem();"
                  :class="selectedAll?'text-primary':''"
                />
              </td>
              <td v-for="item in data.fields" v-text="item.title" :key="item._id"></td>
            </tr>
            <tr
              class="body"
              :class="v.$selected?'selected':''"
              v-for="(v,index) in data.items"
              :key="index"
            >
              <td>
                <q-icon
                  size="1.5em"
                  :name="v.$selected?'check_box':'check_box_outline_blank'"
                  @click="selectOneItem(v)"
                  :class="v.$selected?'text-primary':''"
                />
              </td>
              <td v-for="item in data.fields" :key="item._id">
                <span v-if="item.minLength>0" class="text-negative">*</span>
                <span v-text="v[item.name]"></span>
              </td>
            </tr>
          </table>
        </q-step>
      </q-stepper>
    </q-card-section>
    <q-separator />
    <q-card-section class="q-pa-sm">
      <q-btn v-if="step===1" @click="() => { done1 = true; step = 2 }" color="primary" label="下一步" />
      <q-btn
        v-if="step===2"
        @click="() => { done2 = true; step = 3;importProLoad() }"
        :disabled="step===2&&!this.fileId"
        color="primary"
        label="下一步"
      />
      <q-btn
        v-if="step===3"
        @click="() => { done3 = true;importData() }"
        color="primary"
        :disabled="selecedList.length===0"
        :label="`确定导入 ${selecedList.length} 条`"
      />
      <q-btn flat v-if="step>1" @click="step--" color="primary" label="返回" class="q-ml-sm" />
    </q-card-section>
  </q-card>
</template>
<style>
</style>
<script>
// import _ from 'underscore'
// import KTest from 'components/k-test'

let d = {
  name: 'kyb-import-data',
  props: {
    module: String,
    entity: String
  },
  data: function() {
    return {
      fileId: null,
      step: 1,
      data: { items: [], totalNum: 0 },
      selectedAll: false,
      selecedList: [],
      importTempUrl: `/api/${this.module}/${this.entity}/exportDataTemp`
    }
  },
  computed: {},
  methods: {
    async importProLoad() {
      let re = await this.$axios.get(
        `/${this.module}/${this.entity}/importProLoad?fileId=${this.fileId}`
      )
      this.data = re.data
    },
    selectAllItem() {
      this.selectedAll = !this.selectedAll
      this.data.items.forEach(item =>
        this.selectOneItem(item, this.selectedAll)
      )
      this.selecedList = this.data.items.filter(v => v.$selected)
      this.$forceUpdate()
    },
    selectOneItem(item, selected) {
      item.$selected = selected != null ? selected : !item.$selected
      if (selected == null) {
        this.selecedList = this.data.items.filter(v => v.$selected)
        this.$forceUpdate()
      }
    },
    async importData() {
      await this.$axios.post(`/${this.module}/${this.entity}/importData`, {
        fileId: this.fileId
      })
      this.$q.showNotifi('导入数据成功！')
      this.$emit('import-success')
    }
  }
}
export default d
</script>
