<template>
  <!-- 工位地图 -->
  <div class="seatMap" ref="seatMap">
    <Row align="middle" style="margin-bottom:10px" type="flex">
      <span style="display:inline-block;width:90px">工位地图名称：</span>
      <Col span="4">
        <Input
          :maxlength="20"
          :readonly="openState<1"
          @on-blur="disableDeleteBlock = false"
          @on-focus="disableDeleteBlock=true"
          placeholder="请输入"
          v-model="seatName"
        ></Input>
      </Col>

      <span style="display:inline-block;width:70px;margin-left:10px">所属中心：</span>
      <Col span="4">
        <Select
          :disabled="openState<1 || openState===2"
          @on-change="changeCenter"
          placeholder="所属中心"
          style="margin-left: 2px; width:180px"
          v-if="openState>0"
          v-model="centerSelect"
        >
          <Option
            :key="index"
            :value="parseInt(item.id.substring(2)) "
            v-for="(item,index) in optionsForCenter"
          >{{item.name}}</Option>
        </Select>
        <Input
          :maxlength="20"
          :readonly="openState<1"
          :value="mapInfo.map.wmName"
          placeholder="请输入"
          v-if="openState<1"
        ></Input>
      </Col>
      <Button
        :disabled="openState<1"
        :loading="saveBtnLoading"
        @click="beforSaveData()"
        type="primary"
        v-show="openState>0"
      >保存</Button>
    </Row>
    <Row align="middle" style="margin-bottom:10px" type="flex">
      <span style="display:inline-block;width:90px">专线颜色：</span>
      <RadioGroup v-model="radioSelect">
        <div
          :key="index"
          label
          style="margin-right:10px;display:inline-block;vertical-align:middle"
          v-for="(item,index) in lineOptions"
        >
          <Radio :disabled="openState<1" :label="index">
            <span>{{item.name}}：</span>
          </Radio>
          <ColorPicker
            :disabled="openState<1"
            @on-change="colorChange(item.id,$event)"
            class="seat-info"
            recommend
            v-model="colorCurrentMap[item.id]"
          />
        </div>
      </RadioGroup>
    </Row>
    <Row align="middle" style="margin-bottom:10px" v-show="openState>0">
      <span style="display:inline-block;width:90px">工位地图：</span>
      <Poptip content="Enter键" title="快捷键" trigger="hover">
        <Button :disabled="isAddBlock " @click="addBlcok" style="margin-right:10px" type="primary">+</Button>
      </Poptip>
      <Poptip content="Delete键" title="快捷键" trigger="hover">
        <Button :disabled="selectBlockIndex<0 " @click="minusBlcok" type="primary">-</Button>
      </Poptip>

      <div :key="index" class="demo-upload-list" v-for="(item,index) in uploadList">
        <template v-if="item.status === 'finished'">
          <img :src="item.url" />
          <div class="demo-upload-list-cover">
            <Icon @click.native="handleRemove()" type="ios-trash-outline"></Icon>
          </div>
        </template>
        <template v-else>
          <Progress :percent="item.percentage" hide-info v-if="item.showProgress"></Progress>
        </template>
      </div>
      <Upload
        :action="getUploadUrl"
        :before-upload="handleBeforeUpload"
        :format="['jpg','jpeg','png','JPG','JPEG','PNG']"
        :max-size="2048"
        :on-error="cancelSpin"
        :on-exceeded-size="handleMaxSize"
        :on-success="handleSuccess"
        :show-upload-list="false"
        ref="upload"
        style="display: inline-block;width:36px;vertical-align: middle;margin-left: 10px;"
        type="drag"
      >
        <div style="width: 36px;height:32px;line-height: 32px;">
          <Icon size="20" type="ios-camera"></Icon>
        </div>
      </Upload>
    </Row>
    <div class="paintArea">
      <div
        :style="{cursor:handStyle,background:imgSrc,height:imgHeight+'px'}"
        @mousedown="confrimPos"
        @mousemove="blockMouseMove"
        @mouseup="canvasMouseUp"
        id="galaxy-menu"
      >
        <div
          :key="index"
          :ref="'block'+index"
          :style="{left:item.pointLeft-seatSize/2+'px',top:item.pointRight-seatSize/2+'px',
          pointerEvents:preventEvent,background:selectBlockIndex==index?'black':colorCurrentMap[item.pointActivityId],
          width:seatSize+'px',height:seatSize+'px',lineHeight:'28px'}"
          @contextmenu.prevent="showSeatModal(item.pointName,item.pointActivityId,index,item.deleted)"
          @mousedown="blockClick(item,index,$event)"
          class="moveBlock"
          v-for="(item,index) in blockArray"
        >
          <div>{{item.pointName?item.pointName:'请设置'}}</div>
          <Icon size="40" type="md-person" v-if="!item.deleted || item.deleted==='0'" />
          <Icon size="40" type="ios-lock" v-if="item.deleted && item.deleted==='1'" />
        </div>
      </div>
    </div>
    <Spin fix size="large" v-if="isLoading"></Spin>

    <Modal
      :closable="true"
      :footer-hide="false"
      :mask-closable="false"
      title="工位信息编辑"
      v-model="isShowSeatInfoEdit"
    >
      <Row align="middle" type="flex">
        <Col class-name="align-left" span="4">工位编号:</Col>
        <Col class-name="align-left" span="10">
          <Input
            :disabled="false"
            :maxlength="20"
            placeholder="工位编号"
            style="width:200px;margin-right:10px"
            v-model="stationNo"
          ></Input>
        </Col>
      </Row>
      <br />
      <Row align="middle" type="flex">
        <Col class-name="align-left" span="4">所属专线:</Col>
        <Col class-name="align-left" span="10">
          <Select placeholder="所属专线" style="margin-left: 2px; width:200px" v-model="lineIdForEdit">
            <Option
              :key="index"
              :value="item.id"
              style="width:200px;margin-right:10px"
              v-for="(item,index) in lineOptions"
            >{{item.name}}</Option>
          </Select>
        </Col>
      </Row>
      <br />
      <Row align="middle" type="flex">
        <Col class-name="align-left" span="4">是否启用:</Col>
        <Col class-name="align-left" span="10">
          <Select
            placeholder="是否启用"
            style="margin-left: 2px; width:200px"
            v-model="chosenDisableItem"
          >
            <Option
              :key="index"
              :value="item.value"
              style="width:200px;margin-right:10px"
              v-for="(item,index) in enableList"
            >{{item.name}}</Option>
          </Select>
        </Col>
      </Row>
      <div slot="footer">
        <!-- <Button @click="showRejectModal=false" size="large" type="text">取消</Button> -->
        <Button @click="handOk" size="large" type="primary">保存</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import COMMEN_CONFIG from '@conf'
import FILE_API from '@api/sys/file'
// import WmSitesAPI from '@api/common/wmSites'
import WfmOrgAPI from '@api/common/wfmOrg'
import WfmStationAPI from '@api/common/wfmStation'

export default {
  name: 'seat-map',
  data () {
    return {
      saveBtnLoading: false,
      editIndex: -1,
      stationNo: '',
      lineIdForEdit: 0,
      isShowSeatInfoEdit: false,
      disableDeleteBlock: false,
      radioSelect: 0,
      seatName: '',
      optionsForCenter: [],
      centerSelect: '',
      selectedId: '',
      isLoading: false,
      timeCount: null,
      seatSize: 0,
      imgSrc: '',
      imgHeight: 0,
      imageId: '',
      preventEvent: 'auto',
      handStyle: 'default',
      canvasWidth: 1170,
      canvasHeight: 680,
      cellWidth: 0,
      cellHeight: 0,
      blockArray: [],
      uploadList: [],
      clickPos: {
        left: 0,
        top: 0
      },
      colorCurrentMap: {},
      colorSelectedMap: {},
      isAddBlock: false,
      isMouseDown: false,
      selectBlock: null,
      selectBlockIndex: -1,
      total: 0,
      lineOptions: [],
      addedRecId: '',
      chosenDisableItem: '0',
      enableList: [
        {
          name: '启用',
          value: '0'
        },
        {
          name: '禁用',
          value: '1'
        }
      ]
    }
  },
  props: {
    isShowModal: {
      type: Boolean,
      default: false
    },
    openState: {
      type: Number,
      default: 0
    },
    mapInfo: {
      type: Object,
      default: null
    }
  },
  watch: {},
  computed: {
    getUploadUrl () {
      const url = FILE_API.upload()
      return url
    },
    getModalState () {
      return this.openState
    }
  },
  mounted () {
    const $this = this
    document.addEventListener('keydown', e => {
      if (this.disableDeleteBlock) {
        return
      }
      if (e.keyCode === 46) {
        $this.minusBlcok()
      }
      if (e.keyCode === 13) {
        $this.addBlcok()
      }

      if ($this.selectBlockIndex > -1) {
        let tmpLeft = $this.selectBlock.pointLeft
        let tmpTop = $this.selectBlock.pointRight
        if (e.keyCode === 38) {
          // up
          tmpTop -= 1
        } else if (e.keyCode === 40) {
          // down
          tmpTop += 1
        } else if (e.keyCode === 37) {
          // left
          tmpLeft -= 1
        } else if (e.keyCode === 39) {
          // right
          tmpLeft += 1
        }

        if ($this.canMoveToNextPos(tmpLeft, tmpTop, $this.selectBlock.id)) {
          $this.selectBlock.pointLeft = tmpLeft
          $this.selectBlock.pointRight = tmpTop
        }
        e.preventDefault()
      }
    })

    if (this.mapInfo && this.mapInfo.stationId) {
      this.addedRecId = this.mapInfo.stationId
    }

    this.seatSize = COMMEN_CONFIG.WORK_MAP_PARAMS.SEAT_SIZE

    // 读取数据并加载
    this.initData()
    this.blockArray = []
    this.optionsForCenter = []
    const parentId = ''
    const type = '1'
    WfmOrgAPI.orgTreeAuth({ parentId, type })
      .then(({ data }) => {
        if (data.status === 'success') {
          if (data.data && data.data.length > 0) {
            this.optionsForCenter = data.data
            if (this.mapInfo && this.mapInfo.stationId) {
              this.getSeatMapDetail(
                this.mapInfo.stationId,
                this.mapInfo.stationSiteId
              )
            } else {
              this.isLoading = false
              // let tmpId = data.data[0].id
              // if (tmpId) {
              //   this.centerSelect = parseInt(tmpId.substring(2))
              //   this.getSeatMapDetail(null, this.centerSelect)
              // }
            }
          }
        }
      })
      .catch(err => {
        this.isLoading = false
        console.error('err:', err)
      })
  },
  created () {
    this.isLoading = true
  },
  destroyed () {
    this.blockArray = []
    this.addedRecId = ''
    // clearInterval(this.timeCount)
    // document.removeEventListener('keydown')
  },
  methods: {
    verifyName () {
      let stationName = this.seatName
      let stationSiteId = this.centerSelect
      let stationId = this.addedRecId
      this.saveBtnLoading = true
      WfmStationAPI.verifname({ stationName, stationSiteId, stationId })
        .then(({ data }) => {
          if (data.status === 'success') {
            this.saveBtnLoading = false
            if (data.data) {
              this.$Message.destroy()
              this.$Message.warning('工位地图名称已存在')
            } else {
              this.saveData()
            }
          } else {
            this.saveBtnLoading = false
          }
        })
        .catch(() => {
          this.saveBtnLoading = false
        })
    },
    setBackImgContainerHeight (src) {
      if (!src) {
        return
      }
      const $this = this
      this.$nextTick(() => {
        const image = new Image()
        image.src = src
        image.onload = function () {
          if (this.height) {
            $this.imgHeight = this.height
          }
        }
      })
    },
    checkNum () {
      // eslint-disable-next-line
      const pattern = /^[A-Z\d\-]+$/
      if (!pattern.test(this.stationNo)) {
        this.$Message.destroy()
        this.$Message.warning('只能输入英文大写、数字和 “-”')

        return false
      }
      for (let i in this.blockArray) {
        if (
          this.stationNo === this.blockArray[i].pointName &&
          this.editIndex !== parseInt(i)
        ) {
          this.$Message.destroy()
          this.$Message.warning('已有相同编号:' + this.stationNo)
          return false
        }
      }
      return true
    },
    handOk () {
      if (!this.checkNum()) {
        return
      }
      this.$set(this.blockArray[this.editIndex], 'pointName', this.stationNo)
      this.$set(
        this.blockArray[this.editIndex],
        'deleted',
        this.chosenDisableItem
      )
      this.$set(
        this.blockArray[this.editIndex],
        'pointActivityId',
        this.lineIdForEdit
      )
      this.isShowSeatInfoEdit = false
    },
    showSeatModal (seatNo, stationId, index, deleted) {
      if (this.openState === 0) {
        return
      }
      this.isShowSeatInfoEdit = true
      this.chosenDisableItem = deleted
      this.editIndex = index
      if (!seatNo) {
        this.stationNo = ''
      } else {
        this.stationNo = seatNo
      }
      if (!stationId) {
        stationId = 0
      } else if (stationId > 0) {
        this.lineIdForEdit = stationId
      }
    },
    initData () {
      this.lineOptions = []
      this.blockArray = []
      if (this.mapInfo) {
        this.seatName = this.mapInfo.stationName
        if (this.mapInfo.stationSiteId) {
          this.centerSelect = this.mapInfo.stationSiteId
        } else {
          this.centerSelect = null
        }
      }
    },
    getColorsForline (sitId) {
      WfmStationAPI.listColor({ sitId })
        .then(({ data }) => {
          if (data.status === 'success') {
            for (let key in data.data) {
              let tmp = data.data[key]
              this.colorSelectedMap[tmp.wmActivityId] = tmp.colorVal
            }
            this.getLines(data.data)
          }
        })
        .catch(() => {
          this.isLoading = false
        })
    },
    getSeatMapDetail (stationId, stationSiteId) {
      if (!stationId) {
        this.getColorsForline(stationSiteId)
        this.isLoading = false
        return
      }
      WfmStationAPI.view({ stationId })
        .then(({ data }) => {
          if (data.status === 'success') {
            this.isLoading = false
            if (data.data) {
              if (data.data.stationImageId) {
                this.imageId = data.data.stationImageId
              }
              if (data.data.poinList) {
                this.blockArray = data.data.poinList
              }
              for (let key in data.data.map.colorList) {
                let tmp = data.data.map.colorList[key]
                this.colorSelectedMap[tmp.wmActivityId] = tmp.colorVal
              }
            }
            this.getLines(data.data.map.colorList)
            if (this.imageId) {
              const tmpSrc = FILE_API.show(this.imageId)
              this.imgSrc = 'url(http:' + tmpSrc + ') no-repeat' // ----读取对应图片id
              this.setBackImgContainerHeight('http:' + tmpSrc)
            } else {
              this.imgSrc = ''
            }
          }
        })
        .catch(() => {
          this.isLoading = false
        })
    },
    beforSaveData () {
      if (!this.seatName) {
        this.$Message.destroy()
        this.$Message.warning('工位名称不能为空')
        return
      }

      if (this.lineOptions.length === 0) {
        this.$Message.destroy()
        this.$Message.warning('选择中心')
        return
      }
      this.verifyName()
    },
    saveData () {
      this.isLoading = true
      const data = this.orgnizeData()
      if (this.openState === 1 && !this.addedRecId) {
        WfmStationAPI.create({ ...data })
          .then(({ data }) => {
            if (data.status === 'success') {
              this.addedRecId = data.data
              this.isLoading = false
              this.saveBtnLoading = false
              this.$Message.destroy()
              this.$Message.success('新增成功')
              this.$emit('refresh')
            }
          })
          .catch(() => {
            this.isLoading = false
            this.saveBtnLoading = false
          })
      } else {
        WfmStationAPI.update({ ...data })
          .then(({ data }) => {
            if (data.status === 'success') {
              this.isLoading = false
              this.saveBtnLoading = false
              this.$Message.destroy()
              this.$Message.success('保存成功')
              this.$emit('refresh')
            }
          })
          .catch(() => {
            this.isLoading = false
            this.saveBtnLoading = false
          })
      }
    },
    colorChange (id, color) {
      console.log('change', this.colorCurrentMap)
      // this.$set(this.colorCurrentMap, id, color)
    },
    orgnizeData () {
      let form = {}
      form.colorList = []
      for (let key in this.colorCurrentMap) {
        form.colorList.push({
          activityId: key,
          colorVal: this.colorCurrentMap[key],
          siteId: this.centerSelect
        })
      }
      form.poinList = this.blockArray
      form.stationImageId = this.imageId
      form.stationName = this.seatName
      form.stationSiteId = this.centerSelect
      if (this.addedRecId) {
        form.stationId = this.addedRecId
      }
      return form
    },
    changeCenter () {
      this.radioSelect = 0
      this.lineOptions = []
      this.colorCurrentMap = {}
      this.getColorsForline(this.centerSelect)
    },
    getLines (colorList) {
      for (let key in colorList) {
        let id = colorList[key].wmActivityId
        if (!id) {
          id = colorList[key].wmActivityId
        }
        if (id) {
          let obj = {}
          obj.id = id
          obj.name =
            colorList[key].actWmName === undefined
              ? colorList[key].wmName
              : colorList[key].actWmName
          this.lineOptions.push(obj)
        }
        if (this.colorSelectedMap[id]) {
          this.$set(this.colorCurrentMap, id, this.colorSelectedMap[id])
        } else {
          this.$set(this.colorCurrentMap, id, 'red')
        }
      }
    },
    addBlcok (e) {
      if (this.isShowSeatInfoEdit) {
        return
      }
      this.isAddBlock = true
    },
    minusBlcok () {
      if (this.selectBlockIndex < 0) {
        return
      }
      if (this.isShowSeatInfoEdit) {
        return
      }
      this.blockArray.splice(this.selectBlockIndex, 1)
      this.selectBlock = null
      this.selectBlockIndex = -1
    },
    confrimPos (e) {
      let x = e.layerX
      let y = e.layerY
      this.selectBlockIndex = -1
      this.selectBlock = null
      if (this.isAddBlock) {
        if (this.lineOptions.length === 0) {
          this.$Message.destroy()
          this.$Message.warning('选择中心')
          return
        }
        let tmp = {
          pointName: '未命名',
          deleted: '0',
          pointLeft: x,
          pointRight: y,
          pointActivityId: this.lineOptions[this.radioSelect].id
        }
        this.blockArray.push(tmp)
        this.isAddBlock = false
        this.total++
      }
    },
    blockClick (item, index, e) {
      if (this.openState < 1) {
        return
      }
      if (e.button === 0) {
        // 左键
        this.clickPos.pointLeft = e.clientX
        this.clickPos.pointRight = e.clientY
        this.isMouseDown = true
        this.selectBlock = item
        this.selectBlockIndex = index
        e.stopPropagation()
        this.handStyle = 'move'
        this.preventEvent = 'none'
        this.blockColor = 'green'
      }
    },
    blockMouseMove (e) {
      if (this.isMouseDown) {
        let tmpLeft =
          this.selectBlock.pointLeft + e.clientX - this.clickPos.pointLeft
        let tmpTop =
          this.selectBlock.pointRight + e.clientY - this.clickPos.pointRight

        if (this.canMoveToNextPos(tmpLeft, tmpTop, this.selectBlock.id)) {
          this.selectBlock.pointLeft = tmpLeft
          this.selectBlock.pointRight = tmpTop
        }

        if (tmpLeft < 37) {
          this.selectBlock.pointLeft = 37
        }
        if (tmpLeft > 1100) {
          this.selectBlock.pointLeft = 1100
        }
        if (tmpTop < 37) {
          this.selectBlock.pointRight = 37
        }

        let divHeight = document.getElementById('galaxy-menu').clientHeight
        if (tmpTop > divHeight - this.seatSize) {
          this.selectBlock.pointRight = divHeight - this.seatSize
        }

        this.clickPos.pointLeft = e.clientX
        this.clickPos.pointRight = e.clientY
      }
    },
    canMoveToNextPos (centerX, centerY, id) {
      const array = this.blockArray
      for (let key in array) {
        if (id === array[key].id) {
          continue
        }
        let xGap = Math.abs(array[key].pointLeft - centerX)
        let yGap = Math.abs(array[key].pointRight - centerY)
        if (xGap > this.seatSize || yGap > this.seatSize) {
          continue
        } else {
          return false
        }
      }
      return true
    },
    judeIsCross (i, j, centerX, centerY) {
      // 判断两个div是否有交集
      console.log(centerX, centerY)
      const array = this.blockArea[i][j].array
      for (let key in array) {
        let xGap = Math.abs(array[key].pointLeft - centerX)
        let yGap = Math.abs(array[key].pointRight - centerY)
        if (xGap > this.seatSize || yGap > this.seatSize) {
          return false
        } else {
          return true
        }
      }
      return false
    },
    // blockMouseup (e) {
    //   this.selectBlock = null
    //   e.stopPropagation()
    // },
    canvasMouseUp (e) {
      this.blockColor = 'red'
      this.preventEvent = 'auto'
      this.isMouseDown = false
      this.handStyle = 'default'
    },
    // -------------------------上传相关--------------------------------
    cancelSpin () {
      this.isLoading = false
    },
    handleRemove () {
      this.$refs.upload.fileList.splice(0, 1)
    },
    handleSuccess (res, file) {
      this.isLoading = false
      this.imageId = res.data[0].uuid
      const tmpSrc = FILE_API.show(this.imageId)
      this.imgSrc = 'url(http:' + tmpSrc + ') no-repeat' // ----读取对应图片id
      this.setBackImgContainerHeight('http:' + tmpSrc)
    },
    // handleFormatError (file) {
    //   this.isLoading = false
    //   this.$Message.warning(file.name + ' 的文件格式只能为 jpg ,jpeg 或 png.')
    // },
    handleMaxSize (file) {
      this.isLoading = false
      this.$Message.warning('File  ' + file.name + ' 图片大小不能超过 2M.')
    },
    async handleBeforeUpload (file) {
      if (!new RegExp('.(jpg|jpeg|png|JPG|JPEG|PNG)$').test(file.name)) {
        this.$Message.warning('请上传jpg,jpeg 或 png格式文件')
        this.isLoading = false
        return false
      }
      if (this.$refs.upload.fileList.length > 0) {
        this.$refs.upload.fileList.splice(0, 1)
      }

      this.isLoading = true
      const promise = await this.checkImageWH(
        file,
        COMMEN_CONFIG.WORK_MAP_PARAMS.IMAGE_WIDTH
      )

      this.isLoading = false
      return promise
    },
    checkImageWH (file, width) {
      // 需要修改配置文件（现在最大宽度设置为1000px）
      let self = this
      return new Promise(function (resolve, reject) {
        let filereader = new FileReader()
        filereader.readAsDataURL(file)
        filereader.onload = e => {
          let src = e.target.result
          const image = new Image()
          image.src = src
          image.onerror = () => {
            self.$Message.warning('文件损坏请重新上传')
            resolve(false)
          }
          image.onload = function () {
            if (width && this.width > width) {
              self.$Modal.confirm({
                title: '图片超限',
                content:
                  '<p style="color:green">图片宽度超过了限制(' +
                  COMMEN_CONFIG.WORK_MAP_PARAMS.IMAGE_WIDTH +
                  'px),是否继续上传</p>',
                onOk: () => {
                  resolve(true)
                },
                onCancel: () => {
                  self.isLoading = false
                  reject(new Error('err'))
                }
              })
            } else {
              resolve(true)
            }
          }
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
#galaxy-menu {
  position: relative;
  width: 100%;
  min-height: 680px;
  height: auto;
  background: gainsboro;
  border: 1px dashed grey;
  background-attachment: fixed;

  .moveBlock {
    border-radius: 15px;
    position: absolute;
    text-align: center;
    color: white;
    font-size: 18px;
  }
}

.seatMap {
  .paintArea {
    width: 1170px;
    height: 680px;
    overflow-y: auto;
  }
  .mapImage {
    width: 100%;
    height: 100%;
  }
  .demo-upload-list {
    display: inline-block;
    width: 60px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    border: 1px solid transparent;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    position: relative;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    margin-right: 4px;
  }
  .demo-upload-list img {
    width: 100%;
    height: 100%;
  }
  .demo-upload-list-cover {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.6);
  }
  .demo-upload-list:hover .demo-upload-list-cover {
    display: block;
  }
  .demo-upload-list-cover i {
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    margin: 0 2px;
  }
}
</style>
<style lang="less">
.ivu-color-picker-transfer {
  width: auto !important;
}
</style>
