<template>
  <div class="tab_ex_container">
    <div style="height: 60px"></div>
    <h3>常规表格</h3>
    <ces-table
      class="r_yhgl_table"
      size="mini"
      :border="false"
      :headers="headers"
      url="tableData"
      :searchShow="true"
      :addRowBtn="addRowBtn"
      :autoAdd="false"
      :isDialog="false"
      :isSelection="false"
      :isIndex="false"
      :confirmOptions="confirmOptions"
      :detailsUrl="detailsUrl"
      @primary-edit="editItem"
      @primary-del="delItem"
      :emptyText="emptyText"
      :stripe="true"
      :paginationShow="true"
      :pageSizeShow="true"
      :filterList="filterList"
      cellClassName="cell_width"
    ></ces-table>
    <h3>可编辑表格，供服务测试用</h3>
    <ces-table
      class="r_yhgl_table"
      size="mini"
      :border="true"
      :headers="headers1"
      url="tableData"
      :searchShow="false"
      :addRowBtn="false"
      :autoAdd="true"
      :couldNotEdit="false"
      :isDialog="false"
      :isSelection="false"
      :isIndex="true"
      :confirmOptions="confirmOptions"
      :detailsUrl="detailsUrl"
      :radius="true"
      :emptyText="emptyText1"
      :stripe="false"
      :paginationShow="false"
      :pageSizeShow="false"
    ></ces-table>
    <h3>带树结构表格，供服务测试用</h3>
    <ces-table
      class="r_yhgl_table"
      size="mini"
      :border="true"
      :headers="headers2"
      url="tableData1"
      :searchShow="false"
      :addRowBtn="true"
      :autoAdd="false"
      :isDialog="false"
      :isSelection="true"
      :isIndex="true"
      :confirmOptions="confirmOptions"
      :detailsUrl="detailsUrl"
      :radius="true"
      :emptyText="emptyText2"
      :stripe="false"
      :paginationShow="false"
      :pageSizeShow="false"
      headerCellClassName="th_pink"
      :getSelectBtn="true"
    ></ces-table>
  </div>
</template>

<script>
import cesTable from "@/components/table-um";
export default {
  data: () => ({
    headers: [
      {
        label: "服务url",
        prop: "date",
        type: "href",
        align: "left",
        minWidth: "50%"
      },
      {
        label: "服务名称",
        prop: "name",
        type: "href",
        align: "center",
        minWidth: "60%"
      },
      {
        label: "中文名",
        prop: "address",
        type: "href",
        align: "right",
        width: "100"
      },
      {
        label: "操作",
        type: "Button",
        align: "center",
        btnList: [
          {
            type: "primary-edit",
            label: "编辑",
            line: "|"
          },
          {
            type: "primary-del",
            label: "删除"
          }
        ]
      }
    ],
    headers1: [
      { label: "服务url", prop: "date", type: "input", align: "left" },
      { label: "服务名称", prop: "name", type: "input", align: "center" },
      {
        label: "是否必要",
        prop: "address",
        type: "select",
        align: "center",
        width: 100
      }
    ],
    headers2: [
      { label: "服务url", prop: "date", type: "", align: "left" },
      { label: "服务名称", prop: "name", type: "input", align: "center" },
      { label: "中文名", prop: "address", type: "input", align: "center" }
    ],
    url: "",
    detailsUrl: "ss/",
    addRowBtn: true,
    confirmOptions: {
      title: "提示", //提示
      message: "确认删除该条数据？", //""
      btnCancelText: "取消", //取消
      btnSubmitText: "确定" //确定
    },
    emptyText: "暂时没数据",
    emptyText1: "可输入表格暂时没数据",
    emptyText2: "树结构暂时没数据",
    filterList: [
      {
        name: "服务类型",
        prop: "fwlx",
        data: ["数据服务", "时空服务", "视频服务", "感知服务", "综合服务"]
      },
      {
        name: "服务领域",
        prop: "fwly",
        data: ["数据服务", "时空服务", "视频服务", "感知服务", "综合服务"]
      },
      {
        name: "开放程度",
        prop: "kfcd",
        data: ["数据服务", "时空服务", "视频服务", "感知服务", "综合服务"]
      },
      {
        name: "服务状态",
        prop: "fwzt",
        data: ["数据服务", "时空服务", "视频服务", "感知服务", "综合服务"]
      }
    ]
  }),
  components: {
    cesTable
  },
  methods: {
    editItem(val) {
      console.log(val);
    },
    delItem(val) {
      console.log(val);
    }
  }
};
</script>

<style scoped>
.tab_ex_container {
  padding: 20px 0;
  margin-top: 84px;
  overflow-x: hidden;
  overflow-y: auto;
}
</style>
