<template>
  <div>
    <div v-if="showHead" class="shopping_all_head">
      <el-row>
        <el-col :span="2" class="shopping_all_head_item">
          <el-checkbox v-model="checkedAll" @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>
    <div class="shopping_list_page">
      <ShoppingCartCell
        v-for="(item, index) in list"
        :cellItem="item"
        :cellIndex="index"
        :cellCheck="checkList[index]"
        :key="item.id"
        :readOnly="readOnly"
        @changeState="changeState"
      />
    </div>
  </div>
</template>

<script>
import ShoppingCartCell from "@/components/shopping-cart/shopping-cart-cell";
export default {
  components: {
    ShoppingCartCell
  },
  props: {
    showHead: {
      type: Boolean,
      default: false
    },
    readOnly: {
      type: Boolean,
      default: false
    }
  },
  data: () => ({
    checkedAll: false,
    checkList: [false, false, false],
    list: [
      {
        id: 0,
        name: "水路货物周转量情况",
        type: "基础数据服务",
        creator: "贵州省交通运输厅0",
        state: 1,
        mapService: 1
      },
      {
        id: 1,
        name: "水路货物周转量情况水路货物周水路货物周转量情况水路货物周",
        type: "基础数据服务",
        creator: "贵州省交通运输厅1",
        state: 1
      },
      {
        id: 2,
        name: "水路货物周转量情况水路货物周转量情况",
        type: "基础数据服务",
        creator: "贵州省交通运输厅2",
        state: 1,
        mapService: 1
      }
    ]
  }),
  mounted() {},
  methods: {
    changeState(val) {
      console.log(val)
      this.checkList[val.index] = val.state;
      console.log(this.checkList)
      if (this.checkList.indexOf(false) == -1) {
        this.checkedAll = true;
      } else {
        this.checkedAll = false;
      }
    },
    checkAll(val) {
      console.log(val)
      for (let i = 0; i < this.checkList.length; i++) {
        this.checkList[i] = val;
      }
      console.log(this.checkList)
    }
  }
};
</script>
<style scoped>
.shopping_all_head {
  background-color: #e5f0ff;
  height: 48px;
  padding: 0 20px;
  font-weight: 700;
  line-height: 48px;
}
.shopping_all_head_item {
  text-align: center;
}
.shopping_list_page {
  padding: 10px 20px 0;
}
</style>
<style>
.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>