<template>
  <div class="artwork-dialog">
    <div id="checkModalBox"></div>
    <a-modal class="artwork-dialog"
             v-model:visible="props.artWorkVisible"
             @ok="handleOk"
             @cancel="handleOk"
             :getContainer="getContainer">
      <template #title>
        <div class="title">画作列表</div>
      </template>
      <template #closeIcon> <img src="@/assets/image/approval/close.png" /></template>
      <span class="title"
            style="font-size: 16px; margin-right: 10px">请选择画家画作</span>
      <a-select v-model:value="state.ArtistUID"
                show-search
                style="width: 150px; margin-bottom: 20px"
                :getPopupContainer="getContainer"
                placeholder="可搜索"
                :fieldNames="{ label: 'nameWithTnum', value: 'Uid' }"
                :options="state.options"
                :filter-option="aritstFilterOption"
                @change="handleChange"></a-select>
      <span class="artWorkTotal">画作总数：{{ state.selectedRows.length }}</span>
      <div class="pending-table">
        <a-table :columns="state.columns"
                 :rowKey="(record) => record.ArtworkUuid"
                 :row-selection="{
            onChange: onSelectChange,
            selectedRowKeys: state.selectedRowKeys,
            checkStrictly: false,
          }"
                 :data-source="state.tableData"
                 :pagination="false"
                 :scroll="{ y: 500 }">
          <template #bodyCell="{ column, record }">
            <template v-if="column.type === 'image'">
              <a-image :width="100"
                       :src="record.HdPic" />
            </template>
          </template>
        </a-table>
      </div>
      <template #footer>
        <div class="button-group">
          <a-button class="save-btn"
                    style="background-color: #646364"
                    @click="reset">重选</a-button>
          <div class="right-footer">
            <a-button class="save-btn"
                      @click="addArt">确认</a-button>
          </div>
        </div>
      </template>
    </a-modal>
  </div>
</template>

<script setup>
import { ref, reactive, watch, nextTick, defineProps, defineEmits, getCurrentInstance } from "vue";
import { processError, processSuccess, processWarning } from "@/utils/helper/message";
const props = defineProps({
  artWorkVisible: {
    type: Boolean,
    default: false,
  },
});
const approvalStatus = ref(0);
const currentInstance = getCurrentInstance();
const { $request } = currentInstance.appContext.config.globalProperties;
// 弹窗标题
const title = ref("");
// 弹窗类型
const type = ref(1);
const emit = defineEmits("checkModalBox");
// 改变modal根节点 解决打开后出现padding
const getContainer = () => {
  return document.getElementById("checkModalBox");
};

const state = reactive({
  tableData: [],
  ArtistName: "",
  selectedRowKeys: [],
  selectedRows: [],
  rowData: {},
  ArtistUID: "",
  ShelfId: "",
  options: [],
  columns: [
    {
      title: "编号",
      dataIndex: "Tfnum",
      align: "center",
      sorter: {
        compare: (a, b) => {
          let a1 = a.Tfnum;
          let b1 = b.Tfnum;

          console.log(a1, b1);
          if (a1 < b1) {
            return -1;
          }
          if (a1 > b1) {
            return 1;
          }
          if (a1 == b1) {
            return 0;
          }
        },
      },
    },
    {
      title: "作者姓名",
      dataIndex: "artistShowCount",
      align: "center",
    },
    {
      title: "画作名称",
      dataIndex: "ArtworkName",
      align: "center",
    },
    {
      title: "长度",
      dataIndex: "Length",
      align: "center",
    },
    {
      title: "宽度",
      dataIndex: "Width",
      align: "center",
    },
    {
      title: "总平尺数",
      dataIndex: "Ruler",
      align: "center",
    },
    {
      title: "缩略图",
      type: "image",
      dataIndex: "PhotoPic",
      align: "center",
    },
  ],

  ArtistUuid: "",

  ArtworkUuids: [],
  fatherData: { ArtistUuid: "", ArtworkUuids: [] },
});
const wareHouseVisible = ref(false);
const handleChange = (val, opt) => {
  nextTick(() => {
    state.selectedRows = [];
    state.selectedRowKeys = [];
  });
  getWorkList();
};
// 重选
const reset = () => {
  state.selectedRows = [];
  state.selectedRowKeys = [];
};
const addArt = () => {
  processSuccess("添加成功");
  emit("checkHandleOk", state.selectedRows);
};
// 选中
const onSelectChange = (selectedRowKeys, rows) => {
  state.selectedRows = rows;
  state.selectedRowKeys = selectedRowKeys;
};
const aritstFilterOption = (input, option) => {
  return option.Name.toLowerCase().indexOf(input.toLowerCase()) >= 0;
};
// 获取画家列表
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.options = options;
        console.log(state.options);
      } else {
      }
    })
    .catch((e) => { });
};
// 获取画作列表
const getWorkList = () => {
  $request.HTTP.artwork
    .artworkList({
      ArtistUid: state.ArtistUID,
      page: 1,
      pageSize: 99999,
      StorageStatus: 1,
    })
    .then((res) => {
      if (res.status === 0) {
        state.tableData = res.data.Data;
      } else {
        processError(res.msg);
      }
    })
    .catch((e) => { });
};
const handleOk = (e) => {
  emit("checkHandleOk", state.selectedRows);
};
watch(
  () => props.artWorkVisible,
  (newValue, oldValue) => {
    if (newValue) {
      getArtistList();
    }
  }
);
</script>

<style lang="scss" scoped>
.title {
  text-align: center;
  margin: 0;
  color: $theme-primary;
}
.action-btn {
  background: $theme-primary;
  border-radius: 12px;
  cursor: pointer;
  color: #ffff;
}
:deep(.ant-table-thead > tr > th) {
  background: #dfd7f2 !important;
  border-bottom: 1px solid #dfd7f2;
  font-weight: bolder !important;
  color: $basic-black !important;
}
:deep(.ant-table) {
  border-radius: 20px;
  overflow: hidden;
  color: $basic-black;
}
.artWorkTotal {
  font-size: 16px;
  color: $theme-primary;
  margin-left: 20px;
}
.button-group {
  display: flex;
  justify-content: flex-end;

  .save-btn {
    margin-right: 20px;
    width: 153px;
    border-radius: 20px;
    background: $theme-primary;
    color: #ffff;
  }
  .act-btn {
    width: 113px;
    border-radius: 20px;
    background: #8b8b8bff;
    color: #ffff;
  }
}
</style>
<style lang="scss">
.artwork-dialog {
  width: 1300px !important;
  .ant-modal-body {
    height: 650px !important;
  }
}
</style>
