<template>
  <div id="YS-data-container" v-loading="dataLoading" element-loading-text="指标数据加载中，请勿切换到其他页面">
    <div class="search-zone">
      <div class="search-row">
        <el-cascader @change="searchList" :options="classifyList" v-model="typesList" clearable
          placeholder="请选择分类" class="search-item"
          :props="{
            value:'Type',
            label:'Type',
            children:'Child'
          }"></el-cascader>
        <el-select v-model="searchParams.Frequency" class="search-item" placeholder="请选择频度" clearable @change="searchList">
          <el-option :label="item" :value="item" v-for="item in frequencyList" :key="item"></el-option>  
        </el-select>
        <el-select v-model="searchParams.DataState" class="search-item" placeholder="请选择指标数据状态" clearable @change="searchList">
          <el-option :label="item.label" :value="item.value" v-for="item in dataStatusList" :key="item.value"></el-option>  
        </el-select>
        <el-select v-model="edbCheckList" multiple filterable remote clearable collapse-tags class="search-item edb-filter"
          reserve-keyword placeholder="指标ID/指标名称" :remote-method="remoteMethod" 
          v-loadMore="searchLoad" @clear="searchList" @remove-tag="removeEdbFilterTag" ref="edbFilterRef" >
          <el-option v-for="item in edbFilterDataList" :key="item.IndexCode"
            :label="item.IndexName" :value="item.IndexCode">
          </el-option>
        </el-select>
        <el-checkbox label="列表全选" v-model="isCheckAll" :indeterminate="isCheckIndeterminate" style="margin: 0 20px 10px 0;"
        @change="listCheckAllChange"></el-checkbox>
      </div>
      <el-button type="primary" style="margin: 0 0 10px 0;padding:12px 18px ;" @click="addToEdbBase" 
      :disabled="addBaseDisable">添加到指标库</el-button>
    </div>
    <div class="table-zone">
      <el-table :data="tableData" border @sort-change="sortChange"  @selection-change="selectionChange"
      ref="edbDataRef" @select="selectHandle" @select-all="selectAllHandle">
        <el-table-column type="selection" min-width="50" align="center"></el-table-column>
        <el-table-column label="指标ID" align="center" prop="IndexCode">
          <template slot-scope="{row}">
            {{row.IndexCode}}
          </template>
        </el-table-column>
        <el-table-column label="指标名称" align="center" prop="IndexName">
          <template slot-scope="{row}">
            {{row.IndexName}}
          </template>
        </el-table-column>
        <el-table-column label="频度" align="center" prop="Frequency" width="80">
          <template slot-scope="{row}">
            {{row.Frequency}}
          </template>
        </el-table-column>
        <el-table-column label="单位" align="center" prop="Unit" >
          <template slot-scope="{row}">
            {{row.Unit}}
          </template>
        </el-table-column>
        <el-table-column label="指标开始时间" align="center" prop="StartDate"
        sortable="custom">
          <template slot-scope="{row}">
            {{row.StartDate}}
          </template>
        </el-table-column>
        <el-table-column label="指标最新时间" align="center" prop="EndDate"
        sortable="custom" >
          <template slot-scope="{row}">
            {{row.EndDate}}
          </template>
        </el-table-column>
        <el-table-column label="更新时间" align="center" prop="ModifyTime" sortable="custom">
          <template slot-scope="{row}">
            {{row.ModifyTime}}
          </template>
        </el-table-column>
        <el-table-column label="预计发布时间" align="center" prop="ReleaseTime" sortable="custom" >
          <template slot-scope="{row}">
            {{row.ReleaseTime}}
          </template>
        </el-table-column>
        <el-table-column label="指标数据状态" align="center" prop="DataState" >
          <template slot-scope="{row}">
            {{row.DataState?
            dataStatusList.find(it => it.value == row.DataState)?dataStatusList.find(it => it.value == row.DataState).label:''
            :'正常更新'}}
          </template>
        </el-table-column>
        <el-table-column label="分类" align="center" prop="TypeAll" >
          <template slot-scope="{row}">
            {{row.TypeAll}}
          </template>
        </el-table-column>
      </el-table>
    </div>
    <m-page class="table-page" v-show="total"
    :total="total" :pageSize="searchParams.PageSize"
    :page_no="searchParams.CurrentIndex"
    @handleCurrentChange="pageNumberChange"/>
    <!-- 指标重复弹窗 -->
    <el-dialog :visible.sync="checkFailShow" :close-on-click-modal="false" :modal-append-to-body='false' 
			width="600px" title="操作提示">
			<div class="check-fail-box">
				<div>
					<div style="margin-bottom: 20px;">
            {{ indexAllExist?'本次添加的指标均已在指标库中，请勿重复添加！':'指标库中已存在以下指标，会自动过滤！' }}
          </div>
					<div v-for="(item,index) in existIndexList" class="exist-index-item" @click="existIndexClick(item)">
						{{ index+1+'、'+item.text }}
					</div>
				</div>
				<div class="check-fail-button">
					<el-button type="primary" @click="edbCheckFinished" style="width: 120px;">知道了</el-button>
				</div>
			</div>
		</el-dialog>
    <!-- 添加到指标库 -->
    <el-dialog :visible.sync="addToEbdDiaShow" :close-on-click-modal="false" :modal-append-to-body='false' 
    width="980px" title="添加到指标库">
      <div class="edb-table-box">
        <div class="edb-table-preview">
          <table width="auto" border="0">
            <thead>
              <tr v-for="(item, index) in edbTableHeadKey" :key="item">
                <td class="sticky" style="left: 0;text-align: center;">
                  {{ edbTableHeadData.get(item) }}
                </td>
                <td v-for="(data, sub_index) in edbIndexDatas" :key="sub_index" :colspan="2" 
                :class="highLightIndex.includes(data.EdbName) && item=='EdbName' ?'exist-highlight':''">
                  <template v-if="item === 'ClassifyId'">
                    <el-cascader :options="options" v-model="data[item]" placeholder="请选择所属目录"
                    size="mini" :disabled="!data.Source"
                    :props="{label: 'ClassifyName',
                      value: 'ClassifyId',
                      children: 'Children',
                      checkStrictly: true,
                      emitPath:false}">
                    </el-cascader>
                  </template>
                  <template v-else-if="item === 'Unit'">
                    <el-autocomplete
                    :disabled="!data.Source"
                      v-model.trim="data[item]"
                      :fetch-suggestions="querySearchUnit"
                      placeholder="请输入单位"
                      suffix-icon="el-icon-arrow-down"
                      size="mini"
                    ></el-autocomplete>
                  </template>
                  <template v-else-if="item === 'Frequency'">
                    <el-select v-model="data[item]" placeholder="请选择频度" size="mini" :disabled="!data.Source">
                      <el-option :label="item" :value="item"
                      v-for="item in edbFrequencyList" :key="item"></el-option>
                    </el-select>
                  </template>
                  <template v-else-if="item === 'EdbName'">
                    <el-input v-model.trim="data[item]" placeholder="请输入指标名称" size="mini" :disabled="!data.Source"></el-input>
                  </template>
                  <template v-else>
                    <div style="padding: 0 7px;">{{ data[item] }}</div>
                  </template>
                </td>
              </tr>
            </thead>
            <tbody v-if="edbIndexDatas && edbIndexDatas.length>0">
              <tr v-for="(item,index) in edbIndexDatas[0].DataList.length" :key="index">
                <td :rowspan="edbIndexDatas[0].DataList.length" v-if="index==0"
                class="sticky" style="left: 0;text-align: center;">
                  数据详情
                </td>
                <template v-for="(item1,index1) in edbIndexDatas.length">
                  <td>{{ edbIndexDatas[index1].DataList[index].DataTime }}</td>
                  <td>{{ edbIndexDatas[index1].DataList[index].Value }}</td>
                </template>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="dia-bot">
          <el-button @click="addToEbdDiaShow=false" style="width: 120px;">取消</el-button>
          <el-button type="primary" @click="ysEdbSaveHandle" style="width: 120px;margin-left: 30px;" :loading="saveLoading">保存</el-button>
        </div>
      </div>
		</el-dialog>
  </div>
</template>

<script>
import mPage from '@/components/mPage.vue'
import { dataBaseInterface,dataInterence,smmDataInterface} from '@/api/api.js'
import { frequencyArr} from '../databaseComponents/util';

  export default {
    name:'ysTargetBase',
    components:{mPage},
    data() {
      return {
        searchParams:{
          Types:'',
          Frequency:'',
          DataState:'',
          CurrentIndex:1,
          PageSize:10,
          SortParam:'',
          SortType:'',
          IndexCodes:''
        },
        typesList:[],
        options:[],
        isCheckAll:false,
        isCheckIndeterminate:false,
        // 标志列表当前是全选状态还是不是全选状态和 isCheckAll不一样
        checkAllStatus:false,
        classifyList:[],
        frequencyList: ["日度", "周度", "月度", "季度", "半年", "年度"],
        edbFrequencyList:frequencyArr,
        dataStatusList:[{value:'normal',label:'正常更新'},{value:'ceased',label:'已停更'},{value:'irregular',label:'更新依赖外部会有不定期延迟'}],
        forSearchParams:{
          Keyword:'',
          CurrentIndex:1,
          PageSize:20,
        },
        searchHaveMore: false,
        edbFilterDataList:[],
        // 选择的指标名称筛选项
        edbCheckList:[],
        // edb的过滤选项是否有变化，用于失焦是判断是否需要请求
        hasEdbFilterChange:false,
        selectionReactCancel:false, // 是否不触发 selection的逻辑
        tableData:[],
        tableDataIds:[],
        total:0,
        dataLoading:false,
        tableDataCheckedList:[],
        // 添加到指标库
        existIndexList:[],
        checkFailShow:false,
        indexAllExist:false,//指标是否都存在
        edbIndexDatas:[],
        edbTableHeadKey: [
          "ClassifyId",
          "Unit",
          "Frequency",
          "EdbName",
          "EdbCode",
        ],
        edbTableHeadData:new Map([
          ["ClassifyId", "所属目录"],
          ["Unit", "单位"],
          ["Frequency", "频度"],
          ["EdbName", "指标名称"],
          ["EdbCode", "指标ID"],
        ]),
        BatchList:[],
        addToEbdDiaShow:false,
        highLightIndex:[],
        saveLoading:false
      }
    },
    computed:{
      addBaseDisable(){
        return !(this.isCheckAll || this.isCheckIndeterminate ) || (!(this.tableData && this.tableData.length>0))
      }
    },
    watch:{
      edbCheckList(value){
        this.hasEdbFilterChange=true
      },
      typesList(value){
        if(value && value.length>0){
          this.searchParams.Types = value.join(',')
        }else{
          this.searchParams.Types=''
        }
      }
    },
    created() {
      this.getList()
      this.getYsClassifyList()
    },
    mounted(){
      // el-select 的@blur绑定事件不生效代替方法
      this.$refs.edbFilterRef.$refs.input.blur=()=>{
        if(this.hasEdbFilterChange){
          this.searchList()
          this.hasEdbFilterChange=false
        }
      }
    },
    methods: {
      //获取有色数据库数据列表
      getList(type){
        if(this.edbCheckList && this.edbCheckList.length>0){
          this.searchParams.IndexCodes = this.edbCheckList.join(',')
        }else{
          this.searchParams.IndexCodes = ''
        }
        smmDataInterface.getYsDataList(this.searchParams).then(res=>{
          if(res.Ret == 200){
            this.tableData=res.Data.List || []
            this.total = res.Data.Paging.Totals || 0
            if(this.tableData.length>0){
              this.tableDataIds = this.tableData.map(it => it.IndexCode)
            }else{
              this.tableDataIds = []
            }
            if(type == 'adjustSelection'){
              this.adjustSelection()
            }else{
              if(this.searchParams.Types || this.searchParams.Frequency || this.searchParams.DataState || this.searchParams.IndexCodes){
                this.isCheckAll=true
                this.checkAllStatus=true
                this.isCheckIndeterminate=false
              }else{
                this.isCheckAll=false
                this.checkAllStatus=false
                this.isCheckIndeterminate=false
              }
              this.listCheckAllChange(this.isCheckAll)
            }
          }
        })
      },
      // 获取有色数据库分类列表
      getYsClassifyList(){
        smmDataInterface.getYsTypeDataList().then(res=>{
          if(res.Ret == 200){
            this.classifyList=res.Data || []
          }
        })

      },
      // 指标名称的远程搜索方法
      remoteMethod(text){
        this.forSearchParams.Keyword = text.trim()
        this.forSearchParams.CurrentIndex = 1;
        if(this.forSearchParams.Keyword){
          this.searchApi()
        }else{
          this.edbFilterDataList = [];
        }
      },
      searchApi(){
        smmDataInterface.getYsDataList(this.forSearchParams).then(res=>{
          if(res.Ret == 200){
            let arr=res.Data.List || []
            let {Paging}=res.Data
            this.searchHaveMore = this.forSearchParams.CurrentIndex < Paging.Pages;
            this.edbFilterDataList = this.forSearchParams.CurrentIndex === 1 ? arr : this.edbFilterDataList.concat(arr);
          }
        })
      },
      searchLoad(){
        if(!this.searchHaveMore) return;
        this.forSearchParams.CurrentIndex++
			  this.searchApi();
      },
	    removeEdbFilterTag: _.throttle(function() {
        this.searchList()
		  },1000),
      searchList(type){
        this.searchParams.CurrentIndex=1
        this.getList(type)
      },
      pageNumberChange(page_no){
        this.searchParams.CurrentIndex=page_no
        this.getList('adjustSelection')
      },
      sortChange({prop,order}){
        this.searchParams.SortType = order?order==='ascending'?'asc':'desc':''
        this.searchParams.SortParam = order?prop:''
        this.searchList('adjustSelection')
      },
      selectionChange(val){
        if(this.selectionReactCancel) return 
        // selectAllHandle的触发在selectionChange后面，将selectionChange的逻辑延迟一下
        setTimeout(()=>{
          // 去重
          let duplicateArr = Array.from(new Set(this.tableDataCheckedList))
          
          if((duplicateArr.length == this.total && (!this.checkAllStatus))
          || (duplicateArr.length == 0 && this.checkAllStatus)){
            this.isCheckAll = true
            this.isCheckIndeterminate=false
          }else if((duplicateArr.length == 0 && (!this.checkAllStatus))
          || (duplicateArr.length == this.total && this.checkAllStatus)){
            this.isCheckAll = false
            this.isCheckIndeterminate=false
          }else{
            this.isCheckAll = false
            this.isCheckIndeterminate=true
          }
        },1)

      },
      selectHandle(selection,row){
        if(this.selectionReactCancel) return 

        let check = false; // 从tableDataCheckedList 添加还是删除
        if(selection.some(it => it.IndexCode == row.IndexCode)){
          // 勾选
          if(this.checkAllStatus){
            check=false
          }else{
            check=true
          }
        }else{
          // 取消勾选
          if(this.checkAllStatus){
            check=true
          }else{
            check=false
          }
        }
        if(check){
          this.tableDataCheckedList.push(row.IndexCode)
        }else{
          this.tableDataCheckedList=this.tableDataCheckedList.filter(it => it!=row.IndexCode)
        }
      },
      selectAllHandle(selection){
        if(this.selectionReactCancel) return 

        let check = false; // 从tableDataCheckedList 添加还是删除
        if(selection && selection.length>0){
          // 全选
          if(this.checkAllStatus){
            check=false
          }else{
            check=true
          }
        }else{
          // 全不选
          if(this.checkAllStatus){
            check=true
          }else{
            check=false
          }
        }
        if(check){
          this.tableDataCheckedList =  [...this.tableDataCheckedList,...this.tableDataIds]
        }else{
          this.tableDataCheckedList = this.tableDataCheckedList.filter(it => !this.tableDataIds.includes(it))
        }
      },
      listCheckAllChange(value){
        this.tableDataCheckedList=[]
        this.checkAllStatus=value
        if(value){
          // 全选
          this.$refs.edbDataRef && this.$refs.edbDataRef.clearSelection()
          this.$refs.edbDataRef && this.$refs.edbDataRef.toggleAllSelection()
        }else{
          //全不选
          this.$refs.edbDataRef && this.$refs.edbDataRef.clearSelection()
        }
      },
      adjustSelection(){
        this.selectionReactCancel=true
        if(!this.checkAllStatus){
          this.tableDataCheckedList.map(it =>{
            let row = this.tableData.find(da => da.IndexCode==it)
            if(row){
              setTimeout(()=>{
                this.$refs.edbDataRef.toggleRowSelection(row,true)
              },10)
            }
          })
        }else{
          this.$refs.edbDataRef.toggleAllSelection()
          this.tableDataCheckedList.map(it =>{
            let row = this.tableData.find(da => da.IndexCode==it)
            if(row){
              setTimeout(()=>{
                this.$refs.edbDataRef.toggleRowSelection(row,false)
              },50)
            }
          })
        }
        setTimeout(()=>{
          this.selectionReactCancel=false
        },50)
      },
      // 添加指标库
      addToEdbBase:_.throttle(function() {
        if(this.dataLoading || this.addBaseDisable) return 
        let params={
          Types:this.searchParams.Types,
          Frequency:this.searchParams.Frequency,
          DataState:this.searchParams.DataState,
          SelectAll:this.checkAllStatus,
          SelectCode:this.searchParams.IndexCodes,
          EdbCode:this.tableDataCheckedList.join(',')
        }
        // return 
        smmDataInterface.getYsEdbCodeCheck(params).then(res=>{
          if(res.Ret == 200){
            // console.log(res,'res');
            if(res.Data.IndexExist){
              // 有重复
              this.existIndexList=[]
              let existEdbInfo=res.Data.ExistEdbInfo || []
              let text=''
              existEdbInfo.map(item =>{
                text=`${item.EdbName}（${item.EdbCode}）`
                this.existIndexList.push({text,code:item.UniqueCode,id:item.EdbInfoId,Types:item.ClassifyId,edbCode:item.EdbCode})
              })
              this.checkFailShow=true
              this.indexAllExist=res.Data.ExistAll+'' =='false' ? false :res.Data.ExistAll || true
            }else{
              // 没有重复
              this.getTargetData()
            }
          }
        })
      },300),
      edbCheckFinished(){
        if(!this.indexAllExist){
          this.getTargetData()
        }
        this.checkFailShow=false
      },
      getTargetData(){
        this.dataLoading=true
        this.getMenu()
        this.getTargetUnitList()
        let existEdbList = this.existIndexList.map(item => item.edbCode)
        let afterFilterList=[]
        if(this.checkAllStatus){
          afterFilterList = Array.from(new Set([...this.tableDataCheckedList,...existEdbList]))
        }else{
          afterFilterList= this.tableDataCheckedList.filter(item => !existEdbList.includes(item))
        }

        // return 
        let params={
          Types:this.searchParams.Types,
          Frequency:this.searchParams.Frequency,
          DataState:this.searchParams.DataState,
          SelectAll:this.checkAllStatus,
          SelectCode:this.searchParams.IndexCodes,
          EdbCode:afterFilterList.join(',')
        }
        smmDataInterface.getYsEdbCodeSearch(params).then(res => {
          if(res.Ret == 200){
            let stockList = res.Data.StockSearchList || []
            this.edbIndexDatas=[]
            this.BatchList=[]
            stockList.map((item,index) =>{
              let params={
                Source:11,
                ClassifyId:0,
                Unit:item.Unit,
                Frequency:this.edbFrequencyList.includes(item.Frequency)?item.Frequency:'',
                EdbName:item.EdbName,
                EdbCode:item.EdbCode,
              }
              this.BatchList.push(params)
              let datas = item.DataList || []
              let datasLength = datas.length
              if( datasLength<10){
                for (let i = datasLength; i < 10; i++) {
                  datas.push({DataTime:'',Value:''})													
                }
              }
              this.edbIndexDatas.push({...params,DataList:datas})
            })

            let edbIndexDataLength = this.edbIndexDatas.length
            //填充空的列
            for (let i = edbIndexDataLength; i < 4; i++) {
              this.edbIndexDatas.push({
                Source:0,
                ClassifyId:0,
                Unit:'',
                Frequency:'',
                EdbName:'',
                EdbCode:'',
                DataList:new Array(10).fill({DataTime:'',Value:''}),
              })
            }
            this.addToEbdDiaShow=true
          }
        }).finally(()=>{
          this.dataLoading=false
        })
      },
      /* 获取目录结构 */
      getMenu() {
        dataBaseInterface.menuListV3().then(res => {
          if(res.Ret === 200) {
            this.options = res.Data.AllNodes || [];
            this.filterNodes(this.options);
          }
        })
      },
      // 递归改变目录结构
      filterNodes(arr) {
        arr.length && arr.forEach(item => {
          item.Children.length && this.filterNodes(item.Children)
          if(!item.Children.length) {
            item.Children=null
          }
        })
      },
      // 获取指标单位
      async getTargetUnitList(){
        let res=await dataInterence.getTargetUnitList()
        if(res.Ret===200){
          this.unitList=res.Data&&res.Data.map(item=>{
            return {value:item}
          })
        }
      },
      //搜索单位
      querySearchUnit(queryString, cb){
        let results = queryString ? this.unitList.filter(item=>item.value.indexOf(queryString) === 0) : this.unitList;
        // 调用 callback 返回建议列表的数据
        cb(results);
      },
      existIndexClick({code,id,classifyId}){
        const { href } = this.$router.resolve({ path: '/database',query:{code,id,classifyId}});
        window.open(href, '_blank');
      },
      ysEdbSaveHandle(){
        let flag = this.edbIndexDatas.some(it => {
				  return it.Source && ((!it.ClassifyId) || (!it.Unit) || (!it.Frequency) || (!it.EdbName) || (!it.EdbCode))
        })
        if(flag){
          this.$message.warning("指标信息未填写完整")
          return 
        }
        this.BatchList.map((it,ind) => {
          it.ClassifyId = this.edbIndexDatas[ind].ClassifyId
          it.EdbCode = this.edbIndexDatas[ind].EdbCode
          it.EdbName = this.edbIndexDatas[ind].EdbName
          it.Frequency = this.edbIndexDatas[ind].Frequency
          it.Unit = this.edbIndexDatas[ind].Unit
        })
        this.saveLoading=true
        // console.log({BatchList:this.BatchList});
        // return 
        smmDataInterface.ysEdbAddBatch({BatchList:this.BatchList}).then(res=>{
          if(res.Ret == 200){
            this.$message.success("添加指标成功")
            let {href} = this.$router.resolve({
              path:'/database',
              query:{code:res.Data.UniqueCode,id:res.Data.EdbInfoId,classifyId:res.Data.ClassifyId}
            });
            window.open(href,'_blank');
            this.addToEbdDiaShow=false	
          }else if(res.Ret == 403){
            this.highLightIndex=res.Data?res.Data.ExistEdbName || []:[]
          }
        }).finally(()=>{
          this.saveLoading=false
        })
      }
    },
  }
</script>

<style lang="scss" scoped>
  #YS-data-container{
    // min-width: 1360px;
    position: relative;
    box-sizing: border-box;
    .search-zone{
      background-color: white;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      padding: 20px 20px 10px;
      border: 1px solid #C8CDD9;
      margin-bottom: 20px;
      .search-row{
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        .search-item{
          width: 240px;
          margin: 0 20px 10px 0;
        }
      }

    }
    .table-zone{
      padding: 20px 20px 70px;
      background-color: white;
      border: 1px solid #C8CDD9;
      min-height: calc(100vh - 215px);
      box-sizing: border-box;
    }
    .table-page{
      position: absolute;
      bottom: 20px;
      right: 20px;
    }
    .edb-table-box{
      padding: 0 40px;
      .edb-table-preview {
        overflow: auto;
        height: calc(100% - 124px);
        &::-webkit-scrollbar {
          width: 5px !important;
        }
        table {
          border-color: #dcdfe6;
          border-bottom: 1px solid #dcdfe6;
          border-right: 1px solid #dcdfe6;
          border-collapse: separate;
        }
        thead {
          position: sticky;
          z-index: 2;
          top: 0;
        }
        td {
          min-width: 100px;
          max-width: 100px;
          height: 30px;
          // text-align: center;
          color: #333;
          box-sizing: border-box;
          padding: 0 5px;
          background-color: #fff;
          border-top: 1px solid #dcdfe6;
          border-left: 1px solid #dcdfe6;
        }
        .exist-highlight{
          border: red solid 1px;
        }
      }
      .dia-bot {
        margin: 30px 0;
        display: flex;
        justify-content: center;
      }
    }

    .check-fail-box{
      padding: 0 0 15px 40px;	
      color: #333333;
      .exist-index-item{
        cursor: pointer;
        &:hover{
          text-decoration: underline;
        }
      }
      .check-fail-button{
        margin-top: 80px;
        display: flex;
        justify-content: flex-end;
      }
    }
  }
</style>
<style lang="scss">
  #YS-data-container{
    .el-select{
      .el-tag{
        max-width: 100%;
        display: inline-flex;
        align-items: center;
        .el-select__tags-text{
          flex-grow: 1;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .el-tag__close{
          min-width: 16px;
        }
      }
      .el-select__input{
        min-width: 80px;
      }
    }
    .edb-table-preview{
      border: 1px solid #dcdfe6;
      .el-cascader{
        width: 100%;
      }
      .el-autocomplete{
        width: 100%;
      }
      .el-select{
        width: 100%;
      }
      .el-input{
        width: 100%;
        input{
          border: none;
          padding-left: 7px;
          font-size: 14px;
        }
      }
    }
  }

</style>