<template>
  <el-container>
    <el-main class="nopadding">
      <input class="input" id="inputsmq" ref="inputRef" type="password" />
      <div class="pos">
          <el-row>
            <el-col :span='7' class="pos_order" id="order_list">
              <el-tabs style="padding-left:10px;">
                  <el-tab-pane label="购物单">
                    <el-table :data="tableData" border style="width:100%;">
                      <el-table-column prop="title" label="商品名称"> </el-table-column>
                      <el-table-column prop="count" label="数量">
                        <template slot-scope='scope' #default="scope">
                          <el-input-number :min="1" @change="(e)=>changenums(e, scope.$index)" size="small" v-model="scope.row.count"></el-input-number>
                        </template>
                      </el-table-column>
                      <el-table-column prop="price" width="80" label="金额"> </el-table-column>
                      <el-table-column label="操作" width="80" fixed='right'>
                        <template slot-scope='scope' #default="scope">
                            <!-- <el-button  size="small" @click="addOrderList(scope.row)">增加</el-button> -->
                            <!-- <el-button  size="small" @click="addOrderList(scope.row)">减少</el-button> -->
                            <el-button type="danger"  size="small" @click="delGoods(scope.row)">删除</el-button>
                        </template>
                      </el-table-column>
                    </el-table>
                    <div class="total">
                      <small>数量:</small>{{ totalCount }}<small>金额:</small>{{ totalMoney }}
                    </div>
                    <div class="pos_btn">
                      <el-button type="success" @click.native="handleScanCode" >扫码识别</el-button>
                      <el-button type="danger" @click="delAllGoods()">清空购物单</el-button>
                      <el-button type="success" @click="checkOut()">结账</el-button>
                    </div>
                  </el-tab-pane> 
              </el-tabs>
            </el-col>
              <el-col :span="17">
                <el-header>
                  <div class="left-panel">
                    <el-input v-model="search.keyword" placeholder="关键词" style="width:150px; margin-right: 10px;" clearable />
                    <sc-select-tree v-model="search.category_id" :apiObj="$API.goods.category.list" :props="{label: 'title', value: 'id'}" style="width: 240px; margin-right: 10px;" />
                    <el-select v-model="search.status" placeholder="状态" clearable style="width: 100px;">
                      <el-option v-for="item in [{value: 0, title: '下架'}, {value: 1, title: '上架'}]" :key="item.value" :label="item.title" :value="item.value" />
                    </el-select>
                    <el-button-group style="margin-left: 10px;">
                      <el-button type="primary" icon="el-icon-search" @click="upsearch">搜索</el-button>
                    </el-button-group>
                  </div>
                </el-header>
                
                <scTable tableName="member" ref="table" :apiObj="list.apiObj" :column="list.column" row-key="id" @selection-change="selectionChange" border stripe>
                  <el-table-column type="selection" width="50"></el-table-column>
                  <template #cover="scope">
                    <img :src="scope.row.cover" width="40" height="40" v-if="scope.row.cover" />
                  </template>
                  <template #status="scope">
                    <el-tag :type="scope.row.status == 1 ? 'success' : 'danger'">{{scope.row.status == 1 ? '上架' : '下架'}}</el-tag>
                  </template>
                  <el-table-column label="操作" fixed="right" align="center" width="140">
                    <template #default="scope">
                      <el-button-group>
                        <el-button type="primary" @click="addOrderList(scope.row, scope.$index)">添加</el-button>
                        
                      </el-button-group>
                    </template>
                  </el-table-column>
                </scTable>

              </el-col>
          </el-row>
        </div>

    </el-main>
  </el-container>
</template>
<script >

export default {
  name: "ucenter.cashierhome",
  components: {},
  data() {
    return {
        dialog: {search: false, import: false, print: false},
        list: {
          apiObj: this.$API.goods.lists.list,
          column: [
            {prop: 'id', label: 'ID', width: 80},
            {prop: 'goods_sn', label: '商品编号'},
            {prop: 'title', label: '商品名称'},
            {prop: 'cover', label: '封面图', width: 120},
            {prop: 'price', label: '售价', width: 120},
            {prop: 'original_price', label: '原价', width: 120},
            // {prop: 'status', label: '状态', width: 80},
          ],
        },
        selection: [],
        search: {},
        formData:{
            content: "",
        },
        tableData: [],
        totalMoney: 0,
        totalCount: 0
      
    };
  },
  mounted(){
    this.handleScanCode();

    var orderHeight = document.body.clientHeight;
    document.getElementById("order_list").style.height = orderHeight + "px";
  },
  created: function() {
    
  },
  methods: {
    changenums(e,index){
      this.$nextTick(()=>{
        this.getAllMoney();
      })
    },
    //监听
    handleScanCode() {
        const input= document.getElementById('inputsmq');
        input.addEventListener('keydown',e=>{
            if(e.keyCode==13){//回车结束
                let qrcodeData=input.value;
                this.formData.content = qrcodeData;
                input.value = "";
                console.log(`二维码数据为${qrcodeData}`)
            }
        })
        input.focus()//聚焦
    },
    // 添加和计算商品价格
    addOrderList(goods,index) {
      // 商品是否已经存在于订单列表中
      let isHave = false;
      for (let i = 0; i < this.tableData.length; i++) {
        if (this.tableData[i].id == goods.id) {
          isHave = true;
        }
      }
      if (isHave) {
        // 改变列表中商品数量
        let arr = this.tableData.filter(o => o.id == goods.id);
        arr[0].count++;
      } else {
        let newGoods = {
          id: goods.id,
          title: goods.title,
          price: goods.price,
          count: 1
        };
        this.tableData.push(newGoods);
      }
      this.getAllMoney();
    },
    // 删除单个商品
    delGoods(goods) {
      console.log(goods.id, "删除了" + goods.id);
      this.tableData = this.tableData.filter(o => o.id != goods.id);
      this.getAllMoney();
    },
    // 全部删除商品
    delAllGoods() {
      this.tableData = [];
      this.totalMoney = 0;
      this.totalCount = 0;
    },
    // 数量和价格的汇总计算
    getAllMoney() {
      this.totalMoney = 0;
      this.totalCount = 0;
      if (this.tableData) {
        let totalMoney = 0;
        console.info('tableData',this.tableData);
        this.tableData.forEach(element => {
          this.totalCount += element.count;
          console.info('element.price',element.price,element.count);
          totalMoney +=  element.price * element.count;
        });
        console.info(totalMoney,'totalMoney');
        this.totalMoney = parseFloat(totalMoney).toFixed(2);
      }
    },
    // 模拟结账
    checkOut() {
      if (this.totalCount != 0) {
        this.tableData = [];
        this.totalMoney = 0;
        this.totalCount = 0;
        this.$message({
          message: "结账成功,辛苦啦~",
          type: "success"
        });
      } else {
        this.$message.error("店员，没有东西，怎么结账呀~");
      }
    },
    upsearch(){
			this.$refs.table.reload(this.search);
		},
		moreUpsearch(search){
			this.search = search;
			this.upsearch();
		},
		moreSearch(){
			this.dialog.search = true
			this.$nextTick(() => {
				this.$refs.searchBox.open().setData(this.search)
			})
		},
		//表格选择后回调事件
		selectionChange(selection){
			this.selection = selection;
		},
  },
};
</script>
<style scoped>
@import url('./cashierhome.scss');
</style>