<template>
  <el-dialog
    @close="closeDialog"
    title="图集模板"
    :close-on-click-modal="false"
    width="80%"
    top="5vh"
    :visible.sync="visible">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" label-width="80px">
      <el-form-item label="图集名称" prop="seriesName">
        <span>{{dataForm.seriesName}}</span>
      </el-form-item>
      <el-form-item label="成员" prop="personName">
        <el-select v-model="dataForm.personId" placeholder="请选择爱豆" clearable filterable @change="handleChangePerson">
          <el-option v-for="person in personList" :label="person.personName" :value="person.id"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div v-if="mode === 'choose' && selectNum > 0" class="default-btn primary-btn" @click="openAddToGroupBuyDialog">加入团购</div>
    <div>
      <el-radio v-model="mode" label="view">预览模式</el-radio>
      <el-radio v-model="mode" label="edit">编辑模式</el-radio>
      <el-radio v-model="mode" label="choose">选图模式</el-radio>
      <el-radio v-model="mode" label="check">检测模式</el-radio>
      <span v-if="(mode === 'choose')" style="color: red; font-size: 16px;font-weight: bold">已选数量：{{selectNum}}</span>
    </div>
    <div class="card-box" @scroll="backScrollEvent">
      <div class="create-card-lib" v-for="(cardItem, index) in cardLibItemList" :key="index">
        <div :style="(mode === 'choose' && cardItem.isSelected? divLightStyle : {border: '3px solid #fff'})" @click="mode==='choose'? cardItemSelect(cardItem) : (mode==='check'? cardItemCheck(cardItem): '')">
          <el-row :gutter="12" style="padding-top: 5px">
            <div style="padding: 1px; text-align: center">
              <span>{{cardItem.seriesName}}</span>
              <br/>
              <span>{{cardItem.personName}}</span>
            </div>
            <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 + cardItem.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 + cardItem.backUrl"/>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
        <el-row style="width: 210px; height: 30px; text-align: center ;color: red; font-weight: bold">
          <el-button v-if="mode==='edit' && cardItem.id" type="danger" size="mini" style="margin-right: 5px" @click="deleteCardItem(cardItem, index)">删除</el-button>
        </el-row>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button class="default-btn" @click="visible = false">{{$t("crud.filter.cancelBtn")}}</el-button>
    </span>
    <el-dialog
      title="团购选择"
      :close-on-click-modal="false"
      :append-to-body="true"
      :visible.sync="addToGroupBuyVisible">
      <el-form
        ref="dataForm"
        size="small"
        label-width="auto"
        :model="groupBuyData">
        <el-form-item label="选择团购" prop="prodType">
          <el-select style="width: 300px" v-model="groupBuyData.prodId" clearable filterable>
            <el-option v-for="(prod, index) in prodList"
                       :key="prod.prodId"
                       :label="prod.prodName"
                       :value="prod.prodId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="category" label="分类:">
          <el-input style="width: 300px" v-model="groupBuyData.category" type="text" clearable placeholder="请输入分类"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">取消</el-button>
        <el-button type="primary" @click="groupBuyDataSubmit()">确认</el-button>
      </span>
    </el-dialog>
  </el-dialog>
</template>

<script>
export default {

  data () {
    return {
      mode: 'view',
      resourcesUrl: process.env.VUE_APP_RESOURCES_URL,
      visible: false,
      dataForm: {
        seriesId: null,
        seriesName: null,
        shopId: 1
      },
      cardLibItemList: [],
      dataRule: {
      },
      selectNum: 0,
      divLightStyle: {border: '3px solid red'},
      addToGroupBuyVisible: false,
      groupBuyData: {},
      prodList: [],
      personList: [],
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 50 // 每页显示多少条
      },
    }
  },
  created() {

  },
  methods: {
    init (cardLib) {
      this.dataForm.seriesName = cardLib.seriesName
      this.dataForm.seriesId = cardLib.seriesId
      this.dataForm.cardLibId = cardLib.id
      this.visible = true
      this.$nextTick(() => {
        this.getCardItemList()
      })
      this.getPersonList(this.dataForm.seriesId)
    },
    backScrollEvent (e) {
      if (e.srcElement.scrollTop + e.srcElement.clientHeight + 1 > e.srcElement.scrollHeight){
        this.loadMore()
      }
    },
    loadMore () {
      this.page.currentPage = this.page.currentPage + 1
      this.getCardItemList(true)
    },
    handleChangePerson(value){
      this.page.currentPage = 1
      this.getCardItemList()
    },
    getCardItemList(isLoadMore){
      this.$http({
        url: this.$http.adornUrl('/card/cardLibItem/page'),
        method: 'get',
        params: this.$http.adornParams(
          Object.assign({
              size: this.page.pageSize,
              current: this.page.currentPage,
              shopId: 1,
              cardLibId: this.dataForm.cardLibId,
              personId: this.dataForm.personId
            }
          )
        )
      }).then(({data}) => {
        if(isLoadMore === true){
          this.cardLibItemList.push(...data.records)
        }else{
          this.cardLibItemList = data.records
        }
      })
    },
    getPersonList (seriesId) {
      this.$http({
        url: this.$http.adornUrl('/cardLib/cardPerson/page'),
        method: 'get',
        params: this.$http.adornParams(
          Object.assign({
              size: 20,
              seriesId: seriesId
            },
          )
        )
      }).then(({data}) => {
        this.personList = data.records
      })
    },
    groupBuyDataSubmit(){
      let cardLibItemList = this.cardLibItemList.filter(item => item.isSelected === true)
      this.groupBuyData.cardLibItemList = cardLibItemList
      this.$http({
        url: this.$http.adornUrl('/print/printPicLib/addFromCardSetLib'),
        method: 'post',
        data: this.$http.adornData(this.groupBuyData)
      }).then(({data}) => {
        this.$message({
          message: this.$i18n.t('publics.operation'),
          type: 'success',
          duration: 300,
          onClose: () => {
            this.closeDialog()
          }
        })
      })
    },
    deleteCardItem(item, index){
      this.$confirm('确定要删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http({
          url: this.$http.adornUrl('/card/cardLibItem/' + item.id),
          method: 'delete',
        }).then(({ data }) =>{
          if(data){
            this.$delete(this.cardLibItemList, index);
            this.$message.success("删除成功");
          }else{
            this.$message.error("删除失败");
          }
        })
      });
    },
    cardItemSelect(cardItem){
      let idx = this.cardLibItemList.findIndex(item => item.id === cardItem.id)
      if (idx !== -1) {
        if (cardItem.isSelected) {
          cardItem.isSelected = false
          if (this.selectNum !== 0) {
            this.selectNum = this.selectNum - 1
          }
        } else {
          cardItem.isSelected = true
          this.selectNum = this.selectNum + 1
        }
        this.$set(this.cardLibItemList, idx, cardItem)
      }
    },
    cardItemCheck(cardItem){
      this.$http({
        url: this.$http.adornUrl('/card/cardLib/checkCardLibSize'),
        method: 'post',
        data: this.$http.adornData(cardItem)
      }).then(({data}) => {
        this.$message({
          message: '检测正常',
          type: 'success',
          duration: 500,
        })
      })
    },
    openAddToGroupBuyDialog(){
      this.addToGroupBuyVisible = true
      this.getGroupBuyProdList()
    },
    getGroupBuyProdList(){
      this.$http({
        url: this.$http.adornUrl('/prod/prod/getProdPage'),
        method: 'get',
        params: this.$http.adornParams(
          Object.assign({
              current: 1,
              size: 200,
              shopId: 1,
              customType: 2
            },
          )
        )
      }).then(({data}) => {
        this.prodList = data.records
      })
    },
    closeDialog(){
      this.dataForm = {}
      this.selectNum = 0
      this.mode = 'view'
    },
  }
}
</script>
<style scoped>
  .create-card-lib {
    border: 2px solid pink;
    display: inline-block;
    margin-right: 15px;
    margin-bottom: 5px;
  }
  .card-box {
    width: 100%;
    padding: 10px;
    height: 700px;
    overflow-y: auto; /* 当内容超出时显示垂直滚动条 */
    overflow-x: hidden; /* 隐藏水平滚动条 */
  }
</style>
