<template>
  <div class="product-container">
    <div class="top-box">
      <Search :placeholder="'在此处输入画家名字'"
              v-model:searchValue="state.searchValue"
              @searchEvent="getSearch" />
    </div>
    <a-table :columns="columns"
             :data-source="state.data"
             :pagination="pagination"
             :loading="state.loading"
             @change="handleTableChange"
             class="table-index"
             :scroll="{ y: 650 }">
      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex === 'InviteData'">
          <span v-if="record.InviteData">
            <span v-for="i in record.InviteData"
                  :key="i"
                  style="padding-right: 5px">{{ i.Realname }}</span>
          </span>
          <span v-else>-</span>
        </template>
        <template v-if="column.dataIndex === 'RecommendUser'">
          <span v-if="record.RecommendUser > 0">{{
            record.RecommendUsers
          }}</span>
          <span v-else>
            <span v-if="record.InviteData && editableData[record.key]">
              <a-select v-model:value="record.BrokerId"
                        style="width: 120px">
                <a-select-option v-for="i in record.InviteData"
                                 :key="i"
                                 :value="i.UserId">{{ i.Realname }}</a-select-option>
              </a-select>
            </span>
            <span v-else>-</span>
          </span>
        </template>

        <template v-if="column.dataIndex === 'action'">
          <span v-if="record.RecommendUser == 0 && record.InviteData">
            <span v-if="editableData[record.key]">
              <a-popconfirm title="是否确认保存，保存后不可再次编辑？"
                            ok-text="确认"
                            cancel-text="取消"
                            @confirm="() => save(record.key, record)">
                <a style="color: #764cf6">保存</a>
              </a-popconfirm>
              <a-divider type="vertical" />
              <a style="color: #939393"
                 @click="cancel(record.key)">取消</a>
            </span>
            <span v-else>
              <a style="color: #764cf6"
                 @click="edit(record.key)">编辑</a>
            </span>
          </span>
        </template>
      </template>
    </a-table>
  </div>
</template>

<script setup>
import {
  ref,
  reactive,
  watch,
  onMounted,
  defineProps,
  defineEmits,
  computed,
  provide,
  getCurrentInstance,
  onBeforeMount,
} from "vue";
import { cloneDeep } from "lodash-es";
import Search from "@/components/search.vue";
import { Form, message } from "ant-design-vue";
import { debounce } from "lodash-es";
const currentInstance = getCurrentInstance();
const { $request, $hadRule } =
  currentInstance.appContext.config.globalProperties;

const state = reactive({
  data: [],
  innerData: [],
  searchValue: "",
  loading: false,
});

const editableData = reactive({});

const PageSize = ref(10);
const Page = ref(1);

const pagination = reactive({
  total: 0, // 总数
  current: Page.value, // 当前页数
  pageSize: PageSize.value, // 每页条数
  showTotal: (total) => `共 ${total} 条`, // 展示总数
  showSizeChanger: true, // 是否可以改变pageSize
  showQuickJumper: false, // 跳转
});

const edit = (key) => {
  editableData[key] = cloneDeep(
    state.data.filter((item) => key === item.key)[0]
  );
};
const cancel = (key) => {
  delete editableData[key];
};
const save = (key, item) => {
  let params = {
    ArtistUuid: item.ArtistUuid,
    ArtshowId: item.ArtshowId,
    BrokerId: Number(item.BrokerId),
    SupplementId: item.SupplementId,
  };
  $request.HTTP.app
    .artshowUpdate(params)
    .then((res) => {
      if (res.status == 0) {
        message.success({
          content: "保存成功",
          duration: 2,
          onClose () {
            state.data = [];
            getDataList();
          },
        });
      } else {
        message.error(res.msg);
      }
      state.loading = false;
    })
    .catch((e) => {
      state.loading = false;
      message.error(e.response.data.msg || "操作失败，请稍后再试");
    });
  Object.assign(
    state.data.filter((item) => key === item.key)[0],
    editableData[key]
  );
  delete editableData[key];
  state.BrokerId = "";
};

const columns = reactive([
  {
    title: "画家姓名",
    dataIndex: "artistShowCount",
    align: "center",
  },
  {
    title: "性别",
    dataIndex: "Sex",
    align: "center",
  },
  {
    title: "年龄",
    dataIndex: "Age",
    align: "center",
  },
  {
    title: "手机号",
    dataIndex: "Phone",
    align: "center",
    minWidth: 450,
  },
  {
    title: "画展信息补充发起时间",
    dataIndex: "ArtshowExtTime",
    align: "center",
    minWidth: 100,
  },
  {
    title: "邀请人",
    dataIndex: "InviteData",
    align: "center",
  },
  {
    title: "推荐人",
    dataIndex: "RecommendUser",
    align: "center",
  },
  {
    title: "操作",
    dataIndex: "action",
    align: "center",
    minWidth: 140,
  },
]);

const handleTableChange = (event) => {
  pagination.current = event.current;
  pagination.pageSize = event.pageSize;
  getDataList();
};

const getDataList = () => {
  state.loading = true;
  state.data = [];
  let params = {
    Page: pagination.current,
    PageSize: pagination.pageSize,
    Keyword: state.searchValue,
  };
  $request.HTTP.app
    .artshowList(params)
    .then((res) => {
      if (res.status == 0) {
        state.data = res.data.Data.map((i, index) => {
          i.key = i.ArtshowId;
          if (i.InviteData) {
            if (i.RecommendUser > 0) {
              // 查询推荐人姓名
              i.InviteData.forEach((e) => {
                if (e.UserId == i.RecommendUser) {
                  i.RecommendUsers = e.Realname;
                }
              });
            } else {
              i.BrokerId = "";
            }
          }
          return i;
        });
        pagination.total = res.data.Count;
      } else {
        message.error(res.msg);
      }
      state.loading = false;
    })
    .catch((e) => {
      state.loading = false;
      message.error(e.response.data.msg || "操作失败，请稍后再试");
    });
};

const getSearch = debounce(() => {
  pagination.current = 1;
  getDataList();
}, 300);

onBeforeMount(() => {
  getDataList();
});
</script>

<style lang="scss" scoped>
.product-container {
  padding: 20px 30px 0 30px;
  position: relative;
  .top-box {
    margin-bottom: 5px;
    display: flex;
    justify-content: space-between;
    align-items: end;

    .ant-picker {
      background: rgba($color: #777777, $alpha: 0.4) !important;
      border-radius: 20px;
      color: #fff;
    }
    :deep(.ant-picker-clear) {
      background-color: transparent;
    }
    :deep(.ant-picker-input > input) {
      color: #fff;
      &::placeholder {
        color: #898989 !important;
      }
    }
  }
  :deep(.table-index .ant-table) {
    box-shadow: 3px 3px 3px $theme-dark;
    border-radius: 20px;
    overflow: hidden;
    color: $basic-black;
  }
  :deep(.table-index .ant-table-thead > tr > th) {
    background: $theme-dark !important;
    border-bottom: 1px solid $theme-dark;
    font-weight: 500 !important;
    color: $basic-black !important;
  }
  :deep(.table-index .ant-table-tbody > tr > td) {
    border-bottom: 1px solid $theme-dark;
  }
  .innerTable {
    margin: 20px 20px 20px 0;
  }
  :deep(.innerTable .ant-table) {
    border-radius: 0;
    color: rgba(0, 0, 0, 0.85);
  }
  :deep(.ant-checkbox-group-item) {
    width: 150px;
  }
}
.item-box {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid $theme-dark;
  // border: 1px solid red;
  .item {
    width: 50%;
    padding: 0px 15px;
    border: 1px solid $theme-dark;
    display: inline-flex;
    align-items: center;
    text-align: left;
    overflow: hidden;
    height: 50px;
    span:first-child {
      width: 96px;
      flex-shrink: 0;
      // border: 1px solid red;
    }
    span:last-child {
      color: $text-basic;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}
</style>
