<template>
  <el-dialog
    :title="type | titleFilter"
    :visible.sync="dataFormVisible"
    :close-on-click-modal="false"
    width='1232px'
    @close="closeHandle">
    <div class="view-body">
      <div class="view-form">
        <div class="form-title base">基础信息</div>
        <div class="form-cnt">
          <el-row :gutter="10">
            <el-col :span="8">
              <el-form label-position="right" label-width="120px" :model="formData" :disabled="type === 2">
                <el-form-item :label="$t('customer.custCode')+'：'" :class="{'unabled is-disabled': type === 2 || type === 1, 'require': type === 0 }">
                  <el-input v-model="formData.custCode" maxlength="200" :disabled="type === 1"></el-input>
                </el-form-item>
                <el-form-item :label="$t('customer.custName')+'：'" :class="{'unabled is-disabled': type === 2, 'require': type === 0 || type === 1}">
                  <el-input v-model="formData.custName" maxlength="200"></el-input>
                </el-form-item>
                <el-form-item :label="$t('customer.custAbbr')+'：'" :class="{'unabled is-disabled': type === 2, 'require': type === 0 || type === 1}">
                  <el-input v-model="formData.custAbbr" maxlength="200"></el-input>
                </el-form-item>

                <el-form-item :label="$t('customer.org')+'：'" :class="{'unabled is-disabled': type === 2, 'require': type === 0 || type === 1}">
                  <treeselect
                    style="width:241px"
                    :class="{'unabled is-disabled': type === 2, 'require': type === 0 || type === 1}"
                    v-model="formData.orgId"
                    :options="orgList"
                    :normalizer="normalizer"
                    :show-count="true"
                    :disabled="type === 2"
                    placeholder="请选择"
                    @select="selectHandle"
                  />
                </el-form-item>
                <el-form-item :label="$t('customer.managerName')+'：'" :class="{'unabled is-disabled': type === 2, 'require': type === 0 || type === 1}">
                  <el-input
                    v-model="formData.managerName"
                    readonly
                    maxlength="200"
                    @focus="handleManFocus"
                    ></el-input>
                </el-form-item>
                <el-form-item :label="$t('customer.industry')+'：'" :class="{'unabled is-disabled': type === 2, 'require': type === 0 || type === 1}">
                    <el-cascader
                      class="ssddd"
                      v-if="isShowAddressInfo"
                      ref="industryRef"
                      style="width: 100%;"
                      :props="props"
                      :show-all-levels="false"
                      :placeholder="industryName"
                      @change="itemHandle"></el-cascader>
                </el-form-item>
                <el-form-item :label="$t('customer.scaleGrade')+'：'" :class="{'unabled is-disabled': type === 2, 'require': type === 0 || type === 1}">
                  <el-select v-model="formData.scaleGrade">
                    <el-option
                      v-for="item in scaleGradeList"
                      :key="item.value"
                      :label="item.name"
                      :value="item.value"></el-option>
                  </el-select>
                </el-form-item>

              </el-form>
            </el-col>
            <el-col :span="8">
              <el-form label-position="right" label-width="120px" :model="formData" :disabled="type === 2">
                <el-form-item :label="$t('customer.creditLevel')+'：'" :class="{'unabled is-disabled': type === 2, 'require': type === 0 || type === 1}">
                  <!-- <el-input v-model="formData.creditLevelId" ></el-input> -->
                  <el-select v-model="formData.creditLevelId">
                    <el-option
                      v-for="item in creditLevelList"
                      :key="item.id"
                      :label="item.levelName"
                      :value="item.id"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item :label="$t('customer.englishName')+'：'" :class="{'unabled is-disabled': type === 2, 'require': type === 0 || type === 1}">
                  <el-input v-model="formData.englishName" maxlength="200"></el-input>
                </el-form-item>
                <el-form-item :label="$t('customer.englistAbbr')+'：'" :class="{'unabled is-disabled': type === 2, 'require': type === 0 || type === 1}">
                  <el-input v-model="formData.englistAbbr" maxlength="200"></el-input>
                </el-form-item>
                <el-form-item :label="$t('customer.foundedTime')+'：'" :class="{'unabled is-disabled': type === 2, 'require': type === 0 || type === 1}">
                  <!-- <el-input v-model="formData.foundedTime" ></el-input> -->
                  <el-date-picker
                    v-model="formData.foundedTime"
                    value-format="yyyy-MM-dd"
                    type="date"
                    :clearable="false"
                    placeholder="选择时间">
                  </el-date-picker>
                </el-form-item>
                <!-- -- -->
                <el-form-item :label="$t('customer.currency')+'：'" :class="{'unabled is-disabled': type === 2, 'require': type === 0 || type === 1}">
                  <!-- <el-input v-model="formData.currencyId" ></el-input> -->
                  <el-select v-model="formData.currencyId">
                    <el-option
                      v-for="item in cPairList"
                      :key="item.id"
                      :label="item.currencyCode"
                      :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item :label="$t('customer.registeredCapital')+'：'" :class="{'unabled is-disabled': type === 2, 'require': type === 0 || type === 1}">
                  <el-input
                  v-model="formData.registeredCapital"
                  maxlength="200"
                  @blur="amountBlur($event, 'formData', 'registeredCapital')"
                  @focus="amountFocus($event, 'formData', 'registeredCapital')"></el-input>
                </el-form-item>
                <el-form-item :label="$t('customer.isListed')+'：'" :class="{'unabled is-disabled': type === 2, 'require': type === 0 || type === 1}">
                  <!-- <el-input v-model="formData.isListed" ></el-input> -->
                  <el-select v-model="formData.isListed">
                    <el-option
                      v-for="item in isListedList"
                      :key="item.value"
                      :label="item.name"
                      :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-form>
            </el-col>
            <el-col :span="8">
              <el-form label-position="right" label-width="120px" :model="formData" :disabled="type === 2">
                <el-form-item :label="$t('customer.custType')+'：'" :class="{'unabled is-disabled': type === 2 || type === 1, 'require': type === 0 }">
                  <!-- <el-input v-model="formData.custType" ></el-input> -->
                  <el-select v-model="formData.custType" @change="custTypeChange" :disabled="type === 1">
                    <el-option
                      v-for="item in custTypeList"
                      :key="item.value"
                      :label="item.name"
                      :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item :label="$t('customer.enterPname')+'：'" :class="{'unabled is-disabled': type === 1 || type === 2 || formData.custType === 1 || formData.custType === 2, 'require': type === 0 && formData.custType !== 1 && formData.custType !== 2}">
                  <el-input
                  v-model="formData.enterPname"
                  readonly
                  @focus="handleFocus"
                  :disabled="formData.custType === 1 || formData.custType === 2 || type === 1"
                  ></el-input>
                </el-form-item>
                <el-form-item :label="$t('customer.registeredAddress')+'：'" :class="{'unabled is-disabled': type === 2, 'require': type === 0 || type === 1}">
                  <el-input v-model="formData.registeredAddress" maxlength="500"></el-input>
                </el-form-item>
                <el-form-item :label="$t('customer.englishRegisteredAddress')+'：'" :class="{'unabled is-disabled': type === 2, 'require': type === 0 || type === 1}">
                  <el-input v-model="formData.englishRegisteredAddress" maxlength="500"></el-input>
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
        </div>
      </div>

      <div class="view-form">
        <div class="form-title run">经营信息</div>
        <div class="form-cnt">
          <el-row :gutter="10">
            <el-col :span="8">
              <el-form label-position="right" label-width="120px" :model="formData" :disabled="type === 2">
                <el-form-item :label="$t('customer.certificateType')+'：'" :class="{'unabled is-disabled': type === 2, 'require': type === 0 || type === 1}">
                  <!-- <el-input v-model="formData.certificateType" ></el-input> -->
                  <el-select v-model="formData.certificateType">
                    <el-option
                      v-for="item in certificateTypeList"
                      :key="item.value"
                      :label="item.name"
                      :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item :label="$t('customer.certificateCode')+'：'" :class="{'unabled is-disabled': type === 2, 'require': type === 0 || type === 1}">
                  <el-input v-model="formData.certificateCode" maxlength="200"></el-input>
                </el-form-item>
                <el-form-item :label="$t('customer.loanCard')+'：'" :class="{'unabled is-disabled': type === 2, 'require': type === 0 || type === 1}">
                  <el-input v-model="formData.loanCard" maxlength="200"></el-input>
                </el-form-item>
              </el-form>
            </el-col>
            <el-col :span="8">
              <el-form label-position="right" label-width="120px" :model="formData" :disabled="type === 2">
                <el-form-item :label="$t('customer.legal')+'：'" :class="{'unabled is-disabled': type === 2, 'require': type === 0 || type === 1}">
                  <el-input v-model="formData.legalPerson" maxlength="200"></el-input>
                </el-form-item>
                <el-form-item :label="$t('customer.legalPersonCerType')+'：'" :class="{'unabled is-disabled': type === 2, 'require': type === 0 || type === 1}">
                  <!-- <el-input v-model="formData.legalPersonCerType" ></el-input> -->
                  <el-select v-model="formData.legalPersonCerType">
                    <el-option
                      v-for="item in legalPersonCerTypeList"
                      :key="item.value"
                      :label="item.name"
                      :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item :label="$t('customer.legalPersonCerCode')+'：'" :class="{'unabled is-disabled': type === 2, 'require': type === 0 || type === 1}">
                  <el-input v-model="formData.legalPersonCerCode" maxlength="200"></el-input>
                </el-form-item>
              </el-form>
            </el-col>
            <el-col :span="8">
              <el-form label-position="right" label-width="120px" :model="formData" :disabled="type === 2">
                <el-form-item :label="$t('customer.businessScope')+'：'" :class="{'unabled is-disabled': type === 2, 'require': type === 0 || type === 1}">
                  <template v-if="type === 0 || type === 1">
                    <el-input v-model="formData.businessScope" maxlength="500"></el-input>
                  </template>
                  <template v-if="type === 2">
                    <el-tooltip :disabled="type === 2 && formData.businessScope && formData.businessScope.length < 17" :content="formData.businessScope" placement="top">
                      <div class="det-type-sty">{{ formData.businessScope }}</div>
                    </el-tooltip>
                  </template>
                </el-form-item>
                <el-form-item :label="$t('customer.businessType')+'：'" :class="{'unabled is-disabled': type === 2, 'require': type === 0 || type === 1}">
                  <template v-if="type === 0 || type === 1">
                    <el-input v-model="formData.businessType" maxlength="500"></el-input>
                  </template>
                  <template v-if="type === 2">
                    <el-tooltip :disabled="type === 2 && formData.businessType && formData.businessType.length < 17" :content="formData.businessType" placement="top">
                      <div class="det-type-sty">{{ formData.businessType }}</div>
                    </el-tooltip>
                  </template>
                </el-form-item>
                <el-form-item :label="$t('customer.businessMain')+'：'" :class="{'unabled is-disabled': type === 2, 'require': type === 0 || type === 1}">
                  <template v-if="type === 0 || type === 1">
                    <el-input v-model="formData.businessMain" maxlength="500"></el-input>
                  </template>
                  <template v-if="type === 2">
                    <el-tooltip :disabled="type === 2 && formData.businessMain && formData.businessMain.length < 17" :content="formData.businessMain" placement="top">
                      <div class="det-type-sty">{{ formData.businessMain }}</div>
                    </el-tooltip>
                  </template>
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
        </div>
      </div>

      <div class="dialog-footer but_icon">
        <template v-if="type !== 2">
          <el-button v-waves class="filter-item flex_align" type="primary" icon="el-icon-my-tijiao" @click="submitHandle">
              {{ $t('table.sbumit') }}
          </el-button>
          <el-button v-waves class="filter-item flex_align" type="primary" icon="el-icon-my-quxiao" @click="dataFormVisible = false">
              {{ $t('table.cancel') }}
          </el-button>
        </template>
      </div>
    </div>
    <SuperiorCompany v-if="scVisible" ref="scRef" :visible.sync="scVisible" @dataBack="dataBack" />
    <User v-if="userVisible" ref="userRef" :visible.sync="userVisible" @dataBack="dataManBack" />
  </el-dialog>
</template>

<script>
import { myMixins } from '@/mixins'
import waves from '@/directive/waves';
import elDragDialog from '@/directive/el-drag-dialog'
import http from '@/api/http';
import SuperiorCompany from '@/components/SuperiorCompany';
import User from '@/components/User';
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css';
import { validatenull } from '@/utils/validate.js'
import { customerInfoCk } from '@/const/check.js'
import {
  custTypeList,
  scaleGradeList,
  certificateTypeList,
  legalPersonCerTypeList,
  isListedList  } from './../virtual-data.js'
export default {
  data() {
    let _self = this
    return {
      customerInfoCk: customerInfoCk,
      dataFormVisible: false,
      scVisible: false,
      userVisible: false,
      type: undefined,
      industryName: '',
      formData: {
        custCode: undefined,
        creditLevelId: undefined,
        custType: undefined,
        custName: undefined,
        englishName: undefined,
        enterPname: undefined,
        custAbbr: undefined,
        englistAbbr: undefined,
        registeredAddress: undefined,
        managerCode: undefined,
        managerName: undefined,
        foundedTime: undefined,
        englishRegisteredAddress: undefined,
        industryId: undefined,
        currencyId: undefined,
        scaleGrade: undefined,
        registeredCapital: undefined,
        orgId: undefined,
        isListed: undefined,
        certificateType: undefined,
        certificateCode: undefined,
        loanCard: undefined,
        legalPerson: undefined,
        legalPersonCerCode: undefined,
        legalPersonCerType: undefined,
        businessScope: undefined,
        businessType: undefined,
        businessMain: undefined,
        rootEnterpriseId: undefined,
        // status: undefined,
        treePcode: undefined,
      },
      custTypeList: custTypeList,
      scaleGradeList: scaleGradeList,
      certificateTypeList: certificateTypeList,
      legalPersonCerTypeList: legalPersonCerTypeList,
      isListedList: isListedList,
      orgList: [],
      cPairList: [],
      creditLevelList: [],
      props: {
        lazy: true,
        lazyLoad: _self.loadNextData
      },
      isShowAddressInfo: true,
      cascaderShow: true
    }
  },
  components: { SuperiorCompany, User, Treeselect },
  mixins: [myMixins],
  directives: { waves, elDragDialog },
  filters: {
    titleFilter(title) {
      const tilteMap = {
        0: '新增',
        1: '修改',
        2: '详情'
      }
      return tilteMap[title]
    }
  },
  computed: {
    textFlag() {
      this.$nextTick(() => {
        console.log(this.$refs.textSpanStr.scrollWidth)
        console.log(this.$refs.textInputStr.clientWidth)
      })
    }
  },
  methods: {
    // 转换菜单数据结构
    normalizer(node) {
      if (node.childs && !node.childs.length) {
        delete node.childs;
      }
      return {
        id: node.id,
        label: node.orgName,
        children: node.childs
      };
    },
    selectHandle(value) {
      console.log(value);
      this.formData.orgId = value.orgName
    },
    fouceHandle() {
      this.cascaderShow = false
      this.$refs.industryRef.focus()
    },
    init(type, row, orgList, industryList, cPairList, creditLevelList) {
      this.dataFormVisible = true
      this.type = type
      this.orgList = [...orgList]
      this.industryList = [...industryList]
      this.cPairList = [...cPairList]
      this.creditLevelList = [...creditLevelList]
      this.$nextTick(() => {
        if (type === 0) {
          this.id = undefined
        } else if (type === 1 || type === 2) {
          this.id = row.id
          this.queryById(this.id)
        }
      })
    },

    loadNextData(node, resolve) {
      console.log('node', node);
      if (!node.data) {
        let params = {
          indLevel: 1,
          cpage: 1,
          pageSize: 99
        }
        http.post('/cust/industry/findList', params).then((res) => {
          const nodes = Array.from(res.data.list).map(item => ({
            indCode: item.indCode,
            value: item.id,
            label: `${item.indName}`,
          }));
          // 通过调用resolve将子节点数据返回，通知组件数据加载完成
          resolve(nodes);
        }).catch(() => {})
      } else {
        let { data, level } = node
        let params = {
          indPcode: data.indCode,
          indLevel: level+1,
          cpage: 1,
          pageSize: 99
        }
        http.post('/cust/industry/findList', params).then((res) => {
          const nodes = Array.from(res.data.list).map(item => ({
            indCode: item.indCode,
            value: item.id,
            label: `${item.indName}`,
            leaf: params.indLevel >= 4 
          }));
          //  leaf: params.indLevel >= 4 如果固定第4级为叶子节点的话，在选择最后一级的时候就可以直接赋值，而无需请求接口后再次点击才能赋值
          resolve(nodes);
        }).catch(() => {})
      }
    },

    itemHandle(value) {
      console.log(value);
      let data = this.$refs.industryRef.getCheckedNodes()[0].data
      this.formData.industryId = data.value
      console.log(data, this.formData.industryId);
    },

    /**
     * 详情页回显
     * @param allLevelCode 所有层级的地区编码
     * @return []
     */
    async initLoadArea (allLevelCode) {
      if (!allLevelCode || allLevelCode.length === 0) return []
      let arr = []
      const val = allLevelCode.shift()
      const res = await http.post('/cust/industry/findByid', { id: val })
      console.log(res);
      for (const item of res) {
        const obj = {
          label: item.indName,
          value: item.id,
          children: item.wCd === allLevelCode[0] ? await this.initLoadArea(allLevelCode) : []
        }
        arr.push(obj)
      }
      console.log(arr);
      return arr
    },

    async findByid(val) {
      await http.post('/cust/industry/findByid', { id: val }).then((res) => {
        this.industryName = res.data.indName
      })
    },

    // 通过id查询企业信息信息
    queryById(id) {
      http.post('/cust/queryById', { id: id }).then((res) => {
        Object.keys(this.formData).forEach((v) => {
          this.formData[v] = res.data[v]
          if (v === 'industryId' && this.formData.industryId) {
            this.findByid(this.formData.industryId)
          }
          if (v === 'registeredCapital') {
            this.formData[v] = this.addThousandth(res.data[v], 2)
          }
        })
      }).catch(() => {})
    },

    // 查询机构树信息
    queryAllTree() {
      http.post('/sys/org/queryAllTree', {}).then((res) => {

      }).catch(() => {})
    },
    // 提交
    submitHandle() {
      let {  ...params } = this.formData
      params = Object.assign(params, {
        registeredCapital: params.registeredCapital ? this.removeThousandth(params.registeredCapital) : undefined,
        foundedTime: params.foundedTime ? params.foundedTime.substr(0, 10) + ' 00:00:00' : undefined,
        // treePcode: '0',
        // industryId: 1,
        // creditLevel: 1,
        // creditLevelId: 1,
        // rootEnterpriseId: 1,
        status: 1
      })

      // 参数判空校验
      for (let i=0;i<Object.keys(params).length;i++) {
        // console.log(Object.keys(params)[i]);
        let tar = Object.keys(params)[i]
        if (tar === 'enterPname') {
          if (params['custType'] === 1 || params['custType'] === 2) { // 单一公司 母公司
            continue
          } else {
            if (validatenull(params['enterPname'])) {
              this.$message.error(`上级公司不能为空`)
              return
            }
          }
        } else {
          if (validatenull(params[tar])) {
            let mes = this.customerInfoCk.find(ele => ele.key === tar).label
            this.$message.error(`${mes}不能为空`)
            return
          }
        }
      }
      switch(this.type) {
        case 0: {
          // 新增
          http.post('/cust/create', params).then((res) => {
            this.$message.success('新增成功')
            this.$emit('update:visible', false)
            this.$emit('refreshData')
          }).catch(() => {})
          break;
        }
        case 1: {
          params =  Object.assign(params, { id: this.id })
          // 修改
          http.post('/cust/update', params).then((res) => {
            this.$message.success('修改成功')
            this.$emit('update:visible', false)
            this.$emit('refreshData')
          }).catch(() => {})
          break;
        }
        default:
          break;
      }
    },
    handleFocus() {
      this.scVisible = true
      let treePcode = this.formData.treePcode ? this.formData.treePcode : undefined
      this.$nextTick(() => {
        this.$refs.scRef.init(treePcode)
      })
    },
    handleManFocus() {
      this.userVisible = true
      let managerCode = this.formData.managerCode ? this.formData.managerCode : undefined
      let orgId = this.formData.orgId ? this.formData.orgId : undefined
      this.$nextTick(() => {
        this.$refs.userRef.init(managerCode, orgId)
      })
    },
    custTypeChange() {
      if (this.formData.custType === 1 || this.formData.custType === 2) { // 单一公司 or 母公司
        this.formData.rootEnterpriseId = 0
        this.formData.treePcode = 0
        this.formData.enterPname = undefined
      }
    },
    dataBack(data) {
      console.log('data', data);
      let { treeCode, custName, rootEnterpriseId } = data
      this.formData.treePcode = treeCode
      this.formData.enterPname = custName
      this.formData.rootEnterpriseId = rootEnterpriseId
    },
    dataManBack(data) {
      let { id, name, orgId } = data
      this.formData.managerCode = id
      this.formData.managerName = name
      this.formData.orgId = orgId
    },
    closeHandle() {
      this.dataFormVisible = false
      if (this.type === 0 || this.type === 1 || this.type === 2) { // 编辑或者删除 清除表单数据 新增保留
        Object.keys(this.formData).forEach((v) => { this.formData[v] = undefined })
        this.industryName = ''
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import '~@/styles/mixin.scss';
.view-body {
  padding: 10px 31px;
  .view-form {
    display: flex;
    border: 1px solid #6dabea;
    margin-bottom: 15px;
    .form-title {
      width: 38px;
      font-size: 15px;
      font-weight: 500;
      color: #616E9C;
      background: url('~@/assets/images/ffrers.png') no-repeat;
      background-size: 200% 120%;
      background-position: 75% 20%;
      text-align: center;
      padding: 20px 10px;
      line-height: 22px;
      font-family: 'sourceHanSansCN';
      @include flex-center;
    }
    .form-cnt {
      flex: 1;
      padding: 15px 0;
    }
  }
}

.el-form .el-form-item {
  margin-bottom: 8px !important;
}
.el-dialog__wrapper {
  ::v-deep .el-dialog__title {
    font-family: 'sourceHanSansCN';
  }
}
.el-cascader ::v-deep .el-icon-arrow-down:before {
  content: '';
  width: 10px;
  height: 6px;
  background-image: url('~@/assets/images/triangle.png');
  background-size: 100%;
  transform: rotate(180deg);
}
.el-cascader ::v-deep .el-icon-arrow-down:after {
  content: '';
  width: 10px;
  height: 6px;
  background-image: url('~@/assets/images/triangle.png');
  background-size: 100%;
}
.ssddd ::v-deep .el-input__inner::placeholder{
  color:#212121 !important;
}
.is-disabled ::v-deep .el-input__inner::placeholder{
  color:#707070 !important;
}
.det-type-sty {
  box-shadow: 1px 1px 4px 0px rgb(0 0 0 / 20%) inset;
  background: #e6e6e6 !important;
  font-family: "SourceHanSansCN";
  color: #707070;
  font-size: 13px;
  padding: 0 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vue-treeselect {
  &.require {
    border: 1px solid #267CD5!important;
    box-shadow: 0px 2px 0px 0px #96aaba, 1px 5px 7px 0px rgb(12 19 36 / 21%), 1px 1px 0px 0px #ffffff, 1px 1px 0px 0px #ffffff, 1px 1px 0px 0px #ffffff, 1px 1px 0px 0px #ffffff !important;
  }
  &.unabled {
    ::v-deep .vue-treeselect__control {
      // box-shadow: 1px 1px 4px 0px rgb(0 0 0 / 20%) inset;
      // background: none !important;
      // border: none !important;
      // opacity: 0.5;
      box-shadow: 1px 1px 2px 0px rgb(0 0 0 / 40%) inset !important;
      background: #e6e6e6 !important;
      .vue-treeselect__value-container {
        .vue-treeselect__single-value {
          color: #707070!important;
          font-family: "SourceHanSansCN"!important;
        }
        .vue-treeselect__input-container {

          .vue-treeselect__input {
            cursor: not-allowed !important;
          }
        }
      }
    }
  }
  ::v-deep .vue-treeselect__control {
    height: 28px;
    line-height: 28px;
    font-size: 13px;
    border-radius: 2px;
    background: #FFFFFF;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 2px;
    border: none;
    background: linear-gradient(180deg, #FFFFFF, #EAF8FF);

    .vue-treeselect__value-container {
      color: #212121;
      font-family: "SourceHanSansCN";
      .vue-treeselect__single-value {
        line-height: 28px;
        padding-left: 8px;
        padding-right: 8px;
      }
      .vue-treeselect__placeholder {
        line-height: 28px;
        font-size: 13px;
      }
      .vue-treeselect__input-container {
        .vue-treeselect__input {
          height: 28px;
        }
      }
    }
    .vue-treeselect__control-arrow-container {
      .vue-treeselect__control-arrow {
        width: 10px;
        height: 9px;
        color: #12579D;
      }
    }
  }
}
</style>
