<template>
  <div class="app-container">
    <el-card class="app-container__search">
      <xd-search
        v-if="searchForm.length > 0"
        :list="searchForm"
        dateFilter
        v-model="searchParams"
        @onSearch="handleSearch"
      ></xd-search>
    </el-card>
    <el-card class="app-container__list">
      <div class="app-container__list-pagination">
        <xd-pagination-custom
          :pagesize="pageSize"
          :has-next-page.sync="hasNextPage"
          @onPagination="handlePagination"
        ></xd-pagination-custom>
        <div v-if="1">自定义模块</div>
      </div>
      <div class="app-container__list-table">
        <el-table class="app-table" :data="tables" border fit highlight-current-row style="width: 100%">
          <el-table-column align="center" label="ID" width="80" prop="id"></el-table-column>
          <el-table-column align="center" min-width="200" label="订单单号" prop="order_number"></el-table-column>
          <el-table-column align="center" width="200" label="套餐名称" prop="package_name">
          </el-table-column>
          <el-table-column align="center" width="100" label="订单价格" prop="order_price"></el-table-column>
          <el-table-column class-name="status-col" label="套餐类型" width="120" prop="package_type">
          </el-table-column>
          <el-table-column align="center" width="200" label="预约时间" prop="make_time"></el-table-column>
          <el-table-column align="center" width="200" label="下单时间" prop="creted_time"></el-table-column>
          <el-table-column align="center" width="200" label="订单状态" prop="order_status"></el-table-column>
          <el-table-column align="center" label="详情" width="125" fixed="right">
            <template slot-scope="scope">
              <div class="app-container__list-table-option">
                <el-tooltip effect="dark" content="查看" placement="top">
                  <router-link target="_blank" :to="toLink(scope.row)">
                    <el-button type="primary" size="mini" icon="el-icon-view"></el-button>
                  </router-link>
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="app-container__list-pagination">
        <xd-pagination-custom
          :pagesize="pageSize"
          :has-next-page.sync="hasNextPage"
          @onPagination="handlePagination"
        ></xd-pagination-custom>
      </div>
    </el-card>
  </div>

</template>

<script>
  import XdSearch from "@/components/XdSearch";
  import XdPaginationCustom from "@/components/XdPaginationCustom";

  export default {
    name: "list",
    components: {
      XdPaginationCustom,
      XdSearch
    },

    data() {
      return {
        pageSize: 1,//当前页面数量
        hasNextPage: true, //是否有下一页

        searchForm: [], //搜索区域模块表单
        searchParams: null, // 搜索参数

        tables: [
          {
            "id": "25",
            "order_number": "100100100",
            "package_name": "北京慈铭体检入职体检A",
            "order_price": "320",
            "package_type": "入职体检",
            "make_time": "2021-12-16",
            "creted_time": "2021-12-15",
            "order_status": "待付款",
          },
          {
            "id": "26",
            "order_number": "100100101",
            "package_name": "北京慈铭体检入职体检B",
            "order_price": "360",
            "package_type": "入职体检",
            "make_time": "2021-12-16",
            "creted_time": "2021-12-15",
            "order_status": "待体检",
          },
          {
            "id": "27",
            "order_number": "100100102",
            "package_name": "廊坊大健康医院",
            "order_price": "720",
            "package_type": "老年体检",
            "make_time": "2021-12-16",
            "creted_time": "2021-12-15",
            "order_status": "已取消",
          },
          {
            "id": "28",
            "order_number": "100100103",
            "package_name": "廊坊大健康医院",
            "order_price": "760",
            "package_type": "儿童体检",
            "make_time": "2021-12-16",
            "creted_time": "2021-12-15",
            "order_status": "已完成",
          }
        ]
      }
    },

    created() {
      this.initSearchForm()
    },

    methods: {

      toLink(item) {
        return '/index'
      },

      /**
       * @description 初始化搜索模块
       */
      initSearchForm() {
        let searchForm = [
          {
            label: '订单号:', //label
            ele: 'el-input',
            valueKey: 'orderNumber', //form[valueKey]
            value: '', //v-model
            placeholder: '输入订单号'
          },
          {
            label: '订单价格:', //label
            ele: 'el-input',
            valueKey: 'orderPrice', //form[valueKey]
            value: '', //v-model
            placeholder: '输入订单价格'
          },
          {
            label: '订单状态:', //label
            ele: 'xd-select-list',
            valueKey: 'orderStatus', //form[valueKey]
            value: '', //v-model
            placeholder: '请选择订单状态',
            multiple: false,
            list: [
              {"label": "待付款", "value": 1},
              {"label": "待体检", "value": 2},
              {"label": "已取消", "value": 3},
              {"label": "已完成", "value": 4},
            ]
          },
          {
            label: '套餐类型:', //label
            ele: 'xd-select-list',
            valueKey: 'packageType', //form[valueKey]
            value: '', //v-model
            placeholder: '请选择套餐类型',
            multiple: false,
            list: [
              {"label": "入职体检", "value": 4},
              {"label": "男女通用", "value": 5},
              {"label": "老年体检", "value": 6},
            ]
          },
          {
            label: '预约姓名:', //label
            ele: 'el-input',
            valueKey: 'name', //form[valueKey]
            value: '', //v-model
            placeholder: '输入预约姓名'
          },
          {
            label: '手机号:', //label
            ele: 'el-input',
            valueKey: 'phone', //form[valueKey]
            value: '', //v-model
            placeholder: '输入手机号'
          },
          {
            label: '套餐名称:', //label
            ele: 'el-input',
            valueKey: 'packageName', //form[valueKey]
            value: '', //v-model
            placeholder: '输入套餐名称'
          },
          {
            label: '下单时间:', //label
            ele: 'xd-date', //package 名称
            valueKey: ['start_time', 'end_time'], //form[valueKey]
            value: [], //v-model
            format: 'yyyy/MM/dd HH:mm:ss',//时间显示格式
            formatValue: 'timestamp', //输出时间格式
            placeholder: ['开始时间', '结束时间'],
          },
          {
            label: '卡号区间:', //label
            ele: 'xd-range', //package 名称
            valueKey: ['start_card', 'end_card'], //form[valueKey]
            value: ['', ''], //v-model
            placeholder: ['开始卡号', '结束卡号'],
            width: 400
          },
        ];

        this.searchForm = searchForm;

      },

      /**
       * @description 搜索事件
       * @param action 动作
       * @param form 搜索请求参数
       */
      handleSearch({action, form}) {
        console.log(this.searchParams)
      },


      handlePagination() {
        if (this.pageSize > 3) this.hasNextPage = false;
        else this.hasNextPage = true;
      }


    }
  }
</script>

<style scoped>

</style>
