<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.label"
        :name="item.value"
      ></el-tab-pane>
    </el-tabs>
    <div class="list_options">
      <div class="button_group">
        <span
          v-for="(item, index) in buttonList"
          :key="'btn' + index"
          :class="item.state ? 'btn_default btn_actice':'btn_default'"
          @click="btnClick(index)"
        >{{ item.name }}</span>
      </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" @updateList="updateList"></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 == 0 ? 1 : pagination.total) / pagination.rowsPerPage)
          }}页
          <el-button
            icon="el-icon-arrow-right"
            circle
            size="mini"
            @click="handleCurrentChange(1)"
            :disabled="
            pagination.page >=
              Math.ceil((pagination.total == 0 ? 1 : 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: [
      { value: "0", label: "全部订单" },
      { value: "1", label: "待审核" },
      { value: "2", label: "审核中" },
      { value: "3", label: "已获取" },
      { value: "4", label: "未通过" },
      { value: "5", label: "已取消" }
    ],
    activeName: "0",
    buttonList: [],
    search: "",
    pagination: {
      rowsPerPage: 10,
      page: 1,
      total: 0
    },
    pageOptions: [
      {
        value: "10",
        label: "10"
      },
      {
        value: "20",
        label: "20"
      },
      {
        value: "50",
        label: "50"
      }
    ],
    datas: []
  }),
  mounted() {
    this.getBtns();
    this.getData();
  },
  methods: {
    getBtns() {
      this.$api.user.getOrderBtnTypes().then(response => {
        if (response.data.success == 1) {
          let buttonList = response.data.data;
          buttonList.forEach(item => {
            item.state = false;
          });
          buttonList.unshift({ id: "", name: "全部", state: false });
          buttonList.push({ id: "cloud", name: "云资源", state: false });
          buttonList.push({ id: "app", name: "应用镜像", state: false });
          this.buttonList = buttonList;
        }
      });
    },
    tabClick() {
      this.getData();
    },
    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;
      }
      this.getData();
    },
    // search debonce 500ms
    searchVal() {
      if (this.times !== null) clearTimeout(this.times);
      this.times = setTimeout(() => {
        this.getData();
      }, 500);
    },
    getData() {
      let arr = [];
      let service = 0;
      let app = 0;
      let resource = 0;
      this.buttonList.forEach(item => {
        if (item.state == true) {
          if (item.id == "cloud") {
            resource = 1;
          } else if (item.id == "app") {
            app = 1;
          } else {
            service = 1;
            arr.push(item.id);
          }
        }
      });
      if (arr.length == 0) {
        service = 1;
        app = 1;
        resource = 1;
      }
      let params = {
        select: this.search,
        page: this.pagination.page,
        limit: this.pagination.rowsPerPage,
        status: this.activeName,
        types: arr,
        service: service,
        app: app,
        resource: resource
      };
      this.$api.user.orderList(params).then(response => {
        this.datas = response.data.data;
        this.pagination.total = response.data.total;
      });
    },
    handleSizeChange(val) {
      this.pagination.rowsPerPage = val;
      this.getData();
    },
    handleCurrentChange(val) {
      this.pagination.page += val;
      this.getData();
    },
    updateList() {
      this.getData();
    }
  }
};
</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_default {
  display: inline-block;
  padding: 6px 15px;
  border-radius: 14px;
  font-size: 12px;
  margin-right: 6px;
  cursor: pointer;
}
.btn_default:hover {
  background-color: #515fe7;
  color: #fff;
}
.btn_default:focus {
  background-color: #fff;
  color: #606266;
}
.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>
