<template>
  <el-dialog
    @close="closeDialog"
    title="图集模板"
    :close-on-click-modal="false"
    width="90%"
    top="2vh"
    :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>
    <div style="margin-bottom: 10px" v-if="mode === 'choose' && selectNum > 0" class="default-btn primary-btn" @click="openAddToGroupBuyDialog">加入选图清单</div>
    <div>
      <el-radio v-model="mode" label="choose">选图模式</el-radio>
      <span v-if="(mode === 'choose')" style="color: red; font-size: 16px;font-weight: bold; margin-right: 20px">已选数量：{{selectNum}}</span>
      <el-button type="primary" size="mini" @click="selectReset">重置选择</el-button>
      <el-checkbox size="small" style="margin-left: 20px" v-model="isSelectAll" @change="selectAll">全选 {{activeName}}</el-checkbox>
      <div style="margin-top:10px; margin-bottom: 8px; font-size: 14px;font-weight: bold">
        <span v-if="selectNum === 0">鼠标单击下方图片进行选择，再次单击图片可取消选择</span>
      </div>
    </div>
    <el-tabs type="border-card" v-model="activeName" @tab-click="clickTab">
      <el-tab-pane v-for="person in personList" :key="person.id" :label="person.personName" :name="person.personName" lazy>
        <div class="card-box">
          <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">
                <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.thumbnailFront"/>
                    </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.thumbnailBack"/>
                    </div>
                  </el-card>
                </el-col>
              </el-row>
            </div>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>

    <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="addToUserPurchaseVisible">
      <el-form
        ref="dataForm"
        size="small"
        label-width="auto"
        :model="userPurchaseData">
        <el-form-item label="加入选图记录" prop="prodType">
          <el-select style="width: 300px" v-model="userPurchaseData.id" clearable filterable>
            <el-option v-for="(userPurchase, index) in userPurchaseList"
                       :key="userPurchase.id"
                       :label="userPurchase.cardName"
                       :value="userPurchase.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">取消</el-button>
        <el-button type="primary" @click="userPurchaseDataSubmit()">确认</el-button>
      </span>
    </el-dialog>
  </el-dialog>
</template>

<script>
export default {

  data () {
    return {
      isSelectAll: false,
      personTabs:[],
      activeName: '',
      mode: 'choose',
      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'},
      addToUserPurchaseVisible: false,
      userPurchaseData: {},
      userPurchase: {},
      prodList: [],
      personList: [],
      userPurchaseList: [],
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 500 // 每页显示多少条
      },
    }
  },
  created() {

  },

  methods: {
    selectAll(){
      let _this = this
      if(this.isSelectAll){
        this.cardLibItemList.forEach((item,index) => {
          item.isSelected = true
          _this.$set(_this.cardLibItemList, index, item)
        })
        this.selectNum = this.cardLibItemList.length
      }else{
        this.cardLibItemList.forEach((item,index) => {
          item.isSelected = false
          _this.$set(_this.cardLibItemList, index, item)
        })
        this.selectNum = 0
      }
    },
    clickTab(tab, event){
      this.selectNum = 0
      this.isSelectAll = false
      this.handleChangePerson(tab)
    },
    selectReset(){
      let _this = this
      this.cardLibItemList.forEach((item,index) => {
        if(item.isSelected){
          item.isSelected = false
          _this.$set(_this.cardLibItemList, index, item)
        }
      })
      this.selectNum = 0
      this.isSelectAll = false
    },
    getUserPurchaseList () {
      this.$http({
        url: this.$http.adornUrl('/card/cardUserPurchase/page'),
        method: 'get',
        params: this.$http.adornParams(
          Object.assign({
              size: 50,
            },
          )
        )
      }).then(({data}) => {
        this.userPurchaseList = data.records
      })
    },
    init (cardLib) {
      this.dataForm.seriesName = cardLib.seriesName
      this.dataForm.seriesId = cardLib.seriesId
      this.dataForm.cardLibId = cardLib.id
      this.visible = true
      this.$nextTick(() => {
        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,
              personName: this.activeName
            }
          )
        )
      }).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
        this.activeName = this.personList[0].personName
        this.getCardItemList()
      })
    },
    userPurchaseDataSubmit(){
      let cardLibItemList = this.cardLibItemList.filter(item => item.isSelected === true)
      this.userPurchaseData.cardLibItemList = cardLibItemList
      this.$http({
        url: this.$http.adornUrl('/card/cardUserPurchase/addToUserPurchase'),
        method: 'post',
        data: this.$http.adornData(this.userPurchaseData)
      }).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)
      }
    },
    openAddToGroupBuyDialog(){
      this.addToUserPurchaseVisible = true
      this.getUserPurchaseList()
    },
    closeDialog(){
      this.dataForm = {}
      this.selectNum = 0
      this.cardLibItemList.forEach(item => item.isSelected = false)
      this.addToUserPurchaseVisible = false
      this.mode = 'choose'
      this.isSelectAll = false
    },
  }
}
</script>
<style scoped>
  .create-card-lib {
    border: 2px solid pink;
    display: inline-block;
    margin-right: 15px;
    margin-bottom: 10px;
  }
  .card-box {
    width: 100%;
    padding: 10px;
    height: 700px;
    overflow-y: auto; /* 当内容超出时显示垂直滚动条 */
    overflow-x: hidden; /* 隐藏水平滚动条 */
  }
</style>
