<template>
  <div class="card amazon-attribute-grouping">
    <div class="left-group-status">
      <div class="add-group">
        <el-button size="small" type="primary" @click="addGroup">
          添加分组
        </el-button>
        <el-button
          size="small"
          type="danger"
          @click="batchDeleteGroups"
          :disabled="selectedGroups.length === 0">
          删除分组
        </el-button>
      </div>
      <div class="group-status-box" v-if="groupsList.length > 0">
        <div
          class="group-status-item"
          :class="{
            active: currentGroupId === 0
          }"
          @click="currentGroupId = 0">
          <span class="group-name">全部(All)</span>
        </div>
        <div
          class="group-status-item"
          v-for="item in groupsList"
          :key="item.id"
          :class="{ active: currentGroupId === item.id }"
          @click="currentGroupId = item.id">
          <div class="group-checkbox" @click.stop>
            <div
              class="custom-checkbox"
              :class="{ active: selectedGroups.includes(item.id) }"
              @click="toggleGroupSelection(item.id)"></div>
          </div>
          <span class="group-name">{{ item.name }} ({{ item.nameEn }})</span>
          <div class="operate-group">
            <i
              title="编辑"
              style="color: #e6a23c; font-size: 14px; margin-right: 6px"
              class="el-icon-edit"
              @click="editGroup(item)"></i>
          </div>
        </div>
      </div>
    </div>
    <div class="right-group-content">
      <div class="category-box">
        <div class="category-item">
          <div class="category-title">
            <span>店铺</span>
          </div>
          <div>
            <el-select
              v-model="shopId"
              placeholder="请选择店铺"
              @change="shopChange">
              <el-option
                v-for="item in shopList"
                :key="item.id"
                :label="item.shopName"
                :value="item.id"></el-option>
            </el-select>
          </div>
          <div class="category-title">
            <span>Category</span>
          </div>

          <div style="flex: 1">
            <!-- <CustomCascader
              :options="amCateCascaders"
              v-model="aliCatePathIds"
              :loadData="customLazyLoad"
              @change="customCascaderChange"></CustomCascader> -->
            <el-cascader
              size="medium"
              :options="amCateCascaders"
              ref="amCateCascadersRef"
              placeholder="请选择分类"
              style="width: 100%"
              v-model="aliCatePathIds"
              filterable
              :props="{
                label: 'browseNodeName',
                value: 'browseNodeId',
                lazy: true,
                lazyLoad: lazyLoad
              }"
              @change="categoryTypeChange"></el-cascader>
          </div>
        </div>
        <div class="category-item">
          <div class="category-title">
            <span>Search</span>
          </div>
          <div>
            <el-input clearable v-model="keyWord" placeholder="请输入关键词">
              <el-button
                slot="append"
                icon="el-icon-search"
                @click="searchCategory"></el-button>
            </el-input>
          </div>
          <div style="flex: 1">
            <el-select
              style="width: 100%"
              filterable
              clearable
              popper-class="custom-popper-select"
              v-model="productType"
              @change="productTypeChange"
              placeholder="请选择分类">
              <el-option
                v-for="item in productTypeList"
                :key="item.id"
                :label="item.browsePathByName"
                :value="item.browseNodeId">
                <div class="custom-label">
                  <div>Product Type: {{ item.productType }}</div>
                  <div>{{ item.browsePathByName }}</div>
                </div>
              </el-option>
            </el-select>
          </div>
        </div>
      </div>
      <div class="attribute-box">
        <div class="attribute-header">
          <el-button type="primary" size="small" @click="setGrouping">
            设置分组
          </el-button>
          <el-button type="success" size="small" @click="selectAll">
            全选
          </el-button>
          <el-button type="warning" size="small" @click="selectNone">
            取消全选
          </el-button>
        </div>
        <div class="attribute-content">
          <div style="height: 100%; overflow: auto">
            <div class="attribute" v-if="showJsonSchema.length > 0">
              <div
                class="attribute-item"
                :class="{
                  'visible-item-properties': !visibleGroupList[item.name]
                }"
                v-for="item in showJsonSchema"
                :key="item.name">
                <div class="attribute-item-title">
                  <span class="attribute-item-title-text">
                    {{ item.title }}
                  </span>
                  <i
                    :title="item.description"
                    class="el-icon-info"
                    style="font-size: 12px; color: #999; cursor: pointer"></i>
                </div>
                <div class="attribute-item-content">
                  <el-select
                    v-model="dataGroupForm[item.name]"
                    placeholder="请设置分组"
                    clearable
                    class="attribute-item-select"
                    style="width: 100%">
                    <el-option
                      v-for="group in groupsList"
                      :key="group.id"
                      :label="`${group.name} (${group.nameEn})`"
                      :value="group.id"></el-option>
                  </el-select>
                </div>
                <div class="select-group-icon" @click="selectAttr(item)">
                  <div
                    class="check-icon"
                    :class="{ active: selectedAttrStatus(item) }"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="attribute-footer">
          <el-button type="info" size="small" @click="resetGrouping">
            重置
          </el-button>
          <el-button type="success" size="small" @click="saveGrouping">
            保存
          </el-button>
        </div>
      </div>
    </div>
    <el-dialog
      title="添加分组"
      :visible.sync="addDialogVisible"
      :close-on-click-modal="false"
      width="50%">
      <el-form :model="addForm" label-width="100px" ref="addFormRef">
        <el-form-item
          label="中文名称"
          prop="name"
          :rules="[{ required: true, message: '请输入中文名称' }]">
          <el-input
            v-model="addForm.name"
            placeholder="请输入分组名称"></el-input>
        </el-form-item>
        <el-form-item
          label="英文名称"
          prop="nameEn"
          :rules="[{ required: true, message: '请输入英文名称' }]">
          <el-input
            v-model="addForm.nameEn"
            placeholder="请输入英文名称"></el-input>
        </el-form-item>
        <el-form-item label="排序">
          <el-input
            v-model="addForm.sort"
            clearable
            placeholder="请输入排序"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input
            v-model="addForm.remark"
            placeholder="请输入备注"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitAdd" :loading="addLoading">
          确 定
        </el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="设置分组"
      :visible.sync="setGroupDialogVisible"
      :close-on-click-modal="false"
      width="500px">
      <el-select
        v-model="groupingId"
        placeholder="请选择分组"
        clearable
        style="width: 100%">
        <el-option
          v-for="item in groupsList"
          :key="item.id"
          :label="`${item.name} (${item.nameEn})`"
          :value="item.id"></el-option>
      </el-select>
      <div slot="footer" class="dialog-footer">
        <el-button @click="setGroupDialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="submitSetGroup"
          :loading="setGroupLoading">
          确 定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { get, post } from '@/common/api/axios'
// import CustomCascader from '@/common/components/base/CustomCascader.vue'

export default {
  name: 'amazonAttributeGrouping',
  components: {
    // CustomCascader
  },
  data() {
    return {
      groupsList: [],
      keyWord: '',
      productTypeList: [],
      amCateCascaders: [],
      aliCatePathIds: [],
      jsonSchema: {},
      productType: '',
      shopList: [],
      shopId: '',
      addDialogVisible: false,
      addForm: {
        cnName: '',
        enName: '',
        remark: '',
        sort: ''
      },
      addLoading: false,
      groupSearchForm: {
        productType: ''
      },
      selectedAttr: [],
      dataGroupForm: {},
      setGroupDialogVisible: false,
      setGroupLoading: false,
      groupingId: '',
      currentGroupId: 0,
      cloneDataGroupForm: {},
      selectedGroups: []
    }
  },
  mounted() {
    this.getAmazonShopList()
    this.getGroupList()
  },
  computed: {
    showJsonSchema() {
      return (
        Object.keys(this.jsonSchema?.properties || {}).map((item) => {
          return {
            name: item,
            title: this.jsonSchema.properties[item].title,
            description: this.jsonSchema.properties[item].description
          }
        }) || []
      )
    },
    currentGroupPropertiesMap() {
      const groupedProperties = {}
      const result = {}
      for (const key of Object.keys(this.dataGroupForm)) {
        if (!this.dataGroupForm[key]) continue
        result[this.dataGroupForm[key]] = {
          ...result[this.dataGroupForm[key]],
          [key]: true
        }
        groupedProperties[key] = true
      }
      if (this.jsonSchema?.properties) {
        const notGroupedProperties = Object.keys(this.jsonSchema.properties)
          .filter((key) => !groupedProperties[key])
          .reduce((acc, key) => {
            acc[key] = true
            return acc
          }, {})
        result[0] = notGroupedProperties
      }
      return result
    },
    visibleGroupList() {
      return this.currentGroupPropertiesMap[this.currentGroupId] ?? {}
    }
  },
  methods: {
    selectAll() {
      this.selectedAttr = this.showJsonSchema
    },
    selectNone() {
      this.selectedAttr = []
    },
    selectedAttrStatus(item) {
      const status = this.selectedAttr.findIndex((e) => e.name === item.name)
      return status > -1
    },
    selectAttr(item) {
      const status = this.selectedAttrStatus(item)
      if (status) {
        const index = this.selectedAttr.findIndex((e) => e.name === item.name)
        this.selectedAttr.splice(index, 1)
      } else {
        this.selectedAttr.push(item)
      }
    },
    submitSetGroup() {
      this.selectedAttr.forEach((item) => {
        this.$set(this.dataGroupForm, item.name, this.groupingId)
      })
      this.setGroupDialogVisible = false
      this.selectedAttr = []
    },
    addGroup() {
      this.addForm = {
        name: '',
        nameEn: '',
        remark: '',
        sort: ''
      }
      this.$nextTick(() => {
        this.$refs.addFormRef.clearValidate()
      })
      this.addDialogVisible = true
    },
    editGroup(item) {
      this.addForm = {
        name: item.name,
        nameEn: item.nameEn,
        remark: item.remark,
        id: item.id,
        sort: item.sort
      }
      this.$nextTick(() => {
        this.$refs.addFormRef.clearValidate()
      })
      this.addDialogVisible = true
    },
    setGrouping() {
      if (this.selectedAttr.length === 0) {
        this.$message.warning('请选择属性')
        return
      }
      this.groupingId = ''
      this.setGroupDialogVisible = true
    },
    async getGroupList() {
      try {
        const res = await post(
          'amazonProductTypeGroup/list',
          this.groupSearchForm
        )
        if (res.code !== 200) return
        this.groupsList = [...res.data]
      } catch (e) {
        console.error(e)
      }
    },
    async submitAdd() {
      try {
        await this.$refs.addFormRef.validate()
      } catch (e) {
        console.error(e)
        return
      }
      const url = this.addForm.id
        ? 'amazonProductTypeGroup/update'
        : 'amazonProductTypeGroup/add'
      try {
        const res = await post(url, {
          ...this.addForm
        })
        if (res.code !== 200) return
        this.addDialogVisible = false
        this.getGroupList()
      } catch (e) {
        console.error(e)
      } finally {
        this.addLoading = false
      }
    },
    async searchCategory() {
      if (!this.keyWord) return
      const loading = this.$loading({
        lock: true
      })
      try {
        const find = this.shopList.find((item) => item.id === this.shopId)
        const res = await get('amazon/category/getChildListByKeywords', {
          keywords: this.keyWord,
          marketplaceId: find.marketplaceId
        })
        if (res.code !== 200) return
        this.productTypeList = res.data.map((item) => {
          item.browsePathByName = item.browsePathByName?.split(',').join(' > ')
          return item
        })
      } catch (e) {
        console.error(e)
      } finally {
        loading.close()
      }
    },
    productTypeChange(val) {
      if (!val) return
      const item = this.productTypeList.find(
        (item) => item.browseNodeId === val
      )
      if (!item) return
      const categoryPath = item.browsePathById
        ?.split(',')
        ?.slice(1)
        ?.map((e) => Number(e))
      this.initCate(categoryPath || [], () => {
        if (item.productType && categoryPath) {
          this.aliCatePathIds = categoryPath
          this.categoryTypeChange(item.productType, true)
        } else {
          this.jsonSchema = {}
          this.groupList = []
        }
      })
    },
    getCateAttrs(id, categoryFullPath, callback) {
      if (!id || id.length === 0) return
      if (Array.isArray(id)) id = id[id.length - 1]
      const loading = this.$loading({
        lock: true
      })
      get('amazon/category/getAttributeByProductType', {
        productType: id,
        shopId: this.shopId
      })
        .then(async (res) => {
          if (res.code !== 200) return
          try {
            const groupRes = await post(
              'amazonProductTypeGroup/groupPropsList',
              {
                groupId: this.groupingId,
                productType: id,
                categoryFullPath: categoryFullPath
              }
            )
            if (groupRes.code !== 200) return
            const groupProps = groupRes.data
            this.groupsList = groupProps
            // eslint-disable-next-line node/no-callback-literal
            callback && callback({ list: res.data, groupProps })
          } catch (e) {
            console.error(e)
          }
        })
        .finally(() => {
          loading.close()
        })
    },
    categoryTypeChange(val) {
      this.$nextTick(() => {
        const nodes = this.$refs.amCateCascadersRef.getCheckedNodes()
        let targetNode
        if (this.aliCatePathIds) {
          targetNode = nodes[nodes.length - 1]
        }
        this.dataGroupForm = {}
        if (targetNode) {
          const { data } = targetNode
          this.getCateAttrs(
            data.productTypeDefinitions,
            data.browsePathByName,
            ({ list, groupProps }) => {
              if (list) {
                this.jsonSchema = list
                groupProps.forEach((item) => {
                  item.propertyList.forEach((e) => {
                    this.$set(this.dataGroupForm, e.propertyNameEn, item.id)
                  })
                })
                this.cloneDataGroupForm = JSON.parse(
                  JSON.stringify(this.dataGroupForm)
                )
              } else {
                this.jsonSchema = {}
                this.dataGroupForm = {}
              }
            }
          )
        } else if (val) {
          this.getCateAttrs(val, '', ({ list, groupProps }) => {
            if (list) {
              this.jsonSchema = list
              groupProps.forEach((item) => {
                item.propertyList.forEach((e) => {
                  this.$set(this.dataGroupForm, e.propertyNameEn, item.groupId)
                })
              })
            } else {
              this.jsonSchema = {}
              this.dataGroupForm = {}
            }
          })
        } else {
          this.jsonSchema = {}
          this.dataGroupForm = {}
        }
      })
    },
    customCascaderChange(val) {
      console.log(val)
    },
    async initCate(ids, callback) {
      const shopId = this.shopList.find(
        (item) => item.id === this.shopId
      )?.marketplaceId
      const loading = this.$loading({
        lock: true
      })
      const arr = [
        get('amazon/category/getChildListByBrowseNodeId', {
          marketplaceId: shopId
        })
      ]
      for (let i = 0; i < ids.length - 1; i++) {
        arr.push(
          get('amazon/category/getChildListByBrowseNodeId', {
            browseNodeId: ids[i],
            marketplaceId: shopId
          })
        )
      }
      Promise.all(arr)
        .then((res) => {
          const catearr = res[0].data.map((e) => {
            return {
              ...e,
              leaf: !e.childId
            }
          })
          let arr1 = catearr
          for (let i = 0; i < ids.length - 1; i++) {
            for (const iterator of arr1) {
              if (iterator.browseNodeId === ids[i]) {
                iterator.children = res[i + 1].data.map((e) => {
                  return {
                    ...e,
                    leaf: !e.childId
                  }
                })
                arr1 = iterator.children
              }
            }
          }
          this.amCateCascaders = catearr
          callback && callback(catearr)
        })
        .finally(() => {
          loading.close()
        })
    },
    lazyLoad(node, resolve) {
      if (node.level === 0) return
      const shopId = this.shopList.find(
        (item) => item.id === this.shopId
      )?.marketplaceId
      if (node.children && node.children.length > 0) {
        resolve([])
      } else {
        get('amazon/category/getChildListByBrowseNodeId', {
          browseNodeId: node.value,
          marketplaceId: shopId
        })
          .then((res) => {
            res.data.forEach((e) => {
              e.leaf = !e.childId
            })
            resolve(res.data)
          })
          .catch((err) => {
            console.error(err)
            resolve([])
          })
      }
    },
    async customLazyLoad(node, callback) {
      try {
        const res = await get('amazon/category/getChildListByBrowseNodeId', {
          browseNodeId: node.browseNodeId,
          marketplaceId: this.shopId
        })
        if (res.code !== 200) return
        callback(res.data)
      } catch (e) {
        console.error(e)
      }
    },
    async getAmazonShopList() {
      const loading = this.$loading({
        lock: true
      })
      try {
        const res = await get('business/shop/amazonList')
        if (res.code !== 200) return
        this.shopList = res.data
      } catch (e) {
        console.error(e)
      } finally {
        loading.close()
      }
    },
    shopChange(val) {
      if (!val) return
      this.initCate([])
    },
    async saveGrouping() {
      const nodes = this.$refs.amCateCascadersRef.getCheckedNodes()
      let targetNode
      if (this.aliCatePathIds) {
        targetNode = nodes[nodes.length - 1]
      }
      const updatePropertyList = []
      const delPropertyList = []

      if (Object.keys(this.dataGroupForm).length > 0) {
        Object.keys(this.dataGroupForm).forEach((item) => {
          if (this.dataGroupForm[item] !== this.cloneDataGroupForm[item]) {
            updatePropertyList.push({
              propertyNameEn: item,
              groupId: this.dataGroupForm[item] || undefined,
              productType: targetNode.data.productTypeDefinitions,
              categoryFullPath: targetNode.data.browsePathByName
            })
          } else {
            updatePropertyList.push({
              propertyNameEn: item,
              groupId: this.dataGroupForm[item] || undefined,
              productType: targetNode.data.productTypeDefinitions,
              categoryFullPath: targetNode.data.browsePathByName
            })
          }
        })
      }
      if (Object.keys(this.cloneDataGroupForm).length > 0) {
        Object.keys(this.cloneDataGroupForm)
          .filter((item) => {
            return !this.dataGroupForm[item]
          })
          .forEach((item) => {
            if (!this.dataGroupForm[item]) {
              delPropertyList.push({
                propertyNameEn: item,
                productType: targetNode.data.productTypeDefinitions,
                categoryFullPath: targetNode.data.browsePathByName,
                groupId: this.cloneDataGroupForm[item]
              })
            }
          })
      }
      try {
        const res = await post('amazonProductGroupProperty/batchUpdate', {
          updatePropertyList,
          delPropertyList
        })
        if (res.code !== 200) return
        this.selectedAttr = []
        this.$message.success('设置分组成功')
      } catch (e) {
        console.error(e)
      }
    },
    async deleteGroup(item) {
      this.$confirm(
        `确定要删除分组 "${item.name}" 吗？删除后该分组下的属性将移至全部分组。`,
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(async () => {
        try {
          // 先获取该分组下的所有属性
          const propertiesRes = await post(
            'amazonProductTypeGroup/getGroupProperties',
            {
              groupId: item.id
            }
          )

          if (propertiesRes.code === 200 && propertiesRes.data.length > 0) {
            // 将该分组下的属性移至全部分组（groupId为0或null）
            const updatePropertyList = propertiesRes.data.map((prop) => ({
              propertyNameEn: prop.propertyNameEn,
              groupId: null, // 移至全部分组
              productType: prop.productType,
              categoryFullPath: prop.categoryFullPath
            }))

            await post('amazonProductGroupProperty/batchUpdate', {
              updatePropertyList,
              delPropertyList: []
            })
          }

          // 删除分组
          const res = await post('amazonProductTypeGroup/delete', {
            id: item.id
          })
          if (res.code !== 200) return

          this.$message.success('删除分组成功，该分组下的属性已移至全部分组')
          this.getGroupList()

          // 如果当前选中的是被删除的分组，切换到全部分组
          if (this.currentGroupId === item.id) {
            this.currentGroupId = 0
          }
        } catch (e) {
          console.error(e)
          this.$message.error('删除分组失败')
        }
      })
    },
    async batchDeleteGroups() {
      if (this.selectedGroups.length === 0) {
        this.$message.warning('请选择要删除的分组')
        return
      }
      this.$confirm(
        `确定要批量删除选中的 ${this.selectedGroups.length} 个分组吗？删除后这些分组下的属性将移至全部分组。`,
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(async () => {
        try {
          let allProperties = []
          const groups = this.groupsList.filter((item) =>
            this.selectedGroups.includes(item.id)
          )
          if (groups.length > 0) {
            allProperties = groups.map((e) => e.propertyList).flat()
          }
          if (allProperties.length > 0) {
            allProperties.forEach((item) => {
              this.$set(this.dataGroupForm, item.propertyNameEn, '')
            })
          }
          const res = await get('amazonProductTypeGroup/delete', {
            ids: this.selectedGroups.join(',')
          })
          if (res.code !== 200) return
          this.$message.success('批量删除分组成功')
          this.getGroupList()
          this.selectedGroups = []
          if (this.selectedGroups.includes(this.currentGroupId)) {
            this.currentGroupId = 0
          }
        } catch (e) {
          console.error(e)
          this.$message.error('批量删除分组失败')
        }
      })
    },
    toggleGroupSelection(groupId) {
      const index = this.selectedGroups.indexOf(groupId)
      if (index > -1) {
        this.selectedGroups.splice(index, 1)
      } else {
        this.selectedGroups.push(groupId)
      }
    },
    selectAllGroups() {
      this.selectedGroups = this.groupsList.map((group) => group.id)
    },
    clearAllGroups() {
      this.selectedGroups = []
    },
    resetGrouping() {
      this.dataGroupForm = {}
    }
  }
}
</script>
<style lang="scss" scoped>
.amazon-attribute-grouping {
  height: 100%;
  overflow: hidden;
  display: flex;
  gap: 10px;
}
.group-status-box {
  overflow: auto;
}
.left-group-status {
  width: 300px;
  height: 100%;
  border-right: 2px solid #e5e5e5;
  padding-right: 10px;
  display: flex;
  flex-direction: column;
  .add-group {
    text-align: right;
    margin-bottom: 10px;
    .group-select-actions {
      margin-top: 5px;
      text-align: center;
      .selection-info {
        display: block;
        font-size: 12px;
        color: #409eff;
        margin-top: 3px;
      }
    }
  }
}
.right-group-content {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 10px;
  .attribute-box {
    flex: 1;
    overflow: hidden;
    border: 1px solid #eee;
    display: flex;
    flex-direction: column;
    padding: 6px;
    .attribute-content {
      flex: 1;
      overflow: hidden;
    }
    .attribute-footer {
      text-align: right;
    }
  }
}
.group-status-item {
  cursor: pointer;
  font-size: 14px;
  border-radius: 4px;
  border: 1px solid #e5e5e5;
  margin-bottom: 6px;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  height: 60px;
  .operate-group {
    position: absolute;
    right: 2px;
    bottom: 0;
    background-color: #fff;
    border-radius: 4px;
  }
  &.active {
    border-color: #67c23a;
    color: #67c23a;
    border-width: 2px;
    font-weight: bold;
  }
  .group-checkbox {
    position: absolute;
    left: 8px;
    top: 8px;
    z-index: 1;
    .custom-checkbox {
      width: 14px;
      height: 14px;
      border: 1px solid #dcdfe6;
      border-radius: 2px;
      background-color: #fff;
      cursor: pointer;
      position: relative;
      transition: all 0.3s;

      &:hover {
        border-color: #409eff;
      }

      &.active {
        background-color: #409eff;
        border-color: #409eff;

        &::after {
          content: '';
          position: absolute;
          top: 0px;
          left: 4px;
          width: 4px;
          height: 8px;
          border: 2px solid #fff;
          border-top: none;
          border-left: none;
          transform: rotate(45deg);
        }
      }
    }
  }
}
.category-item {
  display: flex;
  align-items: center;
  gap: 10px;
  &:not(:last-child) {
    margin-bottom: 10px;
  }
}
.category-title {
  width: 60px;
  text-align: right;
  font-size: 14px;
  color: #606266;
}
.group-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.attribute {
  display: grid;
  grid-template-columns: repeat(4, minmax(100px, 1fr));
  gap: 10px;
  /* padding: 10px; */
}
.attribute-item {
  border: 1px solid #eee;
  border-radius: 4px;
  padding: 10px;
  display: flex;
  align-items: center;
  gap: 5px;
  position: relative;
  .select-group-icon {
    position: absolute;
    left: 2px;
    top: 2px;
    width: 10px;
    height: 10px;
  }
  .check-icon {
    width: 16px;
    height: 16px;
    border: 1px solid #eee;
    box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.4) inset;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    &.active {
      background: #4168ff;
      position: relative;
      border-color: #4168ff;
    }
    &.active::after {
      position: absolute;
      content: '';
      top: 0px;
      left: 4px;
      width: 4px;
      height: 8px;
      border-width: 2px;
      border-style: solid;
      border-color: transparent #fff #fff transparent;
      transform: rotate(45deg) scale(0.8);
    }
  }
}
.visible-item-properties {
  display: none;
}
.attribute-item-title {
  flex: 1;
  font-size: 14px;
  color: #606266;
  display: flex;
  align-items: center;
  overflow: hidden;
  gap: 2px;
  .attribute-item-title-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.attribute-item-content {
  width: 100px;
}
.attribute-header {
  text-align: right;
  margin-bottom: 10px;
}
.attribute-item-description {
  font-size: 12px;
  color: #999;
}
</style>
<style lang="scss">
.attribute-item-select {
  .el-input__inner {
    color: #e6a23c;
    font-weight: 500;
  }
}
.custom-popper-select {
  .el-select-dropdown__item {
    border-bottom: 1px solid #ddd;
    height: unset;
  }
}
.is-selected {
  color: #409eff !important;
  font-weight: bold;
}
</style>
