<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="8" class="shopping_all_head_item">服务信息</el-col>
          <el-col :span="5" class="shopping_all_head_item">规格</el-col>
          <el-col :span="3" class="shopping_all_head_item">购买时长</el-col>
          <el-col :span="3" class="shopping_all_head_item">小计</el-col>
          <el-col :span="3" 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"
        @updateList="updateList"
      />
    </div>
    <div class="shopping_list shopping_list_fail">
      <div class="expired_service">已失效服务</div>
      <ShoppingCartList
        :readOnly="true"
        :list="listIn"
        :checkList="checkListIn"
        class="shopping_all_list"
        @updateList="updateList"
      />
    </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">
            <div class="fyzj">
              <p class="fyzj_p">
                <span v-if="getSumCoin > userInfo.account_balance" class="yebz">
                  余额不足，请联系超级管理员进行充值
                </span>
                费用总计：<span class="fyzj_span">
                  {{ getSumCoin }}
                </span>
                <span class="fyzj_qian">金币</span>
              </p>
              <div class="ckfymx">
                <p class="ckfymx_a">
                  共 {{ list.length }} 项服务，已选择
                  <span class="dwa_djf">{{ getNum }}</span> 项
                  <span class="ckfymx_qian"
                    >账户余额：{{ userInfo.account_balance }} 金币</span
                  >
                </p>
              </div>
            </div>
          </el-col>
          <el-col :span="4" class="shopping_cart_options_cell">
            <el-button
              v-if="getNum != 0 && getSumCoin <= userInfo.account_balance"
              @click="oneClickApplication"
              class="shopping_cart_options_cell_btn_act"
              >一键申请</el-button
            >
            <el-button
              v-else
              :disabled="true"
              class="shopping_cart_options_cell_btn"
              >一键申请</el-button
            >
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import ShoppingCartList from "@/components/shopping-cart/shopping-cart-list";
import { mapState } from "vuex";

export default {
  components: {
    ShoppingCartList,
  },
  props: {},
  data: () => ({
    checkShopAll: false,
    checkList: [],
    checkListIn: [],
    list: [],
    listIn: [],
  }),
  mounted() {
    this.getList();
  },
  computed: {
    getNum() {
      let num = this.checkList.reduce(
        (a, v) => (v === true ? a + 1 : a + 0),
        0
      );
      return num;
    },
    getSumCoin() {
      let sum = 0;
      console.log(this.checkList);
      this.checkList.forEach((item, index) => {
        if (item) {
          if (this.list[index].service_id != 0) {
            sum += Number((this.list[index].service.spcs_info.money * this.list[index].duration).toFixed(2));
          } else {
            sum += Number((this.list[index].application.price * this.list[index].duration).toFixed(2));
          }
        }
      });
      return sum;
    },
    getCartState() {
      return this.$store.state.cartState;
    },
    ...mapState(["userInfo"]),
  },
  watch: {
    getCartState(newVal) {
      this.getList();
    },
  },
  methods: {
    getList() {
      this.$api.serviceShop.getShoppingCart().then((response) => {
        if (response.data.success == "1") {
          this.list = response.data.data.valid || [];
          this.listIn = response.data.data.invalid || [];
          this.checkList = [];
          this.checkListIn = [];
          for (let index in this.list) {
            this.checkList.push(false);
          }
          for (let index in this.listIn) {
            this.checkListIn.push(false);
          }
        } else {
          console.log(response.data.message);
        }
      });
    },
    checkAll(val) {
      this.$refs.shoppingList.setAllState(val);
    },
    changeState(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.$store.commit("setMenuCartState");
        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.$store.commit("setMenuCartState");
        this.getList();
      });
    },
    oneClickApplication() {
      let arr = [];
      this.checkList.forEach((item, index) => {
        if (item === true) {
          this.list[index].selected = Number(this.list[index].selected);
          arr.push(this.list[index]);
        }
      });
      window.sessionStorage.setItem("shoppingCart", JSON.stringify(arr));
      // this.$store.commit("setShoppingCart", arr);
      this.$router.push({ name: "shopCarApply" });
    },
    updateList() {
      this.$store.commit("setMenuCartState");
      this.getList();
    },
  },
};
</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;
}
.dwa_djf {
  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;
}
.fyzj_item {
  position: relative;
}
.fyzj {
  color: #242c43;
  font-size: 18px;
  margin-right: 10px;
  text-align: right;
  position: relative;
  top: 8px;
  line-height: 26px;
}
.fyzj_p {
  margin-bottom: 6px;
}
.fyzj_span {
  color: #e56600;
  font-size: 24px;
  font-weight: bold;
}
.fyzj_qian {
  color: #e56600;
  font-size: 14px;
}
.ckfymx {
  color: #58617a;
  font-size: 14px;
}
.ckfymx_a {
  color: #58617a;
}
.ckfymx_qian {
  display: inline-block;
  margin-left: 20px;
  position: relative;
  color: #a9aec0;
}
.ckfymx_qian::after {
  content: "";
  position: absolute;
  width: 1px;
  height: 16px;
  background: #bcc1d0;
  left: -10px;
  top: 2px;
}
.yebz {
  color: #e15260;
  font-size: 18px;
  margin-right: 20px;
}
</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>
