<script>
import BaseTable from "../../components/BaseTable.vue";

import DTFhead from "./components/head.vue";
export default {
  name: "DtfFile",
  components: { BaseTable, DTFhead },
  props: {
    user: {
      default: () => ({
        avatar: "",
        factory: {}
      }),
      type: Object
    },
    factoryType: { type: String, default: "CN" }
  },
  data() {
    return {
      pageInfo: {
        pageNum: 1,
        pageSize: 10,
        total: 2
      },
      tableList: Array.from({ length: 50 }, (_, index) => {
        const isDtg = index % 2 === 0;
        return {
          id: index + 1,
          name: index + 1,
          status: index % 3 === 0 ? 0 : 1,
          img: isDtg ? "/static/dtg.jpg" : "/static/dtf.jpg",
          open: index % 4 !== 0,
          price: isDtg ? 120 + index * 2 : 86 + index,
          remark: ""
        };
      }),
      tableConfig: [
        {
          prop: "name",
          label: "批次号",
          width: 100
        },
        {
          prop: "price",
          label: "操作单数量",
          width: 100,
          // 自定义渲染函数
          render: row => `¥${row.price}.00`
        },
        {
          prop: "status",
          label: "素材数量",
          width: 100,
          type: "tag",
          // 动态标签文字
          getTagText: row => (row.status === 1 ? "启用" : "停用"),
          // 动态标签颜色
          getTagType: row => (row.status === 1 ? "success" : "danger")
        },
        {
          prop: "img",
          label: "工艺类型",
          width: 100,
          type: "image"
        },
        {
          prop: "open",
          label: "规范素材",
          width: 100,
          type: "switch",
          onSwitchChange: row => {
            console.log("切换上架状态", row);
          }
        },
        {
          label: "创建时间",

          slotName: "remark" // 绑定外部自定义插槽
        },
        {
          label: "排版状态",
          width: 140,

          slotName: "remark" // 绑定外部自定义插槽
        },
        {
          label: "失败原因",
          width: 300,
          slotName: "remark" // 绑定外部自定义插槽
        },
        {
          label: "排版参数",
          width: 300,
          slotName: "remark" // 绑定外部自定义插槽
        },
        {
          label: "操作",
          width: 260,
          slotName: "operation"
        }
      ]
    };
  },
  mounted() {
    console.log(this.tableList);
  },
  methods: {
    loadData() {
      // 请求列表接口
    },
    handleSelect(rows) {
      console.log("选中行", rows);
    },
    handleSizeChange(size) {
      this.pageInfo.pageSize = size;
      this.pageInfo.pageNum = 1;
      this.loadData();
    },
    handleCurrentChange(page) {
      this.pageInfo.pageNum = page;
      this.loadData();
    },
    goFliePage() {
      this.$router.push({
        name: "dtfFileDownLoad"
      });
    }
  }
};
</script>

<template>
  <div class="page">
    <DTFhead :user="user" :factoryType="factoryType"></DTFhead>
    <BaseTable
      :table-data="tableList"
      :table-config="tableConfig"
      :has-selection="true"
      :has-index="true"
      :page-info="pageInfo"
      @page-size-change="handleSizeChange"
      @page-current-change="handleCurrentChange"
      @selection="handleSelect"
      border
      stripe
      height="100%"
      size="mini"
    >
      <!-- 自定义插槽示例 -->
      <template #remark="scope">
        <el-input v-model="scope.row.remark" size="mini" />
      </template>
      <template #operation>
        <div class="flex" style="justify-content: space-between;">
          <el-button type="text" class="btn flex btnBox">
            <img src="../../assets/download.png" width="30" height="30" />
            <div>下载素材</div></el-button
          >
          <el-button type="text" class="btn flex btnBox"
            ><img src="../../assets/typesetting.png" width="30" height="30" />
            <div>排版</div>
          </el-button>
          <el-button type="text" class="btn flex btnBox" @click="goFliePage">
            <img src="../../assets/file.png" width="30" height="30" />
            <div>查看排版文件</div>
          </el-button>
        </div>
      </template>
    </BaseTable>
    <!-- <BaseCard></BaseCard> -->
  </div>
</template>

<style scoped lang="less">
.page {
  height: "100%";
}
.flex {
  display: flex;
}
.btnBox {
  flex-direction: column;
  align-items: center;
}
.btn {
  padding: 0;
}
</style>
