<template>
  <el-dialog :close-on-click-modal="false" v-dialogDrag append-to-body :visible.sync="dialogVisible" :title="title" width="80%" :before-close="handleClose">
    <div class="detailDivFrom">
      <el-form :model="form" :inline="true" label-width="80px">
        <el-form-item label="单 号:">
          <div class="activeFormDiv">
            {{ form.cashNum }}
          </div>
        </el-form-item>
        <el-form-item label="时 间:">
          <div class="activeFormDiv" style="width: 150px">
            {{ form.cashDate }}
          </div>
        </el-form-item>
        <el-form-item label="名 字:">
          <div class="activeFormDiv">
            {{ form.memberName }}
          </div>
        </el-form-item>
        <el-form-item label="手机号码:">
          <div class="activeFormDiv">
            {{ form.mobilePhone }}
          </div>
        </el-form-item>
        <el-form-item label="补单日期:" v-show="form.isAddition == 1">
          <div class="activeFormDiv">
            {{ form.additionDate }}
          </div>
        </el-form-item>
      </el-form>
      <div class="flex justify-start align-start" style="width:100%">
        <div class="into-table-width">
          <el-table :data="list" ref="list" @row-click="rowClick" max-height="450" row-key="index">
            <el-table-column type="expand">
              <template slot-scope="props">
                <div class="flex justify-start align-center  flex-wrap">
                  <el-form inline class="margin-top">
                    <el-form-item label='美发师'>
                      <div class="flex align-center form-width-m">
                        <el-select filterable default-first-option v-model="props.row.zhonggongLists" clearable @clear="clear(props.row,'zhonggongList')" placeholder="请选择" @change="handleChange($event,props.row,'zhonggongList')">
                          <el-option v-for="(item,index) in options" :key="index" :label="item.label" :value="item.id">
                          </el-option>
                        </el-select>
                        <div class="el-icon-edit-outline text-xs text-cyan" @click.stop="openStaffRatio(props.row,props.$index,'zhonggongList')"></div>
                      </div>
                    </el-form-item>
                    <el-form-item label='美容师'>
                      <div class="flex align-center form-width-m">
                        <el-select filterable default-first-option v-model="props.row.largeLists" clearable @clear="clear(props.row,'largeList')" placeholder="请选择" @change="handleChange($event,props.row,'largeList')">
                          <el-option v-for="(item,index) in options" :key="index" :label="item.label" :value="item.id">
                          </el-option>
                        </el-select>
                        <div class="el-icon-edit-outline text-xs text-cyan" @click.stop="openStaffRatio(props.row,props.$index,'largeList')"></div>
                      </div>
                    </el-form-item>
                    <el-form-item label='技师'>
                      <div class="flex align-center form-width-m">
                        <el-select filterable default-first-option v-model="props.row.technicianLists" clearable @clear="clear(props.row,'technicianList')" placeholder="请选择" @change="handleChange($event,props.row,'technicianList')">
                          <el-option v-for="(item,index) in options" :key="index" :label="item.label" :value="item.id">
                          </el-option>
                        </el-select>
                        <div class="el-icon-edit-outline text-xs text-cyan" @click.stop="openStaffRatio(props.row,props.$index,'technicianList')"></div>
                      </div>
                    </el-form-item>
                    <el-form-item label='助理'>
                      <div class="flex align-center form-width-m">
                        <el-select filterable default-first-option v-model="props.row.smallLists" clearable @clear="clear(props.row,'smallList')" placeholder="请选择" @change="handleChange($event,props.row,'smallList')">
                          <el-option v-for="(item,index) in options" :key="index" :label="item.label" :value="item.id">
                          </el-option>
                        </el-select>
                        <div class="el-icon-edit-outline text-xs text-cyan" @click.stop="openStaffRatio(props.row,props.$index,'smallList')"></div>
                      </div>
                    </el-form-item>
                    <el-form-item label='高管'>
                      <div class="flex align-center form-width-m">
                        <el-select filterable default-first-option v-model="props.row.managerLists" clearable @clear="clear(props.row,'managerList')" placeholder="请选择" @change="handleChange($event,props.row,'managerList')">
                          <el-option v-for="(item,index) in managerOptions" :key="index" :label="item.label" :value="item.id">
                          </el-option>
                        </el-select>
                        <div class="el-icon-edit-outline text-xs text-cyan" @click.stop="openStaffRatio(props.row,props.$index,'managerList')"></div>
                      </div>
                    </el-form-item>
                    <el-form-item label='管理层'>
                      <div class="flex align-center form-width-m">
                        <el-select filterable default-first-option v-model="props.row.adminLists" clearable @clear="clear(props.row,'adminList')" placeholder="请选择" @change="handleChange($event,props.row,'adminList')">
                          <el-option v-for="(item,index) in adminOptions" :key="index" :label="item.label" :value="item.id">
                          </el-option>
                        </el-select>
                        <div class="el-icon-edit-outline text-xs text-cyan" @click.stop="openStaffRatio(props.row,props.$index,'adminList')"></div>
                      </div>
                    </el-form-item>
                  </el-form>
                  <div class="border-radius-10 border margin-left-xs  bg-white padding-xs" style="width:700px" v-if="props.row.rechargeConsumeList.length!=0">
                    <el-table :data="props.row.rechargeConsumeList" @row-click="rowClick" :summary-method="getSummaries" show-summary max-height="350">
                      <el-table-column align="center" prop="rechargeTypeName" label="卡付名称" min-width="130"></el-table-column>
                      <el-table-column align="center" prop="cardRestMoney" label="剩余金额" width="100"></el-table-column>
                      <el-table-column align="center" prop="spendMoney" label="本次支付" width="100"></el-table-column>
                      <el-table-column align="center" prop="discoutMoney" label="抵扣支付" width="90"></el-table-column>
                      <el-table-column align="center" prop="cardGiftMoney" label="剩余赠送" width="100"></el-table-column>
                      <el-table-column align="center" prop="accountGiftSpendMoney" label="赠送支付" width="100"></el-table-column>
                    </el-table>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column show-overflow-tooltip min-width="100" align="center" prop="projectNum" label="项目编码"></el-table-column>
            <el-table-column show-overflow-tooltip min-width="120" align="center" prop="projectName" label="项目名称"></el-table-column>
            <el-table-column show-overflow-tooltip min-width="100" align="center" prop="transactionPrice" label="项目金额"></el-table-column>
            <el-table-column show-overflow-tooltip min-width="100" align="center" prop="" label="支付类型">
              <template slot-scope="scope">
                <el-tooltip v-if="scope.row.courseAccountId!=null" class="item" effect="dark" content="疗程付" placement="top">
                  <div>{{scope.row.courseAccountId!=null?'疗程付':'卡付/现付'}}</div>
                </el-tooltip>
                <el-tooltip class="item" effect="dark" :content="scope.row.rechargeConsumeLists" placement="top" v-else-if="scope.row.rechargeConsumeList.length!=0">
                  <span>卡付</span>
                </el-tooltip>
                <div v-else>现付</div>
              </template>
            </el-table-column>
            <el-table-column show-overflow-tooltip min-width="100" align="center" prop="" label="实付金额">
              <template slot-scope="scope">
                <el-tooltip v-if="scope.row.courseAccountId!=null" class="item" effect="dark" content="疗程付" placement="top">
                  <div>{{scope.row.courseAccountId!=null?scope.row.transactionPrice:scope.row.collectionRechargeAmount+scope.row.collectionCashAmount}}</div>
                </el-tooltip>
                <el-tooltip v-else class="item" effect="dark" content="" placement="top">
                  <div>{{scope.row.courseAccountId!=null?scope.row.transactionPrice:scope.row.collectionRechargeAmount+scope.row.collectionCashAmount}}</div>
                </el-tooltip>
              </template>
            </el-table-column>
            <!-- <el-table-column show-overflow-tooltip min-width="100" align="center" prop="collectionAmount" label="实付金额"></el-table-column> -->
            <el-table-column show-overflow-tooltip min-width="75" align="center" prop="collectionRechargeAmount" label="卡付金额"></el-table-column>
            <el-table-column show-overflow-tooltip min-width="75" align="center" prop="collectionCashAmount" label="现付金额"></el-table-column>
            <el-table-column show-overflow-tooltip min-width="75" align="center" prop="collectionAmount" label="性别">
              <template slot-scope="scope">
                <div>{{scope.row.sex*1==0?'男':'女'}}</div>
              </template>
            </el-table-column>
            <el-table-column show-overflow-tooltip min-width="100" align="center" prop="remark" label="备注"></el-table-column>

          </el-table>
        </div>
        <div class=' border-radius-10 border margin-left-xs  bg-white padding-xs' style="width:280px" v-if="list.length!=0">
          <el-table :data="form.payLists" :summary-method="getSummaries" show-summary>
            <el-table-column align="center" prop="payName" min-width="100" label="支付方式"></el-table-column>
            <el-table-column align="center" prop="payMoney" min-width="80" label="本次支付"></el-table-column>
          </el-table>
        </div>
      </div>
      <staffratio ref="staffratio" @staffratioData="staffratioData"></staffratio>
    </div>
    <div slot="footer" class="dialog-footer" v-if="title=='明细'">
      <el-button type="primary" plain size="mini" @click="dialogVisible = false">关闭</el-button>
    </div>
    <div slot="footer" class="dialog-footer" v-else>
      <el-button type="primary" plain size="mini" @click="handleClose">取消</el-button>
      <el-button :disabled="form.isCancel==1" type="primary" size="mini" @click="confirm()">{{title=='作废'?title:"确定"}}</el-button>
    </div>
  </el-dialog>
</template>
<script>
import {
  selectList,
  cashcancel,
  cashEditStaff,
  QuerCompetent,
  selectListType,
  selectOne,
} from "@/api/eashier.js";
import staffratio from "../staffratio";
export default {
  components: { staffratio },
  data() {
    return {
      form: {}, //主对象
      list: [], //主数组
      dialogVisible: false, //弹窗开关
      title: "", //弹窗标题
      options: [],
      editIndex: -1,
      adminOptions: [],
      managerOptions: [],
      expand: [],
    };
  },
  methods: {
    //关闭弹窗前的回调方法
    handleClose() {
      console.log(123);
      Object.assign(this.$data, this.$options.data.call(this));
      this.form = {};
      this.list = [];
      this.dialogVisible = false;
      this.$emit("editformData");
    },
    clear(row, text) {
      console.log(row);
      console.log(text);
      let form = { ...row };
      form[text] = [];
      console.log(form);
      this.list.splice(row.index, 1, form);
    },
    openStaffRatio(row, index, text) {
      this.editIndex = index;
      this.$refs.staffratio.show(row, text);
    },
    staffratioData(v) {
      let form = this.list[this.editIndex];
      let texts = v.text + "s";
      form[v.text] = v.list;
      form[texts] = v.list[0].label;
      this.list.splice(this.editIndex, 1, form);
    },
    handleChange(data, row, text) {
      let form = { ...row };
      console.log(data);

      if (text == "managerList") {
        console.log(this.managerOptions);
        this.managerOptions.forEach((item, index) => {
          if (item.id == data) {
            item.ratio = 100;
            form[text] = [];
            form[text].push(item);
            form.texts = item.label;
          }
        });
      } else if (text == "adminList") {
        this.adminOptions.forEach((item, index) => {
          if (item.id == data) {
            item.ratio = 100;
            form[text] = [];
            form[text].push(item);
            form.texts = item.label;
          }
        });
      } else {
        this.options.forEach((item, index) => {
          if (item.id == data) {
            item.ratio = 100;
            form[text] = [];
            form[text].push(item);
            form.texts = item.label;
          }
        });
      }
      console.log(form);
      this.list.splice(row.index, 1, form);
      // this.$refs.list.toggleRowExpansion(row);
    },
    //点击选中
    rowClick(row) {
      this.$refs.list.toggleRowExpansion(row);
    },
    //组件传值
    show(form, title) {
      Object.assign(this.$data, this.$options.data.call(this));
      console.log(form);
      this.title = title;
      this.list = [];
      this.form = { ...form };
      this.list = form.projectList;
      console.log("🚀 ~ file: editform.vue ~ line 253 ~ show ~ this.list", this.list)
    
      this.list.forEach((item, index) => {
        item.collectionAmount= item.collectionRechargeAmount*1+item.collectionCashAmount*1


        item.rechargeConsumeList.forEach((items) => {
          items.cardOver = items.cardConsumeMoney;
          items.cardGiftOver = items.giftConsumeMoney;
          if (items.type == 1) {
            items.discoutMoney =
              (items.spendMoney / (items.discount / 100)).toFixed(2) * 1;
          } else {
            items.discoutMoney = items.spendMoney;
          }
          if (item.rechargeConsumeList.length != 0) {
            item.rechargeConsumeLists =
              "卡付: " + items.rechargeTypeName + " - " + items.spendMoney;
          } else {
            item.rechargeConsumeLists = "无卡付";
          }
        });
        item.payLists.forEach((items) => {
          if (item.payLists.length != 0) {
            item.payListss = "现付 :" + items.payName + " - " + items.payMoney;
          } else {
            item.payListss = "无现付";
          }
        });

        item.index = index;

        if (item.largeList.length != 0) {
          item.largeLists =
            item.largeList[0].brandNumber + "-" + item.largeList[0].staffName;
        } else {
          item.largeLists = "";
        }
        if (item.zhonggongList.length != 0) {
          item.zhonggongLists =
            item.zhonggongList[0].brandNumber +
            "-" +
            item.zhonggongList[0].staffName;
        } else {
          item.zhonggongLists = "";
        }
        if (item.smallList.length != 0) {
          item.smallLists =
            item.smallList[0].brandNumber + "-" + item.smallList[0].staffName;
        } else {
          item.smallLists = "";
        }
        if (item.technicianList.length != 0) {
          item.technicianLists =
            item.technicianList[0].brandNumber +
            "-" +
            item.technicianList[0].staffName;
        } else {
          item.technicianLists = "";
        }

        selectOne({ type: 1, orderId: item.cashId }).then((res) => {
          if (res.code == "000000") {
            let managerList = [];
            let adminList = [];
            res.rows.forEach((item) => {
              if (item.staffType == 0) {
                item.staffNames = item.brandNumber + "--" + item.staffName;
                managerList.push(item);
              }
              if (item.staffType == 1) {
                item.staffNames = item.brandNumber + "--" + item.staffName;
                adminList.push(item);
              }
            });
            if (managerList.length == 0) {
              managerList.push({ ratio: 100 });
            }
            if (adminList.length == 0) {
              adminList.push({ ratio: 100 });
            }

            item.managerList = managerList;
            item.adminList = adminList;

            adminList.forEach((items, index) => {
              if (items.id) {
                if (index == 0) {
                  item.adminLists = items.brandNumber + "-" + items.staffName;
                }
              } else {
                item.adminLists = "";
              }
            });
            managerList.forEach((items, index) => {
              if (items.id) {
                if (index == 0) {
                  item.managerLists = items.brandNumber + "-" + items.staffName;
                }
              } else {
                item.managerLists = "";
              }
            });
          } else {
            this.$alert(res.message, "加载门店高管", {
              confirmButtonText: "确定",
              confirmButtonClass: "confirmbtnFalses",
              type: "warning",
              center: true,
              callback: (action) => {},
            });
          }
        });
      });
      this.dialogVisible = true;
      this.getData();
    },
    //获取数据
    async getData() {
      selectListType({ type: 0, storeId: this.form.storeId }).then((res) => {
        if (res.code == "000000") {
          res.rows.forEach((item) => {
            delete item.state;
            item.label = item.brandNumber + "-" + item.staffName;
            item.ratio = 100;
          });
          this.adminOptions = res.rows;
        } else {
          this.$alert(res.message, "加载员工提示", {
            confirmButtonText: "确定",
            confirmButtonClass: "confirmbtnFalses",
            type: "warning",
            center: true,
            callback: (action) => {},
          });
        }
      });
      QuerCompetent({
        type: 0,
        pageSize: 999,
        storeId: this.form.storeId,
      }).then((res) => {
        if (res.code == "000000") {
          res.pageInfo.list.forEach((item) => {
            delete item.state;
            item.label = item.brandNumber + "-" + item.staffName;
            item.ratio = 100;
          });
          this.managerOptions = res.pageInfo.list;
          console.log(this.managerOptions);
        } else {
          this.$alert(res.message, "加载高管提示", {
            confirmButtonText: "确定",
            confirmButtonClass: "confirmbtnFalses",
            type: "warning",
            center: true,
            callback: (action) => {},
          });
        }
      });
      selectList({ storeId: this.form.storeId }).then((res) => {
        if (res.code == "000000") {
          res.rows.forEach((item) => {
            delete item.state;
            item.label = item.brandNumber + "-" + item.staffName;
            item.ratio = 100;
          });
          this.options = Array.from(new Set(res.rows));
        } else {
          this.$alert(res.message, "加载员工列表", {
            confirmButtonText: "确定",
            confirmButtonClass: "confirmbtnFalses",
            type: "warning",
            center: true,
            callback: (action) => {},
          });
        }
      });
    },
    //确定返回方法
    confirm() {
      if (this.title == "作废") {
        var list = [];
        this.list.forEach((item) => {
          if (item.payLists != []) {
            item.payLists.forEach((items) => {
              delete items.docId;
              delete items.id;
              delete items.type;
            });
          }
          var items = {
            projectId: item.id,
            id: item.cashId,
            memberId: item.memberId,
            memberName: item.memberName,
            courseAccountId: item.courseAccountId,
            mobilePhone: item.mobilePhone,
            menberIdentityCard: item.menberIdentityCard,
            cashNum: item.cashNum,
            cashDate: item.cashDate,
            storeId: item.storeId,
            numberTimes: 1,
            storeName: item.storeName,
            projectName: item.projectName,
            transactionPrice: item.transactionPrice,
            payLists: item.payLists,
            rechargeAccountList: item.rechargeConsumeList,
            collectionCashAmount: item.collectionCashAmount,
            largeList: item.largeList,
            zhonggongList: item.zhonggongList,
            smallList: item.smallList,
            technicianList: item.technicianList,
          };
          list.push(items);
        });
        cashcancel(list).then((res) => {
          if (res.code == "000000") {
            this.$message.success({
              message: res.message,
            });
            this.dialogVisible = false;
            this.$emit("editformData");
          } else {
            this.$alert(res.message, "提示", {
              confirmButtonText: "确定",
              confirmButtonClass: "confirmbtnFalses",
              type: "warning",
              center: true,
              callback: (action) => {},
            });
          }
        });
      } else {
        var list = [];
        this.list.forEach((item) => {
          delete item.index;
          let salesmens = [];
          console.log(item);
          item.managerList.forEach((items) => {
            if (items.id) {
              items.staffType = 0;
              salesmens.push(items);
            }
          });
          item.adminList.forEach((items) => {
            if (items.id) {
              items.staffType = 1;
              salesmens.push(items);
            }
          });
          item.salesmens = salesmens;
          var item2 = {
            salesmens: item.salesmens,
            id: item.cashId,
            projectId: item.id,
            cashDate: item.cashDate,
            largeList: item.largeList,
            zhonggongList: item.zhonggongList,
            smallList: item.smallList,
            technicianList: item.technicianList,
            courseAccountId: item.courseAccountId,
            salesAchievement: item.salesAchievement,
            salesCommission: item.salesCommission,
            cardSalesAchievement: item.cardSalesAchievement,
            cardSalesCommission: item.cardSalesCommission,
            achievementLarge: item.achievementLarge,
            achievementZhonggong: item.achievementZhonggong,
            achievementTechnician: item.achievementTechnician,
            achievementSmall: item.achievementSmall,
            commissionLarge: item.commissionLarge,
            commissionZhonggong: item.commissionZhonggong,
            commissionTechnician: item.commissionTechnician,
            commissionSmall: item.commissionSmall,
            cardAchievementLarge: item.cardAchievementLarge,
            cardAchievementZhonggong: item.cardAchievementZhonggong,
            cardAchievementTechnician: item.cardAchievementTechnician,
            cardAchievementSmall: item.cardAchievementSmall,
            cardCommissionLarge: item.cardCommissionLarge,
            cardCommissionZhonggong: item.cardCommissionZhonggong,
            cardCommissionZhonggong: item.cardCommissionZhonggong,
            cardCommissionTechnician: item.cardCommissionTechnician,
            cardCommissionSmall: item.cardCommissionSmall,
            courseAccountId: item.courseAccountId,
            payLists: item.payLists,
            storeId: item.storeId,
            rechargeAccountList: item.rechargeConsumeList,
            amount: item.amount,
            cashAmount: item.cashAmount,
            collectionIntegralAmount: item.collectionIntegralAmount,
            collectionCashAmount: item.collectionCashAmount,
            collectionRechargeAmount: item.collectionRechargeAmount,
          };
          list.push(item2);
        });

        cashEditStaff(list).then((res) => {
          if (res.code == "000000") {
            this.$message.success({
              message: res.message,
            });
            this.dialogVisible = false;
            this.$emit("editformData");
          } else {
            this.$alert(res.message, "提示", {
              confirmButtonText: "确定",
              confirmButtonClass: "confirmbtnFalses",
              type: "warning",
              center: true,
              callback: (action) => {},
            });
          }
        });
      }
    },

    //数组按对应字段合计返回方法
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "合计";
          return;
        }
        const values = data.map((item) => Number(item[column.property]));
        if (column.property == "discoutMoney") {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              sums[index] = "--";
            }
          }, 0);
          sums[index] += " ";
        } else if (column.property == "spendMoney") {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              sums[index] = "--";
            }
          }, 0);
          sums[index] += " ";
        } else if (column.property == "payMoney") {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              sums[index] = "--";
            }
          }, 0);
          sums[index] += " ";
        } else {
          sums[index] = "--";
        }
      });
      return sums;
    },
  },
};
</script>

<style>
</style>
