<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">
          <el-button :size="size" @click="refresh" type="primary" icon="el-icon-refresh">更新</el-button>
        </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" width="200" label="套餐名称" prop="package_name">
          </el-table-column>
          <el-table-column align="center" width="100" label="套餐价格" prop="package_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="hosp_name"></el-table-column>
          <el-table-column align="center" width="200" label="适用性别" prop="gender"></el-table-column>
          <el-table-column align="center" width="200" label="套餐状态" prop="package_status"></el-table-column>
          <el-table-column align="center" width="200" label="是否置顶" prop="is_top">
            <template slot-scope="scope">
              <div>
                <el-button @click="scope.row.is_top?cancel:top">{{ scope.row.is_top === 'Y'? '取消置顶': '置顶' }}</el-button>
              </div>
            </template>
          </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",
            "package_name": "北京慈铭体检入职体检A",
            "package_price": "320",
            "package_type": "入职体检",
            "hosp_name": "北京慈铭体检",
            "gender": "男",
            "package_status": "启用",
            "is_top": 'Y'
          },
          {
            "id": "26",
            "package_name": "北京慈铭体检入职体检B",
            "package_price": "360",
            "package_type": "入职体检",
            "hosp_name": "北京慈铭体检",
            "gender": "男",
            "package_status": "禁用",
            "is_top": 'N'
          },
          {
            "id": "27",
            "package_name": "通用体检A",
            "package_price": "160",
            "package_type": "通用体检",
            "hosp_name": "廊坊大健康",
            "gender": "女",
            "package_status": "启用",
            "is_top": 'Y'
          },
          {
            "id": "28",
            "package_name": "通用体检B",
            "package_price": "180",
            "package_type": "通用体检",
            "hosp_name": "廊坊大健康",
            "gender": "男",
            "package_status": "禁用",
            "is_top": 'Y'
          },
        ]
      }
    },

    created() {
      this.initSearchForm()
    },

    methods: {

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

      /**
       * @description 初始化搜索模块
       */
      initSearchForm() {
        let searchForm = [
          {
            label: '套餐名称:', //label
            ele: 'el-input',
            valueKey: 'package_name', //form[valueKey]
            value: '', //v-model
            placeholder: '输入套餐名称'
          },
          {
            label: '机构选择:', //label
            ele: 'xd-select-list',
            valueKey: 'hosp', //form[valueKey]
            value: '', //v-model
            placeholder: '请选择机构',
            list: [
              {"label": "廊坊美年大健康", "value": 1},
              {"label": "北京慈铭体检", "value": 2},
            ]
          },
          {
            label: '城市选择:', //label
            ele: 'xd-select-list',
            valueKey: 'city', //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: 'gener', //form[valueKey]
            value: '', //v-model
            placeholder: '请选择性别',
            multiple: false,
            list: [
              {"label": "男", "value": 1},
              {"label": "女", "value": 0},
            ]
          },
          {
            label: '套餐ID:', //label
            ele: 'el-input',
            valueKey: 'package_id', //form[valueKey]
            value: '', //v-model
            placeholder: '输入套餐id'
          },
          {
            label: '价格区间:', //label
            ele: 'xd-range', //package 名称
            valueKey: ['start_price', 'end_price'], //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;
      },

      refresh() {

      }

    }
  }
</script>

<style scoped>

</style>
