<template>
  <div
    v-if="permission != 'n'"
    :class="[
      'inputs',
      formInputsDisplay == 'block'
        ? 'ht-form-inputs__block'
        : 'ht-form-inputs__inline',
    ]"
    style="width: 100%"
  >
    <input
      v-if="disabled && isValidate && !isMobile && !isSubCellReadOnly"
      v-model="inputVal"
      v-validate="inputValidate"
      type="hidden"
      :name="inputName"
      :data-vv-as="name"
    />
    <template v-if="inputWriteable">
      <template v-if="isSubCellReadOnly">
        <input
          v-model="inputVal"
          v-validate="inputValidate"
          type="hidden"
          :name="inputName"
          :data-vv-as="name"
        />
        <div class="sub-table-cell-readonly" @click="handleCellClick">
          <span>{{ inputValComputed }}</span>
        </div>
      </template>

      <template v-else>
        <el-select
          v-if="!isMobile"
          v-model="inputVal"
          v-validate="inputValidate"
          style="width: 100%"
          :name="inputName"
          :data-vv-as="name"
          :size="inputSize"
          :clearable="clearable"
          :disabled="
            readonly ||
            disabled ||
            (permission && permission === 'd') ||
            (permission_sub && permission_sub === 'd')
          "
          :placeholder="placeholder"
          :filterable="filterable"
          :allow-create="false"
          :multiple="multiple"
          :multiple-limit="limitCount"
          :collapse-tags="collapseTags"
          :popper-class="popperClass"
          @change="change"
          @visible-change="visibleChange"
          @remove-tag="removeTag"
          @clear="handleClear"
          @blur="handleBlur"
          @focus="handleFocus"
        >
          <slot name="querybox"></slot>
          <el-option
            v-if="otherOptionType && otherOptionType.includes('all')"
            key="is_all"
            label="全部"
            value="is_all"
          ></el-option>
          <el-option
            v-if="otherOptionType && otherOptionType.includes('null')"
            key="is_null"
            label="空"
            value="is_null"
          ></el-option>
          <slot
            v-if="hasOptions"
            :options="optionsAry"
            :prop-key="propKey"
            :prop-value="propValue"
          >
            <div class="select-options">
              <el-option
                v-for="item in optionsAry"
                :key="item[propKey]"
                :label="$td(item.i18nKey, item[propValue])"
                :value="String(item[propKey])"
              >
                <el-tooltip
                  effect="dark"
                  :content="$td(item.i18nKey, item[propValue]) + ''"
                  placement="top-start"
                  :disabled="
                    $td(item.i18nKey, item[propValue]) == undefined ||
                    $td(item.i18nKey, item[propValue]).length < 50
                  "
                >
                  <span class="iclass-text-ellipsis">
                    {{
                      $td(item.i18nKey, item[propValue]) &&
                      $td(item.i18nKey, item[propValue]).length > 50
                        ? $td(item.i18nKey, item[propValue]).slice(0, 50) +
                          '...'
                        : $td(item.i18nKey, item[propValue])
                    }}
                  </span>
                  <i
                    v-if="item.isNew"
                    style="
                      float: right;
                      color: rgb(115 185 166);
                      font-size: 13px;
                      line-height: 3;
                    "
                    class="el-icon-collection-tag"
                  ></i>
                </el-tooltip>
              </el-option>
            </div>
          </slot>
          <template slot="empty">
            <slot name="empty">
              <slot name="querybox"></slot>
              <p class="el-select-dropdown__empty">无数据</p>
              <add-item
                v-if="allowCreate && !hasOptions"
                :placeholder="placeholder"
                @addItem="addItem"
              ></add-item>
            </slot>
          </template>
          <add-item
            v-if="allowCreate"
            :placeholder="placeholder"
            @addItem="addItem"
          ></add-item>
        </el-select>
        <div v-else>
          <div class="mobile-select__wrap">
            <!-- 校验 -->
            <input
              v-model="value"
              v-validate="validateRules"
              type="hidden"
              :name="inputName"
              :data-vv-as="name"
            />
            <van-cell
              v-validate="!inputVal && validateRules"
              class="mobile-cell"
              :name="inputName"
              :data-vv-as="name"
              title=" "
              :is-link="!(readonly || disabled)"
              @click="handleShowPicker"
            >
              <div class="flex">
                <span v-if="selectStr" class="cell-text">
                  {{ selectStr }}
                </span>
                <span v-if="!selectStr" class="placeholder-class">
                  {{ mobilePlaceholder('请选择') }}
                </span>
                <van-icon
                  v-if="selectStr && clearable && !disabled"
                  name="clear"
                  color="#bfbfbf"
                  @click.stop="clearSelect"
                />
              </div>
              <template v-if="isSearchSelect" #right-icon>
                <van-icon name="play" class="right-arrow" />
              </template>
            </van-cell>
          </div>
          <van-popup
            v-model="showPicker"
            position="bottom"
            round
            class="custom-van-pop"
            get-container="body"
          >
            <div class="pop-header">
              <span class="cancel" @click="onCancel">取消</span>
              <span class="title">下拉选项</span>
              <span class="confirm" @click="onConfirm">确定</span>
            </div>
            <div class="pop-content">
              <van-search
                v-if="filterable"
                v-model="currentQuery"
                shape="round"
                placeholder="请输入搜索关键词"
                @input="search"
              />
              <div>
                <van-checkbox-group
                  v-if="multiple && optionsAryChange().length > 0"
                  v-model="selectResult"
                  :disabled="
                    readonly ||
                    disabled ||
                    (permission && permission === 'd') ||
                    (permission_sub && permission_sub === 'd')
                  "
                  :max="limitCount"
                  :icon-size="18"
                >
                  <van-checkbox
                    v-for="(item, index) in optionsAryChange()"
                    :key="index"
                    class="radio-item"
                    :name="String(item[propKey])"
                    :disabled="limitDisabled(item)"
                    shape="square"
                  >
                    <div>{{ item[propValue] }}</div>
                    <div class="radio-item-icon">
                      <i
                        v-if="item.isNew"
                        style="
                          float: right;
                          color: rgb(115 185 166);
                          font-size: 13px;
                          line-height: 3;
                        "
                        class="el-icon-collection-tag"
                      ></i>
                    </div>
                  </van-checkbox>
                </van-checkbox-group>
                <van-radio-group
                  v-else-if="!multiple && optionsAryChange().length > 0"
                  v-model="selectResult"
                  :disabled="
                    readonly ||
                    disabled ||
                    (permission && permission === 'd') ||
                    (permission_sub && permission_sub === 'd')
                  "
                  :icon-size="18"
                >
                  <van-radio
                    v-for="(item, index) in optionsAryChange()"
                    :key="index"
                    class="radio-item"
                    :name="String(item[propKey])"
                  >
                    <div>{{ item[propValue] }}</div>
                    <div class="radio-item-icon">
                      <i
                        v-if="item.isNew"
                        style="
                          float: right;
                          color: rgb(115 185 166);
                          font-size: 13px;
                          line-height: 3;
                        "
                        class="el-icon-collection-tag"
                      ></i>
                    </div>
                  </van-radio>
                </van-radio-group>
                <van-empty
                  v-else
                  class="custom-image"
                  :image="noDataImage"
                  description="暂无数据"
                />
              </div>

              <div v-if="allowCreate" class="footer">
                <div class="add_btn" @click="handlerChangePopup">
                  <van-icon name="plus" class="icon" />
                  添加标签
                </div>
              </div>
            </div>
          </van-popup>
          <van-popup
            v-model="addVisible"
            position="bottom"
            class="custom-van-pop"
            round
          >
            <div class="pop-header">
              <span class="cancel" @click="addVisible = false">取消</span>
              <span class="title">添加标签</span>
              <span class="confirm" @click="submitAdd">确定</span>
            </div>
            <div class="pop-content">
              <div class="input">
                <ht-input
                  v-model="currentQueryAdd"
                  style="width: 100%"
                  type="textarea"
                  :maxlength="30"
                  :show-word-limit="true"
                ></ht-input>
              </div>
            </div>
          </van-popup>
        </div>
      </template>
    </template>
    <!-- <add-item
              v-if="allowCreate"
              :placeholder="placeholder"
              @addItem="addItem"
            ></add-item> -->

    <ht-field-tail
      :writeable.sync="writeable"
      :field-name="inputName"
      :readonly="!inputWriteable"
      :input-value="inputValComputed"
      :tag-format-value="tagFormatValue"
    />
  </div>
</template>
<script>
  import utils from '@/utils.js'
  import deepmerge from 'deepmerge'
  import permission from '@/mixins/permission.js'
  import inputName from '@/mixins/inputName.js'
  import linkage from '@/mixins/linkage.js'
  import ganged from '@/mixins/ganged.js'
  import form from '@/mixins/form.js'
  import formDataUpdate from '@/mixins/formDataUpdate.js'
  import mobileMode from '@/mixins/mobileMode.js'
  import AddItem from './AddItem.vue'
  import popupMode from '@/mixins/popupMode.js'
  import tableFieldReadOnly from '@/mixins/tableFieldReadOnly.js'
  export default {
    name: 'HtSelect',
    components: {
      AddItem,
    },
    mixins: [
      permission,
      inputName,
      linkage,
      ganged,
      form,
      formDataUpdate,
      mobileMode,
      popupMode('showPicker'),
      tableFieldReadOnly,
    ],
    props: {
      value: [String, Number, Boolean, Array],
      otherOptionType: [String, Number, Boolean, Array],
      options: Array,
      selectlist: Array,
      disabled: {
        type: Boolean,
        default: false,
      },
      readonly: {
        type: Boolean,
        default: false,
      },
      multiple: {
        type: Boolean,
        default: false,
      },
      clearable: {
        type: Boolean,
        default: true,
      },
      filterable: {
        type: Boolean,
        default: false,
      },
      allowCreate: {
        type: Boolean,
        default: false,
      },
      remoteMethod: Function,
      remote: {
        type: Boolean,
        default: false,
      },
      relatedQuery: {
        type: Array,
        default: function () {
          return []
        },
      },
      limitCount: {
        type: Number,
        default: 0,
      },
      collapseTags: {
        type: Boolean,
        default: false,
      },
      popperClass: {
        type: String,
      },
      isSearchSelect: {
        type: Boolean,
        default: false,
      },
      isAddAll: {
        type: Boolean,
        default: false,
      },
      isValidate: {
        type: Boolean,
        default: false,
      },
    },
    data() {
      return {
        noDataImage: require('@/assets/no_data_list.png'),
        optionsAry: [],
        tagFormatValue: [],
        queryVersion: 0,
        showPicker: false,
        addVisible: false,
        selectStr: this.isMobile && this.isAddAll ? '全部' : '',
        selectResult: [],

        //临时添加的下拉框选项
        templOptionsAry: [],
        optionsAryList: [],
        currentQuery: '',
        currentQueryAdd: '',
      }
    },
    computed: {
      hasOptions: function () {
        return (
          this.optionsAry &&
          this.optionsAry.constructor == Array &&
          this.optionsAry.length > 0
        )
      },
      // 用于显示在表单中
      inputValComputed: function () {
        let data = this.value || ''

        if (
          this.optionsAry &&
          this.optionsAry.length > 0 &&
          (Array.isArray(this.inputVal)
            ? this.inputVal.length > 0
            : this.inputVal)
        ) {
          //多选 单选
          if (this.multiple) {
            let valueList = Array.isArray(this.inputVal)
              ? this.inputVal
              : this.inputVal.split(',')
            let list = []
            valueList.forEach((i) => {
              let itemObj = this.optionsAry.find(
                (item) => item[this.propKey] == i
              )

              itemObj && list.push(itemObj[this.propValue])
            })
            data = list.join()
          } else {
            let itemObj = this.optionsAry.find(
              (item) => item[this.propKey] == this.inputVal
            )
            itemObj && (data = itemObj[this.propValue])
          }
        }
        return data
      },
      inputVal: {
        get() {
          if (utils.isEmpty(this.value)) {
            return ''
          }
          this.relatedQueryLoad() // 触发绑定的关联查询
          if (this.value.constructor == String) {
            const ary = this.value === '' ? [] : this.value.split(',')
            this.optionsAryList = this.optionsAry // eslint-disable-line
            if (this.inputWriteable) {
              if (this.multiple) {
                return ary
              } else {
                return this.value
              }
            } else {
              // 只读 多选
              if (this.multiple) {
                const ary = this.value === '' ? [] : this.value.split(',')
                let optionVals = []
                let tempAry = deepmerge([], ary, { clone: true })
                ary.forEach((m) => {
                  this.optionsAry.find((opt) => {
                    if (opt[this.propKey] == m) {
                      optionVals.push(opt[this.propValue])
                      tempAry.remove(m)
                    }
                    if (opt.children && opt.children.length > 0) {
                      opt.children.find((childOpt) => {
                        if (childOpt[this.propKey] == m) {
                          optionVals.push(childOpt[this.propValue])
                          tempAry.remove(m)
                        }
                      })
                    }
                  })
                })
                optionVals = optionVals.concat(tempAry)
                this.tagFormatValue = optionVals // eslint-disable-line
                return ary
              }
              if (this.optionsAry && this.optionsAry.length > 0) {
                let optionVals = []
                let tempAry = deepmerge([], ary, { clone: true })
                ary.forEach((m) => {
                  this.optionsAry.find((opt) => {
                    if (opt[this.propKey] == m) {
                      optionVals.push(opt[this.propValue])
                      tempAry.remove(m)
                    }
                    if (opt.children && opt.children.length > 0) {
                      opt.children.find((childOpt) => {
                        if (childOpt[this.propKey] == m) {
                          optionVals.push(childOpt[this.propValue])
                          tempAry.remove(m)
                        }
                      })
                    }
                  })
                })
                optionVals = optionVals.concat(tempAry)
                this.tagFormatValue = optionVals // eslint-disable-line
                return this.value
              }
            }
          }
          return Array.isArray(this.value)
            ? this.value.forEach((item) => {
                item[this.propKey] = String(item[this.propKey])
              })
            : String(this.value)
        },
        set(val) {
          let result = ''
          if (this.multiple) {
            if (val && val.constructor === Array && val.length > 0) {
              if (val[0].constructor === Number) {
                throw '多选不支持数字类型'
              }
              result = val.join(',')
            }
          } else {
            let selectObj = this.optionsAry.find(
              (opt) => opt[this.propKey] == val
            )
            result = selectObj ? selectObj[this.propKey] : val
          }
          if (result != '') {
            this.relatedQueryLoad() // 触发绑定的关联查询
          }
          this.$emit('input', result)
        },
      },
      //分页和新增栏占据了底部一定的高度
      optionsMarginBottom: function () {
        let h = 0
        if (this.allowCreate) {
          h += 40
        }
        return h + 'px'
      },
      limitDisabled() {
        return function (item) {
          if (this.multiple) {
            let check = this.selectResult.includes(item.key)
            return (
              !check &&
              (this.selectResult || []).length >= this.limitCount &&
              this.limitCount > 0
            )
          } else {
            return false
          }
        }
      },
      validateRules() {
        return this.disabled && !this.isValidate ? '' : this.inputValidate
      },
    },
    watch: {
      options: function () {
        this.loadOption()
      },
      inputVal: {
        deep: true,
        immediate: true,
        handler: function (newVal) {
          const list =
            this.optionsAry && this.optionsAry.length
              ? this.optionsAry
              : this.selectlist
          let currentSelected = ''
          if (list) {
            if (this.multiple) {
              currentSelected = list.filter((i) =>
                newVal.includes(i[this.propKey])
              )
              if (currentSelected) {
                this.selectStr = currentSelected
                  .map((i) => i[this.propValue])
                  .join(',')
              }
            } else {
              currentSelected = list.find((i) => i[this.propKey] == newVal)
              this.selectStr =
                this.isMobile && this.isAddAll && newVal == ''
                  ? '全部'
                  : currentSelected
                  ? currentSelected[this.propValue]
                  : newVal
            }
          }
          this.selectResult =
            this.isMobile && this.isAddAll ? newVal : newVal || []
        },
      },
    },
    created() {
      this.$on('formDataUpdate', () => {
        this.loadOption(true)
      })
    },
    mounted() {
      this.loadOption(false, 'init')

      if (this.isMobile && this.isAddAll && this.value == '') {
        this.selectStr = '全部'
      }
    },
    methods: {
      optionsAryChange() {
        if (this.currentQuery) {
          let data = []
          if (this.optionsAry && this.optionsAry.length > 0) {
            this.optionsAry.forEach((item) => {
              if (item[this.propValue].includes(this.currentQuery)) {
                data.push(item)
              }
            })

            return data
          }
        } else {
          return this.optionsAry
        }
      },
      submitAdd() {
        this.addItem(this.currentQueryAdd)
      },
      search() {},
      handlerChangePopup() {
        this.showPicker = !this.showPicker
        this.addVisible = !this.addVisible
        // 清空已输入的
        this.currentQuery = ''
      },
      //加载选项
      loadOption: function (resetValue, isInit = '') {
        // 动态选项
        if (this.ganged && this.ganged.alias) {
          // 如果初始化时不需加载选择时
          if (isInit === 'init' && this.ganged.noInit === 'true') {
            return
          }
          this.dynamicLoadOption(resetValue)
        } else {
          // 静态选项
          this.optionsAry = this.selectlist
            ? this.selectlist
            : this.options
            ? this.options
            : []
          this.optionsAry = [...this.templOptionsAry, ...this.optionsAry]
          if (this.isMobile) {
            if (this.otherOptionType && this.otherOptionType.includes('null')) {
              this.optionsAry.unshift({
                key: 'is_null',
                value: '空',
              })
            }
            if (this.otherOptionType && this.otherOptionType.includes('all')) {
              this.optionsAry.unshift({
                key: 'is_all',
                value: '全部',
              })
            }
          }
        }
      },
      // 动态加载选项
      dynamicLoadOption(resetValue) {
        this.queryVersion += 1
        let versionFlag = this.queryVersion
        this.doCustomQuery(null, true).then(({ data }) => {
          // 如果同一个动态加载项，同时出发多次时，后面的请求会被拦截，所以此处需要将标识减1
          if (data === null) {
            this.queryVersion -= 1
          }
          if (versionFlag < this.queryVersion) {
            return
          }
          if (data != null || data != undefined) {
            // 之前的选项是否是空的
            const preOptionsAryIsEmpty =
              !this.optionsAry || this.optionsAry.length == 0
            // 动态选项是否相同
            const optionsAryEquals = utils.arrayEquals(data, this.optionsAry)
            this.optionsAry = data
            this.optionsAry = [...this.templOptionsAry, ...this.optionsAry]
            if (this.isMobile) {
              if (
                this.otherOptionType &&
                this.otherOptionType.includes('null')
              ) {
                this.optionsAry.unshift({
                  key: 'is_null',
                  value: '空',
                })
              }
              if (
                this.otherOptionType &&
                this.otherOptionType.includes('all')
              ) {
                this.optionsAry.unshift({
                  key: 'is_all',
                  value: '全部',
                })
              }
            }
            // 选项中是否包含旧值
            const isIncludeOldVal = this.checkValue(data)
            if (
              resetValue &&
              this.inputWriteable &&
              !preOptionsAryIsEmpty &&
              !optionsAryEquals &&
              !isIncludeOldVal &&
              this.templOptionsAry.length === 0
            ) {
              this.$nextTick(() => {
                this.$emit('input', '')
              })
            }
          }
        })
      },
      change: function (data) {
        let selectObj = this.optionsAry.find((opt) => opt[this.propKey] == data)
        if (selectObj) {
          this.$emit('change', selectObj[this.propKey], selectObj)
        } else {
          this.$emit('change', data, selectObj)
        }
      },
      visibleChange: function (m) {
        this.$emit('visible-change', m)
      },
      removeTag: function (tag) {
        this.$emit('remove-tag', tag)
      },
      handleClear: function () {
        this.$emit('clear')
      },
      handleBlur: function (event) {
        this.$emit('blur', event)
      },
      handleFocus: function (event) {
        this.$emit('focus', event)
        if (
          this.ganged &&
          this.ganged.alias &&
          this.ganged.noInit === 'true' &&
          !this.optionsAry.length
        ) {
          this.dynamicLoadOption()
        }
      },
      // 准备查询参数
      prepareLoadParams: function (condition) {
        let params = {}
        if (condition && !utils.isEmpty(condition)) {
          // 获取当前控件是否在子表某行中
          let { index } = utils.getSubScopeElAndIndex(this.$el)
          if (this.$el) {
            const pInst = utils.getOnlineFormInstance(this)
            Object.keys(condition).forEach((k) => {
              let val = null
              // 主表
              if (index == null) {
                val = utils.getValueByPath(pInst, condition[k])
              }
              // 子表
              else {
                val = utils.getValueByPath(pInst, condition[k], index)
              }
              if (!utils.isEmpty(val)) {
                params[k] = val
              }
            })
          }
        }
        return params
      },
      // 触发绑定的关联查询
      relatedQueryLoad: function () {
        if (
          this.relatedQuery &&
          this.relatedQuery.constructor == Array &&
          this.relatedQuery.length > 0
        ) {
          const pInst = utils.getOnlineFormInstance(this)
          // 遍历所有的关联查询，逐个触发
          this.relatedQuery.forEach((q) => {
            const params = this.prepareLoadParams(q.condition)
            pInst.$emit('related-query:load', q.alias, params, q.result)
          })
        }
      },
      // 判断当前选项是否包含value值
      checkValue(data) {
        let flag = false
        data.forEach((item) => {
          if (
            this.value &&
            this.value.split(',').includes(item[this.propKey])
          ) {
            flag = true
          }
        })
        return flag
      },
      onCancel() {
        this.showPicker = false
        this.handlerValidate()
      },
      onConfirm() {
        let multiple = Array.isArray(this.selectResult)
          ? this.selectResult.join(',')
          : this.selectResult
        this.$emit('input', multiple)
        this.$emit('change', multiple)

        // this.selectStr = multiple

        this.showPicker = false
        // this.handlerValidate()
      },
      handleShowPicker() {
        if (this.readonly || this.disabled) return
        this.selectResult =
          this.isAddAll && this.isMobile ? this.inputVal : this.inputVal || []
        this.loadOption()
        this.currentQuery = ''
        this.showPicker = true
      },
      clearSelect() {
        this.selectResult = this.isAddAll && this.isMobile ? '' : []
        this.selectStr = this.isAddAll && this.isMobile ? '全部' : ''
        this.$emit('input', '')
        this.$emit('change', '')
        this.handlerValidate()
      },
      handlerValidate() {
        setTimeout(() => {
          this.$validator.validate()
        }, 10)
      },

      addItem(newValue) {
        if (!newValue) {
          if (this.isMobile) {
            this.$toast.fail({
              message: `请输入`,
              duration: 2500,
            })
          } else {
            this.$message.warning('请输入')
          }

          return
        }
        if (this.templOptionsAry.find((e) => e[this.propValue] == newValue)) {
          if (this.isMobile) {
            this.$toast.fail({
              message: `已存在无需添加`,
              duration: 2500,
            })
          } else {
            this.$message.warning('已存在无需添加')
          }
          return
        }
        let newItem = {
          [this.propKey]: newValue,
          [this.propValue]: newValue,
          isNew: true,
        }
        this.templOptionsAry.unshift(newItem)
        this.optionsAry.unshift(newItem)
        if (this.isMobile) {
          this.currentQueryAdd = ''
          this.showPicker = !this.showPicker
          this.addVisible = !this.addVisible
        }
      },
    },
  }
</script>
<style lang="scss" scoped>
  div[aria-invalid='true'] {
    ::v-deep {
      .el-input__inner,
      .el-input__inner:focus {
        border-color: #f56c6c;
      }
    }
  }
  .mobile_field_input {
    border: none;
    width: 100%;
    height: 32px;
    position: absolute;
  }
  .van-cell[aria-invalid='true'] {
    border: none;
  }
  .cell {
    .flex {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      i {
        margin-left: 5px;
      }
    }
    // position: absolute;
    // top: 0;
    // left: 0;
  }
  .van-cell {
    min-height: 32px;
    padding-top: 3px;
    padding-bottom: 0;
    padding-right: 0;
    &::after {
      display: none;
    }
    .van-cell__title {
      width: 1px;
      flex-grow: 0;
    }
  }
  .custom-van-pop {
    max-height: 80%;
    display: flex;
    flex-direction: column;
    ::v-deep .van-field {
      padding-right: 12px !important;
      padding-top: 5px;
    }
    .pop-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px 15px;
      border-bottom: 1px solid #e6e6e6;
      .cancel {
        font-size: 14px;
        color: #8c8c8c;
      }
      .title {
        font-size: 17px;
        color: #1a1a1a;
        font-weight: bold;
      }
      .confirm {
        font-size: 14px;
        color: #409eff;
      }
    }
    .pop-content {
      flex: 1;
      overflow: auto;
      -webkit-overflow-scrolling: touch;
      // margin: 16px 0;
      .van-radio-group,
      .van-checkbox-group {
        ::v-deep .radio-item {
          position: relative;
          padding: 14px 15px;
          border-bottom: 1px solid #e6e6e6;
          .van-radio__label,
          .van-checkbox__label {
            margin-left: 12px;
            color: #262626;
            font-size: 14px;
          }
        }
        .radio-item:last-child {
          border-bottom: none;
        }
      }
      .radio-item-icon {
        position: absolute;
        right: 14px;
        top: 6px;
      }
    }
    .footer {
      width: 100%;
      padding: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
      .add_btn {
        width: 100%;
        height: 44px;
        border: 1px solid #409eff;
        color: #409eff;
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        font-size: 14px;
        border-radius: 8px;
        .icon {
          margin-right: 7px;
          border: 1px solid;
          border-radius: 50%;
        }
      }
    }
    .content_item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 14px 15px;
      height: 48px;
      border-bottom: 1px solid #e6e6e6;
      box-sizing: border-box;
      .label {
        font-size: 14px;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #262626;
      }
    }
    .input_label {
      padding: 14px 15px;
    }
    .input {
      padding: 15px;
      border-top: 1px solid #e6e6e6;
    }
  }
  .placeholder-class {
    color: #bfbfbf;
    font-size: 14px;
    text-align: right;
  }
  .cell-text {
    word-break: break-all;
    color: #262626;
    font-size: 14px;
    text-align: right;
  }

  .mobile-cell {
    padding: 0;
    display: flex;
    align-items: center;
    .van-cell__value {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      .cell-text {
        color: #262626;
        font-size: 14px;
        text-align: right;
      }
      .cell-close {
        margin-left: 4px;
      }
    }
    .placeholder-class {
      color: #bfbfbf;
      font-size: 14px;
      text-align: right;
    }
    .right-arrow {
      transform: rotate(90deg);
    }
  }
  .empty_tip {
    padding: 10px;
    text-align: center;
  }
  .mobile-select__wrap {
    min-height: 32px;
    position: relative;
  }
  .flex {
    display: flex;
    align-items: center;
    .van-icon-clear {
      margin-left: 8px;
    }
  }

  .iclass-text-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
</style>
<style lang="scss">
  //为  下拉框是有值，检索不存在的数据时，添加样式
  .el-select-dropdown:has(
      :first-child.is-empty + :nth-child(2).el-select-dropdown__empty
    ) {
    display: flex;
    flex-direction: column-reverse;
  }
</style>
