<template>
  <div class="mod-home">
    <div class="search-bar">
      <el-form :inline="true" class="search-form" ref="searchForm" :model="searchForm" size="small">
        <div class="input-row">
          <el-form-item prop="status" label="团体组合" class="search-form-item">
            <el-select v-model="searchForm.seriesId" placeholder="请选择所属团体组合" clearable filterable @change="selectSeries">
              <el-option v-for="series in seriesList" :label="series.seriesName" :value="series.seriesId"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="status" label="选择爱豆" class="search-form-item">
            <el-select v-model="searchForm.personId" placeholder="请选择爱豆" clearable filterable>
              <el-option v-for="person in personList" :label="person.personName" :value="person.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <div class="default-btn primary-btn" @click="searchChange(true)">{{$t('crud.searchBtn')}}</div>
            <div class="default-btn" @click="resetSearchForm('searchForm')">{{$t('product.reset')}}</div>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <div v-if="(mode === 'chooseMtO' || mode === 'chooseOtO') && selectFrontNum > 0 && selectBackNum > 0" class="default-btn primary-btn" @click="openCreateCardLibDialog">创建图集</div>
    <div v-if="(mode === 'chooseMtO' || mode === 'chooseOtO') && selectFrontNum > 0 && selectBackNum > 0" class="default-btn primary-btn" @click="openAddCardLibDialog">加入已有图集</div>
    <div style="margin-top: 10px">
      <el-radio v-model="mode" label="view">预览模式</el-radio>
      <el-radio v-model="mode" label="edit">编辑模式</el-radio>
      <el-radio v-model="mode" label="chooseMtO">选图模式(多对一)</el-radio>
      <el-radio v-model="mode" label="chooseOtO">选图模式（一对一）</el-radio>
      <span v-if="(mode === 'chooseMtO' || mode === 'chooseOtO')" style="color: red; font-size: 16px;font-weight: bold">已选款数：{{selectFrontNum}}/{{selectBackNum}}</span>
    </div>
    <div class="card-plate">
      <!-- 正面 -->
      <div class="card-box" @scroll="frontScrollEvent">
        <div class="card-item">
          <div class="cardContainer">
            <div style="display: inline-block;margin-right: 5px;" v-for="(front, index) in frontList" :key="front.id">
              <el-row :gutter="24" style="padding-top: 5px">
                <el-col :span="24">
                  <div :style="(mode === 'chooseMtO' || mode === 'chooseOtO') && front.isSelected? divLightStyle : {border: '3px solid #fff'}" @click="frontItemSelect(front)">
                    <span class="item-num" v-if="front.num">{{ front.num }}</span>
                    <el-card :body-style="{ padding: '0px' }">
                      <div style="padding: 3px; text-align: center">
                        <span>{{front.seriesName}}</span>
                        <br/>
                        <span>{{front.personName}}</span>
                      </div>
                      <div style="width: 120px;height: auto">
                        <img :src="resourcesUrl + front.frontUrl"/>
                      </div>
                    </el-card>
                  </div>
                </el-col>
              </el-row>
              <el-row style="display: flex; justify-content: center">
                <el-button v-if="mode==='edit' && front.id" type="danger" size="mini" style="margin-right: 5px" @click="deleteCardItem(front, index, 'Front')">删除</el-button>
              </el-row>
            </div>
            <div class="loadMore" @click="loadMore('Front')">
              <span>点击加载更多</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 背面 -->
      <div class="card-box" @scroll="backScrollEvent">
        <div class="card-item">
          <div class="cardContainer">
            <div style="display: inline-block;margin-right: 5px;" v-for="(back, index) in backList" :key="back.id">
              <el-row :gutter="24" style="padding-top: 5px">
                <el-col :span="24">
                  <div :style="(mode === 'chooseMtO' || mode === 'chooseOtO') && back.isSelected? divLightStyle : {border: '3px solid #fff'}" @click="backItemSelect(back)">
                    <span class="item-num" v-if="back.num">{{ back.num }}</span>
                    <el-card :body-style="{ padding: '0px' }">
                      <div style="padding: 3px; text-align: center">
                        <span>{{back.seriesName}}</span>
                        <br/>
                        <span>{{back.personName}}</span>
                      </div>
                      <div style="width: 120px;height: auto">
                        <img :src="resourcesUrl + back.backUrl"/>
                      </div>
                    </el-card>
                  </div>
                </el-col>
              </el-row>
              <el-row style="display: flex; justify-content: center">
                <el-button v-if="mode==='edit' && back.id" type="danger" size="mini" style="margin-right: 5px" @click="deleteCardItem(back, index, 'Back')">删除</el-button>
              </el-row>
            </div>
            <div class="loadMore" @click="loadMore('Back')">
              <span>点击加载更多</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog :visible.sync="uploadCardVisible" :modal="false" title="上传图片" width="60%" top="3vh" :close-on-click-modal="false">
      <el-form :inline="true" class="search-form" ref="searchForm" :model="uploadCardData" label-width="auto" size="small">
        <!-- 表单项 -->
        <div class="input-row">
          <el-form-item prop="seriesId" label="团队组合">
            <el-select v-model="uploadCardData.seriesId" clearable filterable @change="selectSeries">
              <el-option
                v-for="node in seriesList"
                :key="node.seriesId"
                :label="node.seriesName"
                :value="node.seriesId"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="personId" label="爱豆" class="search-form-item">
            <el-select v-model="uploadCardData.personId" placeholder="请选择爱豆" clearable filterable>
              <el-option v-for="person in personList" :label="person.personName" :value="person.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="cardSide" label="正背面">
            <el-select v-model="uploadCardData.cardSide" clearable filterable>
              <el-option :key="1" label="正面" :value="'Front'"></el-option>
              <el-option :key="2" label="背面" :value="'Back'"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="cardType" label="卡类型">
            <el-select v-model="uploadCardData.cardType" clearable filterable>
              <el-option :key="1" label="3寸小卡" :value="'3CXK'"></el-option>
              <el-option :key="2" label="3寸拍立得" :value="'3CFP'"></el-option>
              <el-option :key="3" label="明信片" :value="'MXP'"></el-option>
              <el-option :key="4" label="书签" :value="'SQ'"></el-option>
              <el-option :key="5" label="大方卡" :value="'FK'"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="picYear" label="年份">
            <el-select v-model="uploadCardData.picYear" clearable filterable>
              <el-option :key="1" label="2025年" :value="'2025'"></el-option>
              <el-option :key="2" label="2024年" :value="'2024'"></el-option>
              <el-option :key="3" label="2024年以前" :value="'2024年以前'"></el-option>
            </el-select>
          </el-form-item>
          <br/>
          <div v-if="uploadErrorTips" style="color: red; font-size: 18px">{{uploadErrorTips + '尺寸不对'}}</div>
          <el-form-item prop="files" label="图片">
            <el-upload
              ref="upload"
              list-type="picture-card"
              accept="image/*"
              :multiple="true"
              :auto-upload="false"
              :on-change="onChangeUpload"
              action="#"
              :file-list="fileList">
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
          <el-button class="default-btn">{{$t("crud.filter.cancelBtn")}}</el-button>
          <el-button :loading="submitLoading" class="default-btn primary-btn" type="primary" @click="uploadCardSubmit()">{{$t("crud.filter.submitBtn")}}</el-button>
        </span>
    </el-dialog>
    <el-dialog :visible.sync="createCardLibVisible" :modal="false" title="创建图集" width="60%" top="3vh" :close-on-click-modal="false" @close="createCardLibList = []">
      <el-form :inline="true" class="search-form" ref="searchForm" :model="cardLibData" label-width="auto" size="small">
        <!-- 表单项 -->
        <div class="input-row">
          <el-form-item prop="seriesId" label="团队组合">
            <el-select v-model="cardLibData.seriesId" clearable filterable @change="selectSeries">
              <el-option
                v-for="node in seriesList"
                :key="node.seriesId"
                :label="node.seriesName"
                :value="node.seriesId"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="personId" label="爱豆" class="search-form-item">
            <el-select v-model="cardLibData.personId" placeholder="请选择爱豆" clearable filterable>
              <el-option v-for="person in personList" :label="person.personName" :value="person.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="cardType" label="卡类型">
            <el-select v-model="cardLibData.cardType" clearable filterable>
              <el-option :key="1" label="3寸小卡" :value="'3CXK'"></el-option>
              <el-option :key="2" label="3寸拍立得" :value="'3CFP'"></el-option>
              <el-option :key="3" label="明信片" :value="'MXP'"></el-option>
              <el-option :key="4" label="书签" :value="'SQ'"></el-option>
              <el-option :key="5" label="大方卡" :value="'FK'"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="picYear" label="年份">
            <el-select v-model="cardLibData.picYear" clearable filterable>
              <el-option :key="1" label="2025年" :value="'2025'"></el-option>
              <el-option :key="2" label="2024年" :value="'2024'"></el-option>
              <el-option :key="3" label="2024年以前" :value="'2024年以前'"></el-option>
            </el-select>
          </el-form-item>
          <br/>
          <div class="create-card-lib" v-for="(card, index) in createCardLibList" :key="index">
            <el-row :gutter="12" style="padding-top: 5px">
              <span class="num">{{card.num}}</span>
              <el-col :span="12">
                <el-card :body-style="{ padding: '0px' }">
                  <div style="padding: 3px; text-align: center">
                    <span>正面</span>
                  </div>
                  <div style="width: 100px;height: auto">
                    <img :src="resourcesUrl + card.frontUrl"/>
                  </div>
                </el-card>
              </el-col>
              <el-col :span="12">
                <el-card :body-style="{ padding: '0px' }">
                  <div style="padding: 3px; text-align: center">
                    <span>背面</span>
                  </div>
                  <div style="width: 100px;height: auto">
                    <img :src="resourcesUrl + card.backUrl"/>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
          <el-button class="default-btn">{{$t("crud.filter.cancelBtn")}}</el-button>
          <el-button :loading="submitLoading" class="default-btn primary-btn" type="primary" @click="createCardLibSubmit()">{{$t("crud.filter.submitBtn")}}</el-button>
        </span>
    </el-dialog>
    <el-dialog :visible.sync="addCardLibVisible" :modal="false" title="加入到已有图集" width="60%" top="3vh" :close-on-click-modal="false" @close="createCardLibList = []">
      <el-form :inline="true" class="search-form" ref="searchForm" :model="addCardLibData" label-width="auto" size="small">
        <!-- 表单项 -->
        <div class="input-row">
          <el-form-item prop="libId" label="图集名称">
            <el-select v-model="addCardLibData.id" clearable filterable>
              <el-option
                v-for="lib in cardLibList"
                :key="lib.id"
                :label="lib.seriesName + '_' + lib.libNo"
                :value="lib.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="seriesId" label="团队组合">
            <el-select v-model="addCardLibData.seriesId" clearable filterable @change="selectSeries">
              <el-option
                v-for="node in seriesList"
                :key="node.seriesId"
                :label="node.seriesName"
                :value="node.seriesId"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="personId" label="爱豆" class="search-form-item">
            <el-select v-model="addCardLibData.personId" placeholder="请选择爱豆" clearable filterable>
              <el-option v-for="person in personList" :label="person.personName" :value="person.id"></el-option>
            </el-select>
          </el-form-item>
          <br/>
          <div class="create-card-lib" v-for="(card, index) in createCardLibList" :key="index">
            <el-row :gutter="12" style="padding-top: 5px">
              <span class="num">{{card.num}}</span>
              <el-col :span="12">
                <el-card :body-style="{ padding: '0px' }">
                  <div style="padding: 3px; text-align: center">
                    <span>正面</span>
                  </div>
                  <div style="width: 100px;height: auto">
                    <img :src="resourcesUrl + card.frontUrl"/>
                  </div>
                </el-card>
              </el-col>
              <el-col :span="12">
                <el-card :body-style="{ padding: '0px' }">
                  <div style="padding: 3px; text-align: center">
                    <span>背面</span>
                  </div>
                  <div style="width: 100px;height: auto">
                    <img :src="resourcesUrl + card.backUrl"/>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
          <el-button class="default-btn">{{$t("crud.filter.cancelBtn")}}</el-button>
          <el-button :loading="submitLoading" class="default-btn primary-btn" type="primary" @click="addCardLibSubmit()">{{$t("crud.filter.submitBtn")}}</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        selectFrontNum: 0,
        selectBackNum: 0,
        mode: 'view',
        uploadCardData: {},
        cardLibData: {},
        uploadCardVisible: false,
        createCardLibVisible: false,
        addCardLibVisible: false,
        searchForm: {},
        seriesList: [],
        personList: [],
        years: [],
        dataList: [],
        uploadErrorTips: '',
        resourcesUrl: process.env.VUE_APP_RESOURCES_URL,
        frontPage: {
          total: 0, // 总页数
          currentPage: 1, // 当前页数
          pageSize: 50 // 每页显示多少条
        },
        backPage: {
          total: 0, // 总页数
          currentPage: 1, // 当前页数
          pageSize: 50 // 每页显示多少条
        },
        frontList: [],
        backList:[],
        waterfallFlowFrontContainerWidth: 0,
        waterfallFlowBackContainerWidth: 0,
        cardColNum: 5,
        cardMargin: 10,
        columnHeights:[],
        fileList: [],
        createCardLibList: [],
        submitLoading: false,
        divLightStyle: {border: '3px solid red'},
        cardLibList: [],
        addCardLibData: {}
      }
    },
    mounted(){

    },
    watch: {
      mode () {
        if (this.mode === 'chooseMtO' || this.mode === 'chooseOtO') {
          this.frontList.forEach(item => {
            item.isSelected = false
            item.num = 0
          })
          this.backList.forEach(item => {
            item.isSelected = false
            item.num = 0
          })
          this.selectFrontNum = 0
          this.selectBackNum = 0
        }
      }
    },
    created() {
      this.getCardFrontLib()
      this.getCardBackLib()
      this.getSeriesList()
      this.initSelectYear(new Date().getFullYear())

    },
    methods: {
      resetSearchForm(){
        this.searchForm = {}
      },
      deleteCardItem(item, index, cardSide){
        this.$confirm('确定要删除吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let url = cardSide === 'Front' ?  '/cardLib/cardFrontLib/' : '/cardLib/cardBackLib/'
          this.$http({
            url: this.$http.adornUrl(url + item.id),
            method: 'delete',
          }).then(({ data }) =>{
            if(data){
              if(cardSide === 'Front'){
                this.$delete(this.frontList, index)
              }
              if(cardSide === 'Back'){
                this.$delete(this.backList, index)
              }
              this.$message.success("删除成功")
            }else{
              this.$message.error("删除失败")
            }
          })
        });
      },
      frontItemSelect (front) {
        if (this.mode === 'chooseMtO' || this.mode === 'chooseOtO') {
          let idx = this.frontList.findIndex(item => item.id === front.id)
          if (idx !== -1) {
            if (front.isSelected) {
              front.isSelected = false
              if (this.selectFrontNum !== 0) {
                this.selectFrontNum = this.selectFrontNum - 1
              }
            } else {
              front.isSelected = true
              this.selectFrontNum = this.selectFrontNum + 1
            }
            if (this.mode === 'chooseOtO') {
              if (front.isSelected) {
                front.num = this.selectFrontNum
              } else {
                this.backList.forEach(item => {
                  if (item.num > front.num) {
                    item.num = item.num - 1
                  }
                })
                let backIdx = this.backList.findIndex(item => item.num === front.num)
                if (backIdx !== -1) {
                  let back = this.backList[backIdx]
                  back.num = 0
                  back.isSelected = false
                  this.selectBackNum = this.selectBackNum - 1
                  this.$set(this.backList, backIdx, back)
                }
                this.frontList.forEach(item => {
                  if (item.num > front.num) {
                    item.num = item.num - 1
                  }
                })
                front.num = 0
              }
            } else if (this.mode === 'chooseMtO') {
              if (front.isSelected) {
                front.num = this.selectFrontNum
              } else {
                this.frontList.forEach(item => {
                  if (item.num > front.num) {
                    item.num = item.num - 1
                  }
                })
                front.num = 0
              }
            }
            this.$set(this.frontList, idx, front)
          }
        }
      },
      backItemSelect (back) {
        if (this.mode === 'chooseMtO' || this.mode === 'chooseOtO') {
          let idx = this.backList.findIndex(item => item.id === back.id)
          if (idx !== -1) {
            if (this.mode === 'chooseMtO') {
              if (this.selectBackNum !== 0) {
                let oldIdx = this.backList.findIndex(item => item.isSelected === true)
                if (oldIdx !== -1) {
                  let oldSelectedBack = this.backList[oldIdx]
                  oldSelectedBack.isSelected = false
                  oldSelectedBack.num--
                  this.$set(this.backList, oldIdx, oldSelectedBack)
                  this.selectBackNum = this.selectBackNum - 1
                }
              }
            }
            if (back.isSelected) {
              back.isSelected = false
              if (this.selectBackNum !== 0) {
                this.selectBackNum = this.selectBackNum - 1
                back.num = this.selectBackNum
              }
            } else {
              back.isSelected = true
              this.selectBackNum = this.selectBackNum + 1
              back.num = this.selectBackNum
            }
            if (this.mode === 'chooseOtO') {
              if (back.isSelected) {
                back.num = this.selectBackNum
              } else {
                this.backList.forEach(item => {
                  if (item.num > back.num) {
                    item.num = item.num - 1
                  }
                })
                back.num = 0
              }
            }
            this.$set(this.backList, idx, back)
          }
        }
      },
      backScrollEvent (e) {
        if (e.srcElement.scrollTop + e.srcElement.clientHeight + 1 > e.srcElement.scrollHeight){
          this.loadMore('Back')
        }
      },
      frontScrollEvent (e) {
        if (e.srcElement.scrollTop + e.srcElement.clientHeight + 1 > e.srcElement.scrollHeight){
          this.loadMore('Front')
        }
      },
      loadMore (cardSide) {
        if (cardSide === 'Front') {
          this.frontPage.currentPage = this.frontPage.currentPage + 1
          this.getCardFrontLib(true)
        }
        if (cardSide === 'Back') {
          this.backPage.currentPage = this.backPage.currentPage + 1
          this.getCardBackLib(true)
        }
      },
      searchChange () {
        this.frontPage.currentPage = 1
        this.backPage.currentPage = 1
        if(this.searchForm.cardSide){
          if (this.searchForm.cardSide === 'Back'){
            this.getCardBackLib()
          } else {
            this.getCardFrontLib()
          }
        }else{
          this.getCardFrontLib()
          this.getCardBackLib()
        }
      },
      onChangeUpload (file, fileList) {
        this.fileList = fileList
        this.handleBeforeUpload(file, fileList)
      },
      openUploadDialog () {
        this.uploadCardVisible = true
      },
      openCreateCardLibDialog () {
        let _this = this
        this.createCardLibVisible = true
        let frontList = this.frontList.filter(front => front.num && front.num > 0).sort((max, min) => { return max.num - min.num })
        let backList = this.backList.filter(back => back.num && back.num > 0).sort((max, min) => { return max.num - min.num })
        if (this.mode === 'chooseOtO') {
          frontList.forEach(front => {
            let back = backList.find(item => item.num === front.num)
            _this.createCardLibList.push({frontUrl: front.frontUrl, backUrl: back ? back.backUrl : null, num: front.num})
          })
        } else if (this.mode === 'chooseMtO') {
          let back = backList[0]
          frontList.forEach(front => {
            _this.createCardLibList.push({frontUrl: front.frontUrl, backUrl: back.backUrl, num: front.num})
          })
        }
      },
      openAddCardLibDialog () {
        this.getCardLibList()
        let _this = this
        this.addCardLibVisible = true
        let frontList = this.frontList.filter(front => front.num && front.num > 0).sort((max, min) => { return max.num - min.num })
        let backList = this.backList.filter(back => back.num && back.num > 0).sort((max, min) => { return max.num - min.num })
        if (this.mode === 'chooseOtO') {
          frontList.forEach(front => {
            let back = backList.find(item => item.num === front.num)
            _this.createCardLibList.push({frontUrl: front.frontUrl, backUrl: back ? back.backUrl : null, num: front.num})
          })
        } else if (this.mode === 'chooseMtO') {
          let back = backList[0]
          frontList.forEach(front => {
            _this.createCardLibList.push({frontUrl: front.frontUrl, backUrl: back.backUrl, num: front.num})
          })
        }
      },
      uploadCardSubmit () {
        this.submitLoading = true
        let formData = new FormData()
        formData.append('seriesId', this.uploadCardData.seriesId)
        formData.append('personId', this.uploadCardData.personId)
        formData.append('year', this.uploadCardData.picYear)
        formData.append('cardType', this.uploadCardData.cardType)
        for (let i = 0; i < this.fileList.length; i++) {
          formData.append('file', this.fileList[i].raw)
        }
        let url = this.uploadCardData.cardSide === 'Front' ? '/cardLib/cardFrontLib/saveBatchFromFiles' : '/cardLib/cardBackLib/saveBatchFromFiles'
        this.$http({
          url: this.$http.adornUrl(url),
          method: 'POST',
          data: formData,
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        }).then(({data}) => {
          this.submitLoading = false
          this.$message({
            message: '上传成功',
            type: 'success',
            duration: 300,
            onClose: () => {
              this.uploadCardVisible = false
              if (this.uploadCardData.cardSide === 'Front') {
                this.getCardFrontLib()
              } else {
                this.getCardBackLib()
              }
              this.uploadCardData = {}
              this.fileList = []
            }
          })
        })
      },
      createCardLibSubmit () {
        this.cardLibData.cardLibItemList = this.createCardLibList
        this.$http({
          url: this.$http.adornUrl('/card/cardLib/createCardLib'),
          method: 'POST',
          data: this.cardLibData
        }).then(({data}) => {
          this.submitLoading = false
          this.$message({
            message: '创建成功',
            type: 'success',
            duration: 300,
            onClose: () => {
              this.createCardLibVisible = false
            }
          })
        })
      },
      addCardLibSubmit () {
        this.addCardLibData.cardLibItemList = this.createCardLibList
        this.$http({
          url: this.$http.adornUrl('/card/cardLib/addToCardLib'),
          method: 'POST',
          data: this.addCardLibData
        }).then(({data}) => {
          this.submitLoading = false
          this.$message({
            message: '创建成功',
            type: 'success',
            duration: 300,
            onClose: () => {
              this.addCardLibVisible = false
            }
          })
        })
      },
      selectSeries (value) {
        this.personList = []
        this.getPersonList(value)
      },
      initSelectYear(year){
        this.years = [];
        for (let i = 0; i < 10; i++) {
          this.years.push({value:(year - i),label:(year - i)+ "年"});
        }
        this.years.push({value:null,label:"无年份"});
      },
      getSeriesList () {
        this.$http({
          url: this.$http.adornUrl('/prod/prodTemplateSeries/page'),
          method: 'get',
          params: this.$http.adornParams(
            Object.assign({
                size: 100,
                shopId: 1
              },
            )
          )
        }).then(({data}) => {
          this.seriesList = data.records
        })
      },
      getPersonList (seriesId) {
        this.$http({
          url: this.$http.adornUrl('/cardLib/cardPerson/page'),
          method: 'get',
          params: this.$http.adornParams(
            Object.assign({
                size: 100,
                seriesId: seriesId
              },
            )
          )
        }).then(({data}) => {
          this.personList = data.records
        })
      },
      handleSizeChange (val) {
        this.page.pageSize = val
        this.getDataList()
      },
      handleCurrentChange (val) {
        this.page.currentPage = val
        this.getDataList()
      },
      getCardFrontLib(isLoadMore){
        this.$http({
          url: this.$http.adornUrl('/cardLib/cardFrontLib/page'),
          method: 'get',
          params: this.$http.adornParams(
            Object.assign({
                size: this.frontPage.pageSize,
                current: this.frontPage.currentPage,
                shopId: 1,
                personId: this.searchForm.frontPersonId
              },
              this.searchForm
            )
          )
        }).then(({data}) => {
          if(isLoadMore){
            this.frontList.push(...data.records)
          }else{
            this.frontList = data.records
          }
        })
      },
      getCardBackLib(isLoadMore){
        this.$http({
          url: this.$http.adornUrl('/cardLib/cardBackLib/page'),
          method: 'get',
          params: this.$http.adornParams(
            Object.assign({
                size: this.backPage.pageSize,
                current: this.backPage.currentPage,
                shopId: 1,
                personIdList: this.searchForm.backPersonId
              },
              this.searchForm
            )
          )
        }).then(({data}) => {
          if(isLoadMore){
            this.backList.push(...data.records)
          }else{
            this.backList = data.records
          }
        })
      },
      getCardLibList(){
        this.$http({
          url: this.$http.adornUrl('/card/cardLib/page'),
          method: 'get',
          params: this.$http.adornParams(
            Object.assign({
                size: 200,
                shopId: 1
              }
            )
          )
        }).then(({data}) => {
          this.cardLibList = data.records
        })
      },
      handleBeforeUpload (file, fileList) {
        let index = fileList.findIndex(item => item.name === file.name)
        let _this = this
        let fileType = file.raw.type
        let isJpg = fileType === 'image/jpg' || fileType === 'image/jpeg'
        if (!isJpg) {
          _this.uploadErrorTips = _this.uploadErrorTips + ' 第' + (index + 1) + '张不是jpg图片'
          return false
        }
        let isSize = true
        let width = 709
        let height = 1087
        let cardType = this.uploadCardData.cardType
        if (cardType === '3CXK' || cardType === '3CFP') {
          width = 709
          height = 1087
        } else if (cardType === '4CXK') {
          width = 921
          height = 1087
        } else if (cardType === 'SQ') {
          width = 638
          height = 1796
        } else if (cardType === 'FK') {
          width = 1229
          height = 1229
        } else if (cardType === 'MXP') {
          width = 1252
          height = 1819
        }
        isSize = new Promise(function(resolve, reject) {
          let _URL = window.URL || window.webkitURL
          let image = new Image()
          image.onload = function() {
            let valid = image.naturalWidth === width && image.naturalHeight === height
            valid ? resolve() : reject()
          }
          image.src = _URL.createObjectURL(file.raw)
        }).then(
          () => {
            return file;
          },
          () => {
            _this.uploadErrorTips = _this.uploadErrorTips + ' 第' + (index + 1) + '张，'
            return Promise.reject()
          }
        )
      }
    },
    beforeDestroy() {
      // let erd = elementResizeDetectorMaker()
      // erd.uninstall(this.$refs.entirety) // 这里用ref是因为vue离开页面后获取不到dom
    }
  }
</script>

<style lang="scss">
  // e-chart
  #real-time-data-chart canvas {
    width: 100%;
    height: 100%;
    padding: 0 20px !important
  }

  .cardContainer{
    display: inline-block;
    margin-right: 5px;
    width: 100%;
  }
  .loadMore{
    display: flex;
    justify-content: center;
    margin-top: 10px;
    color: blue;
    cursor: pointer;
  }
  .mod-home {
    .search-bar {
      .input-row {
        .select-time-btn {
          margin-right: 20px;
          display: inline-block;
          color: #AAAAAA;
          font-size: 14px;
          cursor: pointer;

          &:last-child {
            margin-right: 0;
          }
        }

        .select-time-btn.is-active {
          color: #155BD4;
        }

      }
    }

    /**
      整体看板
       */
    .card-plate {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      // 上
      .card-box {
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        width: 50%;
        padding: 10px;
        height: 800px;
        overflow-y: auto; /* 当内容超出时显示垂直滚动条 */
        overflow-x: hidden; /* 隐藏水平滚动条 */

        .card-item{
          display: flex;
          width: 100%;
          flex-direction: column;
          background: #fbfbfb;
          padding: 10px;
          box-sizing: border-box;
          border-radius: 4px;
          border: 1px solid pink;
          margin-top: 10px;
          .item-num{
            position: absolute;
            float: left;
            left:10px;
            top:0px;
            font-size: 16px;
            text-align: center;
            color: white;
            background-color: red;
            border-radius: 100%;
            width: 20px;
            height: 20px;
          }
        }
      }
    }
    .create-card-lib{
      border: 2px solid pink;
      display: inline-block;
      margin-right: 15px;
      .num{
        position: absolute;
        display:flex;
        justify-content: center;
        align-items: center;
        left: 5px;
        top: 0px;
        color: white;
        border-radius: 100%;
        background-color: red;
        width: 20px;
        height: 20px
      }
    }
  }
</style>

