<template>
  <div>
    <xy-dialog ref="dialog" :is-show.sync="isShow" type="form" :title="type === 'add' ? '检查问题' : '编辑问题'" :form="form"
      :rules="rules" @submit="submit">
      <template v-slot:mission_id>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;"></span>任务名称：
          </div>
          <div class="xy-table-item-content">
            <el-select v-model="form.mission_id" @change="changeMission" :disabled="hasMissionId" filterable clearable placeholder="请选择任务名称" style="width: 400px;">
              <el-option v-for="item in unitList" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </div>
        </div>
      </template>
      <template v-slot:date>
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-weight: bold;">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>检查日期：
          </div>
          <div class="xy-table-item-content">
            <el-date-picker style="width: 400px;" v-model="form.date" format="yyyy-MM-dd"
              value-format="yyyy-MM-dd" type="date" placeholder="选择检查日期">
            </el-date-picker>
          </div>
        </div>
      </template>
      <template v-slot:up_admin_id>
         <div class="xy-table-item">
           <div class="xy-table-item-label">
             <span style="color: red;font-weight: 600;padding-right: 4px;"></span>上报人：
           </div>
           <div class="xy-table-item-content">
             <el-select v-model="form.up_admin_id" @change="changeUpAdmin" filterable allow-create clearable placeholder="请选择上报人" style="width: 400px;">
               <el-option v-for="item in userdata" :key="item.id" :label="item.name" :value="item.id">
               </el-option>
             </el-select>
           </div>
         </div>

       </template>
       <template v-slot:siteName v-if="type=='editor'">
         <div class="xy-table-item">
           <div class="xy-table-item-label" style="font-weight: bold;">
             <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>检查地点：
           </div>
           <div class="xy-table-item-content">
             <el-cascader filterable ref="cascader1" :show-all-levels="false" :value="form.siteName" v-if="showCasc" clearable :options="siteList" :props="{'label':'name','value':'id'}"
               :placeholder="sitePlaceholder" style="width: 290px;margin-right: 10px;" @change="changeSite"></el-cascader>
             <el-input v-model="form.siteName" v-if="!showCasc" type='text' placeholder="请选择检查地点" clearable
               style="width: 290px;margin-right: 10px;" @focus="$refs.maps.box = true"></el-input>
             <el-button type="primary" v-if="showCasc" @click="$refs.maps.box = true;showCasc=false;form.siteName=''">选择地图</el-button>
             <el-button type="primary" v-if="!showCasc" @click="showCasc = true;form.siteName=''">选择站点</el-button>
           </div>
         </div>
       </template>
       <template v-slot:groups v-if="showgroups">
         <div class="xy-table-item">
           <div class="xy-table-item-label">
             <span style="color: red;font-weight: 600;padding-right: 4px;"></span>小组：
           </div>
           <div class="xy-table-item-content">
             <div>
               {{groupObj.name}}:
               <el-tag style="margin-right:5px" v-for="item in groupObj.details">{{item.name}}</el-tag>
             </div>
           </div>
         </div>
       </template>
      <template v-slot:patrol_list v-if="type=='add'">
        <div class="xy-table-item">
          <div class="xy-table-item-label"  style="font-weight: bold;">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>问题详情
          </div>
          <div class="xy-table-item-content" style="display: flex;flex-wrap: wrap;margin-left: 10px;    width: 90%;">
            <div style="margin-bottom:10px">
              <el-button type="primary" @click="addPatrolList">新增</el-button>
            </div>
            <div style="width:100%">
              <xy-table
                :list="patrol_list"
                stripe
                :isPage="false"
                :table-item="patrol_table">
                <template v-slot:btns>
                  <el-table-column align='center' fixed="right" label="操作" width="80" header-align="center">
                    <template slot-scope="scope">
                      <div>
                        <Poptip transfer confirm title="确认要删除吗？" @on-ok="delPatrolList(scope.$index)">
                          <Button type="primary" style='margin-right:5px;margin-bottom:5px;' size='small' ghost>删除</Button>
                        </Poptip>
                      </div>
                    </template>
                  </el-table-column>
                </template>

                </xy-table>
            </div>

          </div>
        </div>
      </template>
      <template v-slot:ask_id  v-if="type=='editor'">
        <div class="xy-table-item">
          <div class="xy-table-item-label"  style="font-weight: bold;">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>问题类型：
          </div>
          <div class="xy-table-item-content">
            <el-select v-model="form.ask_id" filterable clearable placeholder="请选择问题类型" style="width: 400px;">
              <el-option v-for="item in askList" :key="item.id" :label="item.value" :value="item.id">
              </el-option>
            </el-select>
          </div>
        </div>
      </template>

      <template v-slot:ask_department  v-if="type=='editor'">
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;"></span>建议整改科室：
          </div>
          <div class="xy-table-item-content">
            <el-select @change="changeDepartment" v-model="form.ask_department" filterable allow-create clearable placeholder="请选择或输入建议整改科室" style="width: 400px;">
              <el-option v-for="item in depList" :key="item.id" :label="item.name" :value="item.name">
              </el-option>
            </el-select>
            <!-- <el-input v-model="form.ask_department" type='text' placeholder="请输入建议科室" clearable
              style="width: 400px;"></el-input> -->
          </div>
        </div>

      </template>

      <template v-slot:showgroups v-if="showgroups"></template>
      <template v-slot:ask_introduce  v-if="type=='editor'">
        <div class="xy-table-item">
          <div class="xy-table-item-label"  style="font-weight: bold;">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>问题描述：
          </div>
          <div class="xy-table-item-content">
            <el-input v-model="form.ask_introduce" :rows='5' type='textarea' placeholder="请输入问题描述" clearable
              style="width: 400px;"></el-input>
          </div>
        </div>
      </template>
      <template v-slot:tips  v-if="type=='editor'">
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;"></span>整改建议：
          </div>
          <div class="xy-table-item-content">
            <el-input v-model="form.tips" :rows='5' type='textarea' placeholder="请输入整改建议" clearable
              style="width: 400px;"></el-input>
          </div>
        </div>
      </template>

      <template v-slot:file_ids  v-if="type=='editor'">
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;"></span>问题图片：
          </div>
          <div class="xy-table-item-content">
            <el-upload :action="action" class='upload-demo' list-type="picture-card" :file-list="pictureList"
              ref="pictureUpload" style="width:600px" :auto-upload="true" :data="uploadOther"
              :on-preview="handlePictureCardPreview" :on-success="handlesuccess" :on-remove="handleRemove">
              <i class="el-icon-plus"></i>
            </el-upload>
          </div>
        </div>
      </template>
    </xy-dialog>
    <el-dialog :visible.sync="showPic">
      <img width="100%" :src="showPicUrl" alt="">
    </el-dialog>
    <avue-input-map ref="maps" :params="mapparams" placeholder="请选择地图" v-model="mapform"></avue-input-map>


  </div>
</template>

<script>
  import {
    Message
  } from 'element-ui'
  import {
    getparameteritem
  } from "@/api/system/dictionary.js";
  import {
    save,
    get,
    batchSave
  } from "@/api/task/patrol.js";
  import {
    listunit
  } from "@/api/task/unit.js";
  import {
    listaddress
  } from '@/api/address'
  import {
    listdept
  } from "@/api/system/department.js"
  import {
    listCommonuser
  } from "@/api/common.js"
  import {
    getToken
  } from '@/utils/auth'
  export default {
    components: {

    },
    data() {
      return {
        isShow: false,
        type: 'add',
        id: '',
        mission_id:'',
        hasMissionId:false,
        uploadOther: {
          token: ""
        },
        login_id:'',
        department_id:'',
        groupObj:{},
        showgroups:false,
        showCasc:true,
        action: `${process.env.VUE_APP_BASE_API}api/admin/upload-file`,
        pictureList: [],
        showPic: false,
        showPicUrl: '',
        unitList: [],
        siteList: [],
        siteListArr: [],
        askList: [],
        depList:[],
        mapparams: {
          zoom: 11,
        },
        userdata:[],
        mapform: [],
        patrol_table:[
          {
            label:'问题描述',
            prop:'ask_introduce',
            width:180,
            customFn:(row,scope)=>{
              return(<el-input v-model={this.patrol_list[scope.$index].ask_introduce} type='textarea'
              placeholder="请输入问题描述" clearable>
                </el-input>)
            }
          },

          {
            label:'整改建议',
            prop:'tips',
            width:180,
            customFn:(row,scope)=>{
              return(<el-input v-model={this.patrol_list[scope.$index].tips} type='textarea'
              placeholder="请输入整改建议" clearable>
                </el-input>)
            }
          },
          {
            label:'问题类型',
            prop:'ask_id',
            width:180,
            customFn:(row,scope)=>{
              return(<el-select v-model={this.patrol_list[scope.$index].ask_id} filterable clearable placeholder="请选择问题类型">
              {
                this.askList.map(item=>{
                  return(
                    <el-option key={item.id} label={item.value} value={item.id}>
                    </el-option>
                  )
                })
              }
              </el-select>)
            }
          },
          {
            label:'检查地点',
            prop:'siteName',
            width:240,
            customFn:(row,scope)=>{
              return(<div style="display:flex"><div>
              {
                this.patrol_list[scope.$index].showCasc? <el-cascader filterable ref="cascader1"
              show-all-levels={false} v-model={this.patrol_list[scope.$index].siteName}
              clearable options={this.siteList} props={{
                'props':{'label':'name','value':'id'}
              }}
              placeholder="请选择检查地点" style="width: 120px;margin-right: 10px;"
              on={{
                ["change"]: (e) => (this.changeSite(e,'add',scope.$index)),
              }}></el-cascader> : <el-input v-model={this.patrol_list[scope.$index].siteName}
                 type='text' placeholder="请选择地图" clearable
                  style="width: 120px;margin-right: 10px;"
                  on={{
                    ["focus"]: (e) => (this.$refs.maps.box = true),
                  }}></el-input>
              }
              </div><div>
              {
                this.patrol_list[scope.$index].showCasc? <el-button type="primary"
                  on={{
                    ["click"]: (e) => (this.$refs.maps.box = true,this.mapClickIndex = scope.$index,this.patrol_list[scope.$index].showCasc=false,this.patrol_list[scope.$index].siteName=''),
                  }}>选择地图</el-button>
                  :<el-button type="primary"
                  on={{
                    ["click"]: (e) => (this.patrol_list[scope.$index].showCasc=true,this.patrol_list[scope.$index].siteName=''),
                  }}>选择站点</el-button>
              }
              </div>
                </div>)
            }
          },
          {
            label:'问题图片',
            prop:'files',
            minWidth:220,
            customFn:(row,scope)=>{
              let _this = this
              return(<el-upload action={this.action} style={{'overflow-x':'scroll','overflow-y':'hidden'}} class='upload-demo' list-type="picture-card"
              file-list={this.patrol_list[scope.$index].pictureList}
              ref="pictureUpload" auto-upload={true} data={this.uploadOther}
              props={
                {
                  "on-success": (response, file, fileList) => this.handlesuccess(response, file, fileList,scope.$index),
                  ["on-preview"]: (file) => this.handlePictureCardPreview(file),
                  ["on-remove"]: (file, fileList) => this.handleRemove(file, fileList,scope.$index),
                }

              }>
              <i class="el-icon-plus"></i>
              </el-upload>)
            }
          },
          {
            label:'建议整改科室',
            prop:'ask_department',
            width:180,
            customFn:(row,scope)=>{
              return(<el-select
              on={{
                ["change"]: (e) => (this.changeDepartment(e,scope.$index)),
              }}
              v-model={this.patrol_list[scope.$index].ask_department} filterable allow-create clearable placeholder="请选择或输入建议整改科室">
              {
                this.depList.map(item=>{
                  return(
                    <el-option key={item.id} label={item.name} value={item.name}>
                    </el-option>
                  )
                })
              }
              </el-select>)
            }
          },



        ],
        sitePlaceholder:'请选择站点',
        mapClickIndex:0,
        patrol_list:[{
		  showCasc:true,
          ask_id:'',
          site_id: '',
          siteName: '',
          address: '',
          lat: '',
          lon: '',
          ask_department:'',
          ask_introduce:'',
          tips:'',
          pictureList:[]
        }],
        form: {
          mission_id: '',
          date: '',
          up_admin_id:"",
          siteName: '',
          groups:'',
          showgroups:"",
          patrol_list:[],

          ask_id: '',
          site_id: '',
          address: '',
          lat: '',
          lon: '',

          ask_department: '',

          accept_department_ids:[],
          ask_introduce: '',
          tips: '',
          file_ids: [],
        },

        rules: {
          // mission_id: [{
          //   required: true,
          //   message: '请选择任务名称'
          // }],
          date: [{
            required: true,
            message: '请选择检查日期'
          }],
          // siteName: [{
          //   required: true,
          //   message: '请选择检查地点'
          // }],
          // ask_id: [{
          //   required: true,
          //   message: '请选择问题类型'
          // }],
          // ask_introduce: [{
          //   required: true,
          //   message: '请输入问题描述'
          // }]
        }
      }
    },
    created() {
      // document.getElementById('casc').click()
      this.uploadOther.token = getToken();
      this.loadDeptOptions()
      this.getUnit()
      this.getAddress()
      this.getAsk()
      // this.loadDeptOptions()
      this.loadUser()
    },
    methods: {
      // 获取 专项任务
      changeMission(e){
        console.log("e",e)
        if(e){
          this.getGroups(e)
        }
      },
      changeUpAdmin(){
        alert("123")
      },
      getGroups(e){
        this.groupObj = {}
        this.showgroups = false
        this.unitList.map(item=>{
          if(item.id==e){
            if(item.groups&&item.groups.length>0){
              let arr = {}
              item.groups.map(g=>{
                arr['name'] = g.name
                if(g.details&&g.details.length>0){
                  if(g.type==2){
                    g.details.map(d=>{
                      if(d.id==this.department_id){
                        arr['details'] = g.details
                      }
                    })
                  }
                  if(g.type==1){
                    g.details.map(d=>{
                      if(d.id==this.login_id){
                        arr['details'] = g.details
                      }
                    })
                  }
                }
              })
              console.log("arr",arr)
              this.groupObj = arr
              this.showgroups = true
            }
          }
        })
      },
      async getUnit() {
        const res = await getparameteritem('unitTypeList')
        for(var  k of res.detail){
          if(k.remark=='检查'){
            const res1 = await listunit({
              page:1,
              page_size:9999,
              unit_type:k.id,
              audit_status:1
            })
            this.unitList = res1.data
          }
        }
      },
      loadUser() {
        listCommonuser({
          page_size: 999
        }).
        then((res) => {
          this.userdata = res.data?res.data.reverse():[];
        }).catch(error => {
          console.log(error)
        })
      },
      loadDeptOptions() {
        listdept().
        then((res) => {
          this.depList = res;
        }).catch(error => {
          console.log(error)
          reject(error)
        })
      },
      changeSite(e,type,index) {
        if(e){
          console.log("e",e)
          if(type=='add'){
            this.siteListArr.map(item => {
              if (item.id == e[1]) {
                this.patrol_list[index].site_id = item.id
                this.patrol_list[index].address = item.address
                this.patrol_list[index].lat = item.lat
                this.patrol_list[index].lon = item.lon
              }
            })
          }else{
            this.siteListArr.map(item => {
              if (item.id == e[1]) {
                this.form.site_id = item.id
                this.form.address = item.address
                this.form.lat = item.lat
                this.form.lon = item.lon
                // this.form.siteName = item.name
              }
            })
          }

        }

      },
      changeDepartment(e,index){
        console.log("eeee",e)
        let arr = []
        this.form.accept_department_ids = []
        if(e){
          this.depList.map(item=>{
            if(e===item.name){
              arr.push(item.id)
            }
          })
          if(this.type==='add'){
            this.patrol_list[index].accept_department_ids = arr
          }else{
            this.form.accept_department_ids = arr
          }
        }

      },
      async getAddress() {
        const res = await listaddress({
          page: 1,
          page_size: 9999
        })
        this.siteListArr = res.data.reverse()
        let arr = this.contactSite(res.data)
        console.log("arr",arr)
        this.siteList = arr
      },
      contactSite(arr) {
        let tempArr = [],
          newArr = []
        for (let i = 0; i < arr.length; i++) {
          if (tempArr.indexOf(arr[i].type) === -1) {
            newArr.push({
              id:arr[i].type,
              type: arr[i].type,
              name: arr[i]['type_detail']['value'],
              children: [arr[i]]
            })
            tempArr.push(arr[i].type);
          } else {
            for (let j = 0; j < newArr.length; j++) {
              if (newArr[j].type == arr[i].type) {
                newArr[j].children.push(arr[i])
              }
            }
          }
        }
        return newArr
      },
      async getAsk(label) {
        const res = await getparameteritem('askList')
        this.askList = res.detail
      },
      addPatrolList(){
        this.patrol_list.push({
          showCasc:true,
          ask_id:'',
          site_id: '',
          siteName: '',
          address: '',
          lat: '',
          lon: '',
          ask_department:'',
          ask_introduce:'',
          tips:'',
          pictureList:[]
        })
      },
      delPatrolList(index){
        this.patrol_list.splice(index,1)
      },
      handleRemove(file, fileList,index) {
        if(this.type=='add'){
          this.patrol_list[index].pictureList = fileList
        }else{
          this.pictureList = fileList
        }
      },
      handlesuccess(response, file, fileList,index) {
        console.log(response, file, fileList,index)
        if(this.type=='add'){
          this.patrol_list[index].pictureList = fileList
          console.log("this.patrol_list",this.patrol_list)
        }else{
          this.pictureList = fileList
        }
      },
      handlePictureCardPreview(file) {
        this.showPicUrl = file.url;
        this.showPic = true;
      },
      findParentElement(arr, childId) {
        for (let i = 0; i < arr.length; i++) {
          const element = arr[i];
          if (element.children && element.children.some(child => child.id === childId)) {
            return element;
          }
        }
        return null; // 如果没有找到对应的父元素，返回null
      },
      async getDetail() {
        const res = await get(this.id)
        this.form = {
          mission_id: res?.mission_id,
          date: res?.date,
          up_admin_id:res?.up_admin_id,
          site_id: res?.site_id,
          siteName: res.site_id?[undefined,res.site_id]:res.address,
          groups:'',
          showgroups:"",
          address: res?.address,
          lat: res?.lat,
          lon: res?.lon,
          ask_id: res?.ask_id,


          ask_department: res?.ask_department,
          ask_introduce: res?.ask_introduce,
          tips: res?.tips,
          accept_department_ids:res.accept_department_ids?res.accept_department_ids:[],
          file_ids: res?.file_ids,
          patrol_list:[],
        }
        res.mission_id?this.getGroups(res.mission_id):''
        this.sitePlaceholder = res.site_id?res.site.name:res.address
        // if(res.site_id){
        //   this.showCasc = false
        //   let pArr = this.findParentElement(this.siteList,res.site_id)
        //   if(pArr){
        //     this.form.siteName = []
        //     this.form.siteName.push(pArr.id)
        //     this.form.siteName.push()
        //     this.$forceUpdate()
        //   }else{
        //     this.form.siteName = [undefined,res.site_id]
        //   }
        //   console.log("this.form.siteName",this.form.siteName)

        // }else{
        //   this.form.siteName = res.address
        // }
        this.showCasc = res.site_id?true:false
        // this.$refs.cascader.placeholder = res.site.name
        // this.$forceUpdate()
        // if(this.showCasc){
        //   console.log("this.form.siteName",this.form.siteName)
        //   // this.$refs['cascader'].checkedValue = this.form.siteName
        // }
        this.mapform = [res.lon, res.lat, res.address]
        for (var f of res.files) {
          this.pictureList.push({
            id: f.id,
            url: f.url,
            name: f.original_name
          })
        }
        this.$refs.cascader1.computePresentText()
        // res.guide_upload ? this.guidePictureList.push(res.guide_upload) : ''
      },
      submit() {
        console.log("this.patrol_list",this.patrol_list)
        // return
        let _files = []
        if (this.pictureList.length > 0) {
          for (var h of this.pictureList) {
            if (h.response) {
              _files.push(h.response.id)
            } else {
              _files.push(h.id)
            }
          }
          this.form.file_ids = _files
        } else {
          this.form.file_ids = []
        }
        if (this.type === 'add') {
          this.patrol_list.map(item=>{
            let _files = []
            item.pictureList.map(p=>{
              if (p.response) {
                _files.push(p.response.id)
              } else {
                _files.push(p.id)
              }
            })
            item.file_ids = _files
          })
          let baseForm = {
            mission_id:this.form.mission_id,
            date:this.form.date,
            up_admin_id:this.form.up_admin_id,
            batch:this.patrol_list,
            // site_id: this.form.site_id,
            // address: this.form.address,
            // lat: this.form.lat,
            // lon: this.form.lon,
          }
          console.log("baseForm",baseForm)
          // return
          batchSave({
            ...baseForm
          }).then(res => {
            Message({
              type: 'success',
              message: '新增检查成功'
            })
            this.isShow = false
            this.$emit('refresh')
          })
          return
        }
        if (this.type === 'editor') {
          save({
            id: this.id,
            ...this.form
          }).then(res => {
            Message({
              type: 'success',
              message: '编辑检查成功'
            })
            this.isShow = false
            this.$emit('refresh')
          })
        }
      },
    },
    watch: {
      isShow(newVal) {
        if (newVal) {
          console.log("this.type",this.type)
          if (this.type === 'editor') {
            this.getDetail()
          }
          if (this.type === 'add') {
            this.form.up_admin_id = this.login_id
            // for (var k of this.unitList) {
            //   if (k.name == '日常巡查') {
            //     this.form.mission_id = k.id
            //   }
            // }
          }
        } else {
          this.id = ''
          this.type='add'
          this.login_id = ''
          this.department_id = ''
          this.groupObj = {}
          this.showgroups = false
          this.pictureList = []
          this.patrol_list = []
          this.mission_id = ''
          this.mapform = []
          this.showCasc = true
		  this.mapClickIndex = 0
          this.hasMissionId = false
          this.$refs['dialog'].reset()
        }
      },
      mission_id(newval) {
        if (newval) {
          this.form.mission_id = newval
          this.hasMissionId = true
          this.getGroups(newval)
        }
      },
      mapform(newVal, oldVal) {

		    console.log("点击地图了z",this.mapClickIndex)
        if(this.showCasc && this.type==='add'){
          console.log("点击地图了",this.mapClickIndex)
          this.patrol_list[this.mapClickIndex].lon = newVal[0];
          this.patrol_list[this.mapClickIndex].lat = newVal[1];
          this.patrol_list[this.mapClickIndex].address = newVal[2];
          this.patrol_list[this.mapClickIndex].siteName = newVal[2]
          this.patrol_list[this.mapClickIndex].site_id = ''
          return
        }
        this.form.lon = newVal[0];
        this.form.lat = newVal[1];
        this.form.address = newVal[2];
        this.form.siteName = newVal[2]
        this.form.site_id = ''

      }
    }

  }
</script>

<style scoped lang="scss">
  // .xy-table-item-label {
  //   width: 160px;
  // }
  ::v-deep .patrol_list {
    flex-basis: 100%;
	    width: 100%;
  }

  ::v-deep .avue-input-map {
    display: none;
  }

  ::v-deep .site_id,
  ::v-deep .address,
  ::v-deep .lat,
  ::v-deep .lon,
  ::v-deep .accept_department_ids
  {
    display: none;
  }

  .img__delete {
    transform: scale(0.8, 0.8);

    position: absolute;
    top: 4px;
    right: 4px;
  }

  ::v-deep .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  ::v-deep .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  ::v-deep .el-upload--picture-card {
    font-size: 28px;
    color: #8c939d;
    width: 146px !important;
    height: 146px !important;
    line-height: 146px !important;
    text-align: center;
  }

  ::v-deep .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 146px !important;
    height: 146px !important;
    line-height: 146px !important;
    text-align: center;
  }

  ::v-deep .avatar {
    width: 80px !important;
    display: block;
    border-radius: 6px;
  }

  // ::v-deep .xy-table-item-label {
  //   width: 160px !important;
  // }

  ::v-deep .el-date-editor .el-range-separator {
    width: auto !important;
  }

  ::v-deep .el-input-number .el-input__inner {
    text-align: left !important;
  }

  .searchCompanys {
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;

    .el-input {
      width: 80%
    }
  }
</style>
