<style>
  .ant-modal-body {
    padding-top: 0px;
  }

  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>

    <!-- table区域-begin -->
    <div>
      <a-table ref="table" size="middle" bordered rowKey="id" :columns="columns" :dataSource="dataSource"
        :pagination="ipagination" :loading="loading">
        <!-- 字符串超长截取省略号显示-->
        <span slot="esContent" slot-scope="text">
          <j-ellipsis :value="text" :length="10" />
        </span>

        <span slot="action" slot-scope="text, record">
          <a href="javascript:;" @click="handleDetail(record)">详情</a>
          <a-divider type="vertical" />
          <a-dropdown>
            <a class="ant-dropdown-link">
              更多
              <a-icon type="down" />
            </a>
            <a-menu slot="overlay">
              <a-menu-item v-show="show">
                <a @click="handleEdit(record)">编辑</a>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
          <a-divider type="vertical" />
          <a href="javascript:;" @click="showDetail(record)">场地信息</a>
        </span>
      </a-table>
    </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="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>
            <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')">
      <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')">
      <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 {
    JeecgListMixin
  } from '@/mixins/JeecgListMixin'
  import JEllipsis from '@/components/jeecg/JEllipsis'
  import UploadToAli from '@femessage/upload-to-ali'
  import {
    yardPhotoList,
    yardVideoList,
    yardPhotoDelete,
    yardVideoDelete,
    yardPhotoAdd,
    yardVideoAdd
  } from '@/api/yard'
  export default {
    name: 'YardList',
    mixins: [JeecgListMixin],
    components: {
      JEllipsis,
      YardModal,
      UploadToAli
    },
    data() {
      return {
        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'
        },
        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
      }
    },

    methods: {
      showDetail(item) {
        console.log(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 == '2') {
          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()
          }
        })
      }
    }
  }
</script>
<style scoped>
  @import '~@assets/less/common.less';
</style>