<template>
  <div>
    <obj-table-plus
      style="height: calc(100vh - 132px)"
      ref="oTable"
      mode="flex"
      :tableCols="tableCols"
      v-model="dataList"
      @query="queryList"
    >
      <div slot="tableTop" class="mb-2">
        <el-form inline>
          <el-form-item label="模板名称：">
            <el-input placeholder="请输入模板名称"></el-input>
          </el-form-item>
          <el-button type="primary">搜索</el-button>
        </el-form>
        <el-button type="primary" @click="addFareTemplate"
          >添加运费模板</el-button
        >
      </div>
    </obj-table-plus>
    <add-template ref="addTemplate"></add-template>
  </div>
</template>

<script>
import addTemplate from "./popup/add-template.vue";
export default {
  components: { addTemplate },
  data() {
    return {
      dataList: [],
    };
  },
  methods: {
    queryList(pageNo, pageSize) {
      setTimeout(() => {
        this.$refs.oTable.complete([
          {
            templateName: "运费模板名称（全国包邮）",
            lastEditTime: "2022-02-15 12:02",
            tableData: [
              {
                a: "中国",
                b: 1,
                c: 0.0,
                d: 1,
                e: 0.0,
              },
            ],
          },
          {
            templateName: "运费模板名称（全国包邮）",
            lastEditTime: "2022-02-15 12:02",
            tableData: [
              {
                a: "中国",
                b: 1,
                c: 0.0,
                d: 1,
                e: 0.0,
              },
            ],
          },
          {
            templateName: "运费模板名称（全国包邮）",
            lastEditTime: "2022-02-15 12:02",
            tableData: [
              {
                a: "中国",
                b: 1,
                c: 0.0,
                d: 1,
                e: 0.0,
              },
            ],
          },
          {
            templateName: "运费模板名称（全国包邮）",
            lastEditTime: "2022-02-15 12:02",
            tableData: [
              {
                a: "中国",
                b: 1,
                c: 0.0,
                d: 1,
                e: 0.0,
              },
            ],
          },
          {
            templateName: "运费模板名称（全国包邮）",
            lastEditTime: "2022-02-15 12:02",
            tableData: [
              {
                a: "中国",
                b: 1,
                c: 0.0,
                d: 1,
                e: 0.0,
              },
            ],
          },
          {
            templateName: "运费模板名称（全国包邮）",
            lastEditTime: "2022-02-15 12:02",
            tableData: [
              {
                a: "中国",
                b: 1,
                c: 0.0,
                d: 1,
                e: 0.0,
              },
            ],
          },
          {
            templateName: "运费模板名称（全国包邮）",
            lastEditTime: "2022-02-15 12:02",
            tableData: [
              {
                a: "中国",
                b: 1,
                c: 0.0,
                d: 1,
                e: 0.0,
              },
            ],
          },
          {
            templateName: "运费模板名称（全国包邮）",
            lastEditTime: "2022-02-15 12:02",
            tableData: [
              {
                a: "中国",
                b: 1,
                c: 0.0,
                d: 1,
                e: 0.0,
              },
            ],
          },
          {
            templateName: "运费模板名称（全国包邮）",
            lastEditTime: "2022-02-15 12:02",
            tableData: [
              {
                a: "中国",
                b: 1,
                c: 0.0,
                d: 1,
                e: 0.0,
              },
            ],
          },
          {
            templateName: "运费模板名称（全国包邮）",
            lastEditTime: "2022-02-15 12:02",
            tableData: [
              {
                a: "中国",
                b: 1,
                c: 0.0,
                d: 1,
                e: 0.0,
              },
            ],
          },
          {
            templateName: "运费模板名称（全国包邮）",
            lastEditTime: "2022-02-15 12:02",
            tableData: [
              {
                a: "中国",
                b: 1,
                c: 0.0,
                d: 1,
                e: 0.0,
              },
            ],
          },
          {
            templateName: "运费模板名称（全国包邮）",
            lastEditTime: "2022-02-15 12:02",
            tableData: [
              {
                a: "中国",
                b: 1,
                c: 0.0,
                d: 1,
                e: 0.0,
              },
            ],
          },
          {
            templateName: "运费模板名称（全国包邮）",
            lastEditTime: "2022-02-15 12:02",
            tableData: [
              {
                a: "中国",
                b: 1,
                c: 0.0,
                d: 1,
                e: 0.0,
              },
            ],
          },
          {
            templateName: "运费模板名称（全国包邮）",
            lastEditTime: "2022-02-15 12:02",
            tableData: [
              {
                a: "中国",
                b: 1,
                c: 0.0,
                d: 1,
                e: 0.0,
              },
            ],
          },
          {
            templateName: "运费模板名称（全国包邮）",
            lastEditTime: "2022-02-15 12:02",
            tableData: [
              {
                a: "中国",
                b: 1,
                c: 0.0,
                d: 1,
                e: 0.0,
              },
            ],
          },
          {
            templateName: "运费模板名称（全国包邮）",
            lastEditTime: "2022-02-15 12:02",
            tableData: [
              {
                a: "中国",
                b: 1,
                c: 0.0,
                d: 1,
                e: 0.0,
              },
            ],
          },
          
        ]);
      }, 1000);
    },
    addFareTemplate() {
      this.$refs.addTemplate.toggle().add();
    },
  },
  computed: {
    tableCols() {
      return [
        {
          type: "jsx",
          render: (row) => {
            console.log(row);

            return (
              <div class="mb-5">
                <div class="flex justify-between items-center bg-gray-100 px-4">
                  <div>{row.templateName}</div>
                  <div class="flex justify-between items-center">
                    <div class="mr-5">最后编辑时间：{row.lastEditTime}</div>
                    <div>
                      <el-button type="text">复制模板</el-button>
                      <el-button type="text">修改</el-button>
                      <el-button type="text">删除</el-button>
                    </div>
                  </div>
                </div>
                <vxe-table border align="center" data={row.tableData}>
                  <vxe-column
                    width="180px"
                    field="a"
                    title="运送到"
                  ></vxe-column>
                  <vxe-column
                    width="200px"
                    field="b"
                    title="首件（个）"
                  ></vxe-column>
                  <vxe-column
                    width="200px"
                    field="c"
                    title="首费（元）"
                  ></vxe-column>
                  <vxe-column
                    width="200px"
                    field="d"
                    title="续件（个）"
                  ></vxe-column>
                  <vxe-column
                    width="200px"
                    field="e"
                    title="运费（元）"
                  ></vxe-column>
                </vxe-table>
              </div>
            );
          },
        },
      ];
    },
  },
};
</script>

<style lang="scss" scoped></style>