<style>

  li {
    list-style-type: none;
  }
</style>
<style lang="scss" scoped>
  .actor-photo-list {
    display: flex;
    padding-left: 0;

    li {
      width: 25%;
      margin: 10px;
      position: relative;
      height: 250px;
      border: 1px solid #f2f2f2;

      img,
      video {
        width: 100%;
        margin-top: auto;
        margin-bottom: auto;
        top: 0;
        bottom: 0;
        position: absolute;
        max-height: 250px;
      }
    }
  }
</style>
<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="24">
          <a-col :md="6" :sm="8">
            <a-form-item label="场地名称">
              <a-input placeholder="请输入场地名称" v-model="queryParam.buildingName"></a-input>
            </a-form-item>
          </a-col>

          <a-col :md="6" :sm="8">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <!-- 操作按钮区域 -->
    <div class="table-operator">
      <a-button @click="handleAdd" v-show="show" type="primary" icon="plus">新增</a-button>
    </div>

    <div>

      <a-row class="image-list" :gutter="16" style="padding:0 8px">
      <a-col :lg="6" :sm="12" class="vm-margin" style="padding:0"  v-for="(item, index) of dataSource" :key="index" >
          <vm-card
          style="margin: 0 15px;"
          :editable="true"
          :title="item.buildingName"
          :img="item.coverUrl"
          :desc="item.address"
          :detailUrl="item.videoUrl"
          :editUrl="item.editUrl"      
          pageTitle='场地列表'   
          :id="item.id"
          :record="item"          
          @delete-ok="deleteOk(item)"
          @showDetail='showDetail(item)'
          @editDetail='handleEdit(item)'
          @updateList='updateList(1)'
        ></vm-card>
      </a-col>
    </a-row>

        <a-row class="image-list-heading vm-panel">
            <a-row type="flex" align="middle" justify="space-between" class="panel-body">
                <div class="search-bar">
                </div>
                <a-row type="flex" align="middle" class="page">
                    <a-pagination showQuickJumper :total="ipagination.total" v-model="ipagination.current" style="float:right" @change="totalpageChange" :pageSize.sync="ipagination.pageSize" />
                </a-row>
            </a-row>
        </a-row>


<!--        <div class="table-operator">
            <a-pagination showQuickJumper :total="ipagination.total" v-model="ipagination.current" style="float:right" @change="totalpageChange" :pageSize.sync="ipagination.pageSize" />
        </div>-->
    </div>
    <!-- table区域-end -->

    <!-- 表单区域 -->
    <a-modal title="查看场地大图" v-model="imgDetail" class="ping" :footer="null" :width="600" style="overflow:hidden">
      <img :src="imgUrl" alt="" style="width:100%">
    </a-modal>
    <a-modal title="详情" v-model="detail" class="ping" :footer="null" :width="800" style="overflow:hidden">
      <a-tabs defaultActiveKey="1" @change="callback" v-model="indexDetail">
        
        <a-tab-pane tab="场地图集" key="1" forceRender>
          <div>
            <a type="primary" style="margin-left:10px" @click="addPhoto=true">新增场地图片</a>
            <ul class="actor-photo-list">
              <li v-for="(item,index) of photoList" :key="index" @click="showImage(item)">
                <a-icon type="close-circle"
                  style="position:absolute;top:-5px;right:-5px;color:red;z-index:10;cursor: pointer;"
                  @click.stop="deteleImg(item.id)" />
                <img :src="item.photoUrl" alt />
              </li>
            </ul>
          </div>
          <div style="text-align:right" v-if="photoList.length>0">
            <a-pagination showQuickJumper size="small" :total="total" @change="pageChange" :pageSize.sync="pageSize" />
          </div>
        </a-tab-pane>
        <a-tab-pane tab="场地信息" key="2">
          <div style="display:flex;flex-direction:row;height:300px;">
            <div
              style="height:200px;width:30%;border:1px solid #f2f2f2;"
              :style="{backgroundImage: imageUrl?'url(' +imageUrl+')':'url('+noImgUrl+')', backgroundSize:'contain', backgroundRepeat: 'no-repeat',backgroundPosition:'center center'}"
            ></div>
            <div style="flex:1;margin:15px">
              <a-form >
                <a-form-item label="场地名称" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
                  <span>{{currentYard.buildingName}}</span>
                </a-form-item>
                <a-form-item label="场地地址" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
                  <span>{{currentYard.address}}</span>
                </a-form-item>
                <a-form-item label="联系人名" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
                  <span>{{currentYard.contactName}}</span>
                </a-form-item>
                <a-form-item label="联系电话" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
                  <span>{{currentYard.contactMobile}}</span>
                </a-form-item>
              </a-form>
            </div>
          </div>
        </a-tab-pane>
        <a-tab-pane tab="场地视频" key="3">
          <div>
            <a type="primary" style="margin-left:10px" @click="addVideo=true">新增场地视频</a>
            <ul class="actor-photo-list">
              <li v-for="(item,index) of videoList" :key="index">
                <a-icon type="close-circle"
                  style="position:absolute;top:-5px;right:-5px;color:red;z-index:10;cursor: pointer;"
                  @click="deteleVideo(item.id)" />
                <video class="video" :src="item.videoUrl" controls="controls" style="min-height:160px">您的浏览器不支持 video
                  标签。</video>
              </li>
            </ul>
          </div>
          <div style="text-align:right" v-if="videoList.length>0">
            <a-pagination showQuickJumper size="small" :total="videoTotal" @change="pageChange"
              :pageSize.sync="pageSize" />
          </div>
        </a-tab-pane>
      </a-tabs>
    </a-modal>

    <!-- 新增图集 -->
    <a-modal v-model="addPhoto" title="新增图集" @ok="handleOk('photo')" @cancel="handleCancel('photo')">
        <uploadFile :value.sync="imageUrl" :fileCount="1" uploadType="image" :multiple="false" :sizeCheck="false"/>
      <!-- <upload-to-ali style="margin:10px" v-model="imageUrl" :customDomain="customDomain" preview :region="region"
        :bucket="bucket" :accept="acceptImage" :max="1" :size="1024000" :accessKeyId="accessKeyId"
        :accessKeySecret="accessKeySecret"></upload-to-ali> -->
    </a-modal>
    <!-- 新增作品 -->
    <a-modal v-model="addVideo" title="新增作品" @ok="handleOk('video')" @cancel="handleCancel('video')">
        <uploadFile :value.sync="videoUrl" :fileCount="1" uploadType="video" :multiple="false"  :sizeCheck="false"/>
      <!-- <upload-to-ali style="margin:10px" v-model="videoUrl" :customDomain="customDomain" preview :region="region"
        :bucket="bucket" :accept="acceptVideo" :max="1" :size="1024000" :accessKeyId="accessKeyId"
        :accessKeySecret="accessKeySecret"></upload-to-ali> -->
    </a-modal>

    <yard-modal ref="modalForm" @ok="modalFormOk"></yard-modal>
  </a-card>
</template>

<script>
  import YardModal from './modules/YardModal'
  import yardDetail from './modules/yardDetail'
  import VmCard from '@/components/ctop/vm-card'
  import {
    JeecgListMixin
  } from '@/mixins/JeecgListMixin'
  import JEllipsis from '@/components/jeecg/JEllipsis'
  import UploadToAli from '@femessage/upload-to-ali'
  import uploadFile from '@/components/uploadFile.vue'
  import {
    yardPhotoList,
    yardVideoList,
    yardPhotoDelete,
    yardVideoDelete,
    yardPhotoAdd,
    yardVideoAdd,
    yardListDelete
  } from '@/api/yard'
  import ARow from 'ant-design-vue/es/grid/Row';
  export default {
    name: 'YardList',
    mixins: [JeecgListMixin],
    components: {
        ARow,
      JEllipsis,
      YardModal,
      UploadToAli,
      uploadFile,
      VmCard
    },
    data() {
      return {
        ipagination: {
            current: 1,
            pageSize: 8,
            //   pageSizeOptions: ['10', '20', '30'],
            showTotal: (total, range) => {
                return range[0] + "-" + range[1] + " 共" + total + "条"
            },
            showQuickJumper: true,
            showSizeChanger:true,
            pageSizeOptions: ['10', '30', '50'],
            total: 0,
            onChange: (current, pageSize) => {
                // 切换分页时的回调，
                // 当在页面定义change事件时，切记要把此处的事件清除，因为这两个事件重叠了，可能到时候会导致一些莫名的bug
                this.ipagination.current = current;
                this.ipagination.pageSize= pageSize;
            }
        },

        noImgUrl:require('@/assets/img/noImg.png'),
        queryParam: {},
        description: '场地管理',
        // 新增修改按钮是否显示
        show: true,
        imgUrl: '',
        imgDetail: false,
        // 表头
        columns: [{
            title: 'ID',
            align: 'center',
            dataIndex: 'id'
          },
          {
            title: '场地名称',
            align: 'center',
            dataIndex: 'buildingName'
          },
          {
            title: '地址',
            align: 'center',
            dataIndex: 'address'
          },
          {
            title: '联系人',
            align: 'center',
            dataIndex: 'contactName'
          },
          {
            title: '联系电话',
            align: 'center',
            dataIndex: 'contactMobile'
          },
          {
            title: '创建时间',
            align: 'center',
            dataIndex: 'createTime'
          },
          {
            title: '操作',
            dataIndex: 'action',
            align: 'center',
            scopedSlots: {
              customRender: 'action'
            }
          }
        ],
        url: {
          list: '/ctop/yard/list',
          delete:'/ctop/yard/delete',
        },
        detail: false,
        indexDetail: '1',
        currentPage: 1,
        pageSize: 4,
        videoTotal: 0,
        photoTotal: 0,
        total: 0,
        videoList: [],
        photoList: [],
        imageUrl: '',
        videoUrl: '',
        customDomain: '',
        region: 'oss-cn-beijing',
        bucket: 'ctop-media',
        acceptVideo: 'video/mpeg,video/mp4',
        acceptImage: 'image/jpeg,image/jpg,image/png',
        accessKeyId: 'LTAIbNbqWzSOklQV',
        accessKeySecret: '1rkPz7JNoXk8sJevPaeYHWqfkQXBGh',
        addPhoto: false,
        addVideo: false,
        confirmLoading: true,
        currentYard:{},
      }
    },

    methods: {
      totalpageChange(page){
        console.log(page)
        this.ipagination.current=page;
        this.loadData(this.ipagination.current)
      },
      showDetail(item) {
        console.log(item)
        this.currentYard=item
        this.detail = true
        this.id = item.id
        // this.currentPage = 1
        this.getPhoto()
      },
      callback(key) {
        console.log(key)
        this.photoList = []
        this.videoList = []
        if (key == '1') {
          this.currentPage = 1
          this.getPhoto()
        } else if (key == '3') {
          this.currentPage = 1
          this.getVideo()
        }
      },
      pageChange: function (page) {
        console.log(page)
        this.currentPage = page
        if (this.indexDetail == '1') {
          this.getPhoto()
        } else if (this.indexDetail == '2') {
          this.getVideo()
        }
      },
      getPhoto() {
        // this.photoList = []
        yardPhotoList({
          pageNo: this.currentPage,
          pageSize: 4,
          yardId: this.id
        }).then(res => {
          if (res.code == 0) {
            console.log(res)
            this.photoList = res.result.records
            this.total = res.result.total
          }
        })
      },
      getVideo() {
        this.videoList = []
        yardVideoList({
          pageNo: this.currentPage,
          pageSize: 4,
          yardId: this.id
        }).then(res => {
          if (res.code == 0) {
            console.log(res)
            this.videoList = res.result.records
            this.videoTotal = res.result.total
          }
        })
      },
      handleOk(type) {
        const that = this
        if (type == 'photo') {
          yardPhotoAdd({
              yardId: that.id,
              photoUrl: that.imageUrl
            })
            .then(res => {
              if (res.success) {
                this.getPhoto()
                this.handleCancel('photo')
              } else {
                that.$message.warning(res.message)
              }
            })
            .finally(() => {
              that.confirmLoading = false
              that.handleCancel('photo')
            })
        } else {
          yardVideoAdd({
              yardId: that.id,
              videoUrl: that.videoUrl
            })
            .then(res => {
              if (res.success) {
                this.getVideo()
                this.handleCancel('video')
              } else {
                that.$message.warning(res.message)
              }
            })
            .finally(() => {
              that.confirmLoading = false
              that.handleCancel('video')
            })
        }
      },
      handleCancel(type) {
        if (type == 'photo') {
          this.imageUrl = ''
          this.addPhoto = false
        } else {
          this.videoUrl = ''
          this.addVideo = false
        }
      },
      showImage(item) {
        this.imgDetail = true
        this.imgUrl = item.photoUrl
      },
      deteleImg(id) {
        yardPhotoDelete({
          id: id
        }).then(res => {
          if (res.code == 200) {
            console.log(res)
            this.getPhoto()
          }
        })
      },
      deteleVideo(id) {
        yardVideoDelete({
          id: id
        }).then(res => {
          if (res.code == 200) {
            console.log(res)
            this.getVideo()
          }
        })
      },

      deleteOk: function (data) {
        console.log('最外层deleteFn执行',data)
        yardListDelete({
          id:data.id
        }).then(res=>{
          if(res.success){
            this.$message.success('删除成功')
            for (let i = 0; i < this.dataSource.length; i++) {
              if (this.dataSource[i].id === data.id) {
                this.dataSource.splice(i, 1)
              }
            }
            // this.getActorList(data.page)
          }else{
            this.$message.error('删除失败，稍后再试')
          }
          
        })
      },
      updateList(page){
        this.totalpageChange(page)
      },
      
    }
  }
</script>
<style scoped>
  @import '~@assets/less/common.less';
</style>
