<template>
  <div class="page">
    <topBar
      v-if="topList.length > 0"
      :topList="topList"
      :moren="moren"
    ></topBar>

    <div class="main">
      <el-table
        :data="tableData"
        style="width: 100%"
        :header-cell-style="{ background: '#EEEEEE' }"
        :row-class-name="tableRowClassName"
      >
        <!-- @selection-change="handleSelectionChange" -->
        <!-- <el-table-column type="selection" width="55"> </el-table-column> -->
        <el-table-column
          align="center"
          prop="memberCode"
          :label="'会员编号'"
          width="200px"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="memberName"
          width="200px"
          :label="'会员姓名'"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="phone"
          width="200px"
          :label="'联系方式'"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="endValidityDate"
          width="200px"
          :label="$t('奖衔有效期')"
        >
          <template slot-scope="scope">
            {{ formatDate(scope.row.endValidityDate) }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="newMemberName"
          width="200px"
          :label="'变更会员姓名'"
        >
          <template slot-scope="scope">
            <el-input disabled v-model="scope.row.newMemberName"></el-input>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="newPhone"
          :label="'变更联系方式'"
          width="200px"
        >
          <template slot-scope="scope">
            <el-input disabled v-model="scope.row.newPhone"></el-input>
          </template>
        </el-table-column>
        <el-table-column
          width="200px"
          align="center"
          prop=""
          :label="'扣款币种'"
        >
          <template slot-scope="scope">
            <el-input disabled v-model="scope.row.pkAccountKeyVal"></el-input>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="singleAmount100"
          label="单笔扣款金额(￥)"
          width="200px"
        ></el-table-column>
        <el-table-column
          fixed="right"
          align="center"
          prop="thedel"
          :label="'操作'"
        >
          <template slot-scope="scope">
            <el-button
              @click="handleDelete(scope.row, scope.$index, tableData)"
              type="text"
              size="small"
              style="color: #c73030"
            >
              {{ '删除' }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-table
        :data="handleBusinessList"
        style="width: 100%"
        :header-cell-style="{ background: '#EEEEEE' }"
        :row-class-name="tableRowClassName"
      >
        <el-table-column
          align="center"
          prop="memberCode"
          label="会员编号"
          width="200px"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="businessTypeVal"
          label="办理业务"
          width="200px"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="newValue"
          label="变更业务"
          width="200px"
        ></el-table-column>
        <el-table-column
          align="center"
          width="200px"
          prop="pkAccountKeyVal"
          :label="'扣款币种'"
        >
          <template slot-scope="scope">
            <el-input disabled v-model="scope.row.pkAccountKeyVal"></el-input>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          width="200px"
          prop="cost"
          label="单笔扣款金额(￥)"
        >
          <template slot-scope="scope">
            <el-input disabled v-model="scope.row.cost"></el-input>
          </template>
        </el-table-column>

        <el-table-column
          align="center"
          prop=""
          label=""
          width="200px"
        ></el-table-column>
        <el-table-column
          align="center"
          prop=""
          label=""
          width="200px"
        ></el-table-column>
        <el-table-column
          fixed="right"
          align="center"
          prop="thedel"
          :label="'操作'"
        >
          <template slot-scope="scope">
            <el-button
              @click="
                handleDelete2(scope.row, scope.$index, handleBusinessList)
              "
              type="text"
              size="small"
              style="color: #c73030"
            >
              {{ '删除' }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- <div v-for="(item, index) in handleBusinessList" :key="index">
        <div class="main_title">
          <div class="bluekuai"></div>
          <div class="title_word">{{ item.businessTypeVal }}</div>
        </div>
        <div class="main_content">
          <el-form ref="form" :model="form" label-width="100px">
            <el-row>
              <el-col :span="4" v-if="item.buttonType == 0">
                <el-form-item
                  class="coloritem"
                  prop=""
                  :label="item.afterTheChange"
                >
                  <el-input disabled v-model="item.newValue"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="4" v-if="item.buttonType == 1">
                <el-form-item class="coloritem" prop="" :label="item.newValue">
                </el-form-item>
              </el-col>
              <el-col :span="4" style="margin-left: 50px">
                <el-form-item prop="" :label="item.deductionCurrency">
                  <el-input disabled v-model="item.pkAccountKeyVal"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div> -->
    </div>
    <div class="footer">
      <div style="margin: 0 auto">
        <!-- <el-button
          v-for="(item, index) in processTypeList"
          :key="index"
          :class="`thebtn${item.value}`"
          @click="saveDate(item.value)"
          >{{ item.label }}</el-button> -->

        <el-button class="thebtn0" @click="saveDate(0)">
          {{ '取消' }}</el-button
        >
        <el-button
          v-hasButtons="['ReviewBusinessExemptSign']"
          class="thebtn1"
          @click="saveDate(1)"
          >{{ '免签' }}</el-button
        >
        <el-button
          v-hasButtons="['ReviewBusinessExemptPay']"
          class="thebtn2"
          @click="saveDate(2)"
          >{{ '免付' }}</el-button
        >
        <el-button
          v-hasButtons="['ReviewBusinessExemptAll']"
          class="thebtn3"
          @click="saveDate(3)"
          >{{ '全免' }}</el-button
        >
        <el-button
          v-hasButtons="['ReviewBusinessConfirm']"
          class="thebtn4"
          @click="saveDate(4)"
        >
          {{ '确认' }}</el-button
        >
      </div>
    </div>
    <el-dialog
      :title="'会员信息错误'"
      :close-on-click-modal="false"
      :visible.sync="errorShow"
      width="600px"
      append-to-body
    >
      <div>
        <el-table
          :data="errorData"
          height="400px"
          style="width: 100%"
          :header-cell-style="{ background: '#EEEEEE' }"
          :row-class-name="tableRowClassName"
        >
          <el-table-column
            align="center"
            prop="memberCode"
            :label="'会员编号'"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="errorMsg"
            :label="'报错信息'"
          >
          </el-table-column>
        </el-table>
      </div>
      <div class="footer" style="text-align: center">
        <div style="margin: 0 auto">
          <el-button class="thebtn" @click="errorShow = false">
            {{ '取消' }}</el-button
          >
          <el-button type="primary" class="thebtn" @click="errorShow = false">
            {{ '确认' }}</el-button
          >
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import topBar from "@/components/topBar";
import {
  saveHandelBusiness,
  getPubEnumsProcessTyepe,
  balanceCheck,
} from "@/api/business.js";
export default {
  name: "Shyw",
  components: {
    topBar,
  },
  data() {
    return {
      moren: "shyw",
      topList: [
        {
          name: '基础业务',
          path: "jcyw",
        },
        {
          name: '订单业务',
          path: "ddyw",
        },
        {
          name: "确认业务",
          path: "shyw",
        },
        {
          name: "在线签呈",
          path: "zxqc",
        },
      ],
      tableData: [],
      processTypeList: [],
      handleBusinessList: [],
      btvo: {},
      errorData: [],
      errorShow: false,
      thedata: {},
    };
  },
  created() {
    this.thedata = JSON.parse(this.$route.query.data);
    console.log("🌈先1", this.thedata);
    this.tableData = this.thedata.businessOldMemberList;
    this.handleBusinessList = this.thedata.handleBusinessList;
    this.getPubEnumsProcessTyepe();
    this.btvo = this.thedata.btvo;
  },
  methods: {
    formatDate(date) {
      if (!date) return "";
      const d = new Date(date);
      if (isNaN(d.getTime())) return "Invalid Date"; // 处理非法日期
      const year = d.getFullYear();
      const month = String(d.getMonth() + 1).padStart(2, "0");
      const day = String(d.getDate()).padStart(2, "0");
      const hours = String(d.getHours()).padStart(2, "0");
      const minutes = String(d.getMinutes()).padStart(2, "0");
      const seconds = String(d.getSeconds()).padStart(2, "0");
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
    //删除页面上当前条
    handleDelete(row, index, rows) {
      this.$confirm('是否删除').then((_) => {
        const delList = [];
        this.tableData.forEach((ele, eindex) => {
          if (row.memberCode == ele.memberCode) {
            delList.push(eindex);
          }
        });
        rows.splice(index, delList.length);
        this.handleBusinessList = this.handleBusinessList.filter(
          (ele) => ele.memberCode !== row.memberCode
        );
        this.thedata.businessMemberList =
          this.thedata.businessMemberList.filter(
            (ele) => ele.memberCode !== row.memberCode
          );
      });
    },
    handleDelete2(row, index, rows) {
      this.$confirm('是否删除').then((_) => {
        const delList2 = [];
        const delList3 = [];
        this.handleBusinessList.forEach((ele, eindex) => {
          if (row.pkId == ele.pkId) {
            delList2.push(eindex);
          }
        });
        this.thedata.businessMemberList.forEach((ele, eindex) => {
          if (row.pkId == ele.pkId) {
            delList3.push(eindex);
          }
        });
        rows.splice(index, delList2.length);
        this.thedata.businessMemberList.splice(index, delList3.length);
      });
    },
    getPubEnumsProcessTyepe() {
      getPubEnumsProcessTyepe().then((res) => {
        this.processTypeList = res.data;
      });
    },

    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 == 1) {
        return "warning-row";
      } else if (rowIndex % 2 == 0) {
        return "success-row";
      }
      return "";
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    saveDate(index) {
      this.thedata.businessOldMemberList = this.tableData;
      this.thedata.handleBusinessList = this.handleBusinessList;
      // console.log('🌈thedata',this.thedata)
      if (this.tableData.length > 0 && this.handleBusinessList.length > 0) {
        if (index == 0) {
          this.$router.go(-1);
        } else if (index == 2 || index == 4) {
          //免付和确认
          if (index == 2) {
            this.$router.push({
              path: "/information/business/zxqc",
              query: {
                data: JSON.stringify(this.thedata),
                index: index,
              },
            });
          } else if (index == 4) {
            //确认需要调校验金额接口
            const thebusinessCostVOList = this.thedata.businessCostVOList;
            balanceCheck({ businessCostVOList: thebusinessCostVOList }).then(
              (res) => {
                if (res.code == 200) {
                  this.$router.push({
                    path: "/information/business/zxqc",
                    query: {
                      data: JSON.stringify(this.thedata),
                      index: index,
                    },
                  });
                } else if (res.code == 504 && res.data) {
                  this.errorShow = true;
                  this.errorData = res.data;
                }
              }
            );
          }
        } else if (index == 1 || index == 3) {
          //免签和全免

          const thehandleBusinessList = this.thedata.handleBusinessList;
          const thebusinessMemberList = this.thedata.businessMemberList;
          const thebusinessCostVOList = this.thedata.businessCostVOList;
          if (index == 1) {
            //免签需要调校验金额接口
            balanceCheck({ businessCostVOList: thebusinessCostVOList }).then(
              (res) => {
                if (res.code == 200) {
                  saveHandelBusiness({
                    processType: index,
                    handleBusinessList: thehandleBusinessList,
                    businessMemberList: thebusinessMemberList,
                  }).then((res) => {
                    this.$message({
                      message: res.msg,
                      type: "success",
                    });
                    this.$router.go(-1);
                  });
                } else if (res.code == 504 && res.data) {
                  this.errorShow = true;
                  this.errorData = res.data;
                }
              }
            );
          } else if (index == 3) {
            saveHandelBusiness({
              processType: index,
              handleBusinessList: thehandleBusinessList,
              businessMemberList: thebusinessMemberList,
            }).then((res) => {
              if (res.code == 200) {
                this.$message({
                  message: res.msg,
                  type: "success",
                });
                this.$router.go(-1);
              } else if (res.code == 504 && res.data) {
                this.errorShow = true;
                this.errorData = res.data;
              }
            });
          }
        }
      } else {
        this.$message({
          message: "业务不能为空",
          type: "warning",
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-form-item {
  margin-bottom: 10px;
}
::v-deep .el-table .warning-row {
  background: #f9f9f9;
}

::v-deep .el-table .success-row {
  background: #ffffff;
}
::v-deep .el-table thead {
  color: #000000;
}

::v-deep .coloritem .el-form-item__label {
  color: #0c8ce9;
}
.page {
  padding: 20px;
  background: #f9f9f9;
  font-size: 14px;
  .footer {
    height: 68px;
    background: #ffffff;
    box-shadow: 0px -3px 20px 0px rgba(204, 204, 204, 0.5);
    // margin: 0 20px;
    display: flex;
    justify-content: center;
    align-items: center;

    padding: 15px 0;

    .thebtn0 {
      width: 120px;
      height: 38px;
    }
    .thebtn1 {
      width: 120px;
      height: 38px;
      background: rgba(0, 155, 88, 1);
      color: #ffffff;
      border: none;
    }
    .thebtn2 {
      width: 120px;
      height: 38px;
      background: rgba(243, 169, 0, 1);
      border: none;
      color: #ffffff;
    }
    .thebtn3 {
      width: 120px;
      height: 38px;
      border: none;
      color: #ffffff;
      background: rgba(228, 27, 27, 1);
    }
    .thebtn4 {
      width: 120px;
      height: 38px;
      border: none;
      color: #ffffff;
      background: rgba(72, 178, 253, 1);
    }
    .thebtn {
      width: 120px;
      height: 38px;
      border: none;
      color: #ffffff;
      background: rgba(204, 204, 204, 1);
    }
  }

  .main {
    margin-top: 20px;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0px 2px 20px 0px rgba(238, 238, 238, 0.5);
    .main_title {
      display: flex;
      align-items: center;
      padding: 10px 0;
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
      .bluekuai {
        width: 5px;
        height: 19px;
        background: #4391fd;
        margin-right: 20px;
      }
      .title_word {
        font-size: 14px;
        font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
        font-weight: bold;
        color: #333333;
      }
    }
    .main_content {
      padding: 20px 25px;
    }

    .maintop {
      display: flex;
      padding: 10px 20px;
      justify-content: space-between;
      align-items: center;
      .mainbtn {
        .thebtn1 {
          color: #ffffff;

          background: #ec6c00;
        }
        .thebtn2 {
          color: #ffffff;

          background: #009b58;
        }
        .thebtn3 {
          color: #ffffff;

          background: #e41b1b;
        }
        .thebtn4 {
          color: #ffffff;
          background: #53b11e;
        }
      }
    }
  }
}
</style>
