<!--预约记录-->
<template>
  <div class="app-container">
    <el-form :inline="true" :model="page.data">
      <!--      权限是1这个不显示-->
      <el-form-item v-if="roleId == 1" class="margin-left input">
        <!--        <el-input
          v-model="page.data.account"
          placeholder="请输入账号名称"
          clearable
        />-->
        <!--        <el-select
          v-model="page.data.account"
          clearable
          placeholder="请选择账号"
        >
          <el-option label="账号A" value="a" />
          <el-option label="账号B" value="b" />
        </el-select>-->

        <el-select
          v-model="page.data.account"
          style="width: 100%"
          filterable
          clearable
          placeholder="请选择账号"
        >
          <el-option
            v-for="item in accountList"
            :key="item.code"
            :label="item.label"
            :value="item.code"
          />
        </el-select>
      </el-form-item>
      <el-form-item class="margin-left input">
        <el-input
          v-model="page.data.orderCode"
          placeholder="请输入订单编号"
          clearable
        />
      </el-form-item>
      <el-form-item class="margin-left input">
        <el-input
          v-model="page.data.name"
          placeholder="请输入姓名"
          clearable
        />
      </el-form-item>
      <el-form-item class="margin-left input">
        <el-select
          v-model="page.data.IDType"
          style="width: 100%"
          filterable
          clearable
          placeholder="请选择证件号码"
        >
          <el-option
            v-for="item in IDTypeList"
            :key="item.code"
            :label="item.label"
            :value="item.code"
          />
        </el-select>
      </el-form-item>
      <el-form-item class="margin-left input">
        <el-input
          v-model="page.data.IDNumber"
          placeholder="请输入证件号码"
          clearable
        />
      </el-form-item>
      <el-form-item class="margin-left input">
        <el-select
          v-model="page.data.reservationEntry"
          style="width: 100%"
          filterable
          clearable
          placeholder="请选择预约入口"
        >
          <el-option
            v-for="item in reservationEntryList"
            :key="item.code"
            :label="item.label"
            :value="item.code"
          />
        </el-select>
      </el-form-item>
      <el-form-item class="margin-left">
        <el-date-picker
          v-model="page.data.reservationDate"
          type="datetime"
          placeholder="选择日期"
          value-format="yyyy-MM-dd"
          style="width: 100%"
        />
      </el-form-item>
      <el-form-item class="margin-left input">
        <el-select
          v-model="page.data.reservationState"
          style="width: 100%"
          filterable
          clearable
          placeholder="请选择预约状态"
        >
          <el-option
            v-for="item in reservationStateList"
            :key="item.code"
            :label="item.label"
            :value="item.code"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        class="margin-left"
        style="width: 180px"
      >
        <el-date-picker
          v-model="page.data.startTime"
          type="datetime"
          placeholder="选择创建起始时间"
          value-format="yyyy-MM-dd HH:mm:ss"
          style="width: 100%"
        />
      </el-form-item>
      <el-form-item
        class="margin-left"
        style="width: 180px"
      >
        <el-date-picker
          v-model="page.data.endTime"
          type="datetime"
          placeholder="选择创建结束时间"
          value-format="yyyy-MM-dd HH:mm:ss"
          style="width: 100%"
        />
      </el-form-item>
      <el-form-item class="margin-left">
        <el-button
          type="primary"
          icon="el-icon-search"
          @click="fetchData"
        >查询</el-button>
      </el-form-item>
    </el-form>
    <!-- 主体表格 -->
    <el-table
      v-loading="listLoading"
      :data="tableData"
      border
      highlight-current-row
      class="table"
    >
      <el-table-column align="center" width="80" label="序号">
        <template slot-scope="scope">
          {{ indexMethod(scope.$index) }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="orderCode"
        label="订单编号"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        prop="phone"
        label="联系方式"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        prop="name"
        label="姓名"
        show-overflow-tooltip
      />
      <el-table-column align="center" prop="IDType" width="120" label="证件类型">
        <template v-slot="{ row }">
          <el-tag type="primary" effect="plain">
            {{ ['身份证','护照'][row.IDType||0] }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="IDType"
        label="证件号码"
        show-overflow-tooltip
      >
        <template v-slot="{ row }">
          {{ row.IDNumber }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="IDType"
        label="预约入口"
        show-overflow-tooltip
      >
        <template v-slot="{ row }">
          {{ row.reservationEntry }}
        </template>
      </el-table-column>
      <el-table-column
        width="180"
        align="center"
        prop="reservationDate"
        label="预约日期"
        show-overflow-tooltip
      />
      <el-table-column
        width="180"
        align="center"
        prop="reservationTimePeriod"
        label="预约时间段"
        show-overflow-tooltip
      />
      <el-table-column align="center" width="120" prop="reservationState" label="预约状态">
        <template v-slot="{ }">
          <el-tag
            effect="dark"
            style="border: 1px solid rgba(194, 211, 245, 1);background: rgba(232, 240, 252, 1);color: rgba(126, 152, 217, 1);"
          >
            已检票
          </el-tag>
          <el-tag effect="plain" type="primary">
            待使用
          </el-tag>
          <!--          已失效-->
          <el-tag
            effect="dark"
            style="border: 1px solid rgba(205, 214, 232, 1);background: rgba(237, 243, 246, 1);color: rgba(164, 171, 189, 1);"
          >
            已退票
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        width="180"
        align="center"
        prop="createTime"
        label="创建时间"
        show-overflow-tooltip
      />
      <el-table-column
        width="180"
        align="center"
        prop="createTime"
        label="退票时间"
        show-overflow-tooltip
      />
    </el-table>
    <!--分页栏-->
    <pagination
      :total="total"
      :page.sync="page.pageNum"
      :limit.sync="page.pageSize"
      @pagination="fetchData"
    />
  </div>
</template>
<script>
import Pagination from '@/components/Pagination';
import {
  doGetShoplist
} from '@/api/shoplist';
export default {
  components: {
    Pagination
  },
  data() {
    return {
      listLoading: false,
      total: 0,
      // 分页参数
      page: {
        data: {
          account: '', // 账号
          orderCode: '', // 订单编号
          name: '', // 姓名
          IDType: '', // 证件类型
          IDNumber: '', // 证件号码
          reservationEntry: '', // 预约入口
          reservationDate: '', // 预约日期
          reservationState: '', // 预约状态
          startTime: '',
          endTime: ''
        },
        pageNum: 1,
        pageSize: 10
      },
      tableData: [],
      accountList: [
        {
          label: '账号A',
          code: 'a'
        },
        {
          label: '账号B',
          code: 'b'
        }
      ],
      IDTypeList: [
        {
          label: '证件A',
          code: 'a'
        },
        {
          label: '证件B',
          code: 'b'
        }
      ],
      reservationEntryList: [
        {
          label: '入口A',
          code: 'a'
        },
        {
          label: '入口B',
          code: 'b'
        }
      ],
      reservationStateList: [
        {
          label: '状态A',
          code: 'a'
        },
        {
          label: '状态B',
          code: 'b'
        }
      ]
    };
  },
  computed: {
    roleId() {
      return this.$store.getters.role;
    }
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      this.listLoading = true;
      doGetShoplist(this.page).then((res) => {
        this.tableData = JSON.parse(JSON.stringify(res)).data.list;
        this.total = res.data.total;
        this.listLoading = false;
      });
    },
    // 返回列表序号
    indexMethod(index) {
      return (this.page.pageNum - 1) * this.page.pageSize + index + 1;
    }
  }
};
</script>

<style lang="scss" scoped>
.margin-left {
  margin: 10px 0 0 10px;
}
.input {
  width: 150px;
}
.table {
  margin-top: 15px;
}
</style>
