<template>
  <div class="row items-center justify-content">
      <div class="col row flex-between">
          <div class="row wrap">
            <div class="row items-center q-mb-lg">
                <span class="fz14 q-pr-md shrink microsoft">关键字:</span>
                <div>
                    <el-input class="microsoft" style="max-width:212px" v-model="queryObj.Title" placeholder="请输入关键字" clearable
                @keyup.enter="search"></el-input>
                </div>
            </div>
            <div class="row items-center q-mb-lg q-pl-lg">
                <span class="fz14 q-pr-md shrink microsoft">&nbsp;&nbsp;模版:</span>
                <el-select v-model="queryObj.TemplateType" 
                    class="ml-1 shrink TemSel microsoft"
                    placeholder="模版类型" clearable @change="search">
                        <el-option class="microsoft"
                            v-for="item in typeArr"
                            :key="item.type"
                            :label="`${item.typeName}`"
                            :value="item.type"
                        />
                </el-select>
            </div>
            <div class="row items-center q-mb-lg q-pl-lg">
                <span class="fz14 q-pr-md shrink microsoft">&nbsp;&nbsp;&nbsp;版型:</span>
                <el-select v-model="queryObj.TempType" 
                    class="ml-1 shrink TemSel microsoft"
                    placeholder="版型" clearable @change="search">
                        <el-option class="microsoft"
                            v-for="item in layouts"
                            :key="item.Id"
                            :label="`${item.Name}`"
                            :value="item.Id"
                        />
                </el-select>
            </div>
            <div class="row items-center q-mb-lg q-pl-lg">
                <span class="fz14 q-pr-md shrink microsoft">&nbsp;&nbsp;国家:</span>
                <el-select v-model="queryObj.CountryList" multiple
                    class="ml-1 shrink TemSel microsoft"
                    placeholder="国家" clearable filterable @change="search(1)">
                        <el-option class="microsoft" key="" label="不限" value=""/>
                        <el-option class="microsoft"
                            v-for="item in countries"
                            :key="item.CountryName"
                            :label="`${item.CountryName}`"
                            :value="item.CountryName"
                        />
                </el-select>
            </div>
            <div class="row items-center q-mb-lg q-pl-lg">
                <span class="fz14 q-pr-md shrink microsoft">&nbsp;&nbsp;季节:</span>
                <el-select v-model="queryObj.SeasonList" multiple
                    class="ml-1 shrink TemSel microsoft"
                    placeholder="季节" clearable @change="search(2)">
                        <el-option class="microsoft" key="" label="四季" value=""/>
                        <el-option class="microsoft"
                            v-for="item in seasonArr"
                            :key="item.SeasonName"
                            :label="`${item.SeasonName}`"
                            :value="item.SeasonName"
                        />
                </el-select>
            </div>
            <div class="row items-center q-mb-lg q-pl-lg">
                <span class="fz14 q-pr-md shrink microsoft">&nbsp;&nbsp;排序:</span>
                <el-select v-model="queryObj.OrderByType"
                    class="ml-1 shrink TemSel microsoft"
                    placeholder="排序方式" @change="search">
                        <el-option class="microsoft"
                            v-for="item in sortArr"
                            :key="item.type"
                            :label="`${item.typeName}`"
                            :value="item.type"
                        />
                </el-select>
            </div>
            <div class="row items-center q-mb-lg q-pl-lg">
                <span class="fz14 q-pr-md shrink microsoft">&nbsp;&nbsp;颜色:</span>
                <el-select v-model="queryObj.ColorList" multiple
                    class="ml-1 shrink TemSel microsoft"
                    placeholder="颜色" clearable filterable @change="search(3)">
                        <el-option class="microsoft" key="" label="不限" value=""/>
                        <el-option class="microsoft"
                            v-for="item in ColorList"
                            :key="item.ID"
                            :label="`${item.Name}`"
                            :value="item.Name"
                        />
                </el-select>
            </div>
          </div>
          <div class="row nowrap" style="flex-shrink: 0;width: 205px;">
                <div>
                    <el-button class="q-ml-lg q-mb-lg" type="primary" size="default" style="color: #ffff;" @click="search">
                        <el-icon class="microsoft" size="18px">
                            <Search />
                        </el-icon>
                    </el-button>
                </div>
                <div>
                    <el-dropdown class="q-pl-lg microsoft" split-button 
                    size="default" type="primary"
                    @click="addTemplate(1)">
                    <span style="font-size: 23px;margin-right: 10px;"> + </span> <span>创建</span>
                    <template #dropdown>
                        <el-dropdown-menu>
                          <el-dropdown-item class="none-border">
                            <el-button class="microsoft" type="primary" size="small"
                                @click.stop="addTemplate(1)" style="color: #ffff;">
                                创建模版
                            </el-button>
                          </el-dropdown-item>
                          <el-dropdown-item class="none-border">
                            <el-button class="microsoft" type="primary" size="small"
                                @click.stop="addTemplate(2)" style="color: #ffff;">
                                创建广告
                            </el-button>
                          </el-dropdown-item>
                        </el-dropdown-menu>
                      </template>
                    </el-dropdown>
                </div>
          </div>
      </div>
      <!-- <el-input style="width:100px" v-model="queryObj.Title" placeholder="请输入关键字" class="q-pr-33">
        <template #append>
          <div class="Market-select-line absolute"></div>
          <div class="row items-center pointer">
              <img src="../../assets/img/home-search.png" width="21" height="21"
              @click="search"/>
          </div>
        </template>
      </el-input> -->
      
    </div>
    <el-table v-loading="loading" ref="dataTableRef" highlight-current-row 
    v-load-more="tableScrollHandler" :data="dataList" class="tableHBEbeef5 col" height="82vh">
    <el-table-column label="封面图">
        <template #default="scope" width="110">
          <el-image
              style="width: 50px; height: auto"
              :src="scope.row.CoverImg"
              :zoom-rate="1.2"
              :max-scale="7"
              :min-scale="0.2"
              :preview-src-list="[]"
              :initial-index="4"
              fit="contain"
          />
        </template>
      </el-table-column>
      <el-table-column label="名称">
        <template #default="scope">
          <el-tooltip
              class="box-item"
              effect="dark"
              :content="scope.row.Title"
              placement="top">
              <span class="microsoft">{{scope.row.Title}}</span> 
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="类型" width="100">
          <template #default="scope">
              <el-tag class="mx-1 q-mr-md" effect="dark" 
              v-if="scope.row.TemplateType==2" 
              size="small"><span class="microsoft">广告</span> </el-tag>
          </template>
        </el-table-column>
      <el-table-column label="修改时间" width="150">
        <template #default="scope">
          <!-- {{scope.row.CreateByName}}<br/> -->
          <!-- <span class="text-info">{{scope.row.CreateTime}}</span> -->
          <span class="text-info microsoft">{{scope.row.UpdateTime}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="120">
        <template #default="scope">
          <el-button type="default" link :icon="Edit" size="small" @click="goToTemplate(scope.row)" class="microsoft">编辑</el-button>
          <el-dropdown class="q-pl-lg" trigger="click">
            <el-icon class="q-pt-sm" size="16" color="#b1b7cf"><MoreFilled /></el-icon>
            <template #dropdown>
                <el-dropdown-menu class="q-pa-md">
                    <el-dropdown-item @click="getTemplate(scope.row)">
                        <el-button type="default" link :icon="View" size="small" class="microsoft">详情</el-button>
                    </el-dropdown-item>
                    <el-dropdown-item @click="deleteTemplate(scope.row)">
                        <el-button type="default" link :icon="Delete" size="small" class="microsoft">删除</el-button>
                    </el-dropdown-item>
                </el-dropdown-menu>
                </template>
            </el-dropdown>
          
        </template>
      </el-table-column>
    </el-table>
    <!-- 行程、广告图详情 -->
  <temDetails :DetaTem="DetailsVisible" :Details="datas.TemDetails" @close="DetailsVisible=false"/>
</template>

<script setup lang="ts">
import { reactive, ref, inject, onMounted, watch} from "vue";
import LineService from '@/services/LineService'
import ConfigService from '@/services/ConfigService'
import { useUserStore } from "@/store/user";
import { useSellTemplateStore,useSlidesStore } from '@/store'
import { useScreenStore } from "@/store/screen";
import { storeToRefs } from "pinia";
import { injectKeyTemplate } from '@/types/injectKey'
import { createOpEditorLink, createSaleCreateLink, managerTemplateLink } from '@/utils/common'
import { ElLoading, ElMessage, ElMessageBox } from "element-plus";
import { useRouter } from "vue-router";
import UserCard from "@/components/User/UserCard.vue";
import temDetails from "@/components/home/temDetails.vue";
import { Edit,Delete,View,Search } from '@element-plus/icons-vue';
import { VIEWPORT_SIZE, VIEWPORT_VER_SIZE } from '@/configs/canvas'

import { noDataImg } from "@/utils/common";

const slidesStore = useSlidesStore()

const {
  userInfo
} = storeToRefs(useUserStore())
const router = useRouter();
const lines = ref([] as Array < any > ) //线路
const countriesOther = ref(['日本', '韩国', '老挝', '法国', '意大利'] as Array < any > ) //国家
const countries = ref(['日本', '韩国', '老挝', '法国', '意大利'] as Array < any > ) //国家
const colorArrOther = ref([] as Array < any > ); //颜色
const colorArr = ref([] as Array < any > ); //颜色
const seasonArr = ref([] as Array < any > ); //季节
const typeArr = ref([] as Array < any > ); //类型
const sortArr = ref([] as Array < any > ); //排序
const dataList = ref([] as Array < any > ); //模板数据列表

const layouts = ref([
  {Name: '不限',Id:0},
  {Name: '横版',Id:1},
  {Name: '竖版',Id:2},
])
const marketRef = ref<any>()
const RecommendedSizes = ref([
  {Name: '手机海报',width:750,height:1334,Id:1,checked:false},
  {Name: '小红书配图',width:1242,height:1660,Id:2,checked:false},
  {Name: 'PPT(16:9)',width:1920,height:1080,Id:3,checked:false},
  {Name: '公众号首图',width:900,height:383,Id:4,checked:false},
])
const scrollContainer = ref<any>()
const scrollToElement = ref<any>()


const loading = ref(false as any)
const searchData = ref({} as any)
searchData.value = inject(injectKeyTemplate)
const marketStore = useScreenStore()
const { market, ConfigId} = storeToRefs(useScreenStore())

const SalesEditorStore = useSellTemplateStore()
const { SalesEditor, SalesBack } = storeToRefs(useSellTemplateStore())
const personVisible = ref(false)

const model = ref(2)
const showCurrentTemplate = ref<any>()
const imgList = ref<any>()
const deleteLoading = ref<any>(null)
const datas = reactive({
  TemDetails: {},
  TemplateBoxRec: null,// 推荐尺寸
  DetailsVisible: false,
  addVisible: false,
  loading: false,
  ColorValue: '',
  scrollTop: 0,
  moreList:[
      {icon: require("@/assets/img/homeMore0.png"),Name:'添加到桌面'},
      {icon: require("@/assets/img/homeMore1.png"),Name:'关注公众号'},
      {icon: require("@/assets/img/homeMore2.png"),Name:'我的订单'},
      {icon: require("@/assets/img/homeMore3.png"),Name:'意见反馈'},
  ],
  CustomSize:{ // 自定义尺寸
      width: null,
      height: null,
  },
  SwitchingDiagram: [
      require("@/assets/img/left.png"),
      require("@/assets/img/leftActive.png"),
      require("@/assets/img/right.png"),
      require("@/assets/img/rightActive.png"),
  ],
  currentImg: 0,// 当前查看img
})
const DetailsVisible = ref(false)
let TemplateType = 0
if(router.currentRoute.value.path=='/market') model.value=1
if(router.currentRoute.value.path.includes('create')) {
  model.value=2
  if(router.currentRoute.value.fullPath.indexOf('/ad')!=-1) TemplateType = 2
  else if(router.currentRoute.value.fullPath.indexOf('/trip')!=-1) TemplateType = 1
}else if(router.currentRoute.value.path.includes('op')) {
  model.value=0
} 
marketStore.setModel(model.value)
const queryObj = reactive({
  pageIndex: 1,
  pageSize: 20,
  LineId: 0, //线路Id
  Title: '', //模板名称
  CountryName: '', //国家名称
  SeasonName: '', //季节名称
  ColorName: '', //颜色名称
  CountryNames: [], //国家名称
  SeasonNames: [], //季节名称
  ColorNames:  [], //颜色名称
  pageCount: 0, //总页数
  TempType: 0,
  TemplateType: TemplateType,//0 不限 1模版 2广告
  type: 0,
  OrderByType: 1,//排序方式
})
const queryColor = ref({
    DictKey: 'Trip_Template_Color',
    Code: '',
})
const setTemplateType = ref(1)
const ColorList =  ref([])

const tableScrollHandler = ()=>{
    if(queryObj.pageCount>queryObj.pageIndex){
        queryObj.pageIndex++
        queryTemplateBySearchHandler()
    }
  }
  
// 删除监听滚动
const CloseDetails = () => {
  document.querySelector("#scrollId .Details-left").removeEventListener("scroll", handleScroll);
}

const ToggleImg = (text: String) => {
  if(text=='left'){
      if(datas.currentImg>0) {
          datas.currentImg--
          scrollContainer.value.scrollTop = imgList.value[datas.currentImg].imgTop
      }
  }
  if(text=='right'){
      if(datas.currentImg<imgList.value.length-1) {
          datas.currentImg++
          scrollContainer.value.scrollTop = imgList.value[datas.currentImg].imgTop
      }
  }
  
}
// 版型 横版 竖版
const SwitchingVersion = (row: Object) =>{
  queryObj.TempType = row.Id
  search()
}
const setDimension = () => {
  datas.TemplateBoxRec = null
}
const Recommended = (row:Object) => {
  datas.TemplateBoxRec = row
  datas.CustomSize.width = null
  datas.CustomSize.height = null
}
const ConfirmCreation = () => {
  if(!datas.TemplateBoxRec&&(!datas.CustomSize.width&&!datas.CustomSize.height)) {
      return ElMessage.warning({
          showClose: true,
          message: `请选择推荐尺寸或自定义尺寸`,
      })
  }
  if(!datas.TemplateBoxRec&&(!datas.CustomSize.width||!datas.CustomSize.height)){
      if(!datas.width){
          return ElMessage.warning({
              showClose: true,
              message: `请输入自定义宽`,
          })
      }
      if(!datas.height){
          return ElMessage.warning({
              showClose: true,
              message: `请输入自定义高`,
          })
      }
  }
  datas.addVisible = false
  if(datas.TemplateBoxRec&&datas.TemplateBoxRec.Id){
      VIEWPORT_SIZE.value = datas.TemplateBoxRec.width
      VIEWPORT_VER_SIZE.value = datas.TemplateBoxRec.height
      if(datas.TemplateBoxRec.Id==3) {
          datas.TemplateBoxRec = null
          addTemplate(1)
      }else {
          datas.TemplateBoxRec = null
          addTemplate(2)
      }
  }else{
      VIEWPORT_SIZE.value = datas.CustomSize.width
      VIEWPORT_VER_SIZE.value = datas.CustomSize.height
      datas.CustomSize.width = null
      datas.CustomSize.height = null
      addTemplate(2)
  }
}
// 喜欢、不喜欢接口调用
const BeFondOf = (row: Object) => {
  row.checked = !row.checked
}
const addTemplate = (type:number) =>{
  // searchData.value.TemplateType = type
  // marketStore.setMarket(!market)
  // searchData.value.TempId = 0
  slidesStore.ClearSlides()
  router.push({
      path:`/create_template/${type}`
  })
}

const CloseTemplate = () => {
  if(SalesBack.value==1){
      marketStore.setMarket(false)
      SalesEditorStore.setSalesEditor(SalesEditor.value)
  }else SalesEditorStore.setSalesEditor(0)
}
// 删除模版
const deleteTemplate = (item:any) => {
  ElMessageBox.confirm(
      `此操作将删除该${item.TemplateType==2?'广告':'行程'}，是否确定?`,
      '提示',
      {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
      }
  ).then(async () => {
      try {
          let queryMsg = {
              TempId: item.TempId
          }
          deleteLoading.value = ElLoading.service({
              lock:true,
              text:'正在处理'
          })
          let dataRes = await ConfigService.SetDeleteTripTemplate(queryMsg)
          if (dataRes.data.resultCode == 1) {
              queryObj.pageIndex = 1
              ElMessage({
                  showClose: true,
                  message: `删除${item.TemplateType==2?'广告':'行程'}成功`,
                  type: 'success',
              })
              await queryTemplateBySearchHandler()
          }else {
              ElMessage({
                  showClose: true,
                  message: `删除${item.TemplateType==2?'广告':'行程'}失败`,
                  type: 'warning',
              }) 
          }
          deleteLoading.value.close()
          deleteLoading.value = null
      } catch (error) {}
  }).catch(() => {})
  
}
// 图片滚动翻页
const handleScroll = (e) =>{
  let temp = document.querySelector("#scrollId .Details-left").scrollTop;
  let PageImageList = imgList.value
  for(let i=0;i<PageImageList.length;i++){
      if(temp>=PageImageList[i].imgTop&&datas.currentImg!=i) datas.currentImg = i
  }
}
// 查看所有子模版
const getTemplate = async (item:any) => {
  DetailsVisible.value = true
  datas.TemDetails = item
}

/**
* 页面跳转
*/
const goToTemplate = (item: any) => {
    searchData.value.currentMenu = null
    if((searchData.value.TempId2&&searchData.value.TempId2!=item.TempId)||!searchData.value.TempId2) slidesStore.ClearSlides()
    let url = ''
    url = managerTemplateLink(item.TempId,item.TemplateType)
    if(url!='') {
        router.push({
            path:url
        })
    }
}

const search = (type:any) => {
    let lastItem
    if(type==1){
        if(queryObj.CountryList.length>1){
            lastItem = queryObj.CountryList.length-1
            if(queryObj.CountryList[lastItem]=='') queryObj.CountryList = ['']
            else if(queryObj.CountryList[lastItem]!=''&&queryObj.CountryList.indexOf('')!=-1) queryObj.CountryList.splice(0,1)
        }
    }else if(type==2){
        if(queryObj.SeasonList.length>1){
            lastItem = queryObj.SeasonList.length-1
            if(queryObj.SeasonList[lastItem]=='') queryObj.SeasonList = ['']
            else if(queryObj.SeasonList[lastItem]!=''&&queryObj.SeasonList.indexOf('')!=-1) queryObj.SeasonList.splice(0,1)
        }
    }else if(type==3){
        if(queryObj.ColorList.length>1){
            lastItem = queryObj.ColorList.length-1
            if(queryObj.ColorList[lastItem]=='') queryObj.ColorList = ['']
            else if(queryObj.ColorList[lastItem]!=''&&queryObj.ColorList.indexOf('')!=-1) queryObj.ColorList.splice(0,1)
        }
    }
    queryObj.pageIndex = 1
    queryTemplateBySearchHandler()
}
/***
* 获取模板市场分页列表
*/
const queryTemplateBySearchHandler = async () => {
  const parmas = router.currentRoute.value.params
  if(parmas.temptype) queryObj.TempType = parseInt(parmas.temptype.toString())
  loading.value = true
  try {
      if(queryObj.pageIndex == 1) dataList.value =[]
      let pageRes = await ConfigService.GetManagerTripTemplatePage(queryObj);
      if (pageRes.data.resultCode == 1) {
          let arrList = function(list){
              list.forEach(x=>{
                  x.checked = false
              })
          }
          arrList(pageRes.data.data.pageData)
          dataList.value = dataList.value.concat(pageRes.data.data.pageData);
          queryObj.pageCount = pageRes.data.data.pageCount;
      }
      loading.value = false
  } catch (error) {
      loading.value = false
  }
}

//线路切换
const onLineChangeHandler = (lineId: number) => {
  queryObj.LineId = lineId;
  search()
}
//国家切换
const onCountryNameChangeHandler = (row: Object) => {
  if(row=='') {
      queryObj.CountryName = ''
      queryObj.CountryNames = []
      countriesOther.value.forEach(x=>{
          x.checked = false
      })
      countries.value.forEach(x=>{
          x.checked = false
      })
  }else{
      queryObj.CountryName = row.CountryName;
      if(!row.checked) {
          row.checked = true
          queryObj.CountryNames.push(row.CountryName)
      }else{
          row.checked = false
          let list = queryObj.CountryNames.filter(x=>{
              if(x!=row.CountryName) return x
          })
          queryObj.CountryNames = list
          if(queryObj.CountryNames.length==0) queryObj.CountryName = ''
      }
  }
  search()
}

//季节切换
const onSeasonNameChangeHandler = (row: Object) => {
  if(row=='') {
      queryObj.SeasonName = ''
      queryObj.SeasonNames = []
      seasonArr.value.forEach(x=>{
          x.checked = false
      })
  }else{
      queryObj.SeasonName = row.SeasonName;
      if(!row.checked) {
          row.checked = true
          queryObj.SeasonNames.push(row.SeasonName)
          // if(queryObj.SeasonNames.length==4) {
          //     queryObj.SeasonName = ''
          //     seasonArr.value.forEach(x=>{
          //         x.checked = false
          //     })
          // }
      }else{
          row.checked = false
          let list = queryObj.SeasonNames.filter(x=>{
              if(x!=row.SeasonName) return x
          })
          queryObj.SeasonNames = list
          if(queryObj.SeasonNames.length==0) queryObj.SeasonName = ''
      }
  }
  search()
}

//类型切换
const onTypeChangeHandler = (Type: string,num: Number) => {
  if(num==1){
      queryObj.OrderByType = Type;
  }else if(num==2){
      setTemplateType.value = Type
  } else{
      searchData.value.MarketTemplateType = Type
      queryObj.TemplateType = Type;
  }
  
  if(num!=2) search()
}

//颜色切换
const onColorNameChangeHandler = (row: Object) => {
  if(row=='') {
      queryObj.ColorName = ''
      queryObj.ColorNames = []
      colorArr.value.forEach(x=>{
          x.checked = false
      })
  }else{
      queryObj.ColorName = row.ColorName;
      if(!row.checked) {
          row.checked = true
          queryObj.ColorNames.push(row.ColorName)
      }else{
          row.checked = false
          let list = queryObj.ColorNames.filter(x=>{
              if(x!=row.ColorName) return x
          })
          queryObj.ColorNames = list
          if(queryObj.ColorNames.length==0) queryObj.ColorName = ''
      }
  }
  search()
}

/**
* 获取线路列表
*/
const getLinesHandler = async () => {
  try {
      let response = await LineService.GetLineListAsync()
      if (response.data.resultCode == 1) {
          lines.value = response.data.data;
      }
  } catch (error) {
      
  }
}

/**
* 获取模板市场查询条件
*/
const getTemplateQuery = async () => {
  try {
      let res = await ConfigService.GetTemplateQueryAsync();
      if (res.data.resultCode == 1) {
          var tempData = res.data.data;
          let arrList = function(list) {
              list.forEach(x => {
                  x.checked = false
              });
          }
          //国家
          if (tempData && tempData.CountryList) {
            countries.value = tempData.CountryList
          }
          //颜色
          if (tempData && tempData.ColorList) {
            //   for(let i=0;i<ColorList.length;i++){
            //       colorArr.value.push({
            //           ColorName: ColorList[i].ColorName,
            //           ColorValue: ColorList[i].ColorValue,
            //           checked: false,
            //       })
            //   }
          }
          //季节
          if (tempData && tempData.SeasonList) {
              arrList(tempData.SeasonList)
              seasonArr.value = tempData.SeasonList;
          }
          //类型
          for(let i=0;i<3;i++){
              let text = '不限'
              if(i==1) text = '行程'
              if(i==2) text = '广告'
              typeArr.value.push({
                  type:i,
                  typeName:text
              })
          }
          for(let i=0;i<2;i++){
              let text = '综合排序'
              if(i==1) text = '最新模板'
              sortArr.value.push({
                  type:i,
                  typeName:text
              })
          }
      }
  } catch (error) {
      
  }
}
const scrollingHandler = () =>{
  if(marketRef.value && !loading.value){
      let maxHeight = marketRef.value.scrollHeight - marketRef.value.offsetHeight
      let scrollTop = marketRef.value.scrollTop
      if(maxHeight - scrollTop==0 && queryObj.pageCount > queryObj.pageIndex) {
          queryObj.pageIndex++
          queryTemplateBySearchHandler()
      }
      datas.scrollTop =  scrollTop
  }
  
}

const getColor = async () => {
    let response = await LineService.GetParentColor(queryColor.value)
    if (response.data.resultCode == 1) {
        ColorList.value = response.data.data
    }
}

getColor()
getLinesHandler();
getTemplateQuery();
queryTemplateBySearchHandler();

onMounted(()=>{
  // marketRef.value.addEventListener("scroll", scrollingHandler);
})
</script>

<style lang="scss" scoped>
  @font-face {
      font-family: "aliMarketfont";
      font-weight: 400;
      src: url("//at.alicdn.com/wf/webfont/MQHUV6e56ce5/285OveHVCHM7.woff2") format("woff2"),
          url("//at.alicdn.com/wf/webfont/MQHUV6e56ce5/pz3etdXOpfWP.woff") format("woff");
      font-display: swap;
  }
  ::-webkit-scrollbar {
      width: 9px;
      background-color: #E9E9E9;
      border-radius: 5px;
  }
  .MarketDetaSwR div:hover{
      background: url('../../assets//img/rightActive.png') no-repeat;
      background-size: 100% 100%;
  }
  .MarketDetaSwR div{
      background: url('../../assets//img/right.png') no-repeat;
      background-size: 100% 100%;
  }
  .MarketDetaSwR{
      right: -177px;
  }
  .MarketDetaSwL div:hover{
      background: url('../../assets//img/leftActive.png') no-repeat;
      background-size: 100% 100%;
  }
  .MarketDetaSwL div{
      background: url('../../assets//img/left.png') no-repeat;
      background-size: 100% 100%;
  }
  .MarketDetaSwL{
      left: -177px;
  }
  .MarketDetaSw div{
      width: 104px;
      height: 104px;
  }
  .MarketDetaSw{
      position: absolute;
      top: 393px;
  }
  .Details-right{
      width: 256px;
      padding: 0 33px;
  }
  .Details-leftBox img{
      width:100%;
      height:auto;
      margin-bottom: 30px;
  }
  .Details-leftBox{
      width: 100%;
      height: 806px;
  }
  .Details-left{
      overflow: auto;
  }
  .Details-container{
      height: 806px;
      width: 1097px;
      padding: 0 19px 0 19px;
      position: relative;
  }
  .addTemplateInput {
      ::v-deep(.el-input__wrapper){
          background-color: #EFEFEF;
          box-shadow: 0 0 0
      }
  }
  .MarketRec{
      margin-top: 23px;
      margin-bottom: 24px;
  }
  .addTemplateBoxRec.active{
      background: #FF674D;
  }
  .addTemplateBoxRec{
      line-height: 36px;
      background: #EFEFEF;
      padding: 0 15px;
      margin-bottom: 17px;
  }
  .addTemplateBox{
      padding: 0 41px;
  }
  .marketTagDown .el-check-tag{
      line-height: 22px;
      margin-left: 13px;
      margin-right: 0;
  }
  .marketTagDown {
      width: 409px;
  }
  .marketTagDown.marketTagDown{
      width: 309px;
  }
  .MarketButton.active.active2{
      margin-right: 0;
  }
  .MarketButton.active.active2::after{
      background: none;
  }
  .MarketButton{
      width: 90px;
      height: 36px;
      line-height: 36px;
      font-size: 14px;
      text-align: center;
      color: #9EA2B3;
      position: relative;
      margin-right: 13px;
  }
  .MarketButton.active{
      background: #F4F7FE;
      border-radius: 6px;
      -webkit-border-radius: 6px;
      -moz-border-radius: 6px;
      -ms-border-radius: 6px;
      -o-border-radius: 6px;
      color: #1C1C1C;
  }
  .MarketButton.active::after{
      content: "";
      position: absolute;
      left: 35.5px;
      bottom: 0;
      width: 19px;
      height: 4px;
      background: linear-gradient(134deg, #649DED, #570AD8);
  }
  .MarketType{
      margin-top: 29px;
      margin-bottom: 33px;
      /* background: #fff; */
  }
  .marketTag-color{
      margin-bottom: 13px;
      margin-left: 15px;
      margin-right: 31px;
      text-align: center;
  }
  .marketTagTitleBox{
      padding-right: 30px;
  }
  .marketTag-Title span:first-child{
      font-weight: bold;
      color: #1C1C1C;
  }
  .marketTag-Title{
      font-family: PingFang SC;
      font-size: 14px;
  }
  .marketTag-from{
      margin-top: 38px;
  }
  
  .MarketHeader>div{
      padding: 10px 22px; 
      max-width:1440px; 
      margin:0 auto;
  }
  .MarketHeader{
      position: fixed;
      left: 0;
      right: 0;
      top: 0;
      z-index: 2;
      background: #E3ECFF;
      animation:myHeader 1s;
    -webkit-animation:myHeader 1s;
  }
      @keyframes myHeader
      {
          from {top: -100px;}
          to {top: 0px;}
      }

      @-webkit-keyframes myHeader 
      {
          from {top: -100px;}
          to {top: 0px;}
      }
  
 
  
  
  
  .Market-select-line{
      width: 1px;
      height: 14px;
      background: #F4F4F4;
      right: 61px;
  }
  .Market-select ::v-deep(.el-input__wrapper){
      /* box-shadow: 0 0 0; */
      border-radius: 8px 0 0 8px;
      padding: 1px 23px;
  }
  ::v-deep(.el-input__wrapper.is-focus){
      /* box-shadow: 0 0 0; */
  }
  ::v-deep(.el-input-group__append){
      box-shadow: 0 0 0;
      background: #fff;
  }
  .input-with-select{
      height: 46px;
  }
  .MarketAdd{
      width: 90px;
      height: 36px;
      background: linear-gradient(134deg, #649DED, #570AD8);
      border-radius: 8px;
      font-family: PingFang SC;
      font-weight: 400;
      font-size: 14px !important;
      color: #FFFFFF;
      line-height: 36px;
      text-align: center;
  }
  .Market-fromBj{
      height: 486px;
      background: url('../../assets//img/homeBJ.png') no-repeat;
      background-size: auto 100%;
      position: fixed;
      left: 0;
      right: 0;
      top: 0;
      z-index: 1;
  }
  .Market-from{
      background: linear-gradient(0deg, #FFF, #E3ECFF);
      height: 90vh;
      overflow: auto;
  }
  .marketTag .el-check-tag.is-checked,.marketTag .el-check-tag{
      padding: 0;
  }
  .marketTag{
      padding: 20px 0px 0 30px;
      width: 460px;
      overflow: hidden;
      /* height: 245px; */
  }
  .marketTag+.marketTag{
      margin-left: 32px;
  }
  .colorMark:hover .ColorNameBox {
      display: block;
  }
  .ColorNameBox{
      width: 0;
      display: none;
      left: 0;
      top: -30px;
  }
  .ColorName{
      background: black;
      color: #fff;
      padding: 2px 10px;
      border-radius: 3px;
      margin-left: -10px;
  }
  .ColorNameBJ{
      width: 0px;
      height: 0px;
      border: 5px solid transparent;
      border-top-color: black;
      display: block;
      margin-left: 2px;
  }
  .colorMark{
      width: 28px;
      height: 28px;
      position: relative;
      display: inline-block;
      border-radius: 50%;
      margin: 4px;
      background: #fff;
      border: 4px solid #eee;
  }
  .aliMarketfont {
      font-family: aliMarketfont;
  }
  .el-check-tag.is-checked{
      background: #000;
      color: #fff;
  }
  .el-check-tag {
      width: 86px;
      height: 36px;
      margin-right: 14px;
      margin-bottom: 18px;
      line-height: 36px;
      border-radius: 6px;
      text-align: center;
      background: #FFF;
      font-weight: 400 !important;
      font-size: 14px !important;
  }
  .MarketIndexListBox{
      /* width:calc(20% - 10px); */
      /* margin: 10px 10px 0 0;  */
      /* padding:5px; */
      position: relative;
      overflow: hidden;
      box-shadow: 0px 0px 20px 0px rgba(76,87,125,0.2)!important;
      grid-row-start: auto;margin-bottom: 20px;break-inside: avoid;
      max-height: 362px;
      min-height: 173px;
  }
  .MarketIndexList{
      width: 100%;
      position: relative;
      overflow: hidden;
  }
  .MarketIndexList-Hover{
      z-index: 1;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(23,23,23,0.5);
      opacity: 0;
      transition: opacity 0.5s ease;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      color: $themeHoverColor;
  }
  .MarketIndexListBox:hover .MarketIndexList-Hover{
      opacity: 1;
  }
  .MarketIndexList-Hover div span{
      /* display: inline-block; */
      /* background: #fff; */
      /* border-radius: 4px; */
      /* padding: 0 10px 3px 10px; */
  }
  .MarketIndexListBox:hover{
      top: -5px;
      
  }
  
  .MarketIndexList-img{
      width: 100%;
      /* height: 0;
      position: relative;
      padding-bottom: 56.25%;
      overflow: hidden; */
      border-radius: 6px;
  }
  .MarketIndexList-img img{
      /* position: absolute;
      top: 0;
      left: 0;
      height: 100%; */
      width: 100%;
      /* height: auto;
      position: absolute; */
      object-fit: cover;
  }
  .MarketIndexList-text{
      font-size: 14px;
      padding: 10px;
      padding-bottom: 5px;
  }
  .MarketIndexList-text span{
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
  }
  .MarketVerticalLine{
      width: 1px;
      height: 80%;
      background: #dcdfe6;
      margin-right: 30px;
      margin-top: 5px;
  }
  .MarketIndexButtom{
      color: #ffff;
      width: 86px;
      height: 36px;
      letter-spacing: 1px;
      font-size: 14px !important;
      border-radius: 6px;
  }
  .MarketIconAbsolute{
      width: 36px;
      height: 36px;
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      text-align: center;
      line-height: 36px;
      color: #B9B9B9;
      z-index: 2;
  }
  .MarketIndexButtomIcon>div:hover .el-icon, .MarketIndexButtomIcon>div:hover .IconLike{
      color: #fff;
  }
  .MarketIndexButtomIcon>div:hover .MarketOpa2{
      opacity: 0.22;
  }
  .MarketIndexButtomIcon>div{
      position: relative;
      width: 36px;
      height: 36px;
  }
  .MarketOpa2{
      width: 36px;
      height: 36px;
      background: #FFFFFF;
      border-radius: 6px;
      opacity: 0;
  }
  .MarketIndexButtomIcon{
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      padding: 14px 16px;
  }
  .MarketIndexButtomBox{
      position: absolute;
      left: 0;
      right: 0;
      bottom: 15px;
      text-align: center;
  }
  .layout-item{
      width: 180px;
  }
  .el-check-tag.el-check-tagW76{
      width: 76px;
      margin-left: 0;
  }
  .addTemplateBoxRec.addTemplateBoxRecw136{
      width: 136px;
  }
  .MarketAdd.MarketAddw140{
      width: 140px;
      height: 42px;
      line-height: 42px;
  }
  .TemSel{
    width: 120px;
  }
</style>