<template>
  <div class="order_block">
    <el-tabs v-model="activeName" @tab-click="tabClick" type="border-card">
      <el-tab-pane
        v-for="(item, index) in stateList"
        :key="'state' + index"
        :label="item"
        :name="item"
      ></el-tab-pane>
    </el-tabs>
    <div class="list_options">
      <div class="button_group">
        <el-button
          size="mini"
          v-for="(item, index) in buttonList"
          :key="'btn' + index"
          :class="item.state ? 'btn_actice':''"
          round
          @click="btnClick(index)"
        >{{ item.label }}</el-button>
      </div>
      <div class="input_right">
        <el-input
          v-model="search"
          prefix-icon="el-icon-search"
          placeholder="请输入关键字搜索服务"
          @input="searchVal"
        ></el-input>
      </div>
    </div>
    <order-list :datas="datas"></order-list>
    <!-- 分页 -->
    <section class="order_pagination">
      <div class="order_page_total">共 {{ pagination.total }} 个条目</div>
      <div class="order_page_item">
        <div class="order_page_num">
          <div>每页行数：</div>
          <div class="order_page_num_sel">
            <el-select
              v-model="pagination.rowsPerPage"
              placeholder="请选择"
              size="small"
              @change="handleSizeChange"
            >
              <el-option
                v-for="item in pageOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </div>
        </div>
        <div class="order_page_control">
          <el-button
            icon="el-icon-arrow-left"
            circle
            size="mini"
            @click="handleCurrentChange(-1)"
            :disabled="pagination.page == 1"
          ></el-button>
          &nbsp;&nbsp;第{{ pagination.page }}页 / 共{{
          Math.ceil(pagination.total / pagination.rowsPerPage)
          }}页
          <el-button
            icon="el-icon-arrow-right"
            circle
            size="mini"
            @click="handleCurrentChange(1)"
            :disabled="
            pagination.page >=
              Math.ceil(pagination.total / pagination.rowsPerPage)
          "
          ></el-button>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import OrderList from "@/components/order-list/order-list-list";
export default {
  components: {
    OrderList
  },
  data: () => ({
    stateList: ["全部订单", "待审核", "审核中", "已获取", "未通过", "已取消"],
    activeName: "全部订单",
    buttonList: [
      { label: "全部", state: false },
      { label: "数据服务", state: false },
      { label: "时空服务", state: false },
      { label: "视频服务", state: false },
      { label: "感知服务", state: false },
      { label: "综合服务", state: false },
      { label: "云资源", state: false },
      { label: "应用镜像", state: false }
    ],
    search: "",
    pagination: {
      rowsPerPage: 10,
      page: 1,
      total: 0
    },
    pageOptions: [
      {
        value: "10",
        label: "10"
      },
      {
        value: "20",
        label: "20"
      },
      {
        value: "50",
        label: "50"
      }
    ],
    datas: [
      {
        id: 0,
        name: "水路货物周转量情况",
        type: "基础数据服务",
        creator: "贵州省交通运输厅0",
        state: 1,
        mapService: 1,
        num: 2,
        checkedSubscription: false,
        specification: 1,
        specificationApplication: 2,
        evaluationText: "这条服条服务非常好非常实用这条服务非常好非常实用这条服务非常好非常实用。这条服务非常好非常实用这条服务非常好非常实用这条服务非常好非常实用这条服务非常好非常实用这条服务非常好非常实用这条服务非常好非常实用。",
        evaluationRate: 4.7,
        applicationTime: "2021-04-24 15:02:00",
        orderNumber: "2020042422222222000001",
        getStatus: 2
      },
      {
        id: 1,
        name: "水路货物周转量情况水路货物周水路货物周转量情况水路货物周",
        type: "基础数据服务",
        creator: "贵州省交通运输厅1",
        state: 1,
        num: 2,
        checkedSubscription: false,
        specification: 1,
        specificationApplication: 2,
        evaluationText: "这条服务非常好务非常好非常实用这非常实用这条服务非常好非常实用。",
        evaluationRate: 3.7,
        applicationTime: "2020-04-24 15:02:00",
        orderNumber: "202004241502000001",
        getStatus: 3
      },
      {
        id: 2,
        name: "水路货物周转量情况水路货物周转量情况路货物周转量情况",
        type: "基础数据服务",
        creator: "贵州省交通运输厅2",
        state: 1,
        mapService: 1,
        num: 2,
        checkedSubscription: true,
        specification: 1,
        specificationApplication: 2,
        evaluationText: "这条服务非常好非常实用这条服务非常好非常实用这条服务非常好非常实用这条服务非常好非常实用这条服务非常好非常实用这条服务非常好非常实用。这条服务非常好非常实用这条服务非常好非常实用这条服务非常好非常实用这条服务非常好非常实用这条服务非常好非常实用这条服务非常好非常实用。",
        evaluationRate: 3.7,
        applicationTime: "2020-04-24 15:02:00",
        orderNumber: "202004241502000001",
        getStatus: 1
      }
    ]
  }),
  mounted() {
    this.getTotal();
  },
  methods: {
    tabClick() {},
    btnClick(index) {
      if (index != 0) {
        this.buttonList[0].state = false;
        this.buttonList[index].state = !this.buttonList[index].state;
      } else {
        for (let i = 1; i < this.buttonList.length; i++) {
          this.buttonList[i].state = false;
        }
        this.buttonList[0].state = !this.buttonList[0].state;
      }
    },
    // search debonce 500ms
    searchVal() {
      if (this.times !== null) clearTimeout(this.times);
      this.times = setTimeout(() => {
        this.getShopList();
      }, 500);
    },
    getTotal() {
      this.pagination.total = this.datas.length;
    },
    handleSizeChange(val) {
      this.pagination.rowsPerPage = val;
      this.$emit("refresh", this.pagination);
    },
    handleCurrentChange(val) {
      this.pagination.page += val;
      this.$emit("refresh", this.pagination);
    }
  }
};
</script>
<style scoped>
.order_block {
  margin: 20px;
  background-color: #fff;
  border-radius: 0px 0px 8px 8px / 0px 0px 8px 8px;
}
.list_options {
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
  border-bottom: 1px solid #e9ecf3;
}
.button_group {
  padding: 17px 10px;
}
.btn_actice {
  background-color: #515fe7;
  color: #fff;
}
.input_right {
  width: 360px;
  padding: 10px;
}
.order_pagination {
  font-size: 14px;
  padding: 0 5% 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.order_page_num {
  width: 140px;
  margin-right: 20px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.order_page_num_sel {
  width: 50px;
  font-size: 14px;
  position: relative;
  top: 1px;
}
.order_page_item {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
</style>
<style>
.order_block .el-tabs--border-card {
  border: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
}
.order_block .el-tabs--border-card > .el-tabs__header {
  background-color: #fff;
}
.order_block .el-tabs__item {
  padding: 0 24px;
}
.order_block .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
  background-color: #fff;
  border-right-color: #dcdfe6;
  border-left-color: #dcdfe6;
  border-top: 4px solid #e56600;
  height: 48px;
}
.order_block .el-tabs--border-card > .el-tabs__header .el-tabs__item {
  border-top: 4px solid transparent;
  height: 48px;
}
.order_block .el-tabs--border-card > .el-tabs__header .el-tabs__item:hover {
  color: #e56600;
}
.order_block .el-tabs--border-card > .el-tabs__content {
  padding: 0;
}
.input_right .el-input__inner {
  border-radius: 20px;
}
.input_right .el-input--prefix .el-input__inner {
  padding-left: 40px;
}
.input_right .el-input__prefix,
.el-input__suffix {
  left: 10px;
}
.input_right .el-input--prefix .el-input__inner {
  outline: none;
}
.input_right .el-input__inner:focus-within {
  border: 1px solid #626de9;
}
.order_page_control .el-button {
  border: 0;
}
.order_page_num .el-input__inner {
  border: 0;
  padding: 0;
}
.button_group .el-button {
  border: 0;
}
.button_group .el-button:hover {
  background-color: #515fe7;
  color: #fff;
}
</style>
