<template>
  <div class="self-pick-up-site-container">
    <div class="head">
      <div class="head-add-btn">
        <el-button
          icon="el-icon-plus"
          type="primary"
          size="medium"
          @click="handleSkip"
        >
          添加自提点
        </el-button>
      </div>
      <div class="head-content">
        <span class="name">自提点名称：</span>
        <el-input
          placeholder="请输入自提点名称"
          suffix-icon="el-icon-search"
          v-model="inputData"
          size="medium"
          class="input-with-select"
        ></el-input>
        <el-button type="primary" size="medium" @click="handleSearch">
          搜索
        </el-button>
        <el-button size="medium" @click="handleClear">清除条件</el-button>
      </div>
    </div>
    <el-table
      :data="tableData"
      :height="tableConfig.height"
      style="width: 100%"
      :stripe="true"
    >
      <el-table-column
        align="center"
        v-for="(item, index) in tabColumn"
        :key="index"
        :prop="item.prop"
        :label="item.label"
        :width="item.width"
      >
        <template #default="{ row, $index }">
          <div class="" v-if="item.label == '操作'">
            <el-button
              type="text"
              size="small"
              @click="handleSkipEdit(row, $index)"
            >
              编辑
            </el-button>
            <el-button type="text" size="small">删除</el-button>
            <el-button type="text" size="small">禁用</el-button>
          </div>
          <div v-else-if="item.label == '状态'">
            <el-switch
              v-model="row[item.prop]"
              :active-value="1"
              :inactive-value="0"
            />
          </div>
          <div v-else>
            {{ row[item.prop] }}
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      :current-page="queryForm.pageNum"
      :layout="layout"
      :page-size="queryForm.pageSize"
      :total="total"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      total: 0,
      layout: 'total, sizes, prev, pager, next, jumper',
      queryForm: {
        stime: null,
        etime: null,
        kind_id: null,
        order_state_id: null,
        pageNum: 1,
        pageSize: 20,
      },
      tableConfig: {
        height: window.innerHeight - 220 - 150,
      },
      inputData: null,
      tabColumn: [
        {
          prop: 'serialNumber',
          label: '序号',
          width: '51',
        },
        {
          prop: 'name',
          label: '自提点名称',
        },
        {
          prop: 'address',
          label: '自提点地址',
        },
        {
          prop: 'contact',
          label: '自提点联系人',
        },
        {
          prop: 'mobile',
          label: '自提点联系电话',
        },
        {
          prop: 'time',
          label: '自提时间',
        },
        {
          prop: 'state',
          label: '状态',
        },
        {
          prop: 'operation',
          label: '操作',
        },
      ],
      tableData: [
        {
          serialNumber: 1,
          name: '福家优先超市',
          address: '桂贵南路与郁江东路交汇处大龙城市广场1-3楼',
          contact: '赵福生',
          mobile: '13888888888',
          time: '07:30 - 22:30',
          state: 0,
        },
        {
          serialNumber: 2,
          name: '福家优先超市',
          address: '桂贵南路与郁江东路交汇处大龙城市广场1-3楼',
          contact: '赵福生',
          mobile: '13888888888',
          time: '07:30 - 22:30',
          state: 0,
        },
      ],
    }
  },
  methods: {
    handleSkip() {
      this.$router.push({ path: '/selfPickUpSiteAdd' })
    },
    handleCurrentChange() {},
    handleSizeChange() {},
    handleSearch() {},
    handleClear() {},
    handleSwitch() {},
    handleSkipEdit() {
      this.$router.push({ path: '/selfPickUpSiteEdit' })
    },
  },
}
</script>

<style lang="scss">
.self-pick-up-site-container {
  padding: 0 20px !important;
  .head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: inset 0 -1px 0 #efefef;

    .head-add-btn {
    }

    .head-content {
      display: flex;
      align-items: center;
      text-align: center;
      margin: 20px 0;

      .name {
        font-weight: bold;
      }

      .input-with-select {
        margin: 0 10px;
        width: 270px;
      }
    }
  }
}
</style>