<template>
  <el-dialog :close-on-click-modal="false" v-dialogDrag title="业绩" append-to-body :visible.sync="dialogVisible" width="75%">
    <div class="flex justify-end margin-bottom-xs">
      <el-button size="mini" type="primary" @click="exit()">导出</el-button>
    </div>
    <el-table border v-loading="listLoading" :data="list" :element-loading-text="elementLoadingText" @row-dblclick="rowdbClick" :header-cell-style="{background: 'linear-gradient(#6cb3ff, #1873d4)',color:'#eeeeee'}">
      <el-table-column show-overflow-tooltip align="center" min-width="90" prop="storeNum" label="门店编码"></el-table-column>
      <el-table-column show-overflow-tooltip align="center" min-width="90" prop="orderType" label="单据类型">
        <template slot-scope="scope">
          <span>{{ typeArr[scope.row.orderType] }}</span>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip align="center" min-width="90" prop="storeName" label="门店名称"></el-table-column>
      <el-table-column show-overflow-tooltip align="center" min-width="90" prop="brandNumber" label="水牌号"></el-table-column>
      <el-table-column show-overflow-tooltip align="center" min-width="90" prop="staffName" label="员工名称"></el-table-column>
      <el-table-column show-overflow-tooltip align="center" min-width="90" prop="vipname" label="会员名称"></el-table-column>
      <el-table-column show-overflow-tooltip align="center" min-width="90" prop="orderDate" label="日期"></el-table-column>
      <el-table-column show-overflow-tooltip align="center" min-width="90" prop="num" label="项目编码"></el-table-column>
      <el-table-column show-overflow-tooltip align="center" min-width="90" prop="orderName" label="项目名称"></el-table-column>
      <el-table-column show-overflow-tooltip align="center" min-width="90" prop="money" label="金额"></el-table-column>
      <el-table-column show-overflow-tooltip align="center" min-width="90" prop="orderNum" label="单据号"></el-table-column>
      <el-table-column show-overflow-tooltip align="center" min-width="90" prop="ratio" label="占比"></el-table-column>
      <el-table-column show-overflow-tooltip align="center" min-width="90" prop="type" label="类别">
        <template slot-scope="scope">
          {{scope.row.type==0?"服务":scope.row.type==1?"充值":scope.row.type==2?"疗程":scope.row.type==3?"加价转疗程":scope.row.type==4?"充值退":scope.row.type==5?"疗程退":scope.row.type==6?"消费退":scope.row.type==7?"还款":scope.row.type==8?"促销单":'无'}}
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip align="center" min-width="90" prop="chia" label="成交业绩"></el-table-column>
    </el-table>
    <div class="block margin-top-xs">
      <el-pagination align="left" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryForm.pageNum" :page-sizes="[10,20,30,40,50]" :page-size="queryForm.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button size="mini" type="primary" plain @click="dialogVisible = false">关闭</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { salesmanMxs, exportachiMXs } from "@/api/storeManage.js";

export default {
  data() {
    return {
      typeArr:['收银单','充值单','疗程单','加价转疗程单','充值退款','疗程退款单','消费退','还款'],
      dialogVisible: false, //弹窗开关
      form: {}, //主对象
      list: [], //主数组
      total: 0, //分页总条数
      listLoading: false, //list加载提示开启动画
      elementLoadingText: "加载中...",
      queryForm: {
        pageNum: 1,
        pageSize: 10,
      },
    };
  },
  methods: {
    exit() {
      let form = {
        brandNumber: this.form.brandNumber,
        storeNum: this.form.storeNum,
        staffType: this.form.staffType,
        startDate: this.form.startDate,
        endDate: this.form.endDate,
      };
      exportachiMXs(form).then((res) => {
        let blob = new Blob([res]);
        var a = document.createElement("a");
        var url = window.URL.createObjectURL(blob);
        console.log(url);
        a.href = url;
        a.download = "管理层业绩明细导出表.xlsx";
        a.click();
        window.URL.revokeObjectURL(url);
      });
    },
    rowdbClick(row) {},
    //组件传值
    show(form) {
      this.form = { ...form };
      this.dialogVisible = true;
      this.getData();
    },
    //分页方法
    handleSizeChange(val) {
      this.queryForm.pageSize = val;
      this.getData();
      //console.log(val);
    },
    handleCurrentChange(val) {
      this.queryForm.pageNum = val;
      this.getData();
      //console.log(val);
    },
    //获取数据
    async getData() {
      let form = {
        brandNumber: this.form.brandNumber,
        storeNum: this.form.storeNum,
        staffType: this.form.staffType,
        startDate: this.form.startDate,
        endDate: this.form.endDate,
      };
      salesmanMxs(form).then((res) => {
        if (res.code == "000000") {
          this.list = res.rows;
        } else {
          this.$alert(res.message, "提示", {
            confirmButtonText: "确定",
            confirmButtonClass: "confirmbtnFalses",
            type: "warning",
            center: true,
            callback: (action) => {},
          });
        }
      });
    },
  },
};
</script>

<style>
</style>
