<template>
  <div class="app-container">
    <TablePage
      :data="tableData"
      :tableTitle="tableTitle"
      :operates="tableOperates"
    >
      <template v-slot:status="data">
        <el-popconfirm :title="getStatusTitle(data.scope.status)" @confirm="handleChangeStatus(data.scope.status)">
          <el-switch
            slot="reference"
            :value="data.scope.status"
          ></el-switch>
        </el-popconfirm>
      </template>
      <template v-slot:operates="scope">
        <TableOperation
          :operations="tableOperations"
          :rawData="scope.scope.row"
          @handleOperation="handleOperation"
        ></TableOperation>
      </template>
    </TablePage>
  </div>
</template>

<script>
import TablePage from "@/components/Table/TablePage.vue";
import TableOperation from "@/components/Table/TableOperation.vue";
import { list, title, operates, operations } from "./config";

export default {
  components: {
    TablePage,
    TableOperation,
  },
  data() {
    return {};
  },
  computed: {
    tableData() {
      return list;
    },
    tableTitle() {
      return title;
    },
    tableOperates() {
      return operates;
    },
    tableOperations() {
      return operations;
    },
    getStatusTitle(status){    
      return (status)=>{
        if (status) {
          return '是否确定要下架？'
        }else{
          return '是否确定要上架？'
        }
      }
    }
  },
  methods: {
    handleOperation(type, row) {
      // console.log("handleOperation", type, row);
    },
    handleChangeStatus(status) {
      // console.log('status',status);
    },
  },
};
</script>

<style>
</style>