<template>
  <super-dialog
    v-model="isShowDialog"
    :modal="false"
    :title="'救援单信息'"
    :top="top"
    :width="width"
    class="corporate-customers"
    v-bind="$attrs"
    @closed="closed"
    @open="open"
  >
    <div :style="{height}" class="rescueInfo-dialog edit-add-detail">
      <div class="form-module form-content">
        <el-form
          ref="rescueInfo"
          :model="rescueInfo"
          :rules="rescueInfoRules"
          label-position="right"
          label-suffix="："
          label-width="120px"
        >
          <div class="rows">
            <div class="rows-left">
              <div class="rows-hr"></div>
            </div>
            <div class="rows-title">
              <div class="text-overflow">救援信息</div>
            </div>
          </div>
          <el-row :gutter="24">
            <el-col :span="8">
              <el-form-item label="报案电话" prop="rescueTel">
                <el-input
                  v-model="rescueInfo.rescueTel"
                  clearable
                  placeholder="报案电话"
                  type="number"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="报案时间" prop="rescueTime">
                <el-date-picker
                  v-model="rescueInfo.rescueTime"
                  default-time="12:00:00"
                  placeholder="选择日期时间"
                  style="width: 100%"
                  type="datetime"
                  value-format="yyyy-MM-dd HH:mm:ss"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="所属路段" prop="roadId">
                <el-select
                  v-model="rescueInfo.roadId"
                  clearable
                  filterable
                  placeholder="请选择所属路段"
                  style="width: 100%"
                  @change="roadChange"
                >
                  <el-option
                    v-for="item in roadOptions"
                    :key="item.id"
                    :label="item.roadName"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="24">
            <el-col :span="8">
              <el-form-item label="开始站" prop="startPatrolId">
                <el-select
                  v-model="rescueInfo.startPatrolId"
                  filterable
                  placeholder="请选择开始站"
                  style="width: 100%"
                  @change="siteChange($event, 'startPatrol')"
                >
                  <el-option
                    v-for="item in alongRouteInfoData"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="结束站" prop="endPatrolId">
                <el-select
                  v-model="rescueInfo.endPatrolId"
                  filterable
                  placeholder="请选择结束站"
                  style="width: 100%"
                  @change="siteChange($event, 'endPatrol')"
                >
                  <el-option
                    v-for="item in alongRouteInfoData"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="报案来源" prop="rescueSrc">
                <el-select
                  v-model="rescueInfo.rescueSrc"
                  clearable
                  placeholder="报案来源"
                  style="width: 100%"
                >
                  <el-option
                    v-for="(item, index) in getDictionaryByCode('baly')"
                    :key="index"
                    :label="item.name"
                    :value="Number(item.value)"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="16">
              <el-form-item class="stake-mark" label="起点桩号全值" prop="startPeg">
                <div class="pegVal-text1">K</div>
                <el-input
                  v-model="rescueInfo.startPeg"
                  clearable
                  oninput="value=value.replace(/[^0-9]/g,'')"
                  type="number"
                ></el-input>
                <div class="pegVal-text2">+</div>
                <el-input
                  v-model="rescueInfo.startPegAdd"
                  clearable
                  oninput="value=value.replace(/[^0-9]/g,'')"
                  type="number"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="事发天气" prop="weather">
                <el-select
                  v-model="rescueInfo.weather"
                  allow-create
                  clearable
                  default-first-option
                  filterable
                  placeholder="事发天气"
                  style="width: 100%"
                >
                  <el-option
                    v-for="(item, index) in getDictionaryByCode('tq')"
                    :key="index"
                    :label="item.name"
                    :value="item.name"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="24">
              <el-form-item label="救援类型" prop="rescueType">
                <el-radio-group v-model="rescueInfo.rescueType" size="medium">
                  <el-radio
                    v-for="(item, index) in getDictionaryByCode('jylx')"
                    :key="index"
                    :label="Number(item.value)"
                    :value="Number(item.value)"
                    border
                  >{{ item.name }}
                  </el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="24">
              <el-form-item label="行驶方向" prop="direction">
                <el-radio-group v-model="rescueInfo.direction" size="medium">
                  <el-radio
                    v-for="(item, index) in getDictionaryByCode('xsfx')"
                    :key="index"
                    :label="item.value"
                    :value="item.value"
                    border
                  >{{ item.name }}
                  </el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="24">
              <el-form-item label="占道情况" prop="occupy">
                <el-checkbox-group v-model="rescueInfo.occupy" size="medium">
                  <el-checkbox
                    v-for="(item, index) in getDictionaryByCode('zdqk')"
                    :key="index"
                    :disabled="item.value > 0 && checkDisabled()"
                    :label="item.value"
                    :value="item.value"
                    @change="chaeckChange"
                  >{{ item.name }}
                  </el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </el-col>
          </el-row>
          <div class="rows">
            <div class="rows-left">
              <div class="rows-hr"></div>
            </div>
            <div class="rows-title">
              <div class="text-overflow">故障车信息</div>
            </div>
          </div>
          <el-row :gutter="24">
            <el-col :span="8">
              <el-form-item label="故障车牌" prop="carCode">
                <el-input
                  v-model="rescueInfo.carCode"
                  clearable
                  placeholder="故障车牌"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="故障车类" prop="carClass">
                <el-radio-group
                  v-model="rescueInfo.carClass"
                  size="medium"
                >
                  <el-radio
                    v-for="(item, index) in getDictionaryByCode('gzcl')"
                    :key="index"
                    :label="Number(item.value)"
                    :value="Number(item.value)"
                    border
                  >{{ item.name }}
                  </el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="24">
              <el-form-item label="故障车型" prop="carType">
                <el-radio-group v-model="rescueInfo.carType" size="medium">
                  <el-radio
                    v-for="(item, index) in getCarClassify(
                      rescueInfo.carClass
                    )"
                    :key="index"
                    :label="Number(item.value)"
                    :value="Number(item.value)"
                  >{{ item.name }}
                  </el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="8">
              <el-form-item label="车载重量（吨）" prop="carWeight">
                <el-input
                  v-model="rescueInfo.carWeight"
                  class="number-input"
                  placeholder="请输入内容"
                  type="number"
                >
                  <template slot="append">吨</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="车主姓名" prop="carUser">
                <el-input
                  v-model="rescueInfo.carUser"
                  clearable
                  placeholder="车主姓名"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="车主电话" prop="carUserTel">
                <el-input
                  v-model="rescueInfo.carUserTel"
                  clearable
                  placeholder="车主电话"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <div class="rows">
            <div class="rows-left">
              <div class="rows-hr"></div>
            </div>
            <div class="rows-title">
              <div class="text-overflow">救援处置队伍派遣信息</div>
            </div>
          </div>
          <el-row :gutter="24">
            <el-col :span="8">
              <el-form-item label="派遣队伍" prop="teamId">
                <el-select
                  v-model="rescueInfo.teamId"
                  filterable
                  placeholder="请选择救援处置队伍"
                  style="width: 100%"
                  @change="teamIdChange"
                >
                  <el-option
                    v-for="item in teamDataList"
                    :key="item.value"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="派遣人员" prop="userName">
                <el-input
                  v-model="rescueInfo.userName"
                  class="el-click-input"
                  clearable
                  placeholder="点击选择派遣人员"
                  readonly
                  suffix-icon="el-icon-search"
                  @click.native="showDialog('userChoice')"
                >
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="派遣车辆" prop="dispatchCarCode">
                <el-input
                  v-model="rescueInfo.dispatchCarCode"
                  class="el-click-input"
                  clearable
                  placeholder="点击选择派遣车辆"
                  readonly
                  suffix-icon="el-icon-search"
                  @click.native="showDialog('carChoice')"
                >
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="8">
              <el-form-item label="派遣车型">
                <el-select
                  v-model="rescueInfo.dispatchCarType"
                  clearable
                  disabled
                  placeholder="派遣车型"
                  style="width: 100%"
                >
                  <el-option
                    v-for="(item, index) in getDictionaryByCode('jycl-cllx')"
                    :key="index"
                    :label="item.name"
                    :value="Number(item.value)"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="content-bottom">
          <el-button size="small" @click="isShowDialog = false">
            取 消
          </el-button>
          <el-button
            :disabled="tableLoading"
            size="small"
            type="primary"
            @click="handleAppoint"
          >
            确 定
          </el-button>
        </div>
      </div>
    </div>

    <!-- 车辆选择 -->
    <CarChoiceDialog
      :carData="carData"
      :is-show.sync="carChoiceDialog"
      :selected-content.sync="rescueInfo.car"
      @confirm="handleCarSelect"
    />
    <!-- 人员选择 -->
    <UserChoiceDialog
      :is-show.sync="userChoiceDialog"
      :personOptions="personOptions"
      :selected-content.sync="rescueInfo.user"
      @confirm="handleUserSelect"
    />
  </super-dialog>
</template>

<script>
import moment from 'moment'
import SuperDialog from '@/components/SuperDialog/index.vue'
import CarChoiceDialog from '../CarChoiceDialog'
import UserChoiceDialog from '../UserChoiceDialog'
import {refineRequestBody} from '@/utils/requestWrappers'
import {getDictionaryByCode} from '@/utils/dictionary'
import {tableData as roadSectionInfoInter} from '@/api/patrolAndRescue/infoMgmtPatrolsRescues/roadSectionInfo'
import {tableData as teamData} from '@/api/patrolAndRescue/infoMgmtPatrolsRescues/patrolAndRescueTeamsMgmt'
import {tableData as alongRouteInfoInter} from '@/api/patrolAndRescue/infoMgmtPatrolsRescues/alongRouteInfo'
import {personAndCarInfo} from '@/api/patrolAndRescue/commandDispatch/eventRegistration'

export default {
  name: 'RescueInfoDialog',
  inheritAttrs: false,
  //   mixins: [TableMixin],
  props: {
    isShow: {
      default: false,
      type: Boolean
    },
    top: {
      default: '14vh',
      type: String
    },
    width: {
      default: '60%',
      type: String
    },
    height: {
      default: '65vh',
      type: String
    },
    confirmCloseDialog: {
      default: true,
      type: Boolean
    },
    rescueInfoDetail: {
      default: () => {
      },
      type: Object
    },
    baseInfo: {
      default: () => {
      },
      type: Object
    }
  },
  components: {
    SuperDialog,
    CarChoiceDialog,
    UserChoiceDialog
  },
  data() {
    const validateStation = (rule, value, callback) => {
      if (this.rescueInfo.startPeg === undefined || this.rescueInfo.startPeg === '' || this.rescueInfo.startPeg === null) {
        callback(new Error('请输入开始点位桩号全值'))
      } else if (this.rescueInfo.startPegAdd === undefined || this.rescueInfo.startPegAdd === '' || this.rescueInfo.startPegAdd === null) {
        callback(new Error('请输入开始点位桩号全值!'))
      } else {
        callback()
      }
    }
    return {
      tableLoading: false,
      tableMaxHeight: '600px',
      teamDataList: [],
      roadOptions: [],
      alongRouteInfoData: [],
      rescueInfo: {
        roadId: '',
        teamId: '',
        occupy: ['0'],
        rescueType: 1,
        carClass: 1,
        direction: '1',
        carType: 1,
        rescueTime: new Date(),
        car: {},
        userName: '',
        dispatchCarCode: '',
        user: []
      },
      rescueInfoRules: {
        rescueTel: [
          {
            required: true,
            message: '报案电话不能为空',
            trigger: 'blur'
          }
        ],
        rescueTime: [
          {
            required: true,
            message: '报案时间不能为空',
            trigger: ['change', 'blur']
          }
        ],
        eventType: [
          {
            required: true,
            message: '请选择事件类型',
            trigger: ['change']
          }
        ],
        rescueType: [
          {
            required: true,
            message: '救援类型不能为空',
            trigger: ['change']
          }
        ],
        roadId: [
          {
            required: true,
            message: '路段信息不能为空',
            trigger: ['change']
          }
        ],
        teamId: [
          {
            required: true,
            message: '派遣队伍不能为空',
            trigger: ['change']
          }
        ],
        eventTime: [
          {
            required: true,
            message: '事件发生时间不能为空',
            trigger: ['change']
          }
        ],
        carUserTel: [
          {
            pattern: /^1(3[0-9]|4[57]|5[0-35-9]|7[0678]|8[0-9])\d{8}$/,
            message: '车主电话输入有误',
            trigger: 'blur'
          }
        ],
        // userName: [
        //   {
        //     required: true,
        //     message: '派遣人员不能为空',
        //     trigger: ['change', 'blur']
        //   }
        // ],
        // dispatchCarCode: [
        //   {
        //     required: true,
        //     message: '派遣车辆不能为空',
        //     trigger: ['change', 'blur']
        //   }
        // ],
        rescueStatus: [
          {
            required: true,
            message: '请选择救援状态',
            trigger: ['change']
          }
        ],
        startPeg: [
          {required: true, validator: validateStation, trigger: 'blur'}
        ]
      },
      // 车辆
      carData: [],
      carChoiceDialog: false,
      // 人员
      userChoiceDialog: false,
      dispatches: [],
      personOptions: []
    }
  },
  computed: {
    isShowDialog: {
      get() {
        return this.isShow
      },
      set(val) {
        this.$emit('update:isShow', val)
      }
    }
  },
  methods: {
    getDictionaryByCode,
    checkDisabled() {
      return this.rescueInfo.occupy.includes('0')
    },
    getCarClassify(value) {
      const dict_arr = getDictionaryByCode('gzcl')
      const dict = dict_arr.filter((item) => item.value == value)
      return dict.length ? dict[0]?.lowerDic['gzcx'] : []
    },
    chaeckChange(e) {
      if (this.rescueInfo.occupy.includes('0')) {
        this.rescueInfo.occupy = ['0']
      }
    },
    // 打开弹层时触发
    open() {
      this.getRoadData()
      if (this.rescueInfoDetail.type === 'edit') {
        this.rescueInfoDetail.occupy = this.rescueInfoDetail.occupy.split(',')
        if (this.rescueInfoDetail.pegVal) {
          let startPegArr = this.rescueInfoDetail.pegVal.split('+')
          this.$set(this.rescueInfo, 'startPeg', startPegArr[0].slice(1))
          this.$set(this.rescueInfo, 'startPegAdd', startPegArr[1])
        } else {
          this.$set(this.rescueInfo, 'startPeg', '')
          this.$set(this.rescueInfo, 'startPegAdd', '')
        }
        this.$set(this, 'rescueInfo', JSON.parse(JSON.stringify(this.rescueInfoDetail))
        )
        this.roadChange(this.rescueInfoDetail.roadId, true)
      } else {
        console.log(this.baseInfo, 'this.baseInfo')
        // 默认赋值
        this.rescueInfo.roadId = this.baseInfo.roadId
        this.roadChange(this.rescueInfo.roadId, false)
        if (this.rescueInfo.rescueTel) {
          this.rescueInfo.rescueTel = this.baseInfo.eventTel
        }
        this.rescueInfo.rescueTime = this.baseInfo.eventTime
        this.rescueInfo.direction = this.baseInfo.direction
        if (this.baseInfo.pegSVal) {
          let startPegArr = this.baseInfo.pegSVal.split('+')
          this.$set(this.rescueInfo, 'startPeg', startPegArr[0].slice(1))
          this.$set(this.rescueInfo, 'startPegAdd', startPegArr[1])
        } else {
          this.$set(this.rescueInfo, 'startPeg', '')
          this.$set(this.rescueInfo, 'startPegAdd', '')
        }
      }
    },
    // 展示弹层
    showDialog(dialogName) {
      if (!dialogName) return
      if (dialogName === 'userChoice') {
        if (!this.rescueInfo.teamId) {
          this.$message.error('请先选择救援处置队伍')
        } else {
          this[dialogName + 'Dialog'] = true
        }
      } else {
        this[dialogName + 'Dialog'] = true
      }
    },
    // 路段列表
    async getRoadData() {
      const {rows = []} = await roadSectionInfoInter({pageBean: {pageSize: -1}})
      this.roadOptions = rows.map((item) => {
        item.roadName = item.name + ' ' + item.code
        return item
      })
    },
    // 路段方法
    roadChange(value, type = false) {
      if (!type) {
        this.rescueInfo.teamId = ''
      }
      this.getTeamData(value, type)
      // 通过路段信息获取沿线设备信息
      this.getAlongRouteInfo(value, (data) => {
        const {startPatrolId, endPatrolId} = this.rescueInfo
        /*
         * 巡检开始，结束站
         * */
        if (startPatrolId) {
          if (!data.some((i) => i.id === startPatrolId)) {
            this.rescueInfo.startPatrolId = ''
            setTimeout((_) => this.$message.warning('请重新选择开始站..'))
          }
        }
        if (endPatrolId) {
          if (!data.some((i) => i.id === endPatrolId)) {
            this.rescueInfo.endPatrolId = ''
            setTimeout((_) => this.$message.warning('请重新选择结束站..'))
          }
        }
      })
    },
    // 通过路段信息获取沿线设备信息
    async getAlongRouteInfo(value, callback) {
      const _wipeData = () => {
        this.alongRouteInfoData = []
        callback && callback(this.alongRouteInfoData)
      }

      try {
        // 获取沿线设施
        const {rows = []} = await alongRouteInfoInter(
          refineRequestBody({
            querys: [{operation: 'IN', property: 'road_segment_id_', value}]
          }),
          'addEdit'
        )

        callback && callback(rows)
        this.alongRouteInfoData = rows
      } catch (error) {
        // 不为请求过快结束的情况下，重置
        if (error.message !== 'canceled') _wipeData()
      }
    },
    // 通过路段信息获取巡查救援队伍信息
    async getTeamData(value, type) {
      const {rows = []} = await teamData(
        refineRequestBody({
          querys: [{operation: 'IN', property: 'r.id_', value}]
        }),
        'addEdit'
      )
      this.teamOptions = rows
      this.teamDataList = rows.filter((item) => item.type === '2')
      if (this.teamDataList.length > 0) {
        if (!type) {
          this.rescueInfo.teamId = this.teamDataList[0].id
          this.teamIdChange(this.teamDataList[0].id)
        }
      }
    },
    teamIdChange(value) {
      this.getPersonAndCarInfo(value)
      let teamInfo = this.teamOptions.filter(
        (item) => item.id === this.rescueInfo.teamId
      )[0]
      this.rescueInfo.teamName = teamInfo.name
      this.$set(this.rescueInfo, 'userName', '')
      this.$set(this.rescueInfo, 'dispatchCarCode', '')
      this.rescueInfo.user = []
      this.dispatches = []
    },
    // 根据队伍id查询人员信息及车辆信息
    getPersonAndCarInfo(id) {
      personAndCarInfo(id).then((res) => {
        const {members = [], cars = []} = res.value
        this.personOptions = members.map((person) => {
          person.label = person.tel + ' ' + person.name
          return person
        })
        this.carData = cars
      })
    },
    siteChange(e, type) {
      let siteInfo = this.alongRouteInfoData.find((item) => item.id === e)
      this.rescueInfo[`${type}Name`] = siteInfo.name
    },
    handleCarSelect({carNumber, carClass}) {
      this.$set(this.rescueInfo, 'dispatchCarCode', carNumber)
      this.$set(this.rescueInfo, 'dispatchCarType', carClass)
      this.dispatches.forEach((item) => {
        item.dispatchCarCode = carNumber
        item.dispatchCarType = carClass
      })
    },
    handleUserSelect(user) {
      const {dispatchCarCode = '', dispatchCarType = ''} = this.rescueInfo
      if (user.length > 0) {
        this.rescueInfo.user = user
        this.rescueInfo.userName = user.map((item) => item.name).join(',')
        this.dispatches = user.map(item => {
          return {
            dispatchCarCode,
            dispatchCarType,
            dispatchUserId: item.id,
            dispatchUserName: item.name,
            dispatchUserTel: item.tel
          }
        })
      }
    },
    handleAppoint() {
      this.$refs.rescueInfo.validate(async (valid, object) => {
        if (!valid) {
          this.$message.warning(
            `有${
              Object.keys(object).length
            }个字段未通过校验，请正确填写表单内容。`
          )
        } else {
          let data = JSON.parse(JSON.stringify(this.rescueInfo))
          data.occupy = data.occupy.join(',')
          if (data.startPeg && data.startPegAdd) {
            data.pegVal =
              'k' + (data.startPeg || '') + '+' + (data.startPegAdd || '')
          }
          data.rescueTime = moment(data.rescueTime).format(
            'YYYY-MM-DD HH:mm:ss'
          )
          let roadInfo = this.roadOptions.find(
            (item) => item.id === data.roadId
          )
          data.roadName = roadInfo.name
          data.roadCode = roadInfo.code
          data.car = {
            dispatchCarCode: data.dispatchCarCode || '',
            dispatchCarType: data.dispatchCarType
          }
          data.dispatches = JSON.parse(JSON.stringify(this.dispatches))
          this.$confirm('确认保存救援单信息吗？', '提示', {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(async () => {
            this.$emit('confirm', data)
            this.closed()
          })
        }
      })
    },
    // 关闭弹层触发
    closed() {
      const {orgData} = this
      // 重置data中的数据
      Object.assign(this.$data, this.$options.data.call(this), {orgData})
      this.$nextTick(() => {
        this.$refs.rescueInfo?.clearValidate()
      })
      if (this.confirmCloseDialog) this.isShowDialog = false
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/assets/css/element-variables";

.corporate-customers {
  display: block;
}


.stake-mark {
  ::v-deep .el-form-item__content {
    display: flex;
    justify-content: space-between;

    .pegVal-text2,
    .pegVal-text1 {
      padding-right: 10px;
      font-size: 16px;
      width: fit-content;
    }

    .pegVal-text2 {
      padding-left: 10px;
      font-size: 24px;
    }
  }
}

.el-icon-plus {
  cursor: pointer;
  display: block;
  height: 100%;
  font-size: 16px !important;
  font-weight: 900;
  color: #43a1ff;
}

.rescueInfo-dialog {
  width: 100%;
  display: flex;
  flex-direction: column;
  column-gap: 16px;
  min-height: 50vh;
  padding: 0;

  .form-module {
    width: 100%;
    height: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    row-gap: 16px;
    background-color: $--system-module-color1;
    padding: 16px;
    box-sizing: border-box;
    border-radius: 8px;

    .el-form {
      height: calc(100% - 40px);
      overflow-y: scroll;

    }

    .content-bottom {
      display: flex;
      justify-content: flex-end;
      height: 40px;
    }

  }
}

::v-deep::-webkit-scrollbar-thumb,
::v-deep::-webkit-scrollbar {
  display: none;
}
</style>