<template>
  <div class="dataWarning">
    <div class="main-wrapper">
      <div class="left">
        <el-form size="mini" label-width="110px">
          <div class="title">预警条件编辑</div>
          <template>
            <el-form-item label="预警器名称">
              <el-input disabled v-model="mainForm.name"></el-input>
            </el-form-item>
            <el-form-item label="请求频率">
              <el-input disabled v-model="mainForm.requestFreq" style="width: 200px">
                <template slot="append"> 秒</template>
              </el-input>
            </el-form-item>
            <el-form-item label="时间计算方式">
              <el-radio-group v-model="timeForm.calcType">
                <el-radio disabled label="NORMAL">标准时间</el-radio>
                <el-radio disabled label="SPECIAL">特殊时间</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="时间格式">
              <el-radio-group v-model="timeForm.timeType">
                <el-radio disabled label="QUARTER">季度</el-radio>
                <el-radio disabled label="MONTH">月</el-radio>
                <el-radio disabled label="DAY">日</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="相对时间设置" class="rel">
              <el-input disabled v-model="timeForm.relativeTime.leftVal" style="width: 120px">
                <template slot="append"> {{ timeAppendMap[timeForm.timeType] }}</template>
              </el-input>
              <el-select disabled v-model="timeForm.relativeTime.leftModifier" style="width: 60px">
                <el-option label="前" value="BEFORE"></el-option>
                <el-option label="后" value="AFTER"></el-option>
              </el-select>
              <span style="margin: 0 10px">~</span>
              <el-input disabled v-model="timeForm.relativeTime.rightVal" style="width: 120px">
                <template slot="append"> {{ timeAppendMap[timeForm.timeType] }}</template>
              </el-input>
              <el-select disabled v-model="timeForm.relativeTime.rightModifier" style="width: 60px">
                <el-option label="前" value="BEFORE"></el-option>
                <el-option label="后" value="AFTER"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="日期值">
              <template v-if="timeForm.timeType === 'QUARTER'">
                <vxe-input v-model="timeForm.timeValue[0]" placeholder="季度选择" type="quarter" clearable value-format="yyyyMM" disabled></vxe-input>
                <vxe-input v-model="timeForm.timeValue[1]" placeholder="季度选择" type="quarter" clearable value-format="yyyyMM" disabled></vxe-input>
              </template>
              <template v-if="timeForm.timeType === 'MONTH'">
                <el-date-picker v-model="timeForm.timeValue" type="monthrange" placeholder="选择月份" clearable value-format="yyyyMM" disabled> </el-date-picker>
              </template>
              <template v-if="timeForm.timeType === 'DAY'">
                <el-date-picker v-model="timeForm.timeValue" type="daterange" placeholder="选择日期" clearable value-format="yyyyMMdd" disabled> </el-date-picker>
              </template>
            </el-form-item>
            <el-form-item label="是否开启">
              <el-switch disabled v-model="mainForm.enableStatus" :active-value="1" :inactive-value="0"></el-switch>
              <span v-if="dataJson.enableStatus" style="padding: 0 20px; color: #ef5858">修改后</span>
              <el-switch v-if="dataJson.enableStatus" disabled v-model="dataJson.enableStatus" :active-value="1" :inactive-value="0"></el-switch>
            </el-form-item>
            <el-form-item label="通知方式">
              <el-checkbox disabled v-model="useSms">短信</el-checkbox>
              <el-checkbox disabled v-model="useOther">第三方应用</el-checkbox>
            </el-form-item>
          </template>
          <template v-if="!liantong">
            <div class="title" v-if="useSms">短信推送内容设置</div>
            <template v-if="useSms">
              <el-form-item label="渠道分类">
                <el-select disabled v-model="nowTempType">
                  <el-option v-for="(item, i) of smsTypes" :key="i" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="模板选择">
                <el-select disabled v-model="mainForm.smsId">
                  <el-option v-for="(item, i) of nowTempList" :key="i" :label="item.templateName" :value="item.id"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="模板内容">
                <el-input v-if="nowTemp" class="my-disabled" disabled type="textarea" :value="nowTemp.templateContent"></el-input>
              </el-form-item>
              <el-form-item label="变量参数关联">
                <el-form size="mini" label-width="80px">
                  <el-form-item v-for="key of tempParamFormKeys" :key="key" :label="key">
                    <el-select disabled v-model="tempParamForm[key]" placeholder="选择关联字段">
                      <el-option v-for="(item, i) of selectedFields" :key="i" :label="item.columnTitle" :value="item.columnTitle"></el-option>
                    </el-select>
                  </el-form-item>
                </el-form>
              </el-form-item>
            </template>
            <div class="title" v-if="useOther">三方推送内容设置</div>
            <template v-if="useOther">
              <el-form-item label="发送内容">
                <el-input disabled type="textarea" :rows="4" v-model="mainForm.messageDynamicContent"></el-input>
              </el-form-item>
              <el-form-item label="发送报告">
                <div style="border: 1px solid #dcdfe6; padding: 5px; margin-top: 5px; border-radius: 4px">
                  <div class="bigdata-item" v-for="(item, i) of visualDataJson" :key="i">
                    <div>{{ item.title }}</div>
                  </div>
                  <span v-if="!visualDataJson.length" style="color: #999; margin: 0 5px">暂无附加报告</span>
                </div>
              </el-form-item>
              <el-form-item label="触达方式">
                <el-select disabled multiple v-model="checkedWays">
                  <el-option v-for="(item, i) of checkWays" :key="i" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </el-form-item>
            </template>
          </template>
          <template v-else>
            <div class="title">推送内容设置</div>
            <template>
              <el-form-item label="发送内容">
                <el-input disabled type="textarea" :rows="4" v-model="mainForm.messageDynamicContent"></el-input>
              </el-form-item>
              <el-form-item label="发送报告">
                <div style="border: 1px solid #dcdfe6; padding: 5px; margin-top: 5px; border-radius: 4px">
                  <div class="bigdata-item" v-for="(item, i) of visualDataJson" :key="i">
                    <div>{{ item.title }}</div>
                  </div>
                  <span v-if="!visualDataJson.length" style="color: #999; margin: 0 5px">暂无附加报告</span>
                </div>
              </el-form-item>
              <el-form-item label="触达方式">
                <el-select disabled multiple v-model="checkedWays">
                  <el-option v-for="(item, i) of checkWays" :key="i" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </el-form-item>
            </template>
          </template>
          <div class="title">发送人员选择</div>
          <el-form-item label="通知人员">
            <el-cascader
              disabled
              size="mini"
              v-model="mainForm.warnUserIds"
              :options="userList"
              filterable
              :show-all-levels="false"
              :props="{ expandTrigger: 'hover', emitPath: false, multiple: true, label: 'title', value: 'id' }"
              clearable
            ></el-cascader>
          </el-form-item>
        </el-form>
      </div>
      <div class="right">
        <div class="title">数据字段设置</div>
        <el-form size="mini" label-width="100px">
          <el-form-item label="选择数据集">
            <el-cascader
              disabled
              :props="{ expandTrigger: 'hover', emitPath: false }"
              v-model="mainForm.dataId"
              :options="cubeList"
              filterable
              popper-class="bigdata-data-selector"
              :show-all-levels="false"
            ></el-cascader>
          </el-form-item>
        </el-form>
        <div class="wrapper">
          <div class="selected-wrapper">
            <div class="line"></div>
            <div :class="{ group: 1 }">
              <div class="name">维度</div>
              <div class="num">{{ mainForm.dimensionList.length }} / 5</div>
            </div>
            <draggable :disabled="true" v-model="mainForm.dimensionList" :animation="150" :class="{ 'selected-box': 1 }">
              <div :class="['selected', field.dimensionType]" v-for="(field, i) of mainForm.dimensionList" :key="i">
                <div class="name" :title="field.columnTitle + ' ' + field.columnName">
                  {{ field.columnTitle + ' ' + field.columnName }}
                </div>
              </div>
            </draggable>
            <div :class="{ group: 1, active: activeKey === 'zhibiao' }">
              <div class="name">指标</div>
              <div class="num">{{ mainForm.measureList.length }} / 5</div>
            </div>
            <draggable :disabled="true" v-model="mainForm.measureList" :animation="150" :class="{ 'selected-box': 1, active: activeKey === 'zhibiao' }">
              <div :class="['selected', field.dimensionType]" v-for="(field, i) of mainForm.measureList" :key="i">
                <div class="name" :title="field.columnTitle + ' ' + field.columnName">
                  {{ field.columnTitle + ' ' + field.columnName }}
                </div>
              </div>
            </draggable>
            <div :class="{ group: 1, active: activeKey === 'filter' }">
              <div class="name">过滤器</div>
            </div>
            <draggable :disabled="true" v-model="mainForm.filter" :animation="150" :class="{ 'selected-box': 1, 'item-box': 1, active: activeKey === 'filter' }">
              <div :class="['item', 'selected', field.dimensionType]" v-for="(field, i) of mainForm.filter" :key="i">
                <div class="name" :title="field.columnTitle + ' ' + field.columnName">
                  {{ field.columnTitle + ' ' + field.columnName }}
                </div>
              </div>
            </draggable>
            <div :class="{ group: 1, active: activeKey === 'time' }">
              <div class="name">时间字段</div>
            </div>
            <draggable :disabled="true" v-model="timeForm.timeColumn" :animation="150" :class="{ 'selected-box': 1, active: activeKey === 'time' }">
              <div :class="['selected', field.dimensionType]" v-for="(field, i) of timeForm.timeColumn" :key="i">
                <div class="name" :title="field.columnTitle + ' ' + field.columnName">
                  {{ field.columnTitle + ' ' + field.columnName }}
                </div>
              </div>
            </draggable>
            <div :class="{ group: 1, active: activeKey === 'type' }" v-show="timeForm.calcType === 'SPECIAL'">
              <div class="name">时间类型字段</div>
            </div>
            <draggable :disabled="true" v-model="timeForm.timeTypeColumn" :animation="150" v-show="timeForm.calcType === 'SPECIAL'" :class="{ 'selected-box': 1, active: activeKey === 'type' }">
              <div :class="['selected', field.dimensionType]" v-for="(field, i) of timeForm.timeTypeColumn" :key="i">
                <div class="name" :title="field.columnTitle + ' ' + field.columnName">
                  {{ field.columnTitle + ' ' + field.columnName }}
                </div>
              </div>
            </draggable>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import draggable from 'vuedraggable'
import { cubeList, categoryList, cubeFieldList, tempList } from '@/api/newbi/dataset'
import moment from 'moment'
import util from '@/utils/wey'
import { defaultFieldExtJson, fieldDateFormats, dateTypeMap, fieldAggregates, columnKeys } from '@/utils/dict'
import { smsTypes } from '@/utils/dicts'
import { getDeptTree } from '@/api/system/dept'
import { getList } from '@/api/system/user'
export default {
  components: { draggable },
  props: {
    list: { type: Object, default: {} },
    dataJson: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  name: 'dataWarning',
  data() {
    return {
      smsTypes,
      fieldDateFormats,
      dateTypeMap,
      fieldAggregates,
      columnKeys,
      mainForm: {
        //预警条件
        name: '',
        requestFreq: 300,
        warnUserIds: [],
        dataId: '',
        cubeDataName: '',
        datasourceId: '',
        datasourceName: '',
        enableStatus: 1,
        dimensionList: [],
        measureList: [],
        filter: [],
        filterRelation: '',
        smsId: '', // 短信模板id
        messageDynamicContent: '' // 第三方通知消息主体
      },
      timeForm: {
        timeType: 'DAY',
        calcType: 'NORMAL',
        timeColumn: [],
        timeTypeColumn: [],
        relativeTime: {
          leftVal: 2,
          leftModifier: 'BEFORE',
          rightVal: 1,
          rightModifier: 'BEFORE'
        },
        timeValue: []
      },
      tableData: [],
      datasourceList: [],
      dataKeys: [],
      tableLoading: false,
      userList: [],
      fieldListSearched: [],
      timeAppendMap: { QUARTER: '季', MONTH: '月', DAY: '日' },
      cubeList: [],
      activeKey: 'weidu',
      useSms: false, // 是否使用短信通知
      useOther: false, // 是否使用第三方通知
      checkWays: [
        { label: '邮件', value: 'EMAIL' },
        { label: '企业微信', value: 'QYWECHAT' },
        { label: '钉钉', value: 'DINGTALK' },
        { label: '飞书', value: 'FEISHU' }
      ],
      checkedWays: [], // 第三方通知类型
      wholeTempList: [], // 全部模板
      nowTempList: [], // 当前类型模板
      nowTempType: 'aliyun', // 当前模板类型
      nowTemp: null, // 当前模板
      tempParamForm: {}, // 模板参数表单数据
      tempParamFormKeys: [], // 模板参数表单项
      visualDataJson: [] // 选择发送的大屏
    }
  },
  computed: {
    selectedFields() {
      let { dimensionList, measureList } = this.mainForm
      return [...dimensionList, ...measureList]
    },
    selectedBigdataIds() {
      return this.visualDataJson.map((i) => i.id)
    },
    liantong() {
      return undefined
    }
  },
  created() {
    tempList({ current: 1, size: 10000 }).then((res) => {
      this.wholeTempList = res.data.data.records
      this.onTempTypeChange()
      if (this.list) {
        this.$nextTick(() => {
          this.getCubeList()
          this.onBackfill()
        })
      }
      this.getUserList()
    })
  },
  methods: {
    // 获取用户列表
    getUserList() {
      getDeptTree().then((res) => {
        let parents = []
        this.getChildren(parents, res.data.data)
        getList(1, 10000).then((res) => {
          let users = res.data.data.records
          parents.forEach((item) => {
            item.children = users.filter((i) => i.deptId.includes(item.id))
            item.children.forEach((i) => {
              i.title = i.name
              i.disabled = false
            })
          })
          this.userList = parents.filter((i) => i.children.length)
        })
      })
    },
    getChildren(arr, nodes) {
      if (!nodes) return
      arr.push(...nodes)
      nodes.forEach((item) => {
        this.getChildren(arr, item.children)
      })
    },
    // 模板类型变化时
    onTempTypeChange() {
      this.nowTempList = this.wholeTempList.filter((i) => i.category == this.nowTempType)
      this.mainForm.smsId = ''
      this.nowTemp = null
    },
    // 三方通知内容插入字段
    onContentAddField(field) {
      this.mainForm.messageDynamicContent += `@${field.columnTitle}@`
    },
    // 回填
    async onBackfill() {
      let mainRes = await this.list
      let {
        columnJson,
        cubeDataId,
        cubeDataName,
        datasourceId,
        datasourceName,
        enableStatus,
        filterJson,
        filterRelationJson,
        filterTimeJson,
        name,
        requestFreq,
        warnUserIds,
        smsId,
        smsParams,
        messageDynamicContent,
        checkedWays,
        visualDataJson
      } = mainRes
      let columnList = JSON.parse(columnJson)
      filterJson = JSON.parse(filterJson)
      let filter = filterJson.map((field) => {
        let { column, conditions, connectTime, connectType, asFilter, enumSource, enumId, uniqId } = field
        let r = {
          conditions,
          connectTime,
          connectType,
          ...column,
          enumSource,
          enumId,
          uniqId: uniqId || util.getRandomStr(7),
          options: [],
          asFilter: asFilter === undefined ? true : asFilter
        }
        if (r.viewDataType === 'DATETIME') {
          r.dateType = this.dateTypeMap[r.timeDataFormat]
          r.dateFormat = this.fieldDateFormats.find((i) => i.value === r.timeDataFormat).label
        }
        return r
      })
      let mainForm = {
        name,
        requestFreq,
        dataId: cubeDataId,
        cubeDataName,
        datasourceId,
        datasourceName,
        enableStatus,
        warnUserIds: warnUserIds.split(','),
        dimensionList: columnList.filter((i) => i.dimensionType === 'WEIDU'),
        measureList: columnList.filter((i) => i.dimensionType === 'ZHIBIAO'),
        filter,
        filterRelation: filterRelationJson,
        smsId,
        messageDynamicContent
      }
      filterTimeJson = JSON.parse(filterTimeJson)
      let { timeColumn, timeTypeColumn } = filterTimeJson
      let timeForm = {
        ...filterTimeJson,
        timeColumn: timeColumn ? [timeColumn] : [],
        timeTypeColumn: timeTypeColumn ? [timeTypeColumn] : [],
        timeValue: []
      }
      // 处理短信配置回填
      this.useSms = checkedWays.includes('SMS')
      if (this.useSms) {
        let smsIndex = checkedWays.findIndex((i) => i === 'SMS')
        checkedWays.splice(smsIndex, 1)
        if (!this.liantong) {
          this.mainForm.smsId = smsId
          this.onTempChange()
          this.nowTempType = this.nowTemp.category
          this.nowTempList = this.wholeTempList.filter((i) => i.category == this.nowTempType)
          this.tempParamForm = JSON.parse(smsParams || '{}')
          this.tempParamFormKeys = Object.keys(this.tempParamForm)
        }
      }
      this.useOther = checkedWays.length > 0
      this.checkedWays = checkedWays
      this.visualDataJson = JSON.parse(visualDataJson || '[]')
      this.getcubeFields(cubeDataId).then(() => {
        this.mainForm = mainForm
        this.timeForm = timeForm
        this.countAbsoluteTime()
        this.countFields('weidu')
      })
    },
    // 选择模板时
    onTempChange() {
      if (!this.mainForm.smsId) {
        this.tempParamForm = {}
        this.tempParamFormKeys = []
        return
      }
      let id = this.mainForm.smsId
      let now = this.wholeTempList.find((i) => i.id == id)
      this.nowTemp = now
      this.tempParamFormKeys = now.templateParams.split(',')
      this.tempParamForm = this.tempParamFormKeys.reduce((r, i) => ({ ...r, [i]: '' }), {})
    },
    // 获取数据集字段
    getcubeFields(id) {
      return new Promise((r, j) => {
        cubeFieldList({ cubeDataId: id }).then((res) => {
          let list = res.data.data.filter((i) => !i.hiddenStatus)
          list.forEach((i) => {
            i.extJson = { ...defaultFieldExtJson }
          })
          this.dimensionField = list.filter((i) => i.dimensionType === 'WEIDU').sort((a, b) => a.sortNum - b.sortNum)
          this.measureField = list.filter((i) => i.dimensionType === 'ZHIBIAO').sort((a, b) => a.sortNum - b.sortNum)
          this.countFields(this.activeKey)
          r()
        })
      })
    },
    // 计算绝对时间
    countAbsoluteTime() {
      let { timeType } = this.timeForm
      let { leftModifier, rightModifier, leftVal, rightVal } = this.timeForm.relativeTime
      let date1 = new Date()
      let date2 = new Date()
      let leftFlag = leftModifier === 'BEFORE'
      let rightFlag = rightModifier === 'BEFORE'
      leftVal = parseInt(leftVal)
      rightVal = parseInt(rightVal)
      let v1, v2
      if (timeType === 'QUARTER') {
        let month = date1.getMonth() + 1
        date1.setMonth(month + (leftFlag ? -leftVal * 3 : leftVal * 3))
        date2.setMonth(month + (rightFlag ? -rightVal * 3 : rightVal * 3))
        v1 = date1.getFullYear() + '' + this.countQuarter(date1.getMonth() + 1)
        v2 = date2.getFullYear() + '' + this.countQuarter(date2.getMonth() + 1)
      } else if (timeType === 'MONTH') {
        let month = date1.getMonth()
        date1.setMonth(month + (leftFlag ? -leftVal : leftVal))
        date2.setMonth(month + (rightFlag ? -rightVal : rightVal))
        v1 = moment(date1).format('yyyyMM')
        v2 = moment(date2).format('yyyyMM')
      } else {
        let day = date1.getDate()
        date1.setDate(day + (leftFlag ? -leftVal : leftVal))
        date2.setDate(day + (rightFlag ? -rightVal : rightVal))
        v1 = moment(date1).format('yyyyMMDD')
        v2 = moment(date2).format('yyyyMMDD')
      }
      this.timeForm.timeValue = [v1, v2]
    },
    // 计算可选字段
    countFields(key) {
      this.searckKey = ''
      this.activeKey = key
      let { dimensionField, measureField } = this
      let { dimensionList, measureList } = this.mainForm
      let { timeColumn, timeTypeColumn } = this.timeForm
      if (key === 'filter') {
        this.fieldList = [...dimensionField, ...measureField]
        this.fieldListSearched = [...this.fieldList]
        return
      } else if (key === 'zhibiao') {
        this.fieldList = [...measureField].map((i) => ({
          ...i,
          select: measureList.find((j) => j.cubeColumnId === i.id)
        }))
        this.fieldListSearched = [...this.fieldList]
      } else if (key === 'weidu') {
        this.fieldList = [...dimensionField].map((i) => ({
          ...i,
          select: dimensionList.find((j) => j.cubeColumnId === i.id)
        }))
        this.fieldListSearched = [...this.fieldList]
      } else if (key === 'time') {
        this.fieldList = [...dimensionField].map((i) => ({
          ...i,
          select: timeColumn.find((j) => j.cubeColumnId === i.id)
        }))
        this.fieldListSearched = [...this.fieldList]
      } else if (key === 'type') {
        this.fieldList = [...dimensionField].map((i) => ({
          ...i,
          select: timeTypeColumn.find((j) => j.cubeColumnId === i.id)
        }))
        this.fieldListSearched = [...this.fieldList]
      }
    },
    // 获取数据集列表
    getCubeList() {
      categoryList().then((res) => {
        let category = res.data.data
        category.forEach((item) => {
          item.parent = category.find((i) => i.id === item.parentId)
        })
        let finalCategory = category.map((item) => {
          let value = item.id
          let label = item.wsName
          let parent = item.parent
          while (parent) {
            label = parent.wsName + ' / ' + label
            parent = parent.parent
          }
          return { value, label }
        })
        cubeList({ current: 1, size: 100000 }).then((res) => {
          let list = res.data.data.records
          this.cubeList = finalCategory
            .map((item) => {
              return {
                ...item,
                children: list
                  .filter((j) => j.workspaceId === item.value)
                  .map((k) => ({
                    label: k.cubeName,
                    value: k.id,
                    datasourceId: k.datasourceId
                  }))
              }
            })
            .filter((i) => i.children.length)
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.dataWarning {
  padding: 0 100px;
  .main-wrapper {
    width: 1100px;
    display: flex;
    min-height: 600px;
    margin: 0 auto 20px;
    align-items: stretch;
    .left,
    .right {
      .title {
        line-height: 40px;
        margin-bottom: 10px;
        font-size: 18px;
        font-weight: 600;
        color: #333;
        text-align: center;
      }
    }
    .rel {
      .el-input-group__append {
        padding: 0 12px;
      }
      .el-input__inner {
        text-align: center;
      }
    }
    .left {
      width: 510px;
      .btns {
        margin-top: 20px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        .el-button {
          margin: 0 20px;
          width: 100px;
        }
      }
    }
    .right {
      padding-left: 70px;
    }
    .wrapper {
      width: 290px;
    }
    .selected-wrapper {
      height: 100%;
      width: 290px;
      box-sizing: border-box;
      overflow-y: auto;
      position: relative;
      .line {
        position: absolute;
        right: 0;
        top: 5px;
        bottom: 5px;
        background-color: #aaa;
        width: 1px;
      }
    }
    .group {
      padding-right: 10px;
      display: flex;
      align-items: center;
      height: 40px;
      margin-top: 10px;
      font-size: 14px;
      .name {
        flex: 1;
        font-weight: 600;
        text-indent: 20px;
      }
      .btn {
        color: #999;
        padding: 5px;
        cursor: pointer;
      }
      &.active {
        .btn {
          color: #409eff;
        }
      }
    }
    .selected-box {
      min-height: 30px;
      box-sizing: border-box;
      border: 1px dashed #ccc;
      margin-left: 15px;
      position: relative;
      z-index: 1;
      width: 260px;
      &.active {
        width: 275px;
        border: 1px solid #aaa;
        border-right-color: #fff;
      }
    }
    .selected {
      display: flex;
      align-items: center;
      font-size: 14px;
      margin: 8px;
      padding: 0 5px 0 10px;
      line-height: 26px;
      height: 26px;
      width: 240px;
      &.WEIDU {
        border: 1px solid #1d54d5;
      }
      &.ZHIBIAO {
        border: 1px solid #00b375;
      }
      .name {
        flex: 1;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        margin-right: 5px;
      }
      .el-icon-close {
        cursor: pointer;
      }
      .el-icon-caret-bottom {
        cursor: pointer;
        margin-right: 5px;
        color: #ccc;
        &.active {
          color: #1d54d5;
        }
      }
    }
    .fields {
      width: 210px;
      height: 100%;
      overflow: hidden;
      box-sizing: border-box;
      padding: 10px;
      display: flex;
      flex-direction: column;
      max-height: 600px;
      .el-input {
        width: 190px;
        margin: 5px 0 10px;
      }
    }
    .items {
      flex: 1;
      overflow-y: auto;
    }
    .item {
      display: flex;
      align-items: center;
      font-size: 12px;
      margin: 5px 0;
      padding: 0 5px;
      line-height: 24px;
      height: 24px;
      flex: 0 0 24px;
      &.WEIDU {
        border: 1px solid #1d54d5;
      }
      &.ZHIBIAO {
        border: 1px solid #00b375;
      }
      &.unuse {
        border: 1px solid #ccc;
        .name {
          color: #999;
        }
      }
      .type {
        &.WEIDU {
          color: #1d54d5;
        }
        &.ZHIBIAO {
          color: #00b375;
        }
        &.unuse {
          color: #999;
        }
      }
      .name {
        flex: 1;
        margin: 0 5px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .add {
        opacity: 0;
      }
      &:hover {
        cursor: pointer;
        &.WEIDU {
          background-color: #e4eafa;
        }
        &.ZHIBIAO {
          background-color: #d4f2e8;
        }
        &.unuse {
          background-color: #fff;
          cursor: default;
        }
        .add {
          opacity: 1;
        }
      }
    }
    .filter-setting-box {
      .selected-box {
        .selected {
          margin: 8px;
        }
      }
      .middle {
        margin-right: 10px;
        color: #999;
        cursor: pointer;
      }
    }
    .bigdata-item {
      padding: 0 5px;
      display: flex;
      align-items: center;
      .el-icon-delete {
        color: #f56c6c;
        margin-left: 10px;
        cursor: pointer;
      }
    }
  }
  .preview-wrapper {
    width: 1100px;
    margin: 0 auto 20px;
    .title {
      line-height: 40px;
      margin-bottom: 10px;
      font-size: 18px;
      font-weight: 600;
      color: #333;
      text-align: center;
    }
  }
}
</style>
