<template>
  <div class="page">
    <topBar
      v-if="topList.length > 0"
      :topList="topList"
      :moren="moren"
    ></topBar>
    <div class="main">
      <div class="thetable">
        <div class="fontTitle"> {{'在线签呈'}}</div>
        <div class="titleflex">
          <div>{{'编号'}} :</div>
          <div>
            <el-radio-group v-model="memberPetitionVo.signType">
              <el-radio
                :label="item.value"
                v-for="item in checkList"
                :key="item.value"
                >{{ item.label }}</el-radio
              >
            </el-radio-group>
          </div>
        </div>
        <table id="tfhover" class="tftable" border="1">
          <tr>
            <td colspan="1" width="190px" align="center"> {{'发起部门'}} :</td>
            <td colspan="1" width="435px">{{ qcData.deptName }}</td>
            <td colspan="1" width="140px" align="center"> {{'发起人'}} :</td>
            <td colspan="1">{{ qcData.userName }}</td>
          </tr>
          <tr>
            <td colspan="1" align="center"> {{'主旨'}} :</td>
            <td colspan="1">{{ qcData.approvalBusinessVal }}</td>
            <td colspan="1" align="center"> {{'日期'}} :</td>
            <td colspan="1">{{ qcData.creationTime }}</td>
          </tr>
          <!-- // 审批流程 -->
          <tr>
            <td colspan="1" align="center"> {{'审批流程'}}</td>
            <td colspan="3">
              <div class="disflex">
                <span
                  v-for="(ctem, cndex) in memberPetitionVo.userIdList"
                  :key="cndex"
                  style="margin: 0 5px 5px 0"
                >
                  <el-select
                    v-model="ctem.pkApprover"
                    filterable
                    size="mini"
                    @change="getApprover"
                    :placeholder="'请选择'"
                  >
                    <el-option
                      v-for="item in approbalList"
                      :key="item.userId"
                      :label="item.nickName + '(' + item.deptName + ')'"
                      :value="item.userId"
                    >
                    </el-option>
                  </el-select>
                </span>
                <span style="margin: 0 5px 5px 0">
                  <i
                    class="el-icon-remove-outline"
                    @click.stop="delData"
                    style="font-size: 18px; margin-right: 5px"
                  ></i>
                  <i
                    class="el-icon-circle-plus-outline"
                    style="font-size: 18px"
                    @click.stop="addData"
                  ></i>
                </span>
              </div>
            </td>
          </tr>
          <tr>
            <td colspan="1" align="center">抄送部门</td>
            <td colspan="3">
              <div class="disflex">
                <span
                  v-for="(ctem, cndex) in memberPetitionVo.sendIdList"
                  :key="cndex"
                  style="margin: 0 5px 5px 0"
                >
                  <el-select
                    v-model="ctem.pkSend"
                    filterable
                    size="mini"
                    @change="getApprover2"
                    :placeholder="'请选择'"
                  >
                    <el-option
                      v-for="item in userAllList"
                      :key="item.userId"
                      :label="item.nickName + '(' + item.deptName + ')'"
                      :value="item.userId"
                    >
                    </el-option>
                  </el-select>
                </span>
                <span style="margin: 0 5px 5px 0">
                  <i
                    class="el-icon-remove-outline"
                    @click.stop="delData2"
                    style="font-size: 18px; margin-right: 5px"
                  ></i>
                  <i
                    class="el-icon-circle-plus-outline"
                    style="font-size: 18px"
                    @click.stop="addData2"
                  ></i>
                </span>
              </div>
            </td>
          </tr>
          <tr>
            <td style="height: 190px" align="center">{{'情况说明'}}</td>
            <td colspan="3" style="padding: 0">
              <div >
                <el-input
                  type="textarea"
                  :rows="6"
                  :placeholder="'请输入'"
                  v-model="memberPetitionVo.remark"
                >
                </el-input>
              </div>
            </td>
          </tr>
          <tr>
            <td style="min-height: 193px" align="center"> {{'业务诉求'}}</td>
            <td colspan="3" style="padding: 0;vertical-align: top;">
              <div >
                <el-table
                  :data="memberPetitionVo.detailParams"
                  style="width: 900px"
                  :header-cell-style="{ background: '#EEEEEE' }"
                >
                  <el-table-column
                    align="center"
                    prop="memberCode"
                    :label="'会员编号'"
                    min-width="120px"
                  >
                  </el-table-column>
                  <el-table-column
                    align="center"
                    prop="memberName"
                    :label="'会员姓名'"
                    min-width="100px"
                  >
                  </el-table-column>
                  <el-table-column
                    align="center"
                    prop="paymentMethod"
                    :label="'交款方式'"
                    min-width="120px"

                  >
                    <template slot-scope="scope">
                      <el-select
                        clearable
                        :placeholder="'请选择'"
                        disabled
                        v-model="scope.row.paymentMethod"
                      >
                        <el-option
                          v-for="item in paymentTypeList"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        ></el-option>
                      </el-select>
                    </template>
                  </el-table-column>

                  <el-table-column
                    min-width="100px"
                    v-for="(item, index) in enumsAccountList"
                    :key="index"
                    align="center"
                    :prop="`${item.pkId}`"
                    :label="item.pkTransactionKeyVal"
                  >
                    <template slot-scope="scope">
                      <span>{{
                        scope.row.rechargeDetailMap[`${item.pkId}`]|numberToCurrency
                      }}</span>
                    </template>
                  </el-table-column>

                  <el-table-column
                    align="center"
                    prop="memberRemarks"
                    :label="'备注(前台)'"
                    min-width="120px"
                  >
                  </el-table-column>
                  <el-table-column
                    align="center"
                    prop="remarks"
                    :label="'备注(后台)'"
                    min-width="120px"
                  >
                  </el-table-column>
                </el-table>
              </div>
            </td>
          </tr>
          <!-- <tr>
            <td align="center" style="height: 108px">部门意见</td>
            <td colspan="3">
              <div class="spbox">
                <div>审批状态：</div>
                <div style="margin-right: 20px">
                  <el-select clearable v-model="ywsq" :placeholder="'请选择'">
                    <el-option
                      v-for="item in ywsqList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </div>

                <div> {{'日期'}} :：</div>
              </div>
            </td>
          </tr> -->
        </table>
      </div>
    </div>
    <div class="footer">
      <div style="margin: 0 auto">
        <el-button class="thebtn" @click="cancelCz"> {{ '取消' }}</el-button>
        <el-button type="primary" class="thebtn" @click="saveDate"
          > {{ '确认' }}</el-button
        >
      </div>
    </div>
  </div>
</template>

  <script>
import topBar from "@/components/topBar";
import { rechargeFill, rechargePlFill } from "@/api/financial";
import { getUserAll } from "@/api/signing";
import * as man from "@/api/manage";
import { mapGetters } from "vuex";
import { getenumsCzAccount, getpaymentType } from "@/api/financial";
export default {
  name: "Czzxqc",
  components: {
    topBar,
  },
  computed: {
    ...mapGetters(["getUser"]),
  },
  data() {
    return {
      moren: "czzxqc",
      topList: [
        {
          name: '基础业务',
          path: "jcyw",
        },
        {
          name: '订单业务',
          path: "ddyw",
        },
        {
          name: "确认业务",
          path: "shyw",
        },
        {
          name: "在线签呈",
          path: "czzxqc",
        },
      ],
      checked: [],
      checkList: [],
      paymentTypeList: [], //交款方式
      enumsAccountList: [], //币种类型
      ywsq: "",
      ywsqList: [
        { value: "0", label: "同意" },
        { value: "1", label: "驳回" },
      ],
      qcData: {},
      memberPetitionVo: {
        signType: 1,
        remark: "", //情况说明
        userIdList: [{ pkApprover: "" }],
        sendIdList: [{ pkSend: "" }],
        rechargeMethod: "", //充值方式
        detailParams: [],
      },
      czlx: "", //单笔/批量
      approbalList: [],
      userAllList: [],
    };
  },

  created() {
    this.getSignData();
  },
  methods: {
    getSignData() {
      getpaymentType().then((res) => {
        this.paymentTypeList = res.data;
      });
      getenumsCzAccount({accountProperty:1}).then((res) => {
        this.enumsAccountList = res.rows;
      });
      man.signData(300).then((res) => {
        this.qcData = res.data[0];
        this.memberPetitionVo.sendIdList = this.qcData.sendList;
        this.memberPetitionVo.userIdList = this.qcData.detailList;
        this.memberPetitionVo.detailParams = JSON.parse(
          this.$route.query.detailParams
        );
        this.memberPetitionVo.rechargeMethod = JSON.parse(
          this.$route.query.rechargeMethod
        );

        this.czlx = this.$route.query.czlx;
        this.getSignType();
      });
    },
    getSignType() {
      man.signType().then((res) => {
        this.checkList = res.data;
      });
      // 审批流程
      man.approvalUser().then((res) => {
        this.approbalList = res.data;
      });
      //抄送部门
      getUserAll().then((res) => {
        this.userAllList = res.data;
      });
    },
    // 审批流程
    getApprover() {
      this.$nextTick(() => {
        this.$forceUpdate();
      });
    },
    // 审批流程
    addData() {
      let arr = JSON.parse(JSON.stringify(this.memberPetitionVo.userIdList));
      arr.push({ pkApprover: "" });
      this.$set(this.memberPetitionVo, "userIdList", arr);
      this.$forceUpdate();
    },
    // 审批流程
    delData() {
      this.memberPetitionVo.userIdList.pop();
      this.$forceUpdate();
    },
    // 抄送部门
    getApprover2() {
      this.$nextTick(() => {
        this.$forceUpdate();
      });
    },
    // 抄送部门
    addData2() {
      let arr2 = JSON.parse(JSON.stringify(this.memberPetitionVo.sendIdList));
      arr2.push({ pkSend: "" });
      this.$set(this.memberPetitionVo, "sendIdList", arr2);
      this.$forceUpdate();
    },
    // 抄送部门
    delData2() {
      this.memberPetitionVo.sendIdList.pop();
      this.$forceUpdate();
    },
    saveDate() {
      // 审批流程

      this.memberPetitionVo.userIdList = this.memberPetitionVo.userIdList.map(
        (item) => item.pkApprover
      );

      this.memberPetitionVo.sendIdList = this.memberPetitionVo.sendIdList.map(
        (item) => item.pkSend
      );

      let url = "";
      if (this.czlx == 1) {
        url = rechargeFill;
      } else if (this.czlx == 2) {
        url = rechargePlFill;
      }
      url(Object.assign(this.memberPetitionVo)).then((res) => {
        if (res.code == 200) {
          this.$message({
            message: res.msg,
            type: "success",
          });
          this.$router.push({
            name: "RechargeDetail",
          });
        }
      });
    },
    cancelCz() {
      this.$router.go(-1);
    },
   
  },
};
</script>

  <style lang="scss" scoped>
  ::v-deep .el-input.is-disabled .el-input__icon{
    display: none;
  }
::v-deep .el-table thead {
  color: #000000;
}
.page {
  padding: 20px;
  background: #f9f9f9;
  font-size: 14px;
  .main {
    // margin-top: 20px;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0px 2px 20px 0px rgba(238, 238, 238, 0.5);
    display: flex;
    margin: 0 auto;
    width: 100%;
    padding: 20px;
  }
  .thetable {
    margin: 0 auto;
    .fontTitle {
      font-weight: bold;
      font-size: 24px;
      text-align: center;
    }
    .titleflex {
      display: flex;
      margin-top: 10px;
      margin-bottom: 10px;
      justify-content: space-between;
    }
  }
  .tftable {
    font-size: 14px;
    border-collapse: collapse;
    border-radius: 10px;
    width: 1060px;
    border: 1px solid #cccccc;
    .spbox {
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
    th {
      font-size: 14px;
      // padding: 20px;
    }
    tr td {
      font-size: 14px;
      padding: 10px 20px;
      height: 60px;
    }
  }
  .footer {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px 0;
    .thebtn {
      width: 120px;
      height: 38px;
    }
  }
}
</style>
