<template>
  <div>
    <div class="filters-container">
      <el-button size="small" @click="$router.go(-1)">返回</el-button>
      <el-button @click="$router.push({path:'/arContent',query:{column:$route.query.column}})" type="primary" size="small" icon="el-icon-edit" class="filter-item">添加</el-button>

      <el-dropdown trigger="click" size="medium" class="table-column-filter">
        <span>
          筛选数据
          <i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown" class="table-column-filter-wrapper">
          <el-checkbox v-for="item in tableColumns" :key="item.value" v-model="item.show">{{item.label}}</el-checkbox>
        </el-dropdown-menu>
      </el-dropdown>
    </div>

    <!-- <el-table :data="tableData" :height="tableHeight" row-key="id" ref="table">
            <el-table-column v-if="multipleMode" align="center" type="selection" width="50">
            </el-table-column>
            <el-table-column type="index" min-width="50" align="center">
            </el-table-column>

            <el-table-column v-if="isColumnShow('id')" prop="id" label="ID" min-width="100">
            </el-table-column>

            <el-table-column v-if="isColumnShow('groupId')" prop="groupId" label="内容组ID" min-width="100">
            </el-table-column>

            <el-table-column v-if="isColumnShow('name')" prop="name" label="名称/描述" min-width="100">
            </el-table-column>

            <el-table-column v-if="isColumnShow('type')" prop="type" label="类别" min-width="100">
            </el-table-column>

            <el-table-column v-if="isColumnShow('text')" prop="text" label="文字" min-width="100">
            </el-table-column>

            <el-table-column v-if="isColumnShow('image')" prop="image" label="图片" min-width="100">
            </el-table-column>

            <el-table-column v-if="isColumnShow('url')" prop="url" label="URL" min-width="100">
            </el-table-column>

            <el-table-column v-if="isColumnShow('voice')" prop="voice" label="音频" min-width="100">
            </el-table-column>

            <el-table-column v-if="isColumnShow('movie')" prop="movie" label="视频" min-width="100">
            </el-table-column>

            <el-table-column v-if="isColumnShow('model')" prop="model" label="模型" min-width="100">
            </el-table-column>

            <el-table-column v-if="isColumnShow('cfile')" prop="cfile" label="文本文件" min-width="100">
            </el-table-column>

            <el-table-column v-if="isColumnShow('resourceSize')" prop="resourceSize" label="资源大小（M）" min-width="100">
            </el-table-column>

            <el-table-column v-if="isColumnShow('remark1')" prop="remark1" label="备注1" min-width="100">
            </el-table-column>

            <el-table-column v-if="isColumnShow('remark2')" prop="remark2" label="备注2" min-width="100">
            </el-table-column>

            <el-table-column v-if="isColumnShow('remark3')" prop="remark3" label="备注3" min-width="100">
            </el-table-column>

            <el-table-column v-if="isColumnShow('remark4')" prop="remark4" label="备注4" min-width="100">
            </el-table-column>

            <el-table-column v-if="isColumnShow('remark5')" prop="remark5" label="备注5" min-width="100">
            </el-table-column>

            <el-table-column v-if="isColumnShow('remark6')" prop="remark6" label="备注6" min-width="100">
            </el-table-column>
            <el-table-column v-if="isColumnShow('remark7')" prop="remark7" label="备注7" min-width="100">
            </el-table-column>
            <el-table-column v-if="isColumnShow('remark8')" prop="remark8" label="备注8" min-width="100">
            </el-table-column>
            <el-table-column v-if="isColumnShow('remark9')" prop="remark9" label="备注9" min-width="100">
            </el-table-column>
            <el-table-column v-if="isColumnShow('remark10')" prop="remark10" label="备注10" min-width="100">
            </el-table-column>
            <el-table-column label="操作" align="center" fixed="right" min-width="150">
                <template slot-scope="scope">
                    <el-button @click="$router.push({path:'/ArContentChilds',query:{column:scope.row.id+',arContentId'}})" type="primary" size="small" plain>内容子集
                    </el-button>
                    <el-button @click="editRow(scope.row)" type="primary" size="mini" plain>编辑</el-button>
                    <el-button @click="deleteRow(scope.row)" type="danger" size="mini" plain>删除</el-button>
                </template>
            </el-table-column>
    </el-table>-->
    <el-tabs type="border-card" :height="tableHeight" v-model="eltabsPane" style="max-width:1000px">
      <el-tab-pane :key="(item.id).toString()" :name="(item.id).toString()" v-for="item in tableData">
        <span slot="label">
          {{getTitle(item.type)}}
          <i class="el-icon-success" v-if="item.modifyFlag=='Y'" style="color:green"></i>
          <i class="el-icon-warning" v-else style="color:red"></i>
        </span>
        <el-row :gutter="20" v-if="item.type=='1001'" type="flex" justify="space-between">
          <el-col :span="8">
            <el-form ref="form" :model="item" label-width="80px">
              <el-form-item label="店铺名称">
                <el-input v-model="item.name"></el-input>
              </el-form-item>
              <el-form-item label="店铺图片">
                <single-upload v-model="item.image"></single-upload>
                <el-input v-model="item.image" placeholder="图片Url"></el-input>
              </el-form-item>
              <el-form-item label="店铺简介">
                <el-input v-model="item.remark1"></el-input>
              </el-form-item>
              <el-form-item label="官网">
                <el-input v-model="item.remark2"></el-input>
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="16">
            <el-card shadow="never">
              <div slot="header" class="clearfix">
                <span>{{item.name}}</span>
              </div>
              <el-row :gutter="50">
                <el-col :span="12" class="img" :style="{backgroundImage:'url('+item.image+')'}"></el-col>
                <el-col class="right" :span="10">
                  <div style="color:#666;font-size:14px;" :style="{textAlign:item.remark1?'left':'center'}">{{item.remark1?item.remark1:'请输入店铺简介'}}</div>
                  <el-button type="text" v-if="item.remark2" @click="$router.push(item.remark2)">点击进入官网</el-button>
                </el-col>
              </el-row>
            </el-card>
          </el-col>
        </el-row>

        <el-row :gutter="20" v-else-if="item.type=='1005'" type="flex" justify="space-between">
          <el-col :span="8">
            <el-form ref="form" :model="item" label-width="80px">
              <el-form-item label="商品名称">
                <el-input v-model="item.name" placeholder="商品名称"></el-input>
              </el-form-item>
              <el-form-item label="商品图片">
                <single-upload v-model="item.image"></single-upload>
                <el-input v-model="item.image" placeholder="图片Url"></el-input>
              </el-form-item>
              <el-form-item label="商品介绍">
                <el-input v-model="item.remark1"></el-input>
              </el-form-item>
              <el-form-item label="商品价格">
                <el-input-number v-model="item.remark2" :min="0"></el-input-number>
              </el-form-item>
              <el-form-item label="促销价格">
                <el-input-number v-model="item.remark3" :min="0"></el-input-number>
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="16">
            <el-card shadow="never">
              <div slot="header" class="clearfix">
                <span>{{item.name}}</span>
              </div>
              <el-row :gutter="50">
                <el-col :span="12" class="img" :style="{backgroundImage:'url('+item.image+')'}"></el-col>
                <el-col class="right" :span="10">
                  <div style="font-size:24px;text-align:center">
                    <span>¥{{item.remark3||0}}</span>
                    <span style="text-decoration:line-through;color:#666;padding:10px;">¥{{item.remark2||0}}</span>
                  </div>
                  <div style="color:#666;font-size:14px;margin-top:10px;border-top:1px solid #eee;padding:10px;" :style="{textAlign:item.remark1?'left':'center'}">{{item.remark1?item.remark1:'请输入店铺简介'}}</div>
                </el-col>
              </el-row>
            </el-card>
          </el-col>
        </el-row>

        <el-row :gutter="20" v-else-if="item.type=='1002'" type="flex" justify="space-between">
          <el-col :span="8">
            <el-form ref="form" :model="item" label-width="80px">
              <el-form-item label="促销名称">
                <el-input v-model="item.name"></el-input>
              </el-form-item>
              <el-form-item label="促销图片">
                <single-upload v-model="item.image"></single-upload>
                <el-input v-model="item.image" placeholder="图片Url"></el-input>
              </el-form-item>
              <el-form-item label="促销信息">
                <el-input v-model="item.remark1"></el-input>
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="16">
            <el-card shadow="never">
              <div slot="header" class="clearfix">
                <span>{{item.name}}</span>
              </div>
              <el-row :gutter="50">
                <el-col :span="12" class="img" :style="{backgroundImage:'url('+item.image+')'}"></el-col>
                <el-col class="right" :span="10">
                  <div style="color:#666;font-size:14px;" :style="{textAlign:item.remark1?'left':'center'}">{{item.remark1?item.remark1:'请输入促销信息'}}</div>
                </el-col>
              </el-row>
            </el-card>
          </el-col>
        </el-row>

        <el-row :gutter="20" v-else-if="item.type=='1003'" type="flex" justify="space-between">
          <el-col :span="8">
            <el-form ref="form" :model="item" label-width="80px">
              <el-form-item label="模型名称">
                <el-input v-model="item.name"></el-input>
              </el-form-item>
              <el-form-item label="模型说明">
                <el-input v-model="item.remark1"></el-input>
              </el-form-item>
              <el-form-item label="模型x坐标">
                <el-input v-model="item.remark2"></el-input>
              </el-form-item>
              <el-form-item label="模型y坐标">
                <el-input v-model="item.remark3"></el-input>
              </el-form-item>
              <el-form-item label="模型z坐标">
                <el-input v-model="item.remark4"></el-input>
              </el-form-item>
              <el-form-item label="缩放比例">
                <el-input-number v-model="item.remark5" label="缩放比例" size="mini"></el-input-number>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>

        <el-row :gutter="20" v-else-if="item.type=='1004'" type="flex" justify="space-between">
          <el-col :span="8">
            <el-form ref="form" :model="item" label-width="80px">
              <el-form-item label="视频名称">
                <el-input v-model="item.name"></el-input>
              </el-form-item>
              <el-form-item label="视频资源">
                <el-upload class="upload-demo" :action="$baseUrl+'/assets/uploadFile'" :on-success="haleSuccess" :multiple="false" :file-list="fileList">
                  <el-button size="small" type="primary">点击上传</el-button>
                  <div slot="tip" class="el-upload__tip">只能上传单个文件 ，且不超过500kb</div>
                </el-upload>
                <el-input v-model="item.movie" placeholder="视频Url"></el-input>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>

        <el-row :gutter="20" v-else-if="item.type=='1006'" type="flex" justify="space-between">
          <el-col :span="8">
            <el-form ref="form" :model="item" label-width="80px">
              <el-form-item label="模型">
                <el-input v-model="item.name"></el-input>
              </el-form-item>
              <el-form-item label="特效">
                <el-input v-model="item.remark1"></el-input>
              </el-form-item>
              <el-form-item label="演出图片">
                <single-upload v-model="item.image"></single-upload>
                <el-input v-model="item.image" placeholder="图片Url"></el-input>
              </el-form-item>
              <el-form-item label="模型x坐标">
                <el-input v-model="item.remark2"></el-input>
              </el-form-item>
              <el-form-item label="模型y坐标">
                <el-input v-model="item.remark3"></el-input>
              </el-form-item>
              <el-form-item label="模型z坐标">
                <el-input v-model="item.remark4"></el-input>
              </el-form-item>
              <el-form-item label="缩放比例">
                <el-input-number v-model="item.remark5" label="缩放比例" size="mini"></el-input-number>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>

        <el-row :gutter="20" v-else-if="item.type=='1007'" type="flex" justify="space-between">
          <el-col :span="8">
            <el-form ref="form" :model="item" label-width="80px">
              <el-form-item label="游戏名称">
                <el-input v-model="item.name"></el-input>
              </el-form-item>
              <el-form-item label="游戏说明">
                <el-input v-model="item.remark1"></el-input>
              </el-form-item>
              <el-form-item label="游戏图片">
                <single-upload v-model="item.image"></single-upload>
                <el-input v-model="item.image" placeholder="图片Url"></el-input>
              </el-form-item>
              <el-form-item label="游戏资源">
                <el-input v-model="item.remark2"></el-input>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>

        <el-row :gutter="20" v-else-if="item.type=='1010'" type="flex" justify="space-between">
          <el-col :span="8">
            <el-form ref="form" :model="item" label-width="80px">
              <el-form-item label="文本介绍">
                <el-input type="textarea" v-model="item.remark1"></el-input>
              </el-form-item>
              <el-form-item label="图片1">
                <single-upload v-model="item.remark2"></single-upload>
                <el-input v-model="item.remark2"></el-input>
              </el-form-item>
              <el-form-item label="图片2">
                <single-upload v-model="item.remark3"></single-upload>
                <el-input v-model="item.remark3"></el-input>
              </el-form-item>
              <el-form-item label="图片3">
                <single-upload v-model="item.remark4"></single-upload>
                <el-input v-model="item.remark4"></el-input>
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="16">
            <div class="remark" v-if="item.remark1">{{item.remark1}}</div>
            <div v-else style="color:#ccc;text-align:center;heiht:100px;line-height:100px;">暂无内容</div>
            <el-carousel height="300px">
              <el-carousel-item v-for="i in 3" :key="i">
                <div class="bgContent" v-if="item['remark'+(i+1)]" :style="{backgroundImage:'url('+item['remark'+(i+1)]+')'}"></div>
                <div class="bgContent" v-else>
                  <div style="color:#aaa;text-align:center;heiht:300px;line-height:300px;">暂无内容</div>
                </div>
              </el-carousel-item>
            </el-carousel>
          </el-col>
        </el-row>
        <el-row :gutter="20" v-else-if="item.type=='1011'" type="flex" justify="space-between">
          <el-col :span="8">
            <el-form ref="form" :model="item" label-width="80px">
              <el-form-item label="文本介绍">
                <el-input type="textarea" v-model="item.remark1"></el-input>
              </el-form-item>
              <el-form-item label="图片1">
                <single-upload v-model="item.remark2"></single-upload>
                <el-input v-model="item.remark2"></el-input>
              </el-form-item>
              <el-form-item label="图片2">
                <single-upload v-model="item.remark3"></single-upload>
                <el-input v-model="item.remark3"></el-input>
              </el-form-item>
              <el-form-item label="识别图">
                <el-input v-model="item.remark4"></el-input>
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="16">
            <el-row>
              <el-col :span="12">
                <el-carousel height="300px">
                  <el-carousel-item v-for="i in 2" :key="i">
                    <div class="bgContent" v-if="item['remark'+(i+1)]" :style="{backgroundImage:'url('+item['remark'+(i+1)]+')'}"></div>
                    <div class="bgContent" v-else>
                      <div style="color:#aaa;text-align:center;heiht:300px;line-height:300px;">暂无内容</div>
                    </div>
                  </el-carousel-item>
                </el-carousel>
              </el-col>
              <el-col :span="12">
                <div class="remark" v-if="item.remark1">{{item.remark1}}</div>
                <div v-else style="color:#ccc;text-align:center;heiht:100px;line-height:100px;">暂无内容</div>
              </el-col>
            </el-row>
          </el-col>
        </el-row>

        <el-row :gutter="20" v-else-if="item.type=='1012'" type="flex" justify="space-between">
          <el-col :span="8">
            <el-form ref="form" :model="item" label-width="80px">
              <el-form-item label="文本介绍">
                <el-input type="textarea" v-model="item.remark1"></el-input>
              </el-form-item>
              <el-form-item label="图片1">
                <single-upload v-model="item.remark2"></single-upload>
                <el-input v-model="item.remark2"></el-input>
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="16">
            <el-row>
              <el-col :span="12">
                <div class="bgContent" style="height:300px" v-if="item.remark2" :style="{backgroundImage:'url('+item.remark2+')'}"></div>
                <div class="bgContent" style="height:300px" v-else>
                  <div style="color:#aaa;text-align:center;heiht:300px;line-height:300px;">暂无内容</div>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="remark" v-if="item.remark1">{{item.remark1}}</div>
                <div v-else style="color:#ccc;text-align:center;heiht:100px;line-height:100px;">暂无内容</div>
              </el-col>
            </el-row>
          </el-col>
        </el-row>

        <el-row :gutter="20" v-else-if="item.type=='1013'" type="flex" justify="space-between">
          <el-col :span="8">
            <el-form ref="form" :model="item" label-width="80px">
              <el-form-item label="模型名称">
                <el-input v-model="item.name"></el-input>
              </el-form-item>
              <el-form-item label="文本介绍">
                <el-input type="textarea" v-model="item.remark1"></el-input>
              </el-form-item>
              <el-form-item label="恐龙图片">
                <single-upload v-model="item.image"></single-upload>
                <el-input v-model="item.image"></el-input>
              </el-form-item>
              <el-form-item label="恐龙音频">
                <single-vocie v-model="item.voice"></single-vocie>
                <el-input v-model="item.voice"></el-input>
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="16">
            <el-button type="primary" v-if="item.voice" @click="playvoice(item.voice)" icon="el-icon-service" circle plain style="float:right"></el-button>
            <h1 style="text-align:center">{{item.name}}</h1>
            <el-row>
              <el-col :span="12">
                <div class="bgContent" style="height:300px" v-if="item.image" :style="{backgroundImage:'url('+item.image+')'}"></div>
                <div class="bgContent" style="height:300px" v-else>
                  <div style="color:#aaa;text-align:center;heiht:300px;line-height:300px;">暂无内容</div>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="remark" v-if="item.remark1">{{item.remark1}}</div>
                <div v-else style="color:#ccc;text-align:center;heiht:100px;line-height:100px;">暂无内容</div>
              </el-col>
            </el-row>
          </el-col>
        </el-row>

        <el-row :gutter="20" v-else-if="item.type=='1014'" type="flex" justify="space-between">
          <el-col :span="8">
            <el-form ref="form" :model="item" label-width="80px">
              <el-form-item label="模型名称">
                <el-input v-model="item.name"></el-input>
              </el-form-item>
              <el-form-item label="景点图片">
                <single-upload v-model="item.image"></single-upload>
                <el-input v-model="item.image"></el-input>
              </el-form-item>
              <el-form-item label="解说音频">
                <single-vocie v-model="item.voice"></single-vocie>
                <el-input v-model="item.voice"></el-input>
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="16">
            <h1 style="text-align:center">{{item.name}}</h1>
            <div class="bgContent" style="height:300px" v-if="item.image" :style="{backgroundImage:'url('+item.image+')'}"></div>
            <div class="bgContent" style="height:300px" v-else>
              <div style="color:#aaa;text-align:center;heiht:300px;line-height:300px;">暂无内容</div>
            </div>
            <div style="padding:20px;text-align:center">
              <el-button type="primary" v-if="item.voice" @click="playvoice(item.voice)" icon="el-icon-service" circle plain></el-button>
            </div>
          </el-col>
        </el-row>

        <el-row :gutter="20" v-else-if="item.type=='1015'" type="flex" justify="space-between">
          <el-col :span="8">
            <el-form ref="form" :model="item" label-width="80px">
              <el-form-item label="模型名称">
                <el-input v-model="item.name"></el-input>
              </el-form-item>
              <el-form-item label="解说音频">
                <single-vocie v-model="item.voice"></single-vocie>
                <el-input v-model="item.voice"></el-input>
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="16">
            <h1 style="text-align:center">{{item.name}}</h1>
            <!-- <div class="bgContent" style="height:300px" v-if="item.image" :style="{backgroundImage:'url('+item.image+')'}"></div>
                <div class="bgContent" style="height:300px" v-else>
                  <div style="color:#aaa;text-align:center;heiht:300px;line-height:300px;">暂无内容</div>
            </div>-->
            <div style="padding:20px;text-align:center">
              <el-button type="primary" v-if="item.voice" @click="playvoice(item.voice)" icon="el-icon-service" circle plain></el-button>
            </div>
          </el-col>
        </el-row>

        <el-row :gutter="20" v-else-if="item.type=='1016'" type="flex" justify="space-between">
          <el-col :span="8">
            <el-form ref="form" :model="item" label-width="80px">
              <el-form-item label="解说音频">
                <single-vocie v-model="item.voice"></single-vocie>
                <el-input v-model="item.voice"></el-input>
              </el-form-item>
              <el-form-item label="视频名称">
                <el-input v-model="item.name"></el-input>
              </el-form-item>
              <el-form-item label="视频资源">
                <single-vocie v-model="item.movie" :fileType="'movice'"></single-vocie>
                <el-input v-model="item.movie"></el-input>
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="16">
            <div class="bgContent" style="height:300px" v-if="item.movie">
              <video style="width:100%;height:100%" controls>
                <source :src="item.movie" type="video/mp4">
              </video>
            </div>
            <div class="bgContent" style="height:300px" v-else>
              <div style="color:#aaa;text-align:center;heiht:300px;line-height:300px;">暂无内容</div>
            </div>
            <h3 style="text-align:center">{{item.name}}</h3>
            <div style="padding:20px;text-align:center">
              <el-button type="primary" v-if="item.voice" @click="playvoice(item.voice)" icon="el-icon-service" circle plain></el-button>
            </div>
          </el-col>
        </el-row>

        <el-row :gutter="20" v-else-if="item.type=='1017'" type="flex" justify="space-between">
          <el-col :span="8">
            <el-form ref="form" :model="item" label-width="80px">
              <el-form-item label="解说音频">
                <single-vocie v-model="item.voice"></single-vocie>
                <el-input v-model="item.voice"></el-input>
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="16">
            <div style="padding:20px;text-align:center">
              <el-button type="primary" v-if="item.voice" @click="playvoice(item.voice)" icon="el-icon-service" circle plain></el-button>
            </div>
          </el-col>
        </el-row>

        <el-row :gutter="20" v-else-if="item.type=='1018'" type="flex" justify="space-between">
          <el-col :span="8">
            <el-form ref="form" :model="item" label-width="80px">
              <el-form-item label="解说图片">
                <multi-upload v-model="item.remark1"></multi-upload>
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="16">
             <el-carousel height="300px">
              <el-carousel-item v-for="i in item.remark1" :key="i">
                <div class="bgContent" :style="{backgroundImage:'url('+i+')'}"></div>
              </el-carousel-item>
            </el-carousel>
          </el-col>
        </el-row>

        <el-row :gutter="20" v-else type="flex" justify="space-between">
          <el-col :span="8">
            <el-form ref="form" :model="item" label-width="80px">
              <el-form-item label="普通模板名称">
                <el-input v-model="item.name"></el-input>
              </el-form-item>
              <el-form-item label="普通模板说明">
                <el-input v-model="item.remark1"></el-input>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>

        <el-button type="primary" style="margin:70px 0 0;float:right" plain size="small" @click="save">保存/下一步</el-button>
        <el-button @click="deleteRow(item)" style="margin:70px 10px 0 0;float:right;" size="small" type="danger" plain>删除</el-button>
        <el-button @click="editRow(item)" style="margin:70px 10px 0 0;float:right;" type="primary" size="small" plain>编辑</el-button>
      </el-tab-pane>
    </el-tabs>
    <el-dialog title="高级查询" :visible.sync="showAdvancedQueryDialog">
      <el-button @click="addField" type="text" icon="el-icon-plus">添加</el-button>
      <el-table :data="advancedQueryFields">
        <el-table-column prop="link" label="链接符" align="center">
          <template slot-scope="{row}">
            <el-select placeholder="链接" size="small" v-model="row.link" class="filter-item">
              <el-option label="AND" value="AND"></el-option>
              <el-option label="OR" value="OR"></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="字段" align="center">
          <template slot-scope="{row}">
            <el-select v-model="row.name">
              <el-option v-for="item in advancedQueryColumns" :label="item.label" :value="item.value" :key="item.value"></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="searchMethod" label="搜索方式" width="150" align="center">
          <template slot-scope="{row}">
            <el-select v-model="row.searchMethod">
              <el-option v-for="item in searchMethods" :label="item" :value="item" :key="item"></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="value" label="参数" align="center">
          <template slot-scope="{row}">
            <el-input v-model="row.value"></el-input>
          </template>
        </el-table-column>
        <el-table-column width="60" align="center">
          <template slot-scope="{ row, column, $index }">
            <el-button @click="removeField($index)" size="small" type="text">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <span slot="footer" class="dialog-footer">
        <el-button @click="advancedQuery" :loading="$store.state.fetchingData">确定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="排序" :visible.sync="showTableSortDialog">
      <el-button @click="addSortField" type="text" icon="el-icon-plus">添加</el-button>
      <el-table :data="tableSortFields">
        <el-table-column prop="name" label="字段" align="center">
          <template slot-scope="{row}">
            <el-select v-model="row.name">
              <el-option v-for="item in advancedQueryColumns" :label="item.label" :value="item.value" :key="item.value"></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="order" label="排序" align="center">
          <template slot-scope="{row}">
            <el-select v-model="row.order">
              <el-option label="降序" value="desc"></el-option>
              <el-option label="升序" value="asc"></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column width="60" align="center">
          <template slot-scope="{ row, column, $index }">
            <el-button @click="removeSortField($index)" size="small" type="text">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <span slot="footer" class="dialog-footer">
        <el-button @click="tableSortQuery" :loading="$store.state.fetchingData">确定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="查看图片" :visible.sync="imageDialogVisible" size="small">
      <img width="100%" :src="imgSrc" alt>
    </el-dialog>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import { format } from 'date-fns'
import zh from 'date-fns/locale/zh_cn'
export default {
  created() {
    this.getData(0);
    this.$http.get({
      url: '/arContentType/all',
      data: {}
    }).then(res => {
      if (res.success) {
        this.arContentType = res.data
      }
    })
  },
  data() {
    return {
      arContentType: [],
      totalNumber: 0,
      totalPage: 10,
      currentPage: 1,
      pageSize: 20,
      tableData: [],
      filter1: '',
      filter2: '',
      tableColumns: [
        {
          label: 'ID',
          value: 'id',
          show: true
        },
        {
          label: '内容组ID',
          value: 'groupId',
          show: true
        },
        {
          label: '名称/描述',
          value: 'name',
          show: true
        },
        {
          label: '类别',
          value: 'type',
          show: true
        },
        {
          label: '文字',
          value: 'text',
          show: false
        },
        {
          label: '图片',
          value: 'image',
          show: true
        },
        {
          label: 'URL',
          value: 'url',
          show: true
        },
        {
          label: '音频',
          value: 'voice',
          show: true
        },
        {
          label: '视频',
          value: 'movie',
          show: true
        },
        {
          label: '模型',
          value: 'model',
          show: true
        },
        {
          label: '文本文件',
          value: 'cfile',
          show: true
        },
        {
          label: '资源大小（M）',
          value: 'resourceSize',
          show: true
        },
        {
          label: '备注1',
          value: 'remark1',
          show: true
        },
        {
          label: '备注2',
          value: 'remark2',
          show: true
        },
        {
          label: '备注3',
          value: 'remark3',
          show: true
        },
        {
          label: '备注4',
          value: 'remark4',
          show: true
        },
        {
          label: '备注5',
          value: 'remark5',
          show: true
        },
        {
          label: '备注6',
          value: 'remark6',
          show: true
        },
        {
          label: '备注7',
          value: 'remark7',
          show: true
        },
        {
          label: '备注8',
          value: 'remark8',
          show: true
        },
        {
          label: '备注9',
          value: 'remark9',
          show: true
        },
        {
          label: '备注10',
          value: 'remark10',
          show: true
        },
      ],
      multipleMode: false,
      showAdvancedQueryDialog: false,
      advancedQueryFields: [],
      showTableSortDialog: false,
      tableSortFields: [],
      searchMethods: ['=', '!=', '>', '>=', '<', '<=', 'like'],
      advancedQueryColumns: [
        {
          label: 'ID',
          value: 'id'
        },
        {
          label: '内容组ID',
          value: 'group_id'
        },
        {
          label: '名称/描述',
          value: 'name'
        },
        {
          label: '类别',
          value: 'type'
        },
        {
          label: '文字',
          value: 'text'
        },
        {
          label: '图片',
          value: 'image'
        },
        {
          label: 'URL',
          value: 'url'
        },
        {
          label: '音频',
          value: 'voice'
        },
        {
          label: '视频',
          value: 'movie'
        },
        {
          label: '模型',
          value: 'model'
        },
        {
          label: '文本文件',
          value: 'cfile'
        },
        {
          label: '资源大小（M）',
          value: 'resource_size'
        },
        {
          label: '备注1',
          value: 'remark1'
        },
        {
          label: '备注2',
          value: 'remark2'
        },
        {
          label: '备注3',
          value: 'remark3'
        },
        {
          label: '备注4',
          value: 'remark4'
        },
        {
          label: '备注5',
          value: 'remark5'
        },
        {
          label: '备注6',
          value: 'remark6'
        },
        {
          label: '备注7',
          value: 'remark7',
        },
        {
          label: '备注8',
          value: 'remark8',
        },
        {
          label: '备注9',
          value: 'remark9',
        },
        {
          label: '备注10',
          value: 'remark10',
        },
      ],
      advancedQuerySearchKey: '',
      orderByStr: '',
      imgSrc: '',
      imageDialogVisible: false,
      eltabsPane: '',
      fileList: [],
      sound: null,
    }
  },
  computed: {
    ...mapState(['tableHeight']),
    selection() {
      return this.$refs.table.selection.map(i => i.id);
    }
  },
  methods: {
    playvoice(voice) {
      if (!this.sound) {
        this.sound = new Audio();
        this.sound.src = voice;
        this.sound.play();
      }
      else {
        this.sound.pause();
        this.sound = null;
      }

    },
    getTitle(type) {
      var name = '其他'
      this.arContentType.forEach(item => {
        if (item.id == Number(type)) {
          name = item.typeName
        }
      })
      return name
    },
    pageSizeChange(size) {
      this.currentPage = 1;
      this.pageSize = size;
      this.getData();
    },
    currentPageChange(page) {
      this.currentPage = page;
      this.getData();
    },
    getData(index) {

      var data = {
        currentPage: this.currentPage,
        pageNumber: this.pageSize,
        searchKey: this.filter1,
        advancedQuery: this.advancedQuerySearchKey,
        orderByStr: this.orderByStr,
      }

      if (this.$route.query.column) {
        var tempColumn = this.$route.query.column;
        data[tempColumn.split(',')[1]] = tempColumn.split(',')[0];
      }

      this.$http.get({
        url: '/arContent/all',
        data: data
      }).then(res => {
        if (res.success) {
          // res.data.forEach(item => {
          //   if (item.type == '1004' && item.movie) {
          //     this.fileList = [item.movie]
          //   }
          // })
          //this.totalNumber = res.data.page.totalNumber;
          res.data.forEach(item=>{
            if(item.type=='1018'){
              item.remark1=item.remark1?item.remark1.split(';'):[]
            }
          })
          this.tableData = res.data;
          if (index || index == 0) {
            if (res.data.length > index) {
              this.eltabsPane = res.data[index].id.toString()
            }

          }

        }
      })
    },
    isColumnShow(column) {
      var row = this.tableColumns.find(i => i.value === column);
      return row ? row.show : false;
    },
    toggleMultipleMode(multipleMode) {
      this.multipleMode = multipleMode;
      if (!multipleMode) {
        this.$refs.table.clearSelection();
      }
    },
    editRow(row) {
      this.$router.push({
        path: '/arContent',
        query: {
          id: row.id,
          column: this.$route.query.column,
        }
      })
    },
    operation1() {
      this.$notify({
        title: '提示',
        message: this.selection
      });
    },
    operation2() {
      this.$message('操作2');
    },
    addField() {
      this.advancedQueryFields.push({
        link: 'AND',
        name: '',
        searchMethod: '=',
        value: '',
      });
    },
    removeField(i) {
      if (this.advancedQueryFields.length > 0) {
        this.advancedQueryFields.splice(i, 1);
      }
    },
    advancedQuery() {

      this.advancedQuerySearchKey = '';

      if (this.advancedQueryFields.length > 0) {

        var templist = [];

        this.advancedQueryFields.forEach(item => {
          if (item.link && item.name && item.searchMethod && item.value) {
            var tempItem = item.link + '_,' + item.name + '_,' + item.searchMethod + '_,' + item.value;
            templist.push(tempItem);
          }
        })

        if (templist.length > 0) {

          this.advancedQuerySearchKey = templist.join('_;');
        }
      }

      this.getData();
      this.showAdvancedQueryDialog = false;
    },
    addSortField() {
      this.tableSortFields.push({
        name: '',
        order: 'asc',
      });
    },
    removeSortField(i) {
      if (this.tableSortFields.length > 0) {
        this.tableSortFields.splice(i, 1);
      }
    },
    tableSortQuery() {

      this.orderByStr = '';

      if (this.tableSortFields.length > 0) {

        var templist = [];

        this.tableSortFields.forEach(item => {
          if (item.name && item.order) {
            var tempItem = item.name + '_,' + item.order;
            templist.push(tempItem);
          }
        })

        if (templist.length > 0) {

          this.orderByStr = templist.join('_;');
        }
      }

      this.getData();
      this.showTableSortDialog = false;
    },
    exportExcel() {
      window.location.href = this.$baseUrl + "/arContent/exportExcel?searchKey="
        + this.filter1 + "&advancedQuery=" + this.advancedQuerySearchKey + "&orderByStr=" + this.orderByStr;
    },
    searchData() {
      this.currentPage = 1;
      this.getData();
    },
    deleteRow(row) {
      this.$alert('删除将无法恢复，确认要删除么？', '警告', { type: 'error' }).then(() => {
        return this.$http.post({
          url: '/arContent/del',
          data: { id: row.id }
        })
      }).then(() => {
        this.$message.success('删除成功');
        this.getData(0);
      }).catch(action => {
        if (action === 'cancel') {
          this.$message.info('删除取消');
        } else {
          this.$message.error('删除失败');
        }
      })
    },
    DateTimeFormatter(row, column, cellValue) {
      if (cellValue) {
        return format(cellValue, 'YYYY/MM/DD HH:mm', { locale: zh })
      }

    },
    DateFormatter(row, column, cellValue) {
      if (cellValue) {
        return format(cellValue, 'YYYY/MM/DD', { locale: zh })
      }

    },
    showImg(img) {
      this.imgSrc = img;
      this.imageDialogVisible = true;
    },
    haleSuccess(file) {
      //console.log(file)
      file.data.forEach(item => {
        var nameList = item.split('/')
        var jsonp = {
          name: nameList[nameList.length - 1],
          url: item
        }
        this.fileList.splice(0, 1, jsonp)
        var list = [...this.tableData]
        list.forEach(todo => {
          if (Number(todo.id) == Number(this.eltabsPane)) {
            todo.movie = item
          }
        })
        this.tableData = list

      })
    },
    save() {
      var list = [...this.tableData]
      list.forEach((item, index) => {
        if (item.id.toString() == this.eltabsPane) {
          if (!item.name && item.type != '1010' && item.type != '1011' && item.type != '1012'&&item.type!='1017'&&item.type!='1018') {
            this.$message.warning('请填写名称！');
            return;
          }
          if(item.type=='1018'){
            item.remark1=item.remark1.join(';');
          }
          item.modifyFlag = 'Y';
          delete item.arContentChildList;
          this.$http.post({
            url: '/arContent/update',
            data: item
          }).then(() => {
            this.$message.success('保存成功');
            this.getData(index + 1);
          })
        }
      })
    },
    handleSuccess(res, file) {

    },
    handleRemove() {

    }

  }
}
</script>
<style lang="less" scoped>
.img {
  height: 300px;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-color: #ccc;
  margin-left: 20px;
  border-radius: 4px;
}
.right {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-self: stretch;
}

.remark {
  min-height: 100px;
  font-size: 16px;
  text-indent: 20px;
  word-break: break-all;
  line-height: 24px;
}
.bgContent {
  background-color: #ccc;
  width: 100%;
  height: 100%;
  background-position: center center;
  background-size: cover;
}
</style>
