<template>
  <el-dialog
    :title="'政策币业务'"
    :visible.sync="isDelete"
    width="80%"
    :before-close="handleClose"
    center
  >
    <div class="">
      <div class="">
        <div class="kuang">
          <el-table
            :data="tableData"
            style="width: 100%"
            :header-cell-style="{ background: '#EEEEEE' }"
            :row-class-name="tableRowClassName"
          >
            <el-table-column
              align="center"
              prop="memberCode"
              :label="'会员编号'"
              width="240"
            />
            <el-table-column
              align="center"
              prop="memberName"
              :label="'会员姓名'"
              width="240"
            />
            <el-table-column
              align="center"
              width="240"
              prop="enableStatus"
              label="政策币启用"
            >
              <template slot-scope="scope">
                <el-select
                  v-model="scope.row.enableStatus"
                  style="width: 150px"
                  clearable
                  disabled
                >
                  <el-option
                    v-for="item in getStatusList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              width="240"
              prop="deductMoney"
              label="政策币扣除比例"
            >
              <template slot-scope="scope">
                <div style="width: 150px; position: relative; margin: 0 auto">
                  <el-input
                    disabled
                    v-model="scope.row.deductMoney"
                    style="width: 150px; position: relative"
                    clearable
                  />
                  <div class="unit">%</div>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              width="240"
              prop="transfer"
              label="政策币转账"
            >
              <template slot-scope="scope">
                <el-select
                  v-model="scope.row.transfer"
                  style="width: 150px"
                  clearable
                  disabled
                >
                  <el-option
                    v-for="item in agreeList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              prop="pkAccountKeyVal"
              :label="'扣款币种'"
            />

            <el-table-column
              align="center"
              width="140"
              prop="cost"
              :label="'单笔扣款金额' + '(¥)'"
            />
          </el-table>
        </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
          >
        </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>
  </el-dialog>
</template>
  
  <script>
import * as api from "@/api/specialBusiness";
import { getPubEnumsProcessTyepe, upPolicyCurrency } from "@/api/business.js";
import { getEnableStatus } from "@/api/configManage";
import { Message } from "element-ui";
import { noticePopup } from "@/api/notice";

export default {
  data() {
    return {
      errorData: [],
      errorShow: false,
      queryParams: {
        pageNum: 1,
        pageSize: 50,
      },
      total: 0,
      tableData: [],
      processTypeList: [],
      getStatusList: [],
      agreeList: [], // 是否允许
    };
  },
  props: {
    isDelete: {
      type: Boolean,
      default: false,
    },
    delList: {
      type: Array,
      default: null,
    },
  },
  watch: {
    delList(newVlaue) {
      this.tableData = newVlaue;
    },
  },
  mounted() {
    // this.select.addAwards = this.$route.query.addAwards
    // if (this.select.addAwards == 1 || this.select.addAwards == 2) {
    //   this.tableData = JSON.parse(this.$route.query.tableData)
    // }
    this.getOthers();
    this.getData();
  },
  methods: {
    handleClose() {
      this.$emit("handleClose2");
    },
    getOthers() {
      getEnableStatus().then((res) => {
        this.getStatusList = res.data;
      });
      noticePopup().then((res) => {
        this.agreeList = res.data;
      });
      getPubEnumsProcessTyepe().then((res) => {
        this.processTypeList = res.data;
      });
    },

    getData() {
      this.tableData = this.delList;
    },
    saveDate(index) {
      if (index == 0) {
        // this.$router.go(-1)
        this.handleClose();
      }
      if (index != 0) {
        if (this.tableData.length == 0) {
          Message({
            message: "内容不能为空",
            type: "warning",
          });
          return;
        }

        let theIdList = this.tableData.map((item) => {
          return item.pkId;
        });
        let theIdStr = theIdList.join();
        let list = {
          processType: index,
          pkIdStr: theIdStr,
          signType: 1,
          remark: "",
          fileList: [],
          userIdList: [],
        };
        if (index == 1 || index == 3) {
          // this.getData()

          api.delPolicyPetition(list).then((res) => {
            if (res.code == 200) {
              this.handleClose();
              setTimeout(() => {
                this.$emit("getMemberList");
              }, 100);
            } else if (res.code == 504) {
              this.errorShow = true;
              this.errorData = res.data;
            }
          });
        }

        if (index == 2 || index == 4) {
          this.tableData.forEach((item) => {
            item.enableStatusVal =
              item.enableStatus == 0
                ? '已启用'
                : '已禁用';
            item.transferVal =
              item.transfer == 1
                ? '允许'
                : '禁止';
          });
          this.$router.push({
            name: "DelPolicyQc",
            query: {
              data: JSON.stringify(this.tableData),
              businessType: 126,
              index: index,
            },
          });
        }
        // upPolicyCurrency(list).then((res) => {
        //   if (res.code == 200) {

        //   } else if (res.code == 504 && res.data) {
        //     this.errorShow = true;
        //     this.errorData = res.data;
        //   }
        // });
      }
    },

    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 == 1) {
        return "warning-row";
      } else if (rowIndex % 2 == 0) {
        return "success-row";
      }
      return "";
    },
  },
};
</script>
  
  <style lang="scss" scoped>
.width-s {
  width: 160px;
}
.widht-s {
  width: 210px !important;
}
.unit {
  position: absolute;
  right: 10px;
  top: 5px;
  color: #999;
}
.lefts {
}
.rights {
}
::v-deep .el-input__suffix {
  //top: 5px;
}
.page {
  padding: 20px;
  background: #f9f9f9;
  font-size: 14px;
  .main {
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0px 2px 20px 0px rgba(238, 238, 238, 0.5);
    padding: 10px;
  }
  ::v-deep .el-select {
    width: 100%;
  }
}
.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;
  .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);
  }
}
.searchbtn {
  background: #c8161d;
  color: #fff;
}
.kuang {
  border-radius: 8px 8px 8px 8px;
  border: 1px solid #cccccc;
  padding: 10px 0;
  margin-top: 10px;
}
.plList {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  .pl_i {
    width: 140px;
    text-align: center;
    padding: 0 10px;
  }
  .pl_ii {
    width: 215px;
    display: flex;
    justify-content: center;
    .cz {
      margin-left: 10px;
    }
  }
}
::v-deep .el-table thead {
  color: #000000;
}
</style>
  