<template>
  <div class="displsy-mod">
    <div>
      选择日期
      <el-date-picker v-model="days" :picker-options="pickerOptions" type="daterange" value-format="yyyy-MM-dd HH:mm:ss" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
      </el-date-picker>
      <el-select filterable default-first-option clearable v-model="storeIds" placeholder="请选择" v-if="headOffice" multiple collapse-tags>
          <el-option v-for="(item,index) in options" :key="index" :label="item.storeNum + '-' + item.storeName" :value="item.storeId">
          </el-option>
        </el-select>
      <el-button type="primary" size="mini" @click="exit" v-if="headOffice">导出</el-button>
      <el-button type="primary" size="mini" @click="getData" :disabled="disabled">查询</el-button>
    </div>
    <el-table :data="list" @row-dblclick="confirm" v-loading="loading" stripe style="width: 100%;margin-top:5px" show-summary :row-class-name="rowClassName" :header-cell-style=" {background: 'linear-gradient(#6cb3ff, #1873d4)' , color: '#eeeeee' , }">
     <el-table-column align="center" prop="deptNames" label="部门" min-width="120" show-overflow-tooltip> </el-table-column>
     <el-table-column align="center" prop="cashSum" label="总现金业绩" min-width="80" show-overflow-tooltip></el-table-column>
     <el-table-column align="center" prop="sumTrue" label="实业绩" min-width="80" show-overflow-tooltip></el-table-column>
     <el-table-column align="center" prop="sumFalse" label="虚业绩" min-width="80" show-overflow-tooltip></el-table-column>
     <el-table-column align="center"  label="充值业绩" min-width="80" show-overflow-tooltip>
      <el-table-column align="center" prop="recharge" label="总业绩" min-width="80" show-overflow-tooltip> </el-table-column>
      <el-table-column align="center" prop="rechargecar" label="充值" min-width="80" show-overflow-tooltip> </el-table-column>
      <el-table-column align="center" prop="repaymentRecharge" label="还款" min-width="80" show-overflow-tooltip> </el-table-column>
     </el-table-column>
     <el-table-column align="center"  label="疗程业绩" min-width="80" show-overflow-tooltip>
      <el-table-column align="center" prop="courseSum" label="总业绩" min-width="80" show-overflow-tooltip> </el-table-column>
      <el-table-column align="center" prop="course" label="疗程" min-width="80" show-overflow-tooltip> </el-table-column>
      <el-table-column align="center" prop="cooperationAchi" label="合作方业绩" min-width="80" show-overflow-tooltip> </el-table-column>
      <el-table-column align="center" prop="courseRepay" label="还款" min-width="80" show-overflow-tooltip> </el-table-column>
      <el-table-column align="center" prop="hkCooperationAmount" label="合作方还款业绩" min-width="100" show-overflow-tooltip> </el-table-column>
     </el-table-column>
     <el-table-column align="center"  label="服务" min-width="80" show-overflow-tooltip>
      <el-table-column align="center" prop="cashierCash" label="现付" min-width="80" show-overflow-tooltip> </el-table-column>
      <el-table-column align="center" prop="cashierRecharge" label="充值卡付" min-width="80" show-overflow-tooltip> </el-table-column>
      <el-table-column align="center" prop="cashierCard" label="疗程卡付" min-width="80" show-overflow-tooltip> </el-table-column>
     </el-table-column>
     <el-table-column align="center" prop="courseCard" label="充值卡购买疗程" min-width="80" show-overflow-tooltip> </el-table-column>
     <el-table-column align="center" prop="cooperationCardAmount" label="合作方充值卡业绩" min-width="80" show-overflow-tooltip> </el-table-column> 
     <el-table-column align="center"  label="退款" min-width="80" show-overflow-tooltip>
      <el-table-column align="center" prop="refundRechagre" label="充值" min-width="80" show-overflow-tooltip> </el-table-column>
      <el-table-column align="center" prop="refundCourse" label="疗程" min-width="80" show-overflow-tooltip> </el-table-column>
      <el-table-column align="center" prop="refundCash" label="消费" min-width="80" show-overflow-tooltip> </el-table-column>
     </el-table-column>
      <!-- <el-table-column align="center" prop="deptNames" label="部门" min-width="80" show-overflow-tooltip> </el-table-column>
      <el-table-column align="center" prop="recharge" label="充值" min-width="80" show-overflow-tooltip> </el-table-column>
      <el-table-column align="center" label="疗程">
        <el-table-column align="center" prop="courseTotal" label="总业绩" min-width="80" show-overflow-tooltip> </el-table-column>
        <el-table-column align="center" prop="courseCash" label="现付" min-width="80" show-overflow-tooltip> </el-table-column>
      </el-table-column>
      <el-table-column align="center" label="疗程促销">
        <el-table-column align="center" prop="coursePromotionTotal" label="总业绩" min-width="80" show-overflow-tooltip> </el-table-column>
        <el-table-column align="center" prop="coursePromotionCash" label="现付" min-width="80" show-overflow-tooltip> </el-table-column>
        <el-table-column align="center" prop="coursePromotionCard" label="卡付" min-width="80" show-overflow-tooltip> </el-table-column>
      </el-table-column>
      <el-table-column align="center" label="服务">
        <el-table-column align="center" prop="cashierTotal" label="总业绩" min-width="80" show-overflow-tooltip> </el-table-column>
        <el-table-column align="center" prop="cashierCash" label="现付" min-width="80" show-overflow-tooltip> </el-table-column>
        <el-table-column align="center" prop="cashierCard" label="疗程付" min-width="80" show-overflow-tooltip> </el-table-column>
        <el-table-column align="center" prop="cashierRecharge" label="充值付" min-width="80" show-overflow-tooltip> </el-table-column>
      </el-table-column>
      <el-table-column align="center" label="还款">
        <el-table-column align="center" prop="repaymentTotal" label="总业绩" min-width="80" show-overflow-tooltip> </el-table-column>
        <el-table-column align="center" prop="repaymentRecharge" label="充值" min-width="80" show-overflow-tooltip> </el-table-column>
        <el-table-column align="center" prop="repaymentCourse" label="疗程" min-width="80" show-overflow-tooltip> </el-table-column>
      </el-table-column>
      <el-table-column align="center" label="退款">
        <el-table-column align="center" prop="refundTotal" label="总业绩" min-width="80" show-overflow-tooltip> </el-table-column>
        <el-table-column align="center" prop="refundRechagre" label="充值" min-width="80" show-overflow-tooltip> </el-table-column>
        <el-table-column align="center" prop="refundCourse" label="疗程" min-width="80" show-overflow-tooltip> </el-table-column>
        <el-table-column align="center" prop="refundCash" label="消费" min-width="80" show-overflow-tooltip> </el-table-column>
      </el-table-column>
      <el-table-column align="center" label="加价转疗程">
        <el-table-column align="center" prop="jjzlcCash" label="现付" min-width="80" show-overflow-tooltip> </el-table-column>
        <el-table-column align="center" prop="jjzlcCard" label="卡付" min-width="80" show-overflow-tooltip> </el-table-column>
      </el-table-column>
      <el-table-column align="center" prop="cashReceipts" label="现金收款" min-width="80" show-overflow-tooltip> </el-table-column>
      <el-table-column align="center" prop="courseYj" label="疗程业绩" min-width="80" show-overflow-tooltip> </el-table-column>
      <el-table-column align="center" prop="cashYj" label="服务业绩" min-width="80" show-overflow-tooltip> </el-table-column> -->
    </el-table>
    <!-- <div class="block" style="margin-top: 10px">
    <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> -->
    <detail ref="detail"></detail>
  </div>
</template>

<script>
import { departmentPerformance,organizations,exportachi,SysRoleStore } from "@/api/storeManage.js";
import detail from "./components/index";

export default {
  components: { detail },
  name:"dept",
  data() {
    return {
      headOffice: sessionStorage.getItem("headOffice") * 1,
      options:[],
      storeIds:"",
      pickerOptions: {
        //组件限制方法
        onPick: ({ maxDate, minDate }) => {
          this.choiceDate = minDate.getTime();
          if (maxDate) {
            this.choiceDate = "";
          }
        },
        disabledDate: (time) => {
          const self = this;
          if (!!self.choiceDate) {
            const startDay =
              (new Date(self.choiceDate).getDate() - 1) * 24 * 3600 * 1000;
            const endDay =
              (new Date(
                new Date(self.choiceDate).getFullYear(),
                new Date(self.choiceDate).getMonth() + 1,
                0
              ).getDate() -
                new Date(self.choiceDate).getDate()) *
              24 *
              3600 *
              1000;
            let minTime = self.choiceDate - startDay;
            let maxTime = self.choiceDate + endDay;
            return time.getTime() < minTime || time.getTime() > maxTime;
          }
        },
      },
      disabled:false,
      loading:false,
      days: [], //时间组件默认数组
      total: 0, //分页总条数
      list: [], //主数组
      queryForm: {
        //查询对象
        storeIds: sessionStorage.getItem("parentId"),
        pageSize: 10,
        pageNum: 1,
      },
    };
  },
  methods: {
    exit(){
      let date1 = this.formatTime(this.days[0], "YYYY-MM-DD 00:00:00");
      let date2 = this.formatTime(this.days[1], "YYYY-MM-DD 23:59:59");
      let form = { startDate: date1, endDate: date2 };
      if(this.storeIds){
        form.storeIds = this.storeIds
      }
      exportachi(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);
      })
    },
    async getStore() {
      let params = {
        roleId:JSON.parse(sessionStorage.getItem("userInfo")).roleId
      }
      SysRoleStore(params).then((res) => {
        if (res.code == "000000") {
          this.options = res.pageInfo.list;
        } else {
          this.$alert(res.message, "获取门店信息", {
            confirmButtonText: "确定",
            confirmButtonClass: "confirmbtnFalses",
            type: "warning",
            center: true,
            callback: (action) => {},
          });
        }
      });
    },
    //当前行返回方法
    rowClassName({ row, rowIndex }) {
      row.index = rowIndex;
      row.startDate = this.days[0];
      row.endDate = this.days[1];
    },
    //双击行方法
    confirm(row) {
      console.log("🚀 ~ file: index.vue ~ line 109 ~ confirm ~ row", row)
      row.endDate=this.formatTime(this.days[1], "YYYY-MM-DD 23:59:59")
      this.$refs.detail.show(row);
    },
    //分页方法
    handleSizeChange(val) {
      this.queryForm.pageSize = val;
      this.getData();
    },
    handleCurrentChange(val) {
      this.queryForm.pageNum = val;
      this.getData();
    },
    //获取数据
    async getData() {
      let date1 = this.formatTime(this.days[0], "YYYY-MM-DD 00:00:00");
      let date2 = this.formatTime(this.days[1], "YYYY-MM-DD 23:59:59");
      let form = { startDate: date1, endDate: date2 };
      if(this.storeIds){
        form.storeIds = this.storeIds
      }
      this.loading = true
      this.disabled = true
      departmentPerformance(form).then((res) => {
        this.loading = false
        this.disabled = false
        if (res.code == "000000") {
          this.list = res.rows;
          this.list.forEach((item)=>{
             item.courseTotal=item.courseCash
             item.cashSum = (item.recharge + item.courseSum + item.cashierCash).toFixed(2)*1
             item.cooperationCardAmount = item.cooperationCardAmount?item.cooperationCardAmount.toFixed(2)*1:0
             item.sumTrue = (item.cashSum  - item.cooperationAchi - item.hkCooperationAmount).toFixed(2)*1
             item.sumFalse = (item.cooperationAchi + item.hkCooperationAmount).toFixed(2)*1
          })
        } else {
          this.$alert(res.message, "提示", {
            confirmButtonText: "确定",
            confirmButtonClass: "confirmbtnFalses",
            type: "warning",
            center: true,
            callback: (action) => {},
          });
        }
      }).catch((err) => {
        //console.log(err);
      });
    },
  },
  created() {
    let sDate = this.formatTime(new Date(), "YYYY-MM-DD 00:00:00");
    let eDate = this.formatTime(new Date(), "YYYY-MM-DD 23:59:59");
    this.days = [sDate, eDate];
    this.getData();
    this.getStore()
    let list = JSON.parse(sessionStorage.getItem("list"));
    list.forEach((item) => {
      if (item.id == 4006001) {
      }
    });
  },
};
</script>
<style scoped>
/deep/ .el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: rgba(255,235,181);
}
.el-button {
  margin-bottom: 10px;
}

.el-input {
  width: 200px;
}
</style>
