<template>
  <view class="contain">
    <view class="kuang">
      <table class="tftable" border="2">
        <tr>
          <td colspan="4">
            <view class="tab_t">
              <view>{{ '编号' }} :{{ qcData.approvalCode }}</view>
              <view>
                <u-radio-group
                  v-model="memberPetitionVo.signType"
                  placement="row"
                >
                  <u-radio
                    :customStyle="{ marginRight: '10rpx' }"
                    v-for="(item, index) in checkList"
                    :key="index"
                    :label="item.label"
                    :name="item.value"
                  >
                  </u-radio>
                </u-radio-group>
              </view>
            </view>
          </td>
        </tr>
        <tr>
          <td align="center" width="20%">{{ '发起部门' }}</td>
          <td align="center" width="30%">{{ qcData.deptName }}</td>
          <td align="center" width="20%">{{ '发起人' }}</td>
          <td align="center" width="30%">{{ qcData.userName }}</td>
        </tr>
        <tr>
          <td align="center" width="20%">{{ '主旨' }}</td>
          <td align="center" width="30%">
            {{ qcData.approvalBusinessVal }}{{ qcData.controlTypeVal || "" }}
          </td>
          <td align="center" width="20%">{{ '日期' }}</td>
          <td align="center" width="30%">{{ qcData.creationTime }}</td>
        </tr>
        <tr>
          <td align="center" width="20%">{{ '审批流程' }}</td>
          <!-- <td colspan="3">
            <span
              style="margin-left: 20rpx"
              v-for="(item, index) in qcData.detailList"
              :key="index"
              >{{ item.approver }}({{ item.approverDept }})</span
            >
          </td> -->
          <td colspan="3">
            <view class="disFlex">
              <view
                v-for="(ctem, cndex) in memberPetitionVo.userIdList"
                :key="cndex"
                class="disFlex_i"
              >
                <picker
                  :range="approbalList"
                  range-key="nickName"
                  @change="bindPickerChange1($event, cndex)"
                >
                  <u--input
                    fontSize="12"
                    disabled
                    disabledColor="#ffffff"
                    v-model="ctem.pkApproverVal"
                    suffixIcon="arrow-down"
                    suffixIconStyle="font-size: 12px;"
                  ></u--input>
                </picker>
              </view>
              <view class="disFlex1">
                <u-icon
                  @click="delData"
                  v-show="memberPetitionVo.userIdList.length > 0"
                  name="minus-circle"
                  size="18"
                ></u-icon>
                <u-icon @click="addData" name="plus-circle" size="18"></u-icon>
              </view>
            </view>
          </td>
        </tr>
        <tr>
          <td align="center" width="20%">{{ '抄送人' }}</td>
          <td colspan="3">
            <view class="disFlex">
              <view
                v-for="(ctem, cndex) in memberPetitionVo.sendIdList"
                :key="cndex"
                class="disFlex_i"
              >
                <picker
                  :range="userAllList"
                  range-key="nickName"
                  @change="bindPickerChange2($event, cndex)"
                >
                  <u--input
                    fontSize="12"
                    disabled
                    disabledColor="#ffffff"
                    v-model="ctem.pkSendVal"
                    suffixIcon="arrow-down"
                    suffixIconStyle="font-size: 12px;"
                  ></u--input>
                </picker>
              </view>
              <view class="disFlex1">
                <u-icon
                  @click="delData1"
                  v-show="memberPetitionVo.sendIdList.length > 0"
                  name="minus-circle"
                  size="18"
                ></u-icon>
                <u-icon @click="addData1" name="plus-circle" size="18"></u-icon>
              </view>
            </view>
          </td>
          <!-- <td colspan="3">
            <span
              style="margin-left: 20rpx"
              v-for="(item, index) in qcData.sendList"
              :key="index"
              >{{ item.send }}({{ item.sendDept }})</span
            >
          </td> -->
        </tr>
        <tr>
          <td align="center" style="height: 130px" width="20%">
            {{ '情况说明' }}
          </td>
          <td colspan="3">
            <view class="bigk">
              <u--textarea
                v-model="memberPetitionVo.remark"
                :placeholder="'请输入'"
              ></u--textarea>
            </view>
          </td>
        </tr>
        <tr>
          <td align="center" style="height: 130px" width="20%">
            {{ '业务诉求' }}
          </td>
          <td colspan="3">
            <view class="bigk">
              <view
                v-for="(item, index) in memberPetitionVo.detailParams"
                :key="index"
              >
                <!-- <view class="hui">{{ item.label }}</view> -->
                <view>
                  <view>
                    <span class="hui">{{ '会员编号' }}:</span
                    >{{ item.memberCode }}
                  </view>
                  <view>
                    <span class="hui">{{ '会员姓名' }}:</span
                    >{{ item.memberName }}
                  </view>
                  <view>
                    <span class="hui">{{ '交款方式' }}:</span
                    >{{ item.paymentMethodName }}
                  </view>
                  <view
                    v-for="(aitem, aindex) in enumsAccountList"
                    :key="aindex"
                  >
                    <span class="hui">{{ aitem.pkTransactionKeyVal }}:</span>
                    {{ item.rechargeDetailMap[`${aitem.pkId}`] }}
                  </view>
                  <view>
                    <span class="hui">{{ '备注(前台)' }}:</span
                    >{{ item.memberRemarks }}
                  </view>
                  <view>
                    <span class="hui">{{ '备注(后台)' }}:</span
                    >{{ item.remarks }}
                  </view>
                  <!-- <div>
                    <span class="hui">{{ '收货电话' }}:</span
                    >{{ ctem.oldItemDz.recPhone }}
                  </div>
                  <div>
                    <span class="hui">{{ '收货地址' }}:</span
                    >{{ ctem.oldItemDz.nameList
                    }}{{ ctem.oldItemDz.recAddress }}
                  </div> -->
                </view>
              </view>
            </view>
          </td>
        </tr>

        <!-- <tr v-for="(item, index) in qcData.detailList" :key="index">
          <td align="center" style="height: 108px">
            {{ item.approverDept }}
          </td>
          <td colspan="3" style="padding: 0 20rpx">
            <u--textarea
              v-model="remark"
              :placeholder="'请输入'"
            ></u--textarea>
            <div class="spbox" v-if="item.status > 0">
              <div class="spbox1">审批人:{{ item.approver }}</div>
              <div class="spbox1">
                <span>审批状态：</span>
                <span>
                  <u-radio-group v-model="item.status" placement="row">
                    <u-radio
                      :customStyle="{ marginRight: '10rpx' }"
                      v-for="(item, index) in ywsqList"
                      :key="index"
                      disabled
                      :label="item.label"
                      :name="item.value"
                    >
                    </u-radio>
                  </u-radio-group>
                </span>
              </div>
              <div class="spbox1">
                {{ '日期' }} :：{{ item.approverTime }}
              </div>
            </div>
            <div class="spbox1">
              <span>审批状态：</span>
              <span>
                <u-radio-group v-model="approveOperation" placement="row">
                  <u-radio
                    :customStyle="{ marginRight: '10rpx' }"
                    v-for="(item, index) in ywsqList"
                    :key="index"
                    :label="item.label"
                    :name="item.value"
                  >
                  </u-radio>
                </u-radio-group>
              </span>
            </div>
          </td>
        </tr> -->
      </table>
    </view>
    <view class="zhan"></view>
    <view class="footer_a">
      <view class="footer">
        <u-button @click="cancelCz" color="#CCCCCC" text="取消"></u-button>
        <u-button
          @click="saveDate"
          color="#70BEFE"
          text="确认"
          class="btnn"
        ></u-button>
      </view>
    </view>
  </view>
</template>
  
  <script>
import * as api from "@/api/financial";
import * as sin from "@/api/index";
import * as man from "@/api/manage";

export default {
  data() {
    return {
      //   approvalCode: "",
      checkList: [], //审核状态
      qcData: {},
      memberPetitionVo: {
        signType: 1, //类型
        remark: "", //情况说明
        userIdList: [{ pkApprover: "" }], //审批流程
        sendIdList: [{ pkSend: "" }], //抄送人
        rechargeMethod: "", //充值方式
        detailParams: [],
      },
      theoptions: {},
      paymentTypeList: [], //交款方式
      enumsAccountList: [], //币种类型
      userAllList: [],
      approbalList: [],
    };
  },
  onLoad(options) {
    this.theoptions = options;
    this.getOthers();
    this.getDetails();
  },
  methods: {
    getOthers() {
      api.getpaymentType().then((res) => {
        this.paymentTypeList = res.data;
      });
      api.getenumsCzAccount({ accountProperty: 1 }).then((res) => {
        this.enumsAccountList = res.rows;
      });
      sin.signType().then((res) => {
        this.checkList = res.data;
      });
      // 审批人
      man.approvalUser().then((res) => {
        this.approbalList = res.data;
      });
      // 抄送人
      man.userAll().then((res) => {
        this.userAllList = res.data;
      });
    },

    getDetails() {
      api.signData(300).then((res) => {
        this.qcData = res.data[0];
        //审批类型默认为普通件
        this.$set(this.qcData, "signType", 1);
        this.qcData.sendList.forEach((ele) => {
          ele.pkSendVal = ele.send + "(" + ele.sendDept + ")";
        });
        this.qcData.detailList.forEach((ele) => {
          ele.pkApproverVal =
          ele.approver + "(" + ele.approverDept + ")";
        });
        this.memberPetitionVo.sendIdList = this.qcData.sendList;
        this.memberPetitionVo.userIdList = this.qcData.detailList;
        this.memberPetitionVo.detailParams = JSON.parse(
          this.theoptions.detailParams
        );
        this.memberPetitionVo.rechargeMethod = this.theoptions.rechargeMethod;
        this.memberPetitionVo.detailParams.forEach((element) => {
          this.paymentTypeList.forEach((ele) => {
            if (element.paymentMethod == ele.value) {
              element.paymentMethodName = ele.label;
            }
          });
        });
      });
    },
    openBlank(item) {
      window.open(item);
    },
    cancelCz() {
      uni.navigateBack({ delta: 1 });
    },
    // 审批流
    bindPickerChange1(e, index) {
      this.$set(
        this.memberPetitionVo.userIdList[index],
        "pkApproverVal",
        this.approbalList[e.detail.value].nickName +
          "(" +
          this.approbalList[e.detail.value].deptName +
          ")"
      );
      this.$set(
        this.memberPetitionVo.userIdList[index],
        "pkApprover",
        this.approbalList[e.detail.value].userId
      );
      this.$forceUpdate();
    },
    // 抄送人
    bindPickerChange2(e, index) {
      this.$set(
        this.memberPetitionVo.sendIdList[index],
        "pkSendVal",
        this.userAllList[e.detail.value].nickName +
          "(" +
          this.userAllList[e.detail.value].deptName +
          ")"
      );
      this.$set(
        this.memberPetitionVo.sendIdList[index],
        "pkSend",
        this.userAllList[e.detail.value].userId
      );
      this.$forceUpdate();
    },
    addData() {
      let arr = JSON.parse(JSON.stringify(this.memberPetitionVo.userIdList));
      arr.push({
        pkApprover: "",
      });

      this.$set(this.memberPetitionVo, "userIdList", arr);
      this.$forceUpdate();
    },
    // 抄送
    addData1() {
      let arr = JSON.parse(JSON.stringify(this.memberPetitionVo.sendIdList));
      arr.push({
        pkSend: "",
      });
      this.$set(this.memberPetitionVo, "sendIdList", arr);
      this.$forceUpdate();
    },
    delData1() {
      this.memberPetitionVo.sendIdList.pop();
      this.$forceUpdate();
    },
    delData() {
      this.memberPetitionVo.userIdList.pop();
      this.$forceUpdate();
    },
    saveDate() {
      this.memberPetitionVo.userIdList = this.memberPetitionVo.userIdList.map(
        (item) => item.pkApprover
      );

      this.memberPetitionVo.sendIdList = this.memberPetitionVo.sendIdList.map(
        (item) => item.pkSend
      );
      api.rechargeFill(Object.assign(this.memberPetitionVo)).then((res) => {
        if (res.code == 200) {
          uni.showToast({
            title: res.msg,
            icon: "none",
            duration: 1500,
          });
          uni.navigateTo({
            url: "/pages/financial/rechargeDetail",
          });
        }
        //   this.$message({
        //     message: res.msg,
        //     type: "success",
        //   });
        //   this.$router.push({
        //     name: "RechargeDetail",
        //   });
      });
    },
  },
};
</script>
  
  <style lang="scss" scoped>
.disFlex {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 0 20rpx;
}
.disFlex_i {
  margin-bottom: 10rpx;
}
.disFlex1 {
  display: flex;
  align-items: center;
  margin-bottom: 10rpx;
}
.contain {
  background: #f9f9f9;
  padding: 20rpx 24rpx;
}
.kuang {
  box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(204, 204, 204, 0.4);
  border-radius: 20rpx;
  background: #ffffff;
}
.tftable {
  font-size: 24rpx;
  border-collapse: collapse;
  border-radius: 20rpx;
  width: 100%;
  background: #ffffff;
  // border: 2rpx solid rgba(0, 0, 0, 0.1);
  tr td {
    font-size: 22rpx;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    padding: 30rpx 0rpx;
  }
}
.tab_t {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20rpx;
}
::v-deep .u-radio__text {
  font-size: 11px !important;
  font-family: PingFang SC-Medium, PingFang SC;
  font-weight: 500;
  color: #333333;
}
.bigk {
  margin-left: 20rpx;
}
.hui {
  font-size: 11px;
  font-family: PingFang SC-Medium, PingFang SC;
  font-weight: 500;
  color: #999999;
}
.fj {
  display: flex;
  align-items: center;
  margin-left: 20rpx;
  img {
    width: 100px;
    height: 100px;
    border-radius: 10px 10px 10px 10px;
    margin-right: 20px;
  }
}
.spbox {
  // display: flex;
  // align-items: center;
  // justify-content: flex-end;
  // flex-wrap: wrap;
  // justify-content: space-between;
  // margin-top: 20px;
}
.spbox1 {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  // justify-content: space-between;
  margin-top: 20rpx;
}
.zhan {
  height: 150rpx;
}
.footer_a {
  position: fixed;
  bottom: 0;
  width: 100%;
  // height: 83px;
  padding: 30rpx 0;
  background: #ffffff;
  box-shadow: 0rpx 2rpx 20rpx 0px rgba(204, 204, 204, 0.4);
}
.footer {
  display: flex;
  align-items: center;
  background: #ffffff;
  padding: 0 60rpx;
  .btnn {
    margin-left: 40rpx;
  }
}
</style>