<template>
  <div class="index-container height-100 artwork-table"
       id="index-container">
    <div class="col-12 row justify-between"
         style="margin-bottom: 22px">
      <div class="my-search row">
        <!-- <a-input
          v-model:value="state.defaultSearch"
          placeholder="在此处输入编号/姓名/推荐人/平尺"
          allow-clear
          class="search-input"
        >
          <template #prefix>
            <img src="@/assets/image/icon/search.png" class="icon" />
          </template>
        </a-input>
        <a-button class="search-btn" @click="handleDefaultSearch"
          >搜索</a-button
        > -->
      </div>
      <div>
        <slot name="top-right">
          <a-button shape="round"
                    style="
              width: 100px;
              margin-left: 10px;
              background-color: #dfd7f2;
              color: #764cf6;
            "
                    @click="handleCreate('line')">增加行</a-button>
          <a-button shape="round"
                    style="
              width: 100px;
              margin-left: 10px;
              background-color: #764cf6;
              color: #fff;
            "
                    @click="handleCreate('column')">增加列</a-button>
          <a-button shape="round"
                    style="
              width: 142px;
              margin-left: 10px;
              background-color: #7b7b7b;
              color: #fff;
            "
                    @click="delData">删除所选行/列</a-button>
        </slot>
      </div>
    </div>
    <a-row type="flex">
      <a-col flex="100px">
        <div class="table-box">
          <a-table :loading="state.loading"
                   :row-selection="{
              onChange: onSelectChange,
              selectedRowKeys: state.selectedRowKeys,
              hideSelectAll: true,
              type: 'radio',
            }"
                   :row-class-name="
              (_record, index) =>
                index % 2 === 1 ? 'table-striped' : null
            "
                   :rowKey="'id'"
                   :pagination="false"
                   :data-source="state.tableData"
                   :columns="state.columns"
                   :scroll="{ x: 'max-content', y: 450 }">
            <template #headerCell="{ column }">
              <a-radio v-if="column.label"
                       v-model:checked="column['checked']"
                       @change="selectColumn(column)"></a-radio>

              <div>{{ column.label }}</div>
            </template>

            <template #bodyCell="{ column, record }">
              <template v-if="column.label === ''">
                <div>{{ record.id }}</div>
              </template>
              <template v-else>
                <div @click="handleItemClick(column, record)">
                  <div v-show="
                      !record[record[column.field]] ||
                      record[record[column.field]].length <
                        1
                    "
                       @click="addArtShow(column, record)"
                       class="artist-box">
                    <span style="position: absolute">+</span>
                    <!-- {{ record[column.field] }} -->
                    <draggable :draggable="'no'"
                               class="list-group"
                               @change="tablechange(column, record)"
                               :list="record[record[column.field]]"
                               group="people"
                               :scroll="false"
                               :itemKey="'drag_' + record.id">
                      <template #item="{ element }">
                        <div class="list-group-item"></div>
                      </template>
                    </draggable>
                  </div>

                  <div v-show="
                      record[record[column.field]] &&
                      record[record[column.field]].length >
                        0
                    ">
                    <draggable :scroll="false"
                               :draggable="'no'"
                               class="list-group"
                               :list="record[record[column.field]]"
                               @change="tablechange(column, record)"
                               group="people"
                               :itemKey="'drag_' + record.id">
                      <template #item="{ element }">
                        <div :class="
                            record[record[column.field]]
                              .length > 1
                              ? 'list-group-item'
                              : 'one list-group-item'
                          ">
                          {{ element.ArtistName }}({{
                            element.ArtworkNum
                          }})
                        </div>
                      </template>
                    </draggable>
                  </div>
                </div>
              </template>
            </template>
          </a-table>
        </div>
        <div style="text-align: end">
          <a-button shape="round"
                    style="
              width: 100px;
              margin-left: 10px;
              background-color: #764cf6;
              color: #fff;
              margin-top: 10px;
            "
                    @click="creatOtherColumn(-1)">增加列</a-button>
        </div>
        <!-- <div class="other-head">其他</div> -->
        <div class="other">
          <div class="other-head">
            <div style="width: 70px; text-align: center">
              其他
            </div>
          </div>
          <div class="mainbox">
            <div v-for="item in state.otherList"
                 @click="setRightList(item)"
                 :key="item.ShelfId"
                 :style="
                item.ShelfInfo.length > 1
                  ? 'min-width:' +
                    item.ShelfInfo.length * 80 +
                    'px'
                  : 'min-width:120px'
              "
                 class="other-add">
              <draggable v-show="item && item.ShelfInfo.length > 0"
                         :draggable="'no'"
                         class="list-group"
                         :list="item.ShelfInfo"
                         group="people"
                         @change="otherChange(item)"
                         :itemKey="'drag' + item.ShelfId">
                <template #item="{ element }">
                  <div :style="
                      item && item.ShelfInfo.length > 1
                        ? 'width:' +
                          100 / item.ShelfInfo.length +
                          '%;'
                        : 'width:100%;'
                    "
                       :class="
                      item && item.ShelfInfo.length > 1
                        ? 'group-item'
                        : 'one group-item'
                    ">
                    {{ element.ArtistName }}({{
                      element.ArtworkNum
                    }})
                  </div>
                </template>
              </draggable>
              <span style="position: absolute">+</span>
              <draggable @click="addOtherArtshow(item)"
                         v-show="item && item.ShelfInfo.length < 1"
                         :draggable="'no'"
                         class="list-group"
                         :list="item.ShelfInfo"
                         group="people"
                         @change="otherChange(item)"
                         :itemKey="'drag' + item.ShelfId">
                <template #item="{ element }">
                  <div class="list-group-item"></div>
                </template>
              </draggable>
            </div>
          </div>
        </div>
        <!-- <div style="text-align: end">
          <a-button
            shape="round"
            style="
              width: 100px;
              margin-left: 10px;
              background-color: #764cf6;
              color: #fff;
              margin-top: 10px;
            "
            @click="creatOtherColumn(0)"
            >增加列</a-button
          >
        </div> -->
        <div class="other">
          <div class="other-head"
               style="background-color: #614679">
            <div style="width: 70px; text-align: center">
              未入库
            </div>
          </div>
          <div class="mainbox">
            <div v-for="item in state.notInList"
                 @click="setRightList(item)"
                 :key="item.ShelfId"
                 :style="
                item.ShelfInfo.length > 1
                  ? 'min-width:' +
                    item.ShelfInfo.length * 80 +
                    'px'
                  : 'min-width:120px'
              "
                 class="other-add">
              <draggable v-show="item && item.ShelfInfo.length > 0"
                         :draggable="'no'"
                         class="list-group"
                         :list="item.ShelfInfo"
                         group="people"
                         @change="otherChange(item)"
                         :itemKey="'drag' + item.ShelfId">
                <template #item="{ element }">
                  <div :style="
                      item && item.ShelfInfo.length > 1
                        ? 'width:' +
                          100 / item.ShelfInfo.length +
                          '%;'
                        : 'width:100%;'
                    "
                       :class="
                      item && item.ShelfInfo.length > 1
                        ? 'group-item'
                        : 'one group-item'
                    ">
                    {{ element.ArtistName }}({{
                      element.ArtworkNum
                    }})
                  </div>
                </template>
              </draggable>
              <span style="position: absolute">+</span>
              <draggable @click="addOtherArtshow(item)"
                         v-show="item && item.ShelfInfo.length < 1"
                         :draggable="'no'"
                         class="list-group"
                         :list="item.ShelfInfo"
                         group="people"
                         @change="otherChange(item)"
                         :itemKey="'drag' + item.ShelfId">
                <template #item="{ element }">
                  <div class="list-group-item"></div>
                </template>
              </draggable>
            </div>
          </div>
        </div>
      </a-col>
      <a-col flex="auto"
             style="flex: 1">
        <div class="artist-list">
          <div class="artist-title">
            {{ state.dragData.title }}
          </div>
          <a-select v-show="state.dragData.title.includes('未入库')||state.dragData.title.includes('其他')"
                    v-model:value="state.rightSearchArtistUID"
                    show-search
                    style="width: 150px; margin-bottom: 20px"
                    placeholder="可搜索"
                    :fieldNames="{
              label: 'nameWithTnum',
              value: 'Uid',
            }"
                    :options="state.rightSearchoptions"
                    :filter-option="aritstFilterOption"
                    @change="handleChange"></a-select>
          <a-row :gutter="16"
                 style="">
            <draggable style="width: 100%; display: contents"
                       :list="state.dragData.list"
                       group="people"
                       @change="handledraggable"
                       itemKey="ArtworkIds"
                       :handle="'.candrag'"
                       chosen-class="dragClass"
                       :force-fallback="true">
              <template #item="{ element }">
                <a-col :span="12">
                  <div class="list-box">
                    <!-- <a-checkbox
                      v-model:checked="element.checked"
                      @change="selectArtWork(element)"
                    ></a-checkbox> -->

                    <div class="avator">
                      <img :src="
                          element.ArtistAvatar +
                          '?x-oss-process=image/resize,w_100,h_100'
                        " />
                    </div>
                    <div>
                      <p class="name">
                        画家姓名：<span>{{
                          element.ArtistName
                        }}</span>
                      </p>
                      <p class="num">
                        画作数量：<span>{{
                          element.ArtworkNum
                        }}</span>
                      </p>
                      <p class="ruler">
                        总平尺数：<span>{{
                          element.TotalRule
                        }}</span>
                      </p>
                    </div>
                    <div style="margin-bottom: 10px">
                      <a-button class="btn"
                                style="
                          background-color: #dfd7f2;
                          color: #764cf6;
                        "
                                shape="round"
                                @click="artistDetail(element)">详情</a-button>
                    </div>

                    <a-button :draggable="true"
                              class="btn candrag"
                              style="
                        background-color: #764cf6;
                        color: #fff;
                      "
                              shape="round">拖动</a-button>
                  </div>
                </a-col>
              </template>
            </draggable>
          </a-row>
        </div>
      </a-col>
    </a-row>
    <artWorkList :artWorkVisible="artWorkVisible"
                 :ShelfId="state.ShelfId"
                 :ArtistUuid="state.ArtistUuid"
                 @checkHandleOk="checkHandleOk" />
    <warehouse v-if="wareHouseVisible"
               :wareHouseVisible="wareHouseVisible"
               :ArtistUuid="state.ArtistUuid"
               :ArtworkUuids="state.ArtworkUuids"
               :fatherData="state.fatherData"
               @wareHandleOk="wareHandleOk" />
  </div>
</template>
<script setup>
import {
  ref,
  reactive,
  onBeforeMount,
  onMounted,
  getCurrentInstance,
  nextTick,
  computed,
  watch,
} from "vue";
import draggable from "vuedraggable";
import artWorkList from "./artWorkList.vue";
import warehouse from "./warehouse.vue";
import { Modal } from "ant-design-vue";
import {
  processError,
  processSuccess,
  processWarning,
} from "@/utils/helper/message";
const currentInstance = getCurrentInstance();
const { $request } =
  currentInstance.appContext.config.globalProperties;
const state = reactive({
  loading: true,
  defaultColumn: 2,
  defaultRow: 2,
  selectedRowKeys: [],
  selectedRows: [],
  columns: [],
  columnArr: [],
  defaultData: [],
  tableData: [],
  dragData: {
    title: "",
    list: [],
  },
  MaxColumn: "",
  MaxLine: 0,
  columnNum: 0,
  ShelfId: 0,
  position: "",
  ArtistUuid: "",
  otherList: [],
  notInList: [],
  ArtworkUuids: [],
  fatherData: { ArtistUuid: "", ArtworkUuids: [] },
  rightSearchArtistUID: "",
  rightSearchoptions: [],
  tempDragData: [],
});
watch(
  () => state.defaultData,
  () => {
    state.loading = true;
    let data = [];
    state.defaultData.forEach((item) => {
      let opt = {
        id: item.LineNo,
        rowData: item.ColumnInfo,
      };
      item.ColumnInfo.forEach((col) => {
        opt[col.ShelfNo.charAt(0)] = col.ShelfNo;
        opt[col.ShelfNo] = col.ShelfInfo;
      });

      data.push(opt);
      state.tableData = data;
      state.loading = false;
    });
  },
  { deep: true }
);
onBeforeMount(() => {
  // for (let index = 0; index < state.defaultColumn; index++) {
  //   if (index < 26) {
  //     state.columns.push({
  //       title: String.fromCharCode("A".charCodeAt(0) + index),
  //       dataIndex: index,
  //       checked: false,
  //     });
  //   } else {
  //     state.columns.push({
  //       title:
  //         String.fromCharCode(
  //           "A".charCodeAt(0) + index - parseInt(index / 26) * 26
  //         ) + parseInt(index / 26),
  //       dataIndex: index,
  //       checked: false,
  //     });
  //   }
  // }
  // for (let index = 1; index <= state.defaultRow; index++) {
  //   state.tableData.push({
  //     LineNo: index + "",
  //     data: [],
  //   });
  // }
});
onMounted(() => {
  getPageData();

  //   for (let i = 0; i < state.columns.length; i++) {
  //     for (let index = 0; index < state.tableData.length; index++) {
  //       for (let i2 = 0; i2 < state.tableData[index].data.length; i2++) {
  //         state.tableData[index].data[i2].id = state.columns[i].title + index;
  //         break;
  //       }
  //     }
  //   }
});
const aritstFilterOption = (input, option) => {
  return (
    option.Name.toLowerCase().indexOf(
      input.toLowerCase()
    ) >= 0
  );
};
const handleChange = (value) => {
  console.log(state.dragData.list);
  // 筛选list中id和value相同的元素
  state.dragData.list = state.tempDragData.list.filter(
    (v) => v.ArtistUuid == value
  );

};
// 获取画家列表
const getArtistList = () => {
  $request.HTTP.artist
    .artistBaseInfoList({
      Keyword: "",
      Page: 1,
      PageSize: 99999999,
    })
    .then((res) => {
      if (res.status == 0) {
        // 将Name和Tnum放入options
        const options = res.data.Data.map((v) => ({
          ...v,
          nameWithTnum: v.Name + "(" + v.Tnum + ")",
        }));
        state.rightSearchoptions = options;
      } else {
      }
    })
    .catch((e) => { });
};
const artWorkVisible = ref(false);
// 画作弹窗消失
const checkHandleOk = () => {
  artWorkVisible.value = false;
  state.ArtistUuid = "";
  getPageData();
};
const wareHouseVisible = ref(false);
// 画作弹窗消失
const wareHandleOk = () => {
  wareHouseVisible.value = false;
  state.ArtistUuid = "";
  getPageData();
};
// 更新仓储信息
const updateStorage = () => {
  if (state.ArtworkUuids.length < 1) {
    processError("请选择画作");
    return;
  }
  console.log(state.ArtworkUuids);
  state.fatherData.ArtistUuid = state.ArtistUuid;
  state.fatherData.ArtworkUuids = state.ArtworkUuids;
  wareHouseVisible.value = true;
};
// 选择画作
// const selectArtWork = (element) => {
//   state.ArtistUuid = element.ArtistUuid;
//   if (element.checked) {
//     console.log(element);
//     state.ArtworkUuids.push(element.ArtistUuid);
//   } else {
//     state.ArtworkUuids.splice(
//       state.ArtworkUuids.findIndex(
//         (item) => item.ArtistUuid === element.ArtistUuid
//       ),
//       1
//     );
//   }
// };
// 画家画作详情
const artistDetail = (val) => {
  state.ShelfId = val.ShelfId;
  state.ArtistUuid = val.ArtistUuid;
  artWorkVisible.value = true;
};
// 获取数据
const getPageData = () => {
  state.loading = true;
  let url = "workbench/shelf-list";
  let params = {
    Page: 1,
    PageSize: 9999999,
  };
  $request.HTTP.components
    .postDataByParams(url, params)
    .then(
      (res) => {
        if (res.status === 0) {
          state.MaxColumn = res.data.MaxColumn;
          state.MaxLine = res.data.MaxLine;
          state.notInList = res.data.Special[1].ColumnInfo;
          state.otherList = res.data.Special[0].ColumnInfo;
          state.notInList.forEach((v) => {
            if (v.ShelfInfo == null) {
              v.ShelfInfo = [];
            }
          });
          state.otherList.forEach((v) => {
            if (v.ShelfInfo == null) {
              v.ShelfInfo = [];
            }
          });
          state.columnNum =
            res.data.MaxColumn.charCodeAt(0);
          state.columns;
          for (
            let index = 0;
            index <= state.columnNum - "A".charCodeAt(0);
            index++
          ) {
            state.columnArr.push(
              String.fromCharCode(65 + index)
            );
          }
          if (
            res.data.MaxColumn &&
            state.columnArr.includes(res.data.MaxColumn)
          ) {
            state.columns = state.columnArr
              .splice(
                0,
                state.columnArr.indexOf(
                  res.data.MaxColumn
                ) + 1
              )
              .map((item) => {
                return {
                  label: item,
                  field: item,
                  align: "center",
                  className: "minWidth150",
                };
              });
          }
          state.columns.unshift({
            label: "",
            field: "",
            align: "center",
            width: "30px",
            fixed: true,
          });
          res.data.Data.forEach((v) => {
            v.ColumnInfo.forEach((v2) => {
              if (v2.ShelfInfo == null) {
                v2.ShelfInfo = [];
              }
            });
          });
          state.defaultData = res.data.Data;
          currentInstance?.proxy?.$forceUpdate();
          state.loading = false;
        } else {
          state.loading = false;
          processError(res.msg || "获取数据失败");
        }
      },
      (err) => {
        state.loading = false;
        processError(err || "获取数据失败");
      }
    );
};
// 选中列
const selectColumn = (coumln) => {
  state.delCoumln = coumln.field;
  state.columns.forEach((v) => {
    if (v.field !== coumln.field) {
      v.checked = false;
    }
  });
};
// 删除
const delData = () => {
  Modal.confirm({
    title: "删除",
    content: "确定要进行删除操作吗",
    onOk () {
      if (
        state.selectedRowKeys.length > 0 &&
        state.delCoumln
      ) {
        processError("不可以同时删除行和列");
        state.selectedRows = [];
        state.selectedRowKeys = [];
        state.delCoumln = "";
        resetCheckColunm();
      } else {
        if (state.selectedRows.length > 0) {
          if (state.selectedRowKeys[0] !== state.MaxLine) {
            processError("请从最后一行开始删除");
          } else {
            delApi("line", state.selectedRowKeys[0] + "");
          }
        } else if (state.delCoumln) {
          if (state.delCoumln !== state.MaxColumn) {
            processError("请从最后一列开始删除");
          } else {
            delApi("column", state.delCoumln);
          }
        }
      }
    },
    onCancel () { },
  });
};
// 删除接口
const delApi = (ShelfType, ActionNo) => {
  let params = {
    ShelfType: ShelfType,
    ActionNo: ActionNo,
  };
  $request.HTTP.workbench.delShelf(params).then(
    (res) => {
      if (res.status === 0) {
        processSuccess("删除成功");
        state.selectedRows = [];
        state.selectedRowKeys = [];
        state.delCoumln = "";
        getPageData();
        currentInstance?.proxy?.$forceUpdate();
      } else {
        processError(res.msg || "失败");
      }
    },
    (err) => {
      processError(err || "失败");
    }
  );
};
// 重置选中列
const resetCheckColunm = () => {
  state.columns.forEach((v) => {
    v.checked = false;
  });
};
// 添加画作
const addArtShow = (column, record) => {
  getSelectShelfID(column, record);
  artWorkVisible.value = true;
};
// 添加其他画作
const addOtherArtshow = (item) => {
  state.ShelfId = item.ShelfId;
  artWorkVisible.value = true;
};
// 获取选中的货架ID
const getSelectShelfID = (column, record) => {
  state.position = column.field + "-" + record.id;
  record.rowData.forEach((v) => {
    if (v.ShelfNo === state.position) {
      state.ShelfId = v.ShelfId;
    }
  });
};
// 选中
const onSelectChange = (selectedRowKeys, rows) => {
  state.selectedRows = rows;
  state.selectedRowKeys = selectedRowKeys;
};
const handleDefaultSearch = () => { };
// 添加画作
const handleCreate = (val) => {
  if (val === "line") {
    state.MaxLine++;
  } else {
    state.MaxColumn = String.fromCharCode(
      state.MaxColumn.charCodeAt(0) + 1
    );
  }
  let params = {
    ShelfType: val,
    MaxLine: state.MaxLine,
    MaxColumn: state.MaxColumn,
  };
  $request.HTTP.workbench.addShelf(params).then(
    (res) => {
      if (res.status === 0) {
        processSuccess("添加成功");
        getPageData();
        currentInstance?.proxy?.$forceUpdate();
      } else {
        processError(res.msg || "获取数据失败");
      }
    },
    (err) => {
      processError(err || "获取数据失败");
    }
  );
};
// 其他未入库添加列
const creatOtherColumn = (val) => {
  let data;
  val === -1
    ? (data = state.otherList[state.otherList.length - 1])
    : (data = state.notInList[state.notInList.length - 1]);
  let index = data.ShelfNo.indexOf("-");
  let MaxColumn = data.ShelfNo.substring(0, index);
  let params = {
    ShelfType: "column",
    MaxLine: val,
    MaxColumn: String.fromCharCode(
      MaxColumn.charCodeAt(0) + 1
    ),
  };
  $request.HTTP.workbench.addShelf(params).then(
    (res) => {
      if (res.status === 0) {
        processSuccess("添加成功");
        getPageData();
        currentInstance?.proxy?.$forceUpdate();
      } else {
        processError(res.msg || "获取数据失败");
      }
    },
    (err) => {
      processError(err || "获取数据失败");
    }
  );
};
const otherChange = (item) => {
  state.ShelfId = item.ShelfId;
};
// 拖动右边list
const handledraggable = (column, record) => {
  if (!column.removed) {
    return;
  }
  let dataCol = column.removed.element;
  let params = {
    ArtistUuid: dataCol.ArtistUuid,
    ArtworkIds: dataCol.ArtworkIds,
    OldShelfId: dataCol.ShelfId,
    NewShelfId: state.ShelfId,
  };
  $request.HTTP.workbench.saveShelf(params).then(
    (res) => {
      if (res.status === 0) {
        processSuccess("保存成功");
        getPageData();
        currentInstance?.proxy?.$forceUpdate();
      } else {
        processError(res.msg || "失败");
      }
    },
    (err) => {
      processError(err || "失败");
    }
  );
  currentInstance?.proxy?.$forceUpdate();
};
//表格cell值变化
const tablechange = (column, record) => {
  getSelectShelfID(column, record);
};
// 点击表格cell 给右边list赋值
const handleItemClick = (column, record) => {
  let old;
  record.rowData.forEach((v) => {
    if (v.ShelfNo === record[column.field]) {
      old = v.ShelfId;
    }
  });
  state.dragData.title = record[column.field];
  state.dragData.list = record[record[column.field]] || [];
  state.dragData.list.forEach((v) => {
    v.ShelfId = old;
  });
};
// 其他给右边list赋值
const setRightList = (item) => {
  state.rightSearchArtistUID = '';
  getArtistList();
  state.dragData.title = item.ShelfNo;
  state.dragData.list = item.ShelfInfo || [];
  state.dragData.list.forEach((v) => {
    v.ShelfId = item.ShelfId;
  });
  state.tempDragData = JSON.parse(JSON.stringify(state.dragData));
};
</script>
<style scoped lang="scss">
.index-container {
  background: rgb(250, 249, 252);
}
.table-box {
  width: 1150px;
  border-radius: 20px;
  .artist-box {
    background-color: #969696;
    width: 100%;
    border-radius: 20px;
    height: 30px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
}
:deep(.antd-table) {
  border-radius: 20px;
}
:deep( .ant-table-container table > thead > tr:first-child th:first-child ) {
  border-top-left-radius: 20px;
}
:deep( .ant-table-container table > thead > tr:first-child th:last-child ) {
  border-top-right-radius: 20px;
}
:deep(.ant-table-header) {
  height: 65px;
}
:deep(.table-striped) {
  background-color: #ece9f5;
}
:deep( .ant-table-tbody > tr.ant-table-row:hover > td,
:deep(.ant-table-tbody > tr > td) ) {
  border-bottom: 0;
}
:deep( .ant-table-container table > thead > tr:first-child th:first-child ) {
  background: #fff;
}
:deep(.ant-table-body) {
  .ant-table-cell-fix-left-last {
    background: #d0d0d0;
  }
}
:deep(.ant-table-thead > tr > th) {
  background: #dfd7f2;
  color: #764cf6;
  font-weight: bold;
}
:deep(.ant-radio-checked .ant-radio-inner) {
  border-color: #764cf6;
}
:deep(.ant-radio-inner::after) {
  background-color: #764cf6;
}
:deep(.ant-radio-wrapper) {
  margin-right: 0;
}
.other-head {
  border-radius: 20px 0 0 20px;
  height: 65px;
  width: 90px;
  display: inline-flex;
  background: #646464;
  color: #fff;
  align-items: center;
  justify-content: center;
}
.no-head {
  border-radius: 20px 0 0 20px;
  height: 70px;
  width: 90px;
  display: inline-flex;
  background: #614679;
  color: #fff;
  align-items: center;
  justify-content: center;
}
.other {
  width: 1150px;
  border-radius: 20px 0 0 20px;
  height: 70px;
  display: inline-flex;
  margin-top: 10px;
  overflow-x: scroll;
  overflow-y: hidden;
  background: #fff;

  .mainbox {
    height: 70px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    .other-add {
      position: relative;
      margin-left: 20px;
      cursor: pointer;
      background: #969696;
      border-radius: 20px;
      color: #fff;
      text-align: center;
      line-height: 2;

      height: 30px;
      width: 100%;
    }
  }
}
.artist-list {
  text-align: center;
  margin-left: 40px;
  width: 90%;
  border-radius: 20px;
  background: #fff;
  height: 700px;
  overflow-y: scroll;
  overflow-x: hidden;
  .artist-title {
    text-align: center;
    font-size: 20px;
    color: #764cf6;
    padding-top: 20px;
  }
  .list-box {
    margin-bottom: 10px;
    p {
      margin: 0 0 7px;
    }
    .avator {
      width: 100px;
      height: 100px;
      margin: 0 auto;
      img {
        width: 100px;
        height: 100px;
      }
    }
    .btn {
      width: 60%;
    }
  }
}
.list-group {
  width: 100%;
  display: block;
  height: 100%;
}
.list-group-item {
  cursor: pointer;
  display: inline-flex;
  background-color: #764cf6;
  color: #fff;
  padding: 5px;
}
.group-item {
  cursor: pointer;
  height: 30px;
  // width: 100%;
  align-items: center;
  justify-content: center;
  display: inline-flex;
  background-color: #764cf6;
  color: #fff;
  padding: 5px;
}
.dragClass {
  img {
    display: none !important;
  }
  .num {
    display: none !important;
  }
  .ruler {
    display: none !important;
  }
  .btn {
    display: none !important;
  }
}
.list-group-item:nth-of-type(1) {
  border-radius: 20px 0 0px 20px;
}
.list-group-item:last-of-type {
  border-radius: 0px 20px 20px 0px;
}
.group-item:nth-of-type(1) {
  border-radius: 20px 0 0px 20px;
}
.group-item:last-of-type {
  border-radius: 0px 20px 20px 0px;
}
.one {
  border-radius: 20px !important;
}

:deep(.minWidth150) {
  min-width: 150px;
}
:deep(.ant-table-selection-column) {
  min-width: 10px;
}
.my-search {
  display: flex;
  align-items: center;
  margin-bottom: 22px;
  .icon {
    width: 22px;
    height: 20px;
  }
  .search-input {
    width: 576px;
    height: 35px;
    border-radius: 20px;
    color: #fff !important;
  }
  .ant-input-affix-wrapper {
    background: rgba($color: #777777, $alpha: 0.4) !important;
    border: none !important;
    box-shadow: none;
    color: #fff;
  }
  .ant-input-affix-wrapper:hover,
  .ant-input-affix-wrapper:focus {
    border: none !important;
    box-shadow: none;
  }
  .ant-input-affix-wrapper:not(.ant-input-affix-wrapper-disabled):hover {
    border: none !important;
    box-shadow: none;
  }
  .ant-input:focus {
    /* 去除获取焦点时的样式 */
    border: none;
    box-shadow: none;
  }
  .ant-input {
    /* 去除边框样式 */
    resize: none;
    border: none;
    color: #ffffff;
  }
  :deep(.ant-input) {
    background: rgb(201, 201, 201) !important;
  }
  ::-webkit-input-placeholder {
    color: #ffffff !important;
  }
  :-moz-placeholder {
    /* Firefox 18- */
    color: #ffffff !important;
  }
  ::-moz-placeholder {
    /* Firefox 19+ */
    color: #ffffff !important;
  }
  :-ms-input-placeholder {
    color: #ffffff !important;
  }
  .search-btn {
    width: 75px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    margin-left: 15px;
    background: #c1b2e5;
    color: #ffffff;
    border-radius: 20px;
    padding: 0;
    border: none;
    font-size: 14px;
    font-family: "苹方-简";
  }
}
</style>
