<template>
    <div class="app-container">
        <div class="filter-container">
            <el-input
                    v-model="listQuery.keyword"
                    size="small"
                    placeholder="请输入关键词"
                    clearable
                    class="filter-item"
                    style="width: 200px;margin-left: 10px;"
            />
            <el-button-group style="margin-left: 10px;">
                <el-button
                        size="small"
                        class="filter-item"
                        type="primary"
                        icon="el-icon-search"
                        @click="search"
                >
                    搜索
                </el-button>
                <el-button
                        size="small"
                        class="filter-item"
                        type="primary"
                        icon="el-icon-refresh"
                        @click="refresh"
                >
                    重置
                </el-button>
            </el-button-group>
        </div>

        <el-table
                v-loading="listLoading"
                :data="list"
                element-loading-text="Loading"
                fit
                height="100%"
                class="table-container"
                highlight-current-row
                stripe
                @row-click="handleRowClick"
                row-key="sellId"
                ref="multipleTableRef"
                :expand-row-keys="expandedKeys"
        >

          <el-table-column type="expand">
            <template slot-scope="scope">
              <el-row :gutter="20">
                <el-col :span="13">
                  <el-table :data="scope.row.sellDetailList" stripe  >
                    <template v-if="scope.row.sellType == 1">
                         <el-table-column>
                            <template slot="header">
                              <div class="info-text" style="text-align: center;">销售详情</div>
                            </template>
                            <el-table-column prop="productName" label="商品名称" align="center">
                              <template slot-scope="scope">
                                <div style="text-align: center;">{{ scope.row.productName }}</div>
                              </template>
                            </el-table-column>
                            <el-table-column prop="count" label="数量" align="center">
                              <template slot-scope="scope">
                                <div style="text-align: center;">{{ scope.row.count }}</div>
                              </template>
                            </el-table-column>
                            <el-table-column prop="discount" label="折扣" align="center">
                              <template slot-scope="scope">
                                <div style="text-align: center;">{{ scope.row.discount?scope.row.discount:'-' }}</div>
                              </template>
                            </el-table-column>
                            <el-table-column prop="amount" label="金额" align="center">
                              <template slot-scope="scope">
                                <div style="text-align: center;">{{ scope.row.amount }}</div>
                              </template>
                            </el-table-column>
                            <el-table-column prop="realAmount" label="实际金额" align="center">
                              <template slot-scope="scope">
                                <div style="text-align: center;">{{ scope.row.realAmount }}</div>
                              </template>
                            </el-table-column>
                           <el-table-column prop="serverList"  width="380" label="服务人员信息" align="center">
                             <template slot-scope="scope">
                               <span v-show="scope.row.detailServerList.length == 0">-</span>

                               <el-descriptions :column="3" class="server">
                                 <template v-for="item in scope.row.detailServerList">
                                 <el-descriptions-item  label="服务人员">{{item.serverName}}</el-descriptions-item>
                                 <el-descriptions-item  label="业绩">{{item.serverGrade}}</el-descriptions-item>
                                 <el-descriptions-item  label="提成">{{item.serverPushMoney}}</el-descriptions-item>
                                 </template>
                               </el-descriptions>
                             </template>
                           </el-table-column>
                          </el-table-column>
                    </template>


                    <template v-if="scope.row.sellType == 2 || scope.row.sellType == 3">
                      <el-table-column>
                        <template slot="header">
                          <div class="info-text" style="text-align: center;">充卡详情</div>
                        </template>
                        <el-table-column prop="productName" label="卡名" align="center">
                          <template slot-scope="scope">
                            <div style="text-align: center;">{{ scope.row.cardName }}</div>
                          </template>
                        </el-table-column>

                        <el-table-column prop="amount" label="金额" align="center">
                          <template slot-scope="scope">
                            <div style="text-align: center;">{{ scope.row.amount }}</div>
                          </template>
                        </el-table-column>
                        <el-table-column prop="realAmount" label="赠送金额" align="center">
                          <template slot-scope="scope">
                            <div style="text-align: center;">{{ scope.row.giveAmount }}</div>
                          </template>
                        </el-table-column>

                        <el-table-column prop="serverList"  width="380" label="服务人员信息" align="center">
                          <template slot-scope="scope">
                            <span v-show="scope.row.detailServerList.length == 0">-</span>

                            <el-descriptions :column="3" class="server">
                              <template v-for="item in scope.row.detailServerList">
                                <el-descriptions-item  label="服务人员">{{item.serverName}}</el-descriptions-item>
                                <el-descriptions-item  label="业绩">{{item.serverGrade}}</el-descriptions-item>
                                <el-descriptions-item  label="提成">{{item.serverPushMoney}}</el-descriptions-item>
                              </template>
                            </el-descriptions>
                          </template>
                        </el-table-column>
                      </el-table-column>
                    </template>


                  </el-table>
                </el-col>
                <el-col :span="6">
                  <el-table :data="scope.row.sellPayList">
                    <el-table-column>
                      <template slot="header">
                        <div class="info-text" style="text-align: center;">支付方式</div>
                      </template>
                      <el-table-column prop="payName" label="支付名称" align="center">
                        <template slot-scope="scope">
                          <div style="text-align: center;">{{ scope.row.payName }}</div>
                        </template>
                      </el-table-column>
                      <el-table-column prop="amount" label="支付金额" align="center">
                        <template slot-scope="scope">
                          <div style="text-align: center;">{{ scope.row.amount }}</div>
                        </template>
                      </el-table-column>
                    </el-table-column>
                  </el-table>
                </el-col>
              </el-row>
            </template>
          </el-table-column>

            <el-table-column
                    label="订单号"
                    width="160"
                    align="center"
            >
                <template slot-scope="scope">
                    {{ scope.row.sellNo }}
                </template>
            </el-table-column>


          <el-table-column
            label="类型"
            align="center"
          >
            <template slot-scope="scope">
                  <span v-if="scope.row.sellType == 1">
                    商品
                  </span>

              <span v-if="scope.row.sellType == 2">
                    开卡
                  </span>

              <span v-if="scope.row.sellType == 3">
                    续卡
                  </span>
            </template>
          </el-table-column>

            <el-table-column
              label="会员信息"
              width="200"
              align="center"
            >
              <template slot-scope="scope">
                <div class="info-text">
                  <span>{{ scope.row.memberName?scope.row.memberName:'散客' }}</span><br/>
                  <span v-if="app.isNotEmpty(scope.row.memberCardId)"> {{ scope.row.memberCardName }} ({{scope.row.memberCardNo}})</span>
                </div>
              </template>
            </el-table-column>

            <el-table-column
                    label="消费金额"
                    align="center"
            >
                <template slot-scope="scope">
                  <span class="price-text"> {{ scope.row.sellAmount }}</span>
                </template>
            </el-table-column>

            <el-table-column
                    label="实际入账"
                    align="center"
            >
                <template slot-scope="scope">
                  <span class="price-text">{{ scope.row.realAmount }}</span>
                </template>
            </el-table-column>


            <el-table-column
                    label="门店名"
                    align="center"
            >
                <template slot-scope="scope">
                    {{ scope.row.shopName }}
                </template>
            </el-table-column>

            <el-table-column
                    label="创建人"
                    align="center"
            >
                <template slot-scope="scope">
                    {{ scope.row.createName }}
                </template>
            </el-table-column>

            <el-table-column
                    label="创建时间"
                    width="160"
                    align="center"
            >
                <template slot-scope="scope">
                    {{ scope.row.createTime }}
                </template>
            </el-table-column>

            <el-table-column
                    label="修改时间"
                    width="160"
                    align="center"
            >
                <template slot-scope="scope">
                    {{ scope.row.updateTime }}
                </template>
            </el-table-column>

            <el-table-column
                    label="修改人"
                    align="center"
            >
                <template slot-scope="scope">
                    {{ scope.row.updateName }}
                </template>
            </el-table-column>
          <el-table-column
            label="状态"
            align="center"
          >
            <template slot-scope="scope">
              <span v-show="scope.row.sellStatus==0" class="info-text">正常</span>
              <span v-show="scope.row.sellStatus==1" class="price-text">销单</span>
            </template>
          </el-table-column>


            <el-table-column
              label="消费前金额"
              align="center"
            >
              <template slot-scope="scope">
                {{ scope.row.memberCardBeforeAmount }}
              </template>
            </el-table-column>

            <el-table-column
              label="消费前赠送金额"
              align="center"
            >
              <template slot-scope="scope">
                {{ scope.row.memberCardBeforeGiveAmount }}
              </template>
            </el-table-column>

            <el-table-column
                    label="消费后金额"
                    align="center"
            >
                <template slot-scope="scope">
                    {{ scope.row.memberCardAfterAmount }}
                </template>
            </el-table-column>

            <el-table-column
                    label="消费后赠送金额"
                    align="center"
            >
                <template slot-scope="scope">
                    {{ scope.row.memberCardAfterGiveAmount }}
                </template>
            </el-table-column>


            <el-table-column
                    fixed="right"
                    label="操作"
                    width="160"
                    align="center"
            >
                <template slot-scope="scope">
                    <el-button-group>
                        <el-button
                                type="danger"
                                size="mini"
                                @click="del(scope)"
                        >
                            销单
                        </el-button>
                    </el-button-group>
                </template>
            </el-table-column>
        </el-table>

        <pagination
                :total="total"
                :page.sync="listQuery.page"
                :limit.sync="listQuery.limit"
                @pagination="fetchData"
        />

        <add-form ref="addForm" @ok="addOk"  />
        <edit-form ref="editForm" @ok="editOk"  />

    </div>
</template>

<script>
import {getSellPage,deleteSell,cancelSell} from "@/api/business/sell/sell";
import {deepClone,success} from "@/utils";

import confirm from "@/utils/confirm";
import prompt from "@/utils/prompt";
import Pagination from '@/components/Pagination'
import addForm from "@/views/business/sell/addSell";
import editForm from "@/views/business/sell/editSell";

export default {
    name: 'sell',
    components: {addForm,editForm,Pagination},
    data() {
        return {
            total: 0,
            list: [],
            listLoading: true,
            listQuery: {
                page: 1,
                limit: 50,
                keyword: ''
            },
            temp: {},
            expandedKeys: []
        }
    },
    created() {
        this.fetchData()
    },
    methods: {
        handleRowClick(row, event, column) {
          console.log(this.expandedKeys)
          if (this.expandedKeys.length > 0 && this.expandedKeys[0] == row.sellId) {
            console.log('我被关闭了')
            // 关闭之前展开的项
            this.expandedKeys = []
            // this.$refs.multipleTableRef.toggleRowExpansion(row, false);
          }else{
            this.expandedKeys = [row.sellId];
            this.$refs.multipleTableRef.toggleRowExpansion(row);
          }

        },
        search() {
            this.fetchData()
        },
        refresh() {
            this.listQuery = this.$options.data().listQuery
            this.fetchData()
        },
        fetchData() {
            this.listLoading = true
            getSellPage(this.listQuery).then(response => {
                const { records, total } = response.data
                this.list = records
                this.total = total
                this.listLoading = false
            })
        },
        add(){
            this.$refs.addForm.open()
        },
        addOk(){
            this.fetchData()
        },
        edit(scope) {
            const temp = deepClone(scope.row)
            this.$refs.editForm.open(temp)
        },
        editOk(){
            this.fetchData()
        },
        del(scope) {
            confirm("确定要销单吗？销单后余额和库存会发生改变！").then(res=>{
                if(res){
                  prompt("请输入销单原因").then(res =>{
                    if(res){
                      cancelSell({
                        sellId:scope.row.sellId,
                        remark:res
                      }).then(res => {
                           console.log("销单成功")
                          this.fetchData()
                      })
                    }
                  })
                }
            })
        },
    }
}
</script>

<style scoped>
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
  }

  .el-form-item__label {
    text-align: center;
  }

  /deep/ .el-descriptions__body{
    background: transparent;
  }


  /deep/ .el-table tr{
    background: transparent;
  }
</style>
