<template>
  <layout class="row" :leftStyle="{ width: '330px' }">
    <template #page_left>
      <el-tree
        :data="typeList"
        ref="tree"
        :props="{ children: 'children', label: 'categoryName' }"
        highlight-current
        :node-key="'id'"
        default-expand-all
        :expand-on-click-node="false"
        @node-click="handleNodeClick">
        <div class="customize-tree-node" slot-scope="{ node, data }">
          <div
            @click.stop="toggleNodeExpanded(node)"
            class="custom-tree-node-arrow"
            :style="{ transform: node.expanded ? 'rotate(90deg)' : '' }"
            v-if="data.children && data.children.length > 0">
            <!-- <icon :name="node.expanded ? 'xe61e' : 'xe659'"></icon> -->
            <i
              :class="
                node.expanded
                  ? 'iconfont icon-shouqi'
                  : 'iconfont icon-tongyong-biaogezhankaitubiao'
              "></i>
          </div>
          <div class="customize-tree-node__label">
            <span>{{ data.categoryName }}</span>
          </div>
          <div class="customize-tree-node__operate">
            <i
              title="新增分类"
              class="el-icon-circle-plus"
              style="color: rgb(140 195 75); margin-right: 5px"
              @click="addFolder(data)"></i>
            <i
              title="修改分类"
              class="el-icon-edit-outline"
              style="color: #ff9800; margin-right: 5px"
              @click="editFolder(data)"></i>
            <i
              title="删除分类"
              class="el-icon-remove-outline"
              style="color: red"
              @click="removeFolder(data)"></i>
          </div>
        </div>
      </el-tree>
    </template>
    <template #page_right>
      <el-form
        ref="form"
        :model="searchForm"
        size="mini"
        v-enter-submit="search"
        @submit.native.prevent
        :inline="true">
        <el-form-item label="创建时间">
          <choose-time-period v-model="period"></choose-time-period>
        </el-form-item>
        <el-form-item label="应用名称">
          <el-input
            style="width: 120px"
            clearable
            v-model="searchForm.name"
            placeholder="应用名称"></el-input>
        </el-form-item>
        <el-form-item label="应用类型">
          <el-select
            v-model="searchForm.type"
            placeholder="请选择"
            clearable
            filterable>
            <el-option
              v-for="item in applicationTypeData"
              :key="item.id"
              :label="item.value"
              :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label>
          <el-button
            type="primary"
            native-type="submit"
            @click="search()"
            icon="el-icon-search">
            查询
          </el-button>
        </el-form-item>
        <el-form-item label>
          <el-button type="success" @click="addInfo()" icon="el-icon-plus">
            新增
          </el-button>
        </el-form-item>
        <el-form-item label>
          <el-button
            type="danger"
            @click="deleteSection()"
            icon="el-icon-delete">
            批量删除
          </el-button>
        </el-form-item>
      </el-form>
      <div
        class="table_wrap"
        style="min-height: 50%; max-height: 82%; padding: 0">
        <table-view
          :sourceData="sourceData"
          :serialNumber="true"
          :tableColumns="tableColumns"
          ref="multipleTable"
          @selectionChange="selectionChange"
          :selection="true"></table-view>
      </div>
      <div slot="footer" style="display: flex; justify-content: center">
        <!-- <pagination :setValue="setpaginationOptions" :options="paginationOptions" /> -->
        <el-pagination
          layout="sizes, total, prev, pager, next, jumper"
          background
          :total="paginationOptions.total"
          :page-size="paginationOptions.pageSize"
          :current-page="paginationOptions.currentPage"
          @size-change="sizeChange"
          @current-change="onCurrentChange"></el-pagination>
      </div>
    </template>
    <!-- 新增、修改应用 -->
    <el-dialog
      :title="isEdit ? '编辑' : '新增'"
      :visible.sync="editShowing"
      width="1000px"
      :close-on-click-modal="false">
      <div class="edit-form">
        <el-form ref="editForm" :model="editForm" label-width="auto">
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="应用图标">
                <div class="my-flex-1">
                  <upload-images
                    sortField="sort"
                    businessType="other"
                    uploadApiUrl="upload/oss"
                    :type="limitFileType"
                    :isFloat="false"
                    :width="300"
                    :hasWidth="true"
                    :hasOss="true"
                    :length="editFlag ? 1 : 50"
                    v-model="editForm.icon"
                    @selectImg="selectImg">
                    <!-- <template #other="{ index }">
                      <div class="other-msg" style="display: flex">
                        <span class="other-label" style="margin-right: 4px">
                          图标文件
                        </span>
                        <upload-file v-model="productionFile[index]" url="upload/podProductionFileUpload"
                          getFilePath="filePath" :max="1" text="上传图标文件" />
                      </div>
                    </template> -->
                  </upload-images>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item
                label="应用分类"
                prop="categoryId"
                :rules="[{ message: '请选择应用分类', required: true }]">
                <el-cascader
                  style="width: 100%"
                  v-model="editForm.categoryId"
                  size="mini"
                  :options="typeList"
                  clearable
                  :props="{
                    label: 'categoryName',
                    value: 'id',
                    emitPath: false,
                    checkStrictly: true
                  }"
                  :show-all-levels="false"></el-cascader>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="11">
              <el-form-item
                label="应用名称"
                prop="name"
                :rules="[{ message: '请输入应用名称', required: true }]">
                <el-input
                  v-model="editForm.name"
                  placeholder="请输入应用名称"
                  maxlength="120"
                  size="mini"
                  clearable
                  show-word-limit />
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="应用类型">
                <el-radio-group v-model="editForm.isCollectFee">
                  <el-radio :label="false">免费</el-radio>
                  <el-radio :label="true">收费</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <div v-if="editForm.isCollectFee">
            <el-row
              :gutter="20"
              v-for="(item, index) in editForm.salePriceList"
              :key="index">
              <el-col :span="11">
                <el-form-item label="应用价格">
                  <el-input
                    v-model="item.price"
                    placeholder="请输入应用价格"
                    maxlength="120"
                    size="mini"
                    clearable
                    show-word-limit />
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item label="应用周期">
                  <el-select
                    v-model="item.validDays"
                    size="mini"
                    filterable
                    clearable
                    style="width: 100%">
                    <el-option
                      v-for="item in applyCycleList"
                      :key="item.value"
                      :label="item.name"
                      :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col style="display: flex; margin-top: 8px" :span="3">
                <el-button
                  size="mini"
                  type="success"
                  icon="el-icon-plus"
                  @click="addDomain"></el-button>
                <el-button
                  style="margin-left: 15px"
                  size="mini"
                  type="danger"
                  icon="el-icon-minus"
                  @click.prevent="removeDomain(index)"></el-button>
              </el-col>
            </el-row>
          </div>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item
                label="应用简述"
                size="small"
                prop="description"
                :rules="[{ message: '请输入应用简述', required: true }]">
                <el-input
                  style="width: 100%"
                  type="textarea"
                  :rows="4"
                  v-model="editForm.description"
                  placeholder="请输入应用简述"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="应用详情" size="small">
                <v-editor
                  filename="files"
                  style="width: 100%"
                  v-model="editForm.details"
                  ref="wangeditor"
                  height="300px" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <span slot="footer">
        <el-button @click="editShowing = false" size="medium">取消</el-button>
        <el-button @click="saveApplication" type="primary" size="medium">
          确认
        </el-button>
      </span>
    </el-dialog>
    <!-- 暂定 -->
    <el-dialog
      :visible.sync="releaseVisible"
      :close-on-click-modal="false"
      title="发布"
      width="600px">
      <el-checkbox
        :indeterminate="isIndeterminate"
        v-model="checkAll"
        @change="handleCheckAllChange">
        全选
      </el-checkbox>
      <div style="margin: 15px 0"></div>
      <el-checkbox-group
        v-model="checkedCompany"
        @change="handleCheckedCompanyChange">
        <el-checkbox
          style="width: 100px"
          v-for="c in releaseList"
          :label="c.id"
          :key="c.id">
          {{ c.apiName }}
        </el-checkbox>
      </el-checkbox-group>
      <span slot="footer">
        <el-button size="mini" @click="releaseVisible = false">取消</el-button>
        <el-button size="mini" @click="confirmRelease" type="primary">
          确认
        </el-button>
      </span>
    </el-dialog>
    <!-- 新增、修改分类 -->
    <el-dialog
      :title="editFolderId ? '编辑分类' : '新增分类'"
      :visible.sync="folderVisible"
      :close-on-click-modal="false"
      width="600px">
      <el-form
        ref="folderForm"
        :model="folderForm"
        label-position="top"
        label-width="80px">
        <el-form-item
          label="名称"
          prop="folderName"
          :rules="[{ required: true, message: '请输入分类名称' }]">
          <el-input
            v-model="folderForm.folderName"
            clearable
            placeholder="分类名称"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click="folderVisible = false">取消</el-button>
        <el-button @click="submitFolder" type="primary">确认</el-button>
      </span>
    </el-dialog>
  </layout>
</template>
<script>
import Editor from '@/components/wangeditor/index.vue'
import tableView from '@/common/components/base/tableView.vue'
import ChooseTimePeriod from '@/components/base/chooseTimePeriod.vue'
// import ImageView from '@/components/base/ImageView.vue'
import pagination from '../../mixins/pagination'
import { get, post } from '@/common/api/axios'
import UploadImages from '@/components/base/image-list.vue'
import layout from '@/components/global/layout.vue'
export default {
  name: 'system_announce_manage',
  components: {
    UploadImages,
    'v-editor': Editor,
    tableView,
    layout,
    ChooseTimePeriod
    // ImageView
  },
  mixins: [pagination],
  data() {
    return {
      period: [],
      rowNumber: '',
      selection: [],
      editForm: {
        name: '', // 名称
        icon: undefined, // 图标
        // productionFile: '', // 生产文件
        description: '', // 简述
        details: '', // 详情
        categoryId: '', // 分类id
        salePriceList: [
          {
            price: '',
            validDays: ''
          }
        ],
        isCollectFee: true // 是否收费
      },
      deepCloneForm: {},
      limitFileType: ['jpg', 'png'],
      editFlag: true,
      productionFile: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      typeList: [],
      folderIds: '',
      parentFolderId: '',
      folderVisible: false,
      currentFolder: undefined,
      editFolderId: undefined,
      folderForm: {
        folderName: ''
      },
      applicationTypeData: [
        {
          id: 1,
          value: '免费'
        },
        {
          id: 2,
          value: '收费'
        }
      ],
      categoryId: '',
      applyCycleList: [],
      checkAll: false,
      isIndeterminate: false,
      checkedCompany: [],
      userList: [],
      paginationOptions: {
        pageSize: 10,
        currentPage: 1,
        total: 0
      },
      sourceData: [],
      searchForm: {
        type: '',
        name: ''
      },
      isEdit: false,
      editShowing: false,
      releaseVisible: false,
      releaseList: []
    }
  },
  mounted() {
    this.deepCloneForm = JSON.parse(JSON.stringify(this.editForm))
    this.loadTypesData()
  },
  computed: {
    tableColumns() {
      return [
        {
          label: '应用图标',
          type: '',
          key: 'icon',
          // render: (item) => <image-view imgUrl={item.icon}></image-view>,
          render: (item) =>
            item.icon ? (
              <img
                src={item.icon}
                alt="应用图标"
                style={{ width: '40px', height: 'auto' }}
              />
            ) : (
              <span>无图标</span>
            ),
          width: 80
        },
        {
          label: '应用名称',
          key: 'name'
        },
        {
          label: '应用分类',
          key: 'categoryName'
        },
        {
          label: '应用类型',
          key: 'isCollectFee',
          render: (item) => <span>{item.isCollectFee ? '收费' : '免费'}</span>
        },
        {
          label: '应用简述',
          key: 'description'
        },
        {
          label: '创建时间',
          key: 'createTime'
        },
        {
          label: '修改时间',
          key: 'updateTime'
        },
        {
          label: '操作',
          width: 150,
          render: (item) => (
            <div>
              <span
                class="icon-view icon-edit-view"
                title="编辑"
                onClick={() => this.editInfo(item)}>
                <i class="el-icon-edit"></i>
              </span>
              <span
                class="icon-view icon-del-view"
                title="删除"
                onClick={() => this.deleteSection(item)}>
                <i class="el-icon-delete"></i>
              </span>
            </div>
          )
        }
      ]
    }
  },
  methods: {
    toggleNodeExpanded(node) {
      node.expanded = !node.expanded
    },
    // 周期+价格的增删
    removeDomain(index) {
      if (this.editForm.salePriceList.length > 1) {
        if (index !== -1) {
          this.editForm.salePriceList.splice(index, 1)
        }
      } else {
        this.$message.warning('至少设置一种销售价格!')
      }
    },
    addDomain() {
      this.editForm.salePriceList.push({
        price: '',
        validDays: ''
      })
    },
    selectionChange(selection) {
      this.selection = selection
    },
    deleteSection(v) {
      const arr = v ? [v] : this.selection
      if (arr.length === 0) return this.$message('请勾选至少一条记录')
      const ids = arr.map((item) => item.id).join()
      this.$confirm('确定删除选中的信息？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          const url = `businessAppInfo/deleteAppInfoByIds?ids=${ids}`
          get(url).then((res) => {
            if (res.code === 200) {
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
              this.getList()
              this.selection = []
              this.$refs.multipleTable.clearSelectionBox()
            } else {
              this.$alert(res.message, '错误提示', {
                dangerouslyUseHTMLString: true
              })
            }
          })
        })
        .catch(() => {
          this.selection = []
          this.$refs.multipleTable.clearSelectionBox()
        })
    },
    // 分页
    sizeChange(pageSize) {
      this.paginationOptions.pageSize = pageSize
      this.getList()
    },
    onCurrentChange(currentPage) {
      this.paginationOptions.currentPage = currentPage
      this.getList()
    },
    // 提交应用信息
    async saveApplication() {
      try {
        await this.$refs.editForm.validate()
      } catch {
        return
      }
      // if (!this.editForm.icon || this.editForm.icon.length === 0) {
      //   this.$message.warning('请选择应用图标')
      //   return
      // }
      // if (this.productionFile.some((item) => !item)) {
      //   return this.$message.warning('请上传应用图标')
      // }
      // if (this.productionFile.length > 0) {
      //   this.editForm.productionFile = this.productionFile.join(',')
      // }
      try {
        const data = JSON.parse(JSON.stringify(this.editForm))
        data.icon = this.handleImage(data.icon)
        const res = await post('businessAppInfo/addOrUpdateAppInfo', data)
        if (res.code !== 200) return
        this.$message.success(res.message)
        this.getList()
        this.editShowing = false
      } catch (e) {
        this.editShowing = true
      }
    },
    handleImage(data) {
      if (Array.isArray(data) && data.length > 0) {
        return data.map((item) => item.imagePath).join(',')
      }
      return null
    },
    selectImg(file) {
      const imagePath = file.map((ee) => ee.imagePath)
      this.productionFile = imagePath
    },
    // 获取应用周期
    async getapplyCycle() {
      try {
        const res = await get('businessAppSalePrice/getSalePriceValidDays')
        if (res.code !== 200) return
        this.applyCycleList = Object.entries(res.data).map(([name, value]) => ({
          name,
          value
        }))
      } catch (e) {
        console.error(e)
      }
    },
    // 新增、编辑应用信息
    addInfo() {
      this.editShowing = true
      this.editId = undefined
      this.isEdit = false
      this.editForm = JSON.parse(JSON.stringify(this.deepCloneForm))
      this.productionFile = []
      this.editForm.categoryId = this.categoryId || 1
      this.$nextTick(() => {
        this.$refs.editForm.clearValidate()
      })
      this.getapplyCycle()
    },
    async editInfo(item) {
      if (item) {
        this.isEdit = true
        this.editId = item.id
        this.getapplyCycle()
        try {
          const res = await get('businessAppInfo/getAppInfoById', {
            id: item.id
          })
          if (res.code !== 200) return
          // this.productionFile = [res.data.productionFile]
          // res.data.labelNames = res.data.labelNames?.split(',')
          // this._editData = JSON.parse(JSON.stringify(res.data))
          res.data.icon = [{ imagePath: res.data.icon }]
          // if (!res.data.productionFile) {
          //   res.data.productionFile = res.data.mainImage
          // }
          // res.data.designTeamId = Number(res.data.designTeamId)
          this.editForm = res.data
          this.$nextTick(() => {
            this.$refs.editForm.clearValidate()
          })
          this.editShowing = true
        } catch (e) {
          this.$message.error(e)
        }
      }
    },
    // 获取左侧树数据
    async loadTypesData() {
      try {
        const res = await get('businessAppCategory/getCategoryList')
        if (res.code !== 200) return
        this.typeList = this.recursiveFolder(res.data)
        this.categoryId = res.data[0].id
        this.$nextTick(() => {
          this.$refs.tree.setCurrentKey(this.categoryId || res.data[0].id)
          this.getList()
        })
      } catch (e) {
        console.error(e)
      }
    },
    recursiveFolder(folder) {
      for (const item of folder) {
        if (item.children && item.children.length > 0) {
          this.recursiveFolder(item.children)
        }
        if (item.children && item.children.length === 0) {
          item.children = undefined
          this.$set(item, 'leaf', true)
          continue
        }
      }
      return folder
    },
    // 新增、修改、删除分类
    async addFolder(data) {
      this.folderVisible = true
      this.currentFolder = data
      this.parentFolderId = data.pid
      this.editFolderId = undefined
      this.$nextTick(() => {
        this.$refs.folderForm && this.$refs.folderForm.resetFields()
      })
    },
    editFolder(data) {
      this.parentFolderId = data.pid
      this.editFolderId = data.id
      this.folderForm = {
        folderName: data.categoryName
      }
      this.folderVisible = true
    },
    async removeFolder(data) {
      try {
        await this.$confirm('确定删除该分类吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
      } catch {
        return
      }
      try {
        const res = await get('businessAppCategory/deleteCategoryById', {
          id: data.id
        })
        if (res.code !== 200) return
        this.$message.success(res.message)
        this.loadTypesData()
      } catch (e) {
        console.error(e)
      }
    },
    // 分类提交
    async submitFolder() {
      try {
        await this.$refs.folderForm.validate()
      } catch {
        return
      }
      const params = {
        // pid: this.currentFolder.id === 1 ? 1 : this.parentFolderId, // 顶级分类pid传0,其他传自己的id
        // id: this.editFolderId ? this.categoryId : undefined // 编辑有id，新增没有id
        // pid: this.parentFolderId, // 顶级分类pid传0,其他传自己的id
        pid: this.editFolderId ? this.parentFolderId : this.currentFolder.id,
        categoryName: this.folderForm.folderName, // 分类名称
        id: this.editFolderId
      }
      try {
        const res = await post(
          'businessAppCategory/addOrUpdateCategory',
          params
        )
        if (res.code !== 200) return
        this.$message.success(res.message)
        this.loadTypesData()
        this.folderVisible = false
      } catch (e) {
        this.folderVisible = true
      }
    },
    // 左侧树每个节点点击
    handleNodeClick(data) {
      console.log(data, data.id, data.pid)
      this.currentFolder = data
      this.parentFolderId = data.pid
      this.categoryId = data.id
      this.getList()
    },
    handleCheckAllChange(val) {
      this.checkedCompany = val ? this.releaseList.map((e) => e.id) : []
      this.isIndeterminate = false
    },
    handleCheckedCompanyChange(value) {
      const checkedCount = value.length
      this.checkAll = checkedCount === this.releaseList.length
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.releaseList.length
    },
    search() {
      this.getList()
    },
    setpaginationOptions(opt) {
      for (const key in opt) {
        this.paginationOptions[key] = opt[key]
      }
      this.getList()
    },
    async getList() {
      try {
        const { pageSize, currentPage } = this.paginationOptions
        const res = await post('businessAppInfo/getAppInfoList', {
          categoryId: this.categoryId === 1 ? undefined : this.categoryId,
          pageSize,
          currentPage,
          isCollectFee:
            this.searchForm.type === '' ? '' : this.searchForm.type === 2,
          name: this.searchForm.name,
          startTime: this.period && this.period[0],
          endTime: this.period && this.period[1]
        })
        if (res.code !== 200) return
        this.sourceData = res?.data?.records ?? []
        this.paginationOptions.total = res?.data?.total || 0
      } catch (e) {
        console.error(e)
      }
    },
    async release(item) {
      try {
        const res = await post('sys/domain/list')
        if (res.code !== 200) return
        this.releaseList = res.data
        this.rowId = item.id
        this.checkedCompany = []
        this.releaseVisible = true
      } catch (e) {
        console.error(e)
      }
    },
    async confirmRelease() {
      if (this.checkedCompany.length === 0) {
        return this.$message.warning('请至少选择一条记录')
      }
      try {
        const res = await post('sys/announcement/publish', {
          id: this.rowId,
          dataSourcelist: this.checkedCompany
        })
        if (res.code !== 200) return
        this.$message.success(res.message)
        this.releaseVisible = false
        this.getList()
      } catch (e) {
        console.error(e)
      }
    }
  }
}
</script>

<style scoped>
.customize-tree-node__label {
  margin-left: 4px;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customize-tree-node {
  font-size: 14px;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}

.item:not(:last-child) {
  margin-right: 10px;
}

.upload-demo::v-deep .el-upload--text {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}

.edit-form::v-deep .img_item {
  width: 27%;
  height: 200px;
  background: #eeeeee;
}

.edit-form::v-deep .img_item .img {
  width: 100%;
  height: 100%;
}

.edit-form::v-deep .img_wrap {
  width: 27%;
  height: 200px;
}

.edit-form::v-deep .img_wrap i {
  font-size: 60px;
  color: #047dff;
}

.custom-tree-node-arrow {
  transform: unset !important;
}

.row::v-deep
  .el-tree-node.is-current
  > .el-tree-node__content
  .customize-tree-node__operate {
  display: block;
}

.row::v-deep .el-tree-node__expand-icon {
  visibility: hidden;
}

.file {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
</style>

<style>
.folder_select .el-dialog__body {
  height: 400px;
}

.customsize-label .el-select-dropdown__list {
  display: flex;
  overflow: hidden auto;
  width: 500px;
  flex-wrap: wrap;
}

.customsize-label.el-select-dropdown.is-multiple
  .el-select-dropdown__item.selected::after {
  content: '';
  display: none;
}

.customsize-label .el-select-dropdown__item.selected .el-tag {
  background-color: #ecf5ff;
  display: inline-block;
  font-size: 12px;
  color: #409eff;
  border-radius: 4px;
  box-sizing: border-box;
  white-space: nowrap;
}

.customsize-label .el-select-dropdown__item {
  padding: 0px 10px;
  white-space: nowrap;
  flex-shrink: 0;
}

.variant_list >>> .el-dialog__body {
  border-top: 1px solid #ebeef5;
}

.variant_list >>> .el-dialog__headerbtn {
  top: 11px;
}

.empty {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #777;
}

.app-form {
  display: flex;
  align-items: flex-start;

  .form {
    flex: 1;
    flex-shrink: 0;
    overflow: hidden;

    ::v-deep .el-form-item__label {
      white-space: nowrap;
    }

    ::v-deep .el-form-item {
      display: flex;
    }

    ::v-deep .el-form {
      display: flex;
      flex-wrap: wrap;
    }

    ::v-deep .el-form-item__content {
      flex: 1;
      flex-shrink: 0;
      overflow: hidden;
    }
  }

  .img {
    width: 150px;
    height: 150px;
    margin-right: 25px;

    img {
      width: 100%;
      height: 100%;
    }
  }
}

.el-row {
  align-items: center;
}

.customize-tree-node__operate {
  display: none;
}
</style>
