<template>
  <el-dialog
    title="团购详情"
    width="80%"
    top="5vh"
    :close-on-click-modal="false"
    :visible.sync="visible"
    @close="closeDialog">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" label-width="100px">
      <el-form-item label="关联产品" prop="prodId">
        <span>{{dataForm.prodName}}</span>
      </el-form-item>
      <el-form-item prop="inCardLib" label="图集状态" class="search-form-item">
        <el-select size="small" v-model="dataForm.inCardLib" placeholder="请是否已加入图集" clearable>
          <el-option label="未加入" value="0"></el-option>
          <el-option label="已加入" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="分类" prop="category">
        <el-select size="small" v-model="dataForm.category" placeholder="请选择分类" clearable filterable @change="handleCategoryChange">
          <el-option v-for="category in categoryList" :label="category" :value="category"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div v-if="mode === 'choose' && selectNum > 0" class="default-btn primary-btn" @click="openAddToCardLibDialog">加入图集</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>
      <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="cardItem.id">
        <div :style="(mode === 'choose' && cardItem.isSelected? divLightStyle : {border: '3px solid #fff'})" @click="mode==='choose'? cardItemSelect(cardItem) : ''">
          <el-row :gutter="12" style="padding-top: 5px">
            <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'" 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="addToCardLibVisible">
      <el-form
        ref="dataForm"
        size="small"
        label-width="auto"
        :model="cardLibData">
        <el-form-item label="选择图集" prop="prodType">
          <el-select v-model="cardLibData.cardLibId" clearable filterable>
            <el-option v-for="(cardLib, index) in cardLibList"
                       :key="cardLib.id"
                       :label="cardLib.seriesName + '_' + cardLib.libNo"
                       :value="cardLib.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="seriesId" label="团体组合" class="search-form-item">
          <el-select v-model="cardLibData.seriesId" placeholder="请选择所属团体组合" clearable filterable @change="handleSeriesChange">
            <el-option v-for="series in seriesList" :label="series.seriesName" :value="series.seriesId"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="成员名称" prop="personName">
          <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 label="指定模式" prop="personName">
          <el-select v-model="cardLibData.chooseMode" placeholder="请选择爱豆" clearable filterable>
            <el-option label="指定图片加入" value="choose"></el-option>
            <el-option label="全选图片加入" value="all"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addToCardLibVisible = false">取消</el-button>
        <el-button type="primary" @click="cardLibDataSubmit()">确认</el-button>
      </span>
    </el-dialog>
  </el-dialog>
</template>

<script>
export default {
  components: {

  },
  data () {
    return {
      mode: 'view',
      visible: false,
      cardSetLibVisible: false,
      dataForm: {
        id: null,
        frontUrl: null,
        backUrl: null,
        prodId: null,
        prodName: null,
        seq: null,
        isDelete: 0,
        category: null,
        backCopyNum: 1,
        shopId: 1
      },
      divLightStyle: {border: '3px solid red'},
      selectNum: 0,
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 50 // 每页显示多少条
      },
      resourcesUrl: process.env.VUE_APP_RESOURCES_URL,
      prodList: [],
      personList: [],
      categoryList: [],
      cardLibList: [],
      seriesList: [],
      dataRule: {
      },
      cardLibItemList: [],
      addToCardLibVisible: false,
      cardLibData: {}
    }
  },
  created(){

  },
  methods: {
    handleSeriesChange(seriesId){
      this.personList = []
      this.getPersonList(seriesId)
    },
    // handleCardLibChange(value){
    //   this.getPersonList(value)
    // },
    handleCategoryChange(category){
      this.page.currentPage = 1
      this.getCardItemList()
    },
    cardLibDataSubmit(){
      this.$confirm('确定要加入到图集吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let cardLibItemList = this.cardLibItemList.filter(item => item.isSelected === true)
        this.cardLibData.cardLibItemList = cardLibItemList
        this.$http({
          url: this.$http.adornUrl('/print/printPicLib/addToCardLib'),
          method: 'post',
          data: this.$http.adornData(this.cardLibData)
        }).then(({data}) => {
          this.$message({
            message: this.$i18n.t('publics.operation'),
            type: 'success',
            duration: 300,
            onClose: () => {
              this.closeDialog()
            }
          })
        })
      })
    },
    openAddToCardLibDialog(){
      this.cardLibData.prodId = this.dataForm.prodId
      this.cardLibData.category = this.dataForm.category
      this.addToCardLibVisible = true
      this.getCardLibList()
      this.getSeriesList()
    },
    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
      })
    },
    closeDialog(){
      this.dataForm = {}
      this.cardLibItemList = []
      this.visible = false
      this.page.currentPage = 1
      this.mode = 'view'
      this.addToCardLibVisible = false
      this.selectNum = 0
    },
    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)
    },
    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)
      }
    },
    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
      })
    },
    getCategoryList (prodId) {
      this.$http({
        url: this.$http.adornUrl('/print/printPicLib/categoryList'),
        method: 'get',
        params: this.$http.adornParams(
          Object.assign({
              size: 100,
              prodId: prodId
            }
          )
        )
      }).then(({data}) => {
        this.categoryList = data
      })
    },
    deleteCardItem (cardItem, index) {
      this.$confirm('确定要删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http({
          url: this.$http.adornUrl('/print/printPicLib/' + cardItem.id),
          method: 'delete'
        }).then(({ data }) => {
          if (data) {
            this.$delete(this.cardLibItemList, index)
            this.$message.success('删除成功')
          } else {
            this.$message.error('删除失败')
          }
        })
      })
    },
    getCardItemList (isLoadMore) {
      this.$http({
        url: this.$http.adornUrl('/print/printPicLib/page'),
        method: 'get',
        params: this.$http.adornParams(
          Object.assign({
              size: this.page.pageSize,
              current: this.page.currentPage,
              shopId: 1,
              prodId: this.dataForm.prodId,
              category: this.dataForm.category,
              inCardLib: this.dataForm.inCardLib
            }
          ))
      }).then(({data}) => {
        if(isLoadMore){
          this.cardLibItemList.push(...data.records)
        }else{
          this.cardLibItemList = data.records
        }
      })
    },
    init (groupBuy) {
      this.dataForm.prodId = groupBuy.prodId || null
      this.dataForm.prodName = groupBuy.prodName || null
      this.dataForm.id = groupBuy.id || null
      this.visible = true
      this.$nextTick(() => {
        if (this.dataForm.prodId) {
          this.getCardItemList()
          this.getCategoryList(this.dataForm.prodId)
        }
      })
    },
  }
}
</script>
<style scoped>
  .card-box {
    width: 100%;
    padding: 10px;
    height: 700px;
    overflow-y: auto; /* 当内容超出时显示垂直滚动条 */
    overflow-x: hidden; /* 隐藏水平滚动条 */
  }
  .create-card-lib {
    border: 2px solid pink;
    display: inline-block;
    margin-right: 10px
  }
</style>
