<template>
  <div>
    <div class="shopping_list shopping_list_all">
      <div class="shopping_all_head">
        <el-row>
          <el-col :span="2" class="shopping_all_head_item">
            <el-checkbox v-model="checkShopAll" @change="checkAll">全选</el-checkbox>
          </el-col>
          <el-col :span="9" class="shopping_all_head_item">服务信息</el-col>
          <el-col :span="5" class="shopping_all_head_item">规格</el-col>
          <el-col :span="4" class="shopping_all_head_item">购买时长</el-col>
          <el-col :span="4" class="shopping_all_head_item">操作</el-col>
        </el-row>
      </div>
      <ShoppingCartList
        ref="shoppingList"
        :checkShopAll="checkShopAll"
        :list="list"
        :checkList="checkList"
        :readOnly="false"
        @changeState="changeState"
        @changeCellMsg="changeCellMsg"
        @deleteItem="deleteItem"
        class="shopping_all_list"
      />
    </div>
    <div class="shopping_list shopping_list_fail">
      <div class="expired_service">已失效服务</div>
      <ShoppingCartList :readOnly="true" :list="listIn" class="shopping_all_list" />
    </div>
    <div class="shopping_list shopping_list_options">
      <div class="shopping_cart_options">
        <el-row>
          <el-col :span="2" class="shopping_cart_options_cell">
            <el-checkbox v-model="checkShopAll" @change="checkAll">全选</el-checkbox>
          </el-col>
          <el-col :span="3" class="shopping_cart_options_del">
            <span v-if="getNum == 0" class="shopping_cart_options_del_service">删除选中服务</span>
            <span
              v-else
              @click="delSelectService"
              class="shopping_cart_options_del_service_act"
            >删除选中服务</span>
          </el-col>
          <el-col :span="15" class="shopping_cart_options_num">
            共 {{ checkList.length }} 项服务，已选择
            <span>{{ getNum }}</span> 项
          </el-col>
          <el-col :span="4" class="shopping_cart_options_cell">
            <el-button
              v-if="getNum == 0"
              :disabled="true"
              class="shopping_cart_options_cell_btn"
            >一键申请</el-button>
            <el-button
              v-else
              @click="oneClickApplication"
              class="shopping_cart_options_cell_btn_act"
            >一键申请</el-button>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import ShoppingCartList from "@/components/shopping-cart/shopping-cart-list";
export default {
  components: {
    ShoppingCartList
  },
  props: {},
  data: () => ({
    checkShopAll: false,
    checkList: [],
    list: [],
    listIn: []
  }),
  mounted() {
    this.getList();
  },
  computed: {
    getNum() {
      let num = this.checkList.reduce(
        (a, v) => (v === true ? a + 1 : a + 0),
        0
      );
      return num;
    }
  },
  methods: {
    getList() {
      this.$api.serviceShop.getShoppingCart().then(response => {
        if (response.data.success == "1") {
          console.log(response.data.data);
          this.list = response.data.data.valid;
          this.listIn = response.data.data.invalid;
          for (const index in this.list) {
            this.checkList.push(false);
          }
        } else {
          console.log(response.data.message);
        }
      });
    },
    checkAll(val) {
      this.$refs.shoppingList.setAllState(val);
    },
    changeState(val) {
      console.log(val);
      this.$set(this.checkList, val.index, val.state);
      if (this.checkList.indexOf(false) == -1) {
        this.checkShopAll = true;
      } else {
        this.checkShopAll = false;
      }
    },
    delSelectService() {
      let query = [];
      this.checkList.forEach((item, index) => {
        if (item === true) {
          query.push(this.list[index].id);
        }
      });
      this.$api.serviceShop.delShoppingCart(query).then(response => {
        console.log(response);
        this.getList()
      });
    },
    changeCellMsg(val) {
      console.log(val);
    },
    deleteItem(val) {
      console.log(val);
      let query = [val.data.id];
      this.$api.serviceShop.delShoppingCart(query).then(response => {
        console.log(response);
        this.getList()
      });
    },
    oneClickApplication() {
      let arr = [];
      this.checkList.forEach((item, index) => {
        if (item === true) {
          arr.push(this.list[index]);
        }
      });
      this.$store.commit("setShoppingCart", arr);
      this.$router.push({ name: "shopCarApply" });
    }
  }
};
</script>
<style scoped>
.shopping_list {
  border-radius: 12px;
  background-color: #ffffff;
  box-shadow: 0px 3px 6px 0px #f4f7fc;
  overflow: hidden;
  margin-bottom: 20px;
}
.shopping_list_all {
}
.shopping_list_fail {
}
.shopping_list_options {
}
.shopping_all_list {
}
.shopping_fail_head {
  background-color: #eff1f8;
  height: 40px;
}
.shopping_options {
  height: 84px;
}
.expired_service {
  height: 48px;
  font-size: 14px;
  font-weight: 700;
  padding: 10px 50px;
  line-height: 28px;
  background-color: #eff1f8;
}
.shopping_cart_options {
  height: 80px;
  padding: 0 20px;
  font-weight: 700;
  line-height: 80px;
}
.shopping_cart_options_cell {
  text-align: center;
}
.shopping_cart_options_del {
}
.shopping_cart_options_del_service {
  color: #c8d0e7;
}
.shopping_cart_options_del_service_act {
  cursor: pointer;
  color: #0f2683;
}
.shopping_cart_options_num {
  text-align: right;
  font-size: 14px;
  font-weight: 500;
  color: #58617a;
}
.shopping_cart_options_num span {
  color: #e56600;
}
.shopping_cart_options_cell_btn {
  width: 90%;
  margin: 0 10%;
}
.shopping_cart_options_cell_btn_act {
  width: 90%;
  margin: 0 10%;
  background-color: #e56600;
  color: #fcefd6;
}
.shopping_all_head {
  background-color: #e5f0ff;
  height: 48px;
  padding: 0;
  font-weight: 700;
  line-height: 48px;
}
.shopping_all_head_item {
  text-align: center;
}
.shopping_list_page {
  padding: 10px 20px 0;
}
</style>
<style>
.shopping_cart_options_cell .el-checkbox {
  font-weight: 700;
}
.shopping_cart_options_cell .el-checkbox__inner:hover {
  border-color: #626de9;
}
.shopping_cart_options_cell .el-checkbox__input.is-focus .el-checkbox__inner {
  border-color: #626de9;
}
.shopping_cart_options_cell .el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: #626de9;
  border-color: #626de9;
}
.shopping_cart_options_cell
  .el-checkbox__input.is-checked
  + .el-checkbox__label {
  color: #626de9;
}
.shopping_all_head_item .el-checkbox {
  font-weight: 700;
}
.shopping_all_head_item .el-checkbox__inner:hover {
  border-color: #626de9;
}
.shopping_all_head_item .el-checkbox__input.is-focus .el-checkbox__inner {
  border-color: #626de9;
}
.shopping_all_head_item .el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: #626de9;
  border-color: #626de9;
}
.shopping_all_head_item .el-checkbox__input.is-checked + .el-checkbox__label {
  color: #626de9;
}
</style>
