<script setup lang="tsx">
import { ref } from 'vue';
import { useRoute } from 'vue-router';
import { fetchSetMoivePrice } from '@/service/api/film-manage/film-list';
const route = useRoute();
const dataList = ref([]);
async function getData() {
  const { data } = await fetchSetMoivePrice(route.query);
  dataList.value = data;
}
const columns: NaiveUI.TableColumn<Api.goods.ShopSku>[] = [
  {
    title: '规格信息',
    key: 'specInfo',
    width: 200,
    render: row => {
      return (
        <div>
          <div class={'text-gray'}>规格ID： {row.areaId} </div>
          <div> {row.movieName} </div>
        </div>
      );
    }
  },
  {
    title: '企业',
    key: 'enterpriseName',
    width: 300,
    align: 'center',
    render(row) {
      return row.channel.map((it: any) => {
        return <div>{it}</div>;
      });
    }
  },
  {
    title: '当前单价(元)',
    key: 'price',
    align: 'center',
    width: 200,
    render(row) {
      return row.channel.map((_it: any) => {
        return <div>{row.originPrice}</div>;
      });
    }
  },
  {
    title: '改后单价(元)',
    key: 'newprice',
    width: 200
  }
];
getData();
</script>

<template>
  <div>
    <NCard :bordered="false" class="h-full flex-1 card-wrapper bg-white sm:flex-1-hidden dark:bg-dark" size="small">
      <h1 class="text-24px font-semibold">设置价格</h1>
      <div class="mt40px">
        <NDataTable :columns="columns" :data="dataList" :bordered="false" />
      </div>
    </NCard>
  </div>
</template>

<style scoped></style>
