<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="请输入模板名称"
              v-model="searchForm.name"
            ></el-input>
          </el-form-item>
          <el-button type="primary" @click="$refs.oTable.reload();">搜索</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: [],
      searchForm: {
        name: "",
      },
    };
  },
  methods: {
    queryList(pageNo, pageSize) {
      this.$api.mer_admin
        .getShippingTemplatePage({
          pageNumber: pageNo,
          pageSize: pageSize,
          ...this.searchForm,
        })
        .then((res) => {
          console.log(res);
          this.$refs.oTable.complete(res.data.data.data,Number(res.data.data.total));
        })
        .catch(err=>{
          this.$refs.oTable.complete(false);
        })
    },
    addFareTemplate() {
      this.$refs.addTemplate.toggle().add();
    },
  },
  computed: {
    tableCols() {
      return [
        {
          type: "jsx",
          render: (row) => {
            console.log(row);
              this.$api.mer_admin.getShippingTemplateInfo(row.id)
              .then(res=>{
                console.log(res);
                // this.$set(row,tableData,);
              })
              const appointMapper={
                0:'（全国包邮）',
                1:'（部分包邮）',
                2:'（自定义运费）'
              }
            return (
              <div class="mb-5">
                <div class="flex justify-between items-center bg-gray-100 px-4">
                  <div>{row.name}{appointMapper[row.appoint]}</div>
                  <div class="flex justify-between items-center">
                    <div class="mr-5">最后编辑时间：{row.updateTime}</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>