<template>
  <div>
    <el-skeleton v-if="!loading" :rows="12" animated />
    <el-table v-if="loading" ref="cartProjectTable" :data="cartProjectList" tooltip-effect="dark" style="width: 100%"
              @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column label="商品信息">
        <template slot-scope="scope">
          <div style="height: 150px; width: 100%">
            <el-row :gutter="10">
              <el-col :span="8">
                <el-card class="box-card">
                  <image-preview :src="scope.row.image" height="150px"/>
                </el-card>
              </el-col>
              <el-col :span="16">
                <el-row>
                  <span style="font-weight: bolder; font-size: 20px">{{ scope.row.name }}</span>
                </el-row>
                <el-divider style="margin: 10px 0;"/>
                <el-row>
                  <el-col :span="24" v-for="skuRule in scope.row.skuRuleList">
                    {{ skuRule.ruleName }}：{{ skuRule.ruleValue }}
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="单价" width="120">
        <template slot-scope="scope">{{ scope.row.price }}</template>
      </el-table-column>
      <el-table-column label="数量" width="120">
        <template slot-scope="scope">
          <el-input-number v-model="scope.row.num" controls-position="right" style="width: 110px"
                           @change="editCartProjectNum(scope.row)"
                           :min="1"
                           :max="scope.row.stock"
                           size="mini"></el-input-number>
        </template>
      </el-table-column>
      <el-table-column label="小计" width="120">
        <template slot-scope="scope">{{ scope.row.subtotal }}</template>
      </el-table-column>
      <el-table-column label="操作" width="80">
        <template slot-scope="scope">
          <el-button type="text" @click="removeCartProject(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div v-if="failureCartProjectList.length > 0" style="height: 50px; align-items: center; ">
      <span style="margin: 20px 0px; float: left; color: #787be8">已失效</span>
    </div>
    <el-table v-if="failureCartProjectList.length > 0" :show-header="false" ref="multipleTable"
              :data="failureCartProjectList"
              tooltip-effect="dark"
              style="width: 100%">
      <el-table-column width="55">
        <template slot-scope="scope">
          <el-checkbox disabled></el-checkbox>
        </template>
      </el-table-column>
      <el-table-column
        label="日期"
      >
        <template slot-scope="scope">{{ scope.row.date }}</template>
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
      >
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址"
        show-overflow-tooltip>
      </el-table-column>
    </el-table>
    <el-card v-if="loading" style="margin-top: 20px;">
      <div class="clearfix">
        <el-row>
          <el-col :span="6">
            <el-checkbox v-model="isAllCheck" @change="changeIsAllCheck">全选</el-checkbox>
            <el-button type="text" style="margin-left: 10px" @click="removeCartProject(undefined)">删除选中商品</el-button>
          </el-col>
          <el-col v-if="statisticsCart == null" :span="16">
            <span style="font-size: 24px; font-weight: bolder;">购物车内无购物商品，请先去加入购物车</span>
          </el-col>
          <el-col v-if="statisticsCart != null" :span="14">
            <div>
              <span>共 <span style="color: red">{{ statisticsCart.total }}</span> 件商品，已选择 <span
                style="color:red;">{{ statisticsCart.selectTotal }}</span> 件</span>
              <el-divider direction="vertical"></el-divider>
              <span> 商品合计 : ¥{{ statisticsCart.priceTotal }}</span>
              <el-divider direction="vertical"></el-divider>
              <span>应付总额：<span style="color:red; font-size: 24px;">¥{{ statisticsCart.actualTotal }}</span></span>
            </div>
          </el-col>
          <el-col v-if="statisticsCart != null" :span="4">
            <el-button style="float: right;" type="success">下单</el-button>
          </el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script>
import {cartInfoEditNum, cartInfoIsSelected, getDetailInfo, removeCartInfo} from "@/api/shopCart/Info";


export default {
  name: "shopCartDetail",
  data() {
    return {
      // 生效商品
      cartProjectList: [],
      // 失效商品
      failureCartProjectList: [],
      cartProjectSelected: [],
      // 购物车统计
      statisticsCart: {
        // 商品总数
        total: 0,
        // 选择总数
        selectTotal: 0,
        // 商品总价
        priceTotal: 0.00,
        // 实际总价
        actualTotal: 0.00
      },
      // 时候全部选择
      isAllCheck: false,
      loading: false
    }
  },
  created() {
    this.init()
  },
  methods: {
    removeCartProject(row){

      let removeCartProjectParams = [];
      if (row){
        removeCartProjectParams.push({
          "projectId": row.projectId,
          "projectSku": row.projectSku,
          "cartInfoId": row.cartInfoId
        });
      }else {
        debugger
        if (this.cartProjectSelected.length === 0){
          this.$message.warning("请先选择购物车内商品")
          return;
        }
        this.cartProjectSelected.forEach(cartInfoIsSelect => removeCartProjectParams.push({
          "projectId": cartInfoIsSelect.projectId,
          "projectSku": cartInfoIsSelect.projectSku,
          "cartInfoId": cartInfoIsSelect.cartInfoId
        }))
      }
      removeCartInfo(removeCartProjectParams).then(response => {
        this.init();
      })
    },

    editCartProjectNum(row){
      let editCartProjectNumParams = {
        "projectId": row.projectId,
        "projectSku": row.projectSku,
        "num": row.num
      };
      cartInfoEditNum(editCartProjectNumParams).then(response => {
        this.init();
      })
    },

    init() {
      this.loading = false;
      this.cartProjectList = [];
      this.cartProjectSelected = []
      getDetailInfo().then(response => {
        const {data} = response;

        this.statisticsCart = data == null ? null : data.statisticsCart;
        this.cartProjectList = data == null ? [] : data.cartSkuList;
        this.loading = true;
        setTimeout(this.initCartSelected, 200);
      })
    },
    initCartSelected() {
      this.cartProjectList.forEach(cartProject => {
        if ("Y" === cartProject.isSelected) {
          this.$refs.cartProjectTable.toggleRowSelection(cartProject, true);
        }
      })
    },
    changeIsAllCheck() {
      if (this.isAllCheck) {
        this.$refs.cartProjectTable.toggleAllSelection();
      } else {
        this.$refs.cartProjectTable.clearSelection();
      }
    },
    handleSelectionChange(selectedRow) {
      let editCartProjectList = [];
      this.cartProjectSelected
        .filter(cartProject => selectedRow.indexOf(cartProject) === -1)
        .forEach(cartProject => editCartProjectList.push({
          "projectId": cartProject.projectId,
          "projectSku": cartProject.projectSku,
          "isSelected": "N"
        }))
      selectedRow
        .filter(cartProject => this.cartProjectSelected.indexOf(cartProject) === -1)
        .forEach(cartProject => editCartProjectList.push({
          "projectId": cartProject.projectId,
          "projectSku": cartProject.projectSku,
          "isSelected": "Y"
        }))
      let cartProjectMap = {};
      this.cartProjectList.map(cartProject => cartProjectMap[`${cartProject.projectId} + ${cartProject.projectSku}`] = cartProject.isSelected)
      let editCartProjectFilterList
        = editCartProjectList.filter(editCartProject => editCartProject.isSelected !== cartProjectMap[`${editCartProject.projectId} + ${editCartProject.projectSku}`])
      if (editCartProjectFilterList.length > 0){
        cartInfoIsSelected(editCartProjectList).then(response => {
          this.init();
        })
      }
      this.isAllCheck = selectedRow.length === this.cartProjectList.length
      this.cartProjectSelected = selectedRow;
    }
  }
}
</script>

<style scoped>

</style>
