<template>
  <div class="add-column-page">
    <el-header class="add-column-header" height="48px">
      <div class="column-header-content">
        <div class="column-header-left">
          <el-page-header @back="goBack" :content="currentShowTitle">
          </el-page-header>
        </div>
        <div class="column-header-right">
          <el-button
            v-if="!(columnTenantId != -1 && baseColumn.isInit == 1)"
            type="primary"
            v-preventReClick
            @click="handleSavaForm"
            >保存</el-button
          >
          <el-button @click="handleClose">关闭</el-button>
        </div>
      </div>
    </el-header>
    <div class="add-column-content">
      <div class="column-content-left">
        <ht-custom-title
          title="栏目基本信息"
          left-bar-top="2px"
          title-height="68px"
          :isShowBottomBorder="false"
          :is-show-button="false"
        />
        <add-column-form
          :column="baseColumn"
          :designColumn="designColumn"
          :operateType="operateType"
          @height-type-change="handleHeightTypeChange"
          @public-type-change="handlePublicTypeChange"
        ></add-column-form>
        <ht-custom-title
          left-bar-top="2px"
          title-height="68px"
          title="栏目设计"
          :isShowBottomBorder="false"
          :is-show-button="false"
        />
        <design-column
          v-if="isShowDesignColumn"
          :designColumn="designColumn"
          :myApplicationOptionsList="myApplicationOptionsList"
          :column="baseColumn"
          :isPublic="baseColumn.isPublic"
          @click-type="handleClickType"
          @process-change="getCurrentShowData"
          @submit-column="getCurrentShowData"
          @custom-change="getCustomShowData"
          ref="designColumn"
        ></design-column>
      </div>
      <div class="column-content-right">
        <ht-custom-title
          title="栏目实时预览"
          left-bar-top="2px"
          title-height="68px"
          :isShowBottomBorder="false"
          :is-show-button="false"
        />
        <template v-if="currentComponentsComPuted">
          <template v-if="baseColumn.isPublic == 1">
            <div class="mobile-design-wrapper" style="pointer-events: none">
              <div class="mobile-design">
                <div class="mobile-design--box">
                  <div class="mobile-design__header">
                    <img :src="mobileHeaderImg" class="mobile-design__img" />
                  </div>

                  <div class="content-wrapper">
                    <component
                      :is="currentComponents"
                      :showData="showData"
                      :column-title="baseColumn.name || defaultTitle"
                      :ref="designColumn.colType"
                      :isHidePagination="isHidePagination"
                      :showTitle="baseColumn.showTitle"
                      :custom-column-height="baseColumn.colHeight"
                      :pageSize="baseColumn.refeshTime"
                      :combination-model="designColumn.model"
                      :operateType="operateType"
                      :more-url="baseColumn.colUrl"
                      :filter-type="designColumn.filterType"
                      :filter-scope="designColumn.filterScope"
                      :alias="baseColumn.alias"
                      :current-user="currentUser"
                      :appid="baseColumn.appid"
                      :custom-style="customStyle"
                      :isManage="true"
                      :isDisabled="true"
                      :isPublic="baseColumn.isPublic"
                    ></component>
                  </div>
                </div>
              </div>
            </div>
          </template>
          <template v-else>
            <p style="color: #666; margin: 24px 0 10px; font-size: 14px">
              提示：实时预览仅做栏目效果展示，不能进行点击操作
            </p>
            <el-card
              class="box-card"
              :class="{
                'column-height':
                  designColumn.colType !== 'swipeSlide' && baseColumn.colHeight
              }"
              :style="{'--columnHeight': `${baseColumn.colHeight}px`}"
              style="pointer-events: none"
            >
              <component
                :is="currentComponents"
                :showData="showData"
                :column-title="baseColumn.name || defaultTitle"
                :ref="designColumn.colType"
                :isHidePagination="isHidePagination"
                :showTitle="baseColumn.showTitle"
                :custom-column-height="baseColumn.colHeight"
                :pageSize="baseColumn.refeshTime"
                :combination-model="designColumn.model"
                :operateType="operateType"
                :more-url="baseColumn.colUrl"
                :filter-type="designColumn.filterType"
                :filter-scope="designColumn.filterScope"
                :alias="baseColumn.alias"
                :current-user="currentUser"
                :appid="baseColumn.appid"
                :custom-style="customStyle"
                :isManage="true"
                :isDisabled="true"
                :isPublic="baseColumn.isPublic"
                :preRequest="false"
              ></component>
            </el-card>
          </template>
        </template>
        <el-empty
          v-else
          :image-size="380"
          :image="noDataImg"
          description="暂无实时预览哦~"
        >
        </el-empty>
      </div>
    </div>
  </div>
</template>
<script>
import portal from '@/api/portal.js'
import flow from '@/api/flow.js'
import {COLUMN_TYPE_LIST} from './const.js'
import html2canvas from 'html2canvas'
import req from '@/request.js'
import columnMixins from '@/views/portal/components/columnMixins.js'
let Base64 = require('js-base64').Base64
export default {
  name: 'AddColumn',
  components: {
    AddColumnForm: () => import('./components/AddColumnForm.vue'),
    DesignColumn: () => import('./components/DesignColumn.vue')
  },
  props: {
    type: {
      type: String,
      default: ''
    },
    id: {
      type: String,
      default: ''
    }
  },
  mixins: [columnMixins],
  data() {
    return {
      currentUser: JSON.parse(sessionStorage.getItem('currentUser')) || {},
      baseColumn: {
        appid: '',
        secret: '',
        name: '',
        alias: '',
        catalogName: '',
        showTitle: true,
        isPublic: 2, //使用平台0-管理端,1-手机端,2-应用端
        isInit: 0, //数据类型 0-私有数据 1-平台公用数据
        needPage: 0, //是否分页
        colHeight: '',
        refeshTime: 0, //每页数量
        colUrl: '', //更多路径
        memo: '', //栏目用途
        style: '' //数据列表栏目自定义样式
      },
      designColumn: {
        colType: '',
        processPublicity: [],
        myApplication: [],
        announcementOrPictures: null,
        filterType: 'all',
        filterScope: [],
        selectType: [],
        pullFrequency: 'everyDay',
        dataFrom: '',
        model: 'upDown',
        colHeightType: 'default',
        timeType: 'day',
        date: '',
        currentDataType: 'dataChart'
      },
      templateHtml: '',
      templateJavaScript: '',
      templateStyle: '',
      defaultTitle: '', //栏目默认显示标题
      showData: null,
      currentComponents: '',
      noDataImg: require('@/assets/nodata_images/no-data.png'),
      initialData: null,
      uploadUrl: window.context.portal + '/system/file/v1/thumbnailUpload',
      isShowDesignColumn: true,
      timer: null,
      myApplicationOptionsList: []
    }
  },
  computed: {
    isHidePagination() {
      return this.baseColumn.needPage == '1' ? false : true     
    },
    operateType() {
      return this.type || this.$route.query.type
    },
    currentShowTitle() {
      return this.operateType === 'add' ? '新增栏目' : '编辑栏目'
    },
    customStyle() {
      return this.baseColumn.style && this.designColumn.colType === 'dataSheets'
        ? Base64.encode(this.baseColumn.style)
        : this.baseColumn.templateStyle &&
          this.designColumn.colType === 'custom'
        ? Base64.encode(this.designColumn.templateStyle2)
        : ''
    },
    mobileHeaderImg() {
      return require('@/assets/img/mobile-design-banner.png')
    },
    currentComponentsComPuted() {
      if (
        this.baseColumn.isPublic == 1 &&
        ![
          'HtSchedule',
          'HtMyApplication',
          'HtPersonalMatters',
          'HtMeetingRoom'
        ].includes(this.currentComponents)
      ) {
        return true
      }
      if (
        this.baseColumn.isPublic == 2 ||
        (this.baseColumn.isPublic == 0 &&
          !['HtMyApplication'].includes(this.currentComponents))
      ) {
        return true
      }
      return false
    }
  },
  watch: {
    customStyle: {
      handler(val) {},
      immediate: true,
      deep: true
    },
    'designColumn.colType': {
      handler(val) {
       if (val === 'myApplication') {
        this.queryByFilter()
       }
      },
      immediate: true
    },
  },
  created() {
    if (this.operateType === 'edit') {
      this.getColumnData()
      this.isShowDesignColumn = false
    } else {
      this.isShowDesignColumn = true
    }
  },
  beforeDestroy() {
    if (this.timer) {
      clearTimeout(this.timer)
    }
  },
  mounted() {
    this.initialData = _.cloneDeep({...this.baseColumn, ...this.designColumn})
    if (this.columnTenantId != -1) {
      //如果是租户，数据类型是 0-私有数据
      this.baseColumn.isInit = 0
    }
    if (this.operateType === 'edit') {
      this.timer = setTimeout(() => {
        this.isShowDesignColumn = true
      }, 5000)
    }
    
  },
  methods: {
    goBack() {
      this.handleClose()
    },
    handleClose() {
      const initialDataJson = JSON.stringify(this.initialData)
      const newData = JSON.stringify({...this.baseColumn, ...this.designColumn})
      if (initialDataJson == newData) {
        // this.$router.push('/portal')
        this.$emit('close')
      } else {
        this.$confirm('系统将不会保存您所做的更改，是否要离开此页面?', '提示', {
          confirmButtonText: '取消',
          cancelButtonText: '确定',
          customClass: 'col-msg__box',
          type: 'warning',
          closeOnClickModal: false
        })
          .then(() => {})
          .catch(() => {
            // this.$router.push('/portal')
            this.$emit('close')
          })
      }
    },

    //获取常用应用
    async queryByFilter() {
      let query = {
        pageBean: {
          page: 1,
          pageSize: -1,
          total: 0
        },
        params: {
          isManage: true,
          menuId: null
        }
      }
      await portal.queryByFilter(query).then(res => {
        if (res && res.status == 200) {
          let data = res.data ? res.data.rows : res.rows

          this.myApplicationOptionsList = data
          this.showData = []
          if (
            this.designColumn.myApplication &&
            this.designColumn.myApplication.length > 0
          ) {
            data.forEach(item => {
              if (this.designColumn.myApplication.includes(item.alias)) {
                this.showData.push(item)
              }
            })
          }
        }
      })
    },
    getColumnData() {
      const id = this.id || this.$route.query.id
      portal.getColumnById(id).then(({data}) => {
        this.baseColumn = {
          ...data,
          showTitle: data.showTitle == 1 ? true : false
        }
        this.designColumn = JSON.parse(data.dataParam)
        this.currentComponents = data.colType
        const {colType, selectType} = this.designColumn
        if (
          ['processCenter', 'combination', 'processPublicity'].includes(colType)
        ) {
          this.showData = selectType
        }
        if (this.designColumn.colType === 'statisticalChart') {
          let data = []
          data.push({
            dataType: this.designColumn.dataType,
            currentDataType: this.designColumn.currentDataType
          })
          this.showData = data
        }
        if (
          this.designColumn.colType === 'news' ||
          this.designColumn.colType === 'swipeSlide'
        ) {
          this.showData = this.designColumn.announcementOrPictures
        }
        if (this.designColumn.colType === 'custom') {
          this.designColumn.templateHtml2 = Base64.decode(data.templateHtml)
          this.designColumn.templateJavaScript2 = Base64.decode(
            data.templateJavaScript
          )
          if (Base64.decode(data.templateStyle) != 'undefined') {
            this.designColumn.templateStyle2 = Base64.decode(data.templateStyle)
          }
          this.showData = data
        }
        if (this.designColumn.colType === 'dataSheets') {
          this.showData = {
            ...this.designColumn.currentSelectedInfo,
            dataType: this.designColumn.dataType
          }
          this.baseColumn.style = data.style ? Base64.decode(data.style) : ''
        }
        if (this.designColumn.colType === 'officialAccounts') {
          this.showData = [JSON.parse(data.dataParam)]
        }
        if (this.designColumn.colType === 'myApplication') {
          this.queryByFilter()
        }
        this.isShowDesignColumn = true
      })
    },
    handleClickType(item) {
      this.defaultTitle = item.name
      if (this.designColumn.colHeightType === 'default') {
        this.baseColumn.colHeight = item.defaultColHeight
      }
      if (this.currentComponents !== item.componentsName) {
        this.designColumn.selectType = []
        this.designColumn.processPublicity = []
        this.designColumn.announcementOrPictures = null
        this.showData = []
        // this.baseColumn.needPage = 1
        if (this.baseColumn.isPublic == 1) {
          this.baseColumn.refeshTime = 5
        } else {
          this.baseColumn.refeshTime = 10
        }
        this.designColumn.model = 'upDown'
        this.designColumn.templateHtml2 = ''
        this.designColumn.templateJavaScript2 = ''
        this.designColumn.templateStyle2 = ''
        this.designColumn.currentDataType = ''
        this.$set(this.designColumn, 'dataType', '')
        this.baseColumn.style = ''
      }
      if (item.key === 'swipeSlide') {
        this.baseColumn.colUrl = ''
      } else if (item.key === 'dataSheets') {
        this.designColumn.currentDataType = 'formTable'
      } else if (item.key === 'statisticalChart') {
        this.designColumn.currentDataType = 'dataChart'
      }
      this.currentComponents = item.componentsName
    },
    handleHeightTypeChange(val) {
      if (val === 'custom') {
        this.baseColumn.colHeight = 0
      } else if (val === 'default' && this.designColumn.colType) {
        const defaultHeightMap = COLUMN_TYPE_LIST.reduce((pre, cur) => {
          pre[cur.key] = cur.defaultColHeight
          return pre
        }, {})
        this.baseColumn.colHeight = defaultHeightMap[this.designColumn.colType]
      }
    },
    handlePublicTypeChange(val) {
      if (this.designColumn.colType === 'combination') {
        this.designColumn.selectType = []
        this.getCurrentShowData(
          this.designColumn.selectType,
          this.designColumn.colType
        )
      }
    },
    getCurrentShowData(data, columnType) {
      if (columnType === 'combination') {
        data.forEach(item => {
          if (
            Object.prototype.toString.call(item.dataParam) == '[object Object]'
          ) {
            item.dataParam = JSON.stringify(item.dataParam)
          }
          if (item.colType === 'HtProcessCenter') {
            item.dataParam = JSON.parse(item.dataParam).selectType
          } else if (item.colType === 'HtCustom') {
            item.dataParam = JSON.parse(item.dataParam)
            delete item.dataParam.templateHtml
            delete item.dataParam.templateJavaScript
            delete item.templateHtml
            delete item.dataParam.templateStyle
          } else {
            if (item && item.dataParam) {
              item.dataParam = JSON.parse(item.dataParam)
            }
          }
        })
        this.showData = data
      } else {
        this.showData = data
      }
    },
    getCustomShowData(data, columnType) {
      this.baseColumn.templateStyle = Base64.encode(
        this.designColumn.templateStyle2
      )
      this.designColumn.colType = data.colType
      this.showData = {
        ...data,
        ...this.baseColumn,
        addCustom: 'add',
        templateHtml: Base64.encode(this.designColumn.templateHtml2),
        templateStyle: Base64.encode(this.designColumn.templateStyle2),
        templateJavaScript: Base64.encode(
          this.designColumn.templateJavaScript2
            ? this.designColumn.templateJavaScript2
            : '{}'
        )
      }
    },
    //流程公式组件获取已选流程
    getSelectProcess() {
      let result = []
      const {processOptions, processPublicity, colType} = this.designColumn
      if (
        processOptions &&
        processOptions.length > 0 &&
        processPublicity &&
        processPublicity.length > 0
      ) {
        result = processOptions.filter(item =>
          processPublicity.includes(item.defKey)
        )
      }
      if (colType === 'processPublicity') {
        this.$set(this.designColumn, 'selectType', result)
        delete this.designColumn.processOptions
      }
    },
    handleSavaForm() {
      this.$root.$validator.validateAll('columnForm').then(async result => {
        if (!this.designColumn.colType) {
          return this.$message.warning('请选择栏目类型')
        }

        let limit = this.baseColumn.isPublic == 1 ? 10 : 20
        if (this.baseColumn.refeshTime > limit) {
          this.$set(this.baseColumn, 'refeshTime', null)
          return this.$message.warning(`数据显示量不能大于${limit}条`)
        }
        await this.handleSnapshot()
        if (this.designColumn.colType === 'officialAccounts') {
          if (!this.baseColumn.appid)
            return this.$message.warning('请输入corpId')
          if (!this.baseColumn.secret)
            return this.$message.warning('请输入corpSecret')
        }
        if (result && this.$refs.designColumn.validateDesignColumnForm()) {
          if (this.designColumn.colType === 'custom') {
            if (!this.designColumn.templateHtml2) {
              return this.$message.warning('请输入自定义模版内容')
            }
            this.templateHtml = Base64.encode(this.designColumn.templateHtml2)
            this.templateJavaScript = Base64.encode(
              this.designColumn.templateJavaScript2
                ? this.designColumn.templateJavaScript2
                : '{}'
            )
            this.templateStyle = Base64.encode(this.designColumn.templateStyle2)
            delete this.designColumn.templateHtml2
            delete this.designColumn.templateStyle2
            delete this.designColumn.templateJavaScript2
          }
          const {colType, filterType} = this.designColumn
          this.getSelectProcess()
          if (
            colType === 'processCenter' &&
            filterType === 'processDefinition'
          ) {
            delete this.designColumn.processOptions
          }
          //去除我的应用icon
          delete this.designColumn.myApplicationOptionsList
        
          let dataParam = this.designColumn
          if (this.designColumn.colType === 'dataSheets') {
            dataParam = {
              ...this.designColumn,
              currentSelectedInfo: this.showData
            }
          }
          //置空外部更多路径
          if (this.designColumn.model == 'tab') {
            this.baseColumn.colUrl = ''
          }
          const submitData = {
            ...this.baseColumn,
            style: this.baseColumn.style
              ? Base64.encode(this.baseColumn.style)
              : '',
            templateHtml: this.templateHtml,
            templateJavaScript: this.templateJavaScript,
            templateStyle: this.templateStyle,
            showTitle: this.baseColumn.showTitle ? 1 : 0,
            dataParam: JSON.stringify(dataParam),
            colType: `Ht${colType.replace(/^\S/, s => s.toUpperCase())}`,
            dataFrom: this.designColumn.dataFrom || '',
            dataMode: this.designColumn.dataMode || ''
          }

          portal.savaColumns(submitData).then(({data}) => {
            if (data.state) {
              this.$message.success(data.message)
              // this.$router.go(-1)
              this.$emit('close')
              this.$emit('after-save')
            } else {
              this.$message.error(data.message)
            }
          })
        }
      })
    },
    savePic() {
      var getPixelRatio = function(context) {
        // 获取设备的PixelRatio
        var backingStore =
          context.backingStorePixelRatio ||
          context.webkitBackingStorePixelRatio ||
          context.mozBackingStorePixelRatio ||
          context.msBackingStorePixelRatio ||
          context.oBackingStorePixelRatio ||
          context.backingStorePixelRatio ||
          1
        return (window.devicePixelRatio || 1) / backingStore
      }
      var captureContent = this.$refs[this.designColumn.colType].$el
      var width = captureContent.offsetWidth
      var height = captureContent.offsetHeight
      var canvas = document.createElement('canvas')
      var context = canvas.getContext('2d')
      var scale = getPixelRatio(context)
      canvas.width = width * scale
      canvas.height = height * scale
      canvas.style.width = width + 'px'
      canvas.style.height = height + 'px'
      context.scale(scale, scale)

      var opts = {
        // useCORSOnly: true,
        useCORS: true, // 允许使用 CORS 跨域
        allowTaint: true, // 允许默认跨域
        scale: scale,
        canvas: canvas,
        width: width,
        height: height,
        dpi: window.devicePixelRatio
      }
      return {content: captureContent, opts: opts}
    },
    handleSnapshot() {
      //处理快照
      return new Promise((resolve, reject) => {
        let captureData = this.savePic()
        const oldFileId = this.baseColumn.snapshotId
        let _this = this
        html2canvas(captureData.content, captureData.opts).then(function(
          canvas
        ) {
          context.mozImageSmoothingEnabled = false
          context.webkitImageSmoothingEnabled = false
          context.msImageSmoothingEnabled = false
          context.imageSmoothingEnabled = false
          canvas.toBlob(function(filedata) {
            var formdata = new FormData()
            if (filedata) {
              formdata.append('image', filedata, _this.baseColumn.name + '.jpg')
            } else {
              // 文件数据为空，处理错误情况
              _this.$message.warning('生成的文件数据为空！')
            }
            let uploadUrl = _this.uploadUrl
            if (oldFileId) {
              uploadUrl = uploadUrl + '?id=' + oldFileId
            }
            req
              .post(uploadUrl, formdata)
              .then(response => {
                const result = response.data
                if (result.success) {
                  _this.$set(_this.baseColumn, 'snapshotId', result.fileId)
                  resolve()
                }
              })
              .finally(() => {
                resolve()
              })
          })
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.add-column-page {
  height: 100%;
  overflow: hidden;
  .add-column-header {
    padding: 0 32px;
    border-bottom: 1px solid #e6e6e6;
  }
  .column-header-content {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .column-header-left {
      ::v-deep {
        .el-page-header__left {
          color: #409eff;
        }
        .el-page-header__content {
          color: #222;
          font-size: 18px;
          font-weight: bold;
        }
      }
    }
    .column-header-right {
      ::v-deep {
        .el-button {
          padding: 8px 15px;
          border-radius: 2px;
        }
      }
    }
  }
  .add-column-content {
    padding: 32px;
    display: flex;
    width: 100%;
    height: calc(100% - 110px);
    .column-content-left,
    .column-content-right {
      border: 1px solid #e6e6e6;
      flex: 1;
      max-width: calc(50% - 96px);
      padding: 0 24px;
      overflow-y: auto;
      &::-webkit-scrollbar {
        width: 13px;
        height: 13px;
      }

      &::-webkit-scrollbar-thumb {
        background-color: rgba(0, 0, 0, 0.4);
        background-clip: padding-box;
        border: 3px solid transparent;
        border-radius: 7px;
      }

      &::-webkit-scrollbar-thumb:hover {
        background-color: rgba(0, 0, 0, 0.5);
      }

      &::-webkit-scrollbar-track {
        background-color: transparent;
      }

      &::-webkit-scrollbar-track:hover {
        background-color: #f8fafc;
      }

      ::v-deep {
        .ht-data-sheets {
          .no-tabs {
            padding: 16px 12px !important;
          }
          .form-list--header {
            display: none;
          }
          .template-preview-container {
            .template-content {
              display: block;
            }
            .field-wrap {
              padding: 12px;
            }
            .footer-wrap,
            .form-list--footer {
              display: none !important;
            }
            .van-cell__value {
              background: #f9f9f9;
              border-radius: 8px 8px 8px 8px;
            }
            .field-item--title,
            .field-content {
              padding: 0 !important;
            }

            .field-item--title {
              width: 100% !important;
            }
            .form-list--content {
              height: 100% !important;
              min-height: 150px;
            }
            .van-cell {
              padding: 0 !important;
            }
            .van-list > div:nth-last-of-type(2) {
              margin-bottom: 0 !important;
            }

            .van-cell:nth-last-of-type(1) {
            }
          }
        }
      }
    }
    .column-content-left {
      margin-right: 40px;
      overflow: auto;
      //隐藏滚动条
      &::-webkit-scrollbar {
        width: 0;
        background-color: transparent;
      }
      /*火狐下隐藏滚动条*/
      scrollbar-width: none;
    }
    .column-content-right {
      ::v-deep {
        .el-empty {
          height: calc(100% - 68px);
          .el-empty__description {
            margin-top: -40px;
            p {
              color: #333;
              font-size: 16px;
            }
          }
        }
        .box-card {
          .el-card__body {
            padding: 0;
          }
        }
      }
    }
    ::v-deep {
      .el-form-item__label {
        color: #888;
        padding-left: 10px;
      }
      .el-form-item__content {
        .el-radio-group {
          vertical-align: unset;
        }
        .el-input__inner,
        .el-textarea__inner {
          border-radius: 2px;
        }
      }
      .el-radio__label,
      .el-checkbox__label {
        color: #333;
      }
    }
  }
  .column-height {
    height: var(--columnHeight);
    ::v-deep {
      > .column-content {
        height: calc(var(--columnHeight) - 104px);
        overflow: auto;
        //隐藏滚动条
        &::-webkit-scrollbar {
          width: 0;
          background-color: transparent;
        }
        /*火狐下隐藏滚动条*/
        scrollbar-width: none;
      }
    }
  }
  ::v-deep {
    .page-form-item {
      .el-form-item__content {
        display: flex;
        .ht-form-inputs__inline {
          width: 148px;
        }
        .set-page__wrap {
          .page-number__input {
            margin-left: 8px;
            width: 88px;
            .el-input-number {
              width: 100%;
            }
          }
        }
      }
    }
    .column-height__input {
      width: 224px;
      .el-input-number {
        width: 100%;
      }
    }
    .unit {
      padding-left: 8px;
      color: #333;
    }
  }

  .mobile-design {
    background: url('../../assets/img/mobile-android.png') no-repeat;
    background-size: 100% 100%;
    background-color: #f5f5f5;
    border-radius: 40px;
    padding: 15px 0;
    scrollbar-width: 0;
    -ms-overflow-style: none;
    box-sizing: border-box;
    margin: 0 auto;
    overflow-x: hidden;
    overflow-y: auto;
    display: flex;
    justify-content: center;
    &::-webkit-scrollbar {
      width: 0;
    }
    &--box {
      position: relative;
      border-radius: 28px;
      overflow-x: hidden;
      overflow-y: auto;
      scrollbar-width: 0;
      -ms-overflow-style: none;
      &::-webkit-scrollbar {
        width: 0px;
        background-color: transparent;
      }
    }
    &__img {
      width: 100%;
      height: auto;
    }
    ::v-deep {
      .mobile-design__header {
        text-align: center;
        .el-image {
          width: 350px;
          border-radius: 26px 26px 0 0;
        }
      }
    }
    .content-wrapper {
      position: absolute;
      top: 180px;
      left: 50%;
      transform: translateX(-50%);
      background-color: #fff;
      border-radius: 10px;
      overflow: hidden;
    }
  }

  // 屏幕小于 1440px 时应用该样式
  @media screen and (max-width: 1441px) {
    .mobile-design {
      width: 320px;
      height: 640px;
      padding: 8px 0;
      &--box {
        width: calc(320px - 26px);
        height: calc(640px - 45px);
      }
      .content-wrapper {
        width: calc(320px - 40px);
        top: 160px;
        // transform: scale3d(.8,.8,1)
      }
    }
  }

  // 屏幕大于 1440px 或小于 1920px 时应用该样式
  @media screen and (min-width: 1440px) and (max-width: 1920px) {
    .mobile-design {
      width: 407px;
      height: 812px;
      &--box {
        width: calc(407px - 30px);
        height: calc(812px - 45px);
      }
      .content-wrapper {
        width: calc(407px - 60px);
        top: 180px;
      }
    }
  }
  // 屏幕大于 1920px 时应用该样式
  @media screen and (min-width: 1920px) {
    .mobile-design {
      width: 407px;
      height: 812px;
      &--box {
        width: calc(407px - 30px);
        height: calc(812px - 45px);
      }
      .content-wrapper {
        width: calc(407px - 60px);
        top: 180px;
      }
    }
  }
}
.custom-title-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .title-wrap {
    width: 50%;
  }
}

::v-deep {
  .form-list--content {
    height: auto;
    scrollbar-width: 0;
    &::-webkit-scrollbar {
      width: 0;
    }
    -ms-overflow-style: none; /*这将影响IE10+*/
    scrollbar-width: none; /*这将影响Firefox*/
  }
}
</style>