<!--
 * @Descripttion:
 * @version:
 * @Author: kBank
 * @Date: 2023-03-20 11:12:13
-->
<template>
  <div class="page">
    <div class="prin">
      <el-button type="primary" v-if="isPrint" @click="toPrint">打印</el-button>
    </div>
    <div class="main">
      <div class="thetable">
        <div id="print">
          <div class="fontTitle">{{ '在线签呈' }}</div>
          <div class="titleflex">
            <div style="white-space: nowrap">
              {{ '编号' }}:{{ qcData.approvalCode }}
            </div>
            <div>
              <el-radio-group v-model="qcData.signType" :disabled="true">
                <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
                }}{{ qcData.controlTypeVal || "" }}
              </td>
              <td colspan="1" align="center">{{ '日期' }} :</td>
              <td colspan="1">{{ qcData.creationTime }}</td>
            </tr>
            <tr>
              <td colspan="1" align="center">{{ '审批流程' }}</td>
              <td colspan="3">
                <span
                  style="margin-right: 20px"
                  v-for="(item, index) in qcData.detailList"
                  :key="index"
                  >{{ item.approver }}({{ item.approverDept }})</span
                >
              </td>
            </tr>
            <tr>
              <td colspan="1" align="center">{{ '抄送人' }}</td>
              <td colspan="3">
                {{ qcData.sendStr }}
              </td>
            </tr>
            <tr>
              <td style="height: 190px" align="center">{{ '情况说明' }}</td>
              <td colspan="3" style="padding: 0">
                <div>
                  <!-- <span>{{ qcData.remark }}</span> -->
                  <noImgEditor v-model="qcData.remark" :min-height="190" />
                  <!-- <el-input type="textarea"
                          resize="none"
                          :rows="6"
                          :placeholder="'请输入'"
                          v-model="qcData.remark">
                </el-input> -->
                </div>
              </td>
            </tr>
            <tr
              style="min-height: 193px"
              v-if="directData.approvalBusiness != 0"
            >
              <td style="" align="center">{{ '业务诉求' }}</td>
              <td
                colspan="3"
                style="padding: 0; min-height: 193px; vertical-align: top"
              >
                <div>
                  <el-table
                    :data="qcData.businessData"
                    style="width: 100%; min-height: 193px"
                    :header-cell-style="{ background: '#EEEEEE' }"
                  >
                    <template v-if="directData.approvalBusiness == 300">
                      <el-table-column
                        align="center"
                        prop="memberCode"
                        :label="'会员编号'"
                      >
                      </el-table-column>
                      <el-table-column
                        align="center"
                        prop="memberName"
                        :label="'会员姓名'"
                      >
                      </el-table-column>
                      <el-table-column
                        align="center"
                        prop="paymentMethod"
                        :label="'交款方式'"
                        min-width="80px"
                      >
                        <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="50px"
                        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="'备注(前台)'"
                      >
                      </el-table-column>
                      <el-table-column
                        align="center"
                        prop="remarks"
                        :label="'备注(后台)'"
                      >
                      </el-table-column>
                    </template>
                    <template v-if="directData.approvalBusiness == 254">
                      <el-table-column
                        align="center"
                        prop="orderCode"
                        :label="'订单编号'"
                      >
                        <template slot-scope="scope">
                          {{ scope.row.newOrder.orderCode }}
                        </template>
                      </el-table-column>
                      <el-table-column
                        align="center"
                        prop="orderAmount"
                        :label="'金额'"
                      >
                        <template slot-scope="scope">
                          {{ scope.row.newOrder.orderAmount }}
                        </template>
                      </el-table-column>
                      <el-table-column
                        align="center"
                        prop="orderAchieve"
                        :label="`${'业绩'}($)`"
                      >
                        <template slot-scope="scope">
                          {{ scope.row.newOrder.orderAchieve }}
                        </template>
                      </el-table-column>
                      <el-table-column
                        align="center"
                        prop="orderAssAchieve"
                        label="BV"
                      >
                        <template slot-scope="scope">
                          {{ scope.row.newOrder.orderAssAchieve }}
                        </template>
                      </el-table-column>
                      <el-table-column
                        align="center"
                        prop="orderCode"
                        label="抵扣订单编号"
                      >
                        <template slot-scope="scope">
                          {{ scope.row.oldOrder.orderCode }}
                        </template>
                      </el-table-column>
                      <el-table-column
                        align="center"
                        prop="orderAmount"
                        :label="'金额'"
                      >
                        <template slot-scope="scope">
                          {{ scope.row.oldOrder.orderAmount }}
                        </template>
                      </el-table-column>
                      <el-table-column
                        align="center"
                        prop="orderAchieve"
                        :label="`${'业绩'}($)`"
                      >
                        <template slot-scope="scope">
                          {{ scope.row.oldOrder.orderAchieve }}
                        </template>
                      </el-table-column>
                      <el-table-column
                        align="center"
                        prop="orderAssAchieve"
                        label="BV"
                      >
                        <template slot-scope="scope">
                          {{ scope.row.oldOrder.orderAssAchieve }}
                        </template>
                      </el-table-column>
                    </template>
                    <template v-else>
                      <el-table-column
                        v-for="item in tableColumn"
                        :key="item.value"
                        align="center"
                        :prop="item.value"
                        :label="item.label"
                      >
                        <template slot-scope="scope">
                          <div v-if="item.value == 'content'">
                            <el-popover placement="top-start" trigger="hover">
                              <div v-html="scope.row.content"></div>
                              <div
                                slot="reference"
                                style="color: #589ff8; cursor: pointer"
                              >
                                {{ '查看' }}
                              </div>
                            </el-popover>
                          </div>
                          <div v-else-if="item.value == 'legalCardFront'">
                            <el-image
                              style="width: 100px; height: 100px"
                              :src="scope.row.legalCardFront"
                              :preview-src-list="[scope.row.legalCardFront]"
                            >
                            </el-image>
                          </div>
                          <div v-else-if="item.value == 'legalCardBack'">
                            <el-image
                              style="width: 100px; height: 100px"
                              :src="scope.row.legalCardBack"
                              :preview-src-list="[scope.row.legalCardBack]"
                            >
                            </el-image>
                          </div>
                          <div v-else-if="item.value == 'license'">
                            <el-image
                              style="width: 100px; height: 100px"
                              :src="scope.row.license"
                              :preview-src-list="[scope.row.license]"
                            >
                            </el-image>
                          </div>
                          <div v-else-if="item.value == 'storeAgreementList'">
                            <el-image
                              v-for="(stem, sndex) in scope.row
                                .storeAgreementList"
                              :key="sndex"
                              style="width: 100px; height: 100px"
                              :src="stem"
                              :preview-src-list="scope.row.storeAgreementList"
                            >
                            </el-image>
                          </div>
                          <div v-else-if="item.value == 'deductMoney'">
                            <div>{{ scope.row.deductMoney }}%</div>
                          </div>
                          <div v-else-if="item.value == 'cover'">
                            <img class="cover" :src="scope.row.cover" alt="" />
                          </div>
                          <div v-else-if="item.value == 'jsVal'">
                            <div
                              v-for="ctem in scope.row.noticeGradeVOList"
                              :key="ctem.gradeKey"
                            >
                              {{ ctem.gradeKeyVal }}
                            </div>
                          </div>
                          <div v-else-if="item.value == 'zsVal'">
                            <div
                              v-for="ctem in scope.row.awardsVOList"
                              :key="ctem.awardKey"
                            >
                              {{ ctem.awardKeyVal }}
                            </div>
                          </div>
                          <div v-else-if="item.value == 'fbVal'">
                            <div
                              v-for="ctem in scope.row.locationVOList"
                              :key="ctem.locationKey"
                            >
                              {{ ctem.locationKeyVal }}
                            </div>
                          </div>
                          <div v-else-if="item.value == 'time'">
                            <div>
                              {{ scope.row.startTime }}-{{ scope.row.endTime }}
                            </div>
                          </div>
                          <div v-else-if="item.value == 'idFront'">
                            <el-popover placement="top-start" trigger="hover">
                              <div class="qcImg">
                                <img :src="scope.row.idFront" alt="" />
                                <img :src="scope.row.idBack" alt="" />
                              </div>
                              <div slot="reference" style="color: #589ff8">
                                {{ '查看' }}
                              </div>
                            </el-popover>
                          </div>
                          <div v-else-if="item.value == 'changeIdFront'">
                            <el-popover placement="top-start" trigger="hover">
                              <div class="qcImg">
                                <img :src="scope.row.changeIdFront" alt="" />
                                <img :src="scope.row.changeIdBack" alt="" />
                              </div>
                              <div slot="reference" style="color: #589ff8">
                                {{ '查看' }}
                              </div>
                            </el-popover>
                          </div>
                          <div v-else-if="item.value == 'aptitude1'">
                            <div>
                              <a
                                :href="scope.row.aptitude1"
                                target="_blank"
                                style="
                                  cursor: pointer;
                                  color: blue;
                                  text-decoration: underline;
                                "
                                >{{ scope.row.aptitude1 }}</a
                              >
                            </div>
                          </div>
                          <div v-else-if="item.value == 'aptitude2'">
                            <div>
                              <a
                                :href="scope.row.aptitude2"
                                target="_blank"
                                style="
                                  cursor: pointer;
                                  color: blue;
                                  text-decoration: underline;
                                "
                                >{{ scope.row.aptitude2 }}</a
                              >
                            </div>
                          </div>
                          <div v-else-if="item.value == 'aptitude3'">
                            <div>
                              <a
                                :href="scope.row.aptitude3"
                                target="_blank"
                                style="
                                  cursor: pointer;
                                  color: blue;
                                  text-decoration: underline;
                                "
                                >{{ scope.row.aptitude3 }}</a
                              >
                            </div>
                          </div>
                          <div v-else-if="item.value == 'aptitude4'">
                            <div>
                              <a
                                :href="scope.row.aptitude4"
                                target="_blank"
                                style="
                                  cursor: pointer;
                                  color: blue;
                                  text-decoration: underline;
                                "
                                >{{ scope.row.aptitude4 }}</a
                              >
                            </div>
                          </div>
                          <div v-else-if="item.value == 'aptitude5'">
                            <div>
                              <a
                                :href="scope.row.aptitude5"
                                target="_blank"
                                style="
                                  cursor: pointer;
                                  color: blue;
                                  text-decoration: underline;
                                "
                                >{{ scope.row.aptitude5 }}</a
                              >
                            </div>
                          </div>
                          <div v-else-if="item.value == 'aptitude6'">
                            <div>
                              <a
                                :href="scope.row.aptitude6"
                                target="_blank"
                                style="
                                  cursor: pointer;
                                  color: blue;
                                  text-decoration: underline;
                                "
                                >{{ scope.row.aptitude6 }}</a
                              >
                            </div>
                          </div>
                          <div v-else-if="item.value == 'aptitude7'">
                            <div>
                              <a
                                :href="scope.row.aptitude7"
                                target="_blank"
                                style="
                                  cursor: pointer;
                                  color: blue;
                                  text-decoration: underline;
                                "
                                >{{ scope.row.aptitude7 }}</a
                              >
                            </div>
                          </div>
                          <div v-else-if="item.value == 'aptitude8'">
                            <div>
                              <a
                                :href="scope.row.aptitude8"
                                target="_blank"
                                style="
                                  cursor: pointer;
                                  color: blue;
                                  text-decoration: underline;
                                "
                                >{{ scope.row.aptitude8 }}</a
                              >
                            </div>
                          </div>
                          <div v-else-if="item.value == 'certificate'">
                            <div>
                              <a
                                :href="scope.row.certificate"
                                target="_blank"
                                style="
                                  cursor: pointer;
                                  color: blue;
                                  text-decoration: underline;
                                "
                                >{{ scope.row.certificate }}</a
                              >
                            </div>
                          </div>
                          <!-- 直推赠送 -->
                          <div
                            v-else-if="item.value == 'actExplain'"
                            style="
                              color: #48b2fd;
                              text-decoration: underline;
                              cursor: pointer;
                            "
                            @click="toDirectDetails"
                          >
                            {{ '查看详情' }}
                          </div>
                          <div
                            v-else-if="item.value == 'action'"
                            style="
                              color: #48b2fd;
                              text-decoration: underline;
                              cursor: pointer;
                            "
                            @click="details"
                          >
                            {{ '查看详情' }}
                          </div>
                          <div
                            v-else-if="
                              item.value == 'action1' &&
                              scope.row.signSource != 1
                            "
                            style="
                              color: #48b2fd;
                              text-decoration: underline;
                              cursor: pointer;
                            "
                            @click="details1(scope.row)"
                          >
                            查看详情
                          </div>
                          <div v-else-if="item.value == 'oldItemDz'">
                            <div>
                              {{ '收货人' }}:{{
                                scope.row.oldItemDz.recName
                              }}
                            </div>
                            <div>
                              {{ '收货电话' }}:{{
                                scope.row.oldItemDz.recPhone
                              }}
                            </div>
                            <div>
                              {{ '收货地址' }}:{{
                                scope.row.oldItemDz.nameList
                              }}{{ scope.row.oldItemDz.recAddress }}
                            </div>
                          </div>
                          <div v-else-if="item.value == 'newItemDz'">
                            <div>
                              {{ '收货人' }}:{{
                                scope.row.newItemDz.recName
                              }}
                            </div>
                            <div>
                              {{ '收货电话' }}:{{
                                scope.row.newItemDz.recPhone
                              }}
                            </div>
                            <div>
                              {{ '收货地址' }}:{{
                                scope.row.newItemDz.nameList
                              }}{{ scope.row.newItemDz.recAddress }}
                            </div>
                          </div>
                          <div v-else-if="item.value == 'oldItem'">
                            <div v-for="(ctem, cndex) in scope.row.oldItemList">
                              <div>名称:{{ ctem.productName }}</div>
                              <div>
                                {{ '编号' }}:{{ ctem.productCode }}
                              </div>
                              <div>{{ '规格' }}:{{ ctem.specsName }}</div>
                              <div>{{ '数量' }}:{{ ctem.quantity }}</div>
                              <div>{{ '价格' }}(￥):{{ ctem.price }}</div>
                              <div>
                                {{ '业绩' }}({{ isLocals() }}):{{
                                  ctem.achievement
                                }}
                              </div>
                              <div style="margin-bottom: 10px">
                                是否赠品:{{ ctem.isGiftVal }}
                              </div>
                            </div>
                            <div>
                              {{ '邮费' }}:{{ scope.row.oldPostage }}
                            </div>
                          </div>
                          <div v-else-if="item.value == 'newItem'">
                            <div v-for="(ctem, cndex) in scope.row.newItemList">
                              <div>名称:{{ ctem.productName }}</div>
                              <div>
                                {{ '编号' }}:{{ ctem.productCode }}
                              </div>
                              <div>{{ '规格' }}:{{ ctem.specsName }}</div>
                              <div>数量:{{ ctem.quantity }}</div>
                              <div>{{ '价格' }}(￥):{{ ctem.price }}</div>
                              <div>
                                {{ '业绩' }}({{ isLocals() }}):{{
                                  ctem.achievement
                                }}
                              </div>
                              <div style="margin-bottom: 10px">
                                是否赠品:{{ ctem.isGiftVal }}
                              </div>
                            </div>
                            <div>
                              {{ '邮费' }}:{{ scope.row.newPostage }}
                            </div>
                          </div>
                          <div v-else-if="item.value == 'zzoldItemAddress'">
                            <div>
                              {{ '收货人' }}:{{ scope.row.recName }}
                            </div>
                            <div>
                              {{ '收货电话' }}:{{ scope.row.recPhone }}
                            </div>
                            <div>
                              {{ '收货地址' }}:{{ scope.row.recAddress }}
                            </div>
                          </div>
                          <div v-else-if="item.value == 'zznewItemAddress'">
                            <div>
                              {{ '收货人' }}:{{ scope.row.newRecName }}
                            </div>
                            <div>
                              {{ '收货电话' }}:{{ scope.row.newRecPhone }}
                            </div>
                            <div>
                              {{ '收货地址' }}:{{ scope.row.newRecAddress }}
                            </div>
                          </div>
                          <div
                            v-else-if="item.value == 'more'"
                            style="
                              color: #48b2fd;
                              text-decoration: underline;
                              cursor: pointer;
                            "
                            @click="toDetails"
                          >
                            查看详情
                          </div>
                          <div v-else-if="item.value == 'licenseImage'">
                            <el-image
                              style="width: 100px; height: 50px"
                              :src="scope.row[item.value]"
                              :preview-src-list="[scope.row[item.value]]"
                            >
                            </el-image>
                          </div>
                          <div
                            v-else-if="
                              item.value == 'productName' &&
                              directData.approvalBusiness == 235
                            "
                          >
                            <div
                              v-for="item in scope.row.cancelItemsList"
                              :key="item.pkId"
                            >
                              {{ item.productName }}
                            </div>
                          </div>
                          <div v-else-if="item.value == 'batchCode'">
                            <div v-for="stem in scope.row.scmReturnbVoList">
                              {{ stem.batchCode }}
                            </div>
                          </div>
                          <div
                            v-else-if="
                              item.value == 'productName' &&
                              (directData.approvalBusiness == 800 ||
                                directData.approvalBusiness == 801 ||
                                directData.approvalBusiness == 804 ||
                                directData.approvalBusiness == 807)
                            "
                          >
                            <div v-for="stem in scope.row.billDtoList">
                              {{ stem.productName }}
                            </div>
                          </div>
                          <div v-else>{{ scope.row[item.value] }}</div>
                        </template>
                      </el-table-column>
                    </template>
                  </el-table>
                </div>
              </td>
            </tr>
            <tr v-if="qcData.filePathList">
              <td style="height: 158px" align="center">
                {{ '附件' }}
              </td>
              <td colspan="3" style="padding: 0">
                <div
                  v-if="qcData.imgList.length > 0"
                  class="fj"
                  v-for="(item, index) in qcData.imgList"
                  :key="index"
                >
                  <!-- <img :src="item"
                     alt="" /> -->
                  <el-image
                    style="width: 100px; height: 100px"
                    :src="item"
                    :preview-src-list="[item]"
                  >
                  </el-image>
                </div>
                <div
                  v-if="qcData.fileList.length > 0"
                  class="fj"
                  v-for="(item, index) in qcData.fileList"
                  :key="index"
                >
                  <div
                    @click="openBlank(item)"
                    style="
                      color: #48b2fd;
                      text-decoration: underline;
                      cursor: pointer;
                    "
                  >
                    {{ item }}
                  </div>
                </div>
              </td>
            </tr>
            <tr
              v-for="(item, index) in qcData.detailList"
              :key="index"
              v-show="isLook != 1"
            >
              <td align="center" style="height: 108px">
                {{ item.approverDept }}
              </td>
              <td colspan="3">
                <span v-if="item.status != 0" style="margin-right: 20px">{{
                  item.remark
                }}</span>
                <el-input
                  v-else
                  type="textarea"
                  :rows="5"
                  maxlength="500"
                  show-word-limit
                  resize="none"
                  :placeholder="'请输入'"
                  v-model="remark"
                >
                </el-input>

                <div class="spbox" v-if="item.status > 0">
                  <div>审批人:{{ item.approver }}</div>
                  <div>
                    <span>审批状态：</span>
                    <span style="margin-right: 20px">
                      <el-select
                        clearable
                        :disabled="true"
                        v-model="item.status"
                        :placeholder="'请选择'"
                      >
                        <el-option
                          v-for="item in ywsqList"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        >
                        </el-option>
                      </el-select>
                    </span>
                  </div>
                  <div>{{ '日期' }}: {{ item.approverTime }}</div>
                </div>
                <div class="spbox1" v-if="item.status == 0">
                  <span style="white-space: nowrap">审批状态：</span>
                  <span style="margin-right: 20px">
                    <el-select
                      clearable
                      v-model="approveOperation"
                      :placeholder="'请选择'"
                    >
                      <el-option
                        v-for="item in ywsqList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                  </span>
                </div>
              </td>
            </tr>
            <tr
              v-for="(item, index) in qcData.detailList"
              :key="index"
              v-show="isLook == 1 && item.status != 0"
            >
              <td align="center" style="height: 108px">
                {{ item.approverDept }}
              </td>
              <td colspan="3">
                <span v-if="item.status != 0" style="margin-right: 20px">{{
                  item.remark
                }}</span>
                <el-input
                  v-else
                  type="textarea"
                  :rows="5"
                  maxlength="500"
                  show-word-limit
                  resize="none"
                  :placeholder="'请输入'"
                  v-model="remark"
                >
                </el-input>

                <div class="spbox" v-if="item.status > 0">
                  <div>审批人:{{ item.approver }}</div>
                  <div>
                    <span>审批状态：</span>
                    <span style="margin-right: 20px">
                      <el-select
                        clearable
                        :disabled="true"
                        v-model="item.status"
                        :placeholder="'请选择'"
                      >
                        <el-option
                          v-for="item in ywsqList"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        >
                        </el-option>
                      </el-select>
                    </span>
                  </div>
                  <div>{{ '日期' }}: {{ item.approverTime }}</div>
                </div>
                <div class="spbox1" v-if="item.status == 0">
                  <span style="white-space: nowrap">审批状态：</span>
                  <span style="margin-right: 20px">
                    <el-select
                      clearable
                      v-model="approveOperation"
                      :placeholder="'请选择'"
                    >
                      <el-option
                        v-for="item in ywsqList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                  </span>
                </div>
              </td>
            </tr>
          </table>
        </div>
      </div>
    </div>
    <div class="footer" v-if="isLook == 0">
      <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 class="footer" v-if="isLook == 2">
      <div style="margin: 0 auto">
        <el-button class="cancelBtn" @click="cancelCz">
          {{ '取消' }}</el-button
        >
        <el-button type="primary" class="tjBtn" @click="toReceive"
          >接收</el-button
        >
      </div>
    </div>
    <el-dialog
      :title="'查看详情'"
      :visible.sync="twoGoods"
      width="60%"
      :close-on-click-modal="false"
      center
    >
      <el-table
        :data="qcData.businessData"
        style="width: 100%"
        :header-cell-style="{ background: '#EEEEEE' }"
      >
        <el-table-column align="center" prop="memberCode" :label="'会员编号'">
        </el-table-column>
        <el-table-column
          align="center"
          prop="memberName"
          :label="'会员姓名'"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="productName"
          :label="'产品名称'"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="productCode"
          :label="'产品编号'"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="price"
          :label="'产品单价' + '(￥)'"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="achievement"
          :label="`${'产品业绩'}` + `(${isLocalSymbol()})`"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="assAchievement"
          :label="'产品业绩' + '(BV)'"
        >
        </el-table-column>
        <el-table-column align="center" prop="quantity" :label="'数量'">
        </el-table-column>
      </el-table>
      <el-form label-width="auto">
        <el-row :gutter="40">
          <el-col :span="12">
            <el-form-item :label="'收货人'">
              <el-input v-model="twoThing.recName" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="'联系方式'">
              <el-input
                v-model="twoThing.recPhone"
                disabled
                placeholder="请输入产品名称"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="省、市、区/县">
              <el-input
                disabled
                :value="
                  twoThing.recProvinceVal +
                  twoThing.recCityVal +
                  (twoThing.recCountryVal == undefined
                    ? ''
                    : twoThing.recCountryVal)
                "
                :placeholder="'请输入会员编号'"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="'详细地址'">
              <el-input
                v-model="twoThing.recAddress"
                disabled
                :placeholder="'请输入会员姓名'"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row
          :gutter="40"
          v-for="(item, index) in twoThing.accountList"
          :key="index"
        >
          <el-col :span="6">
            <el-form-item label="扣款账户">
              <el-input disabled v-model="item.pkAccountVal" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item :label="'扣款金额'">
              <el-input disabled v-model="item.deductRatio" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import * as api from "@/api/manage";
import { getenumsCzAccount, getpaymentType } from "@/api/financial";
import printJs from "print-js";

import onlineSign from "./onlineSign.json";
import { isLocals } from "../../utils/numberToCurrency";
export default {
  name: "Zxqc",
  data() {
    return {
      checked: [],
      checkList: [],
      ywsq: "",
      ywsqList: [],
      qcData: {
        signType: "",
        detailList: [],
      },

      approvalCode: "",
      onlineSign,
      tableColumn: [],
      isLook: "",
      approveOperation: 1,
      remark: "",
      directData: "",
      twoGoods: false,
      twoThing: "",
      paymentTypeList: [], //交款方式
      enumsAccountList: [], //币种类型
      isPrint: false,
    };
  },
  mounted() {
    this.approvalCode = this.$route.query.id;
    this.pkId = this.$route.query.pkId || "";

    this.isLook = this.$route.query.index;
    this.isPrint = this.$route.query.isPrint || false;

    this.getApprove();
    this.getSignType();
    this.getDetails();
  },
  methods: {
    isLocals,
    toDetails() {
      this.$router.push({
        path: "information/specialBusiness/dataList",
        query: {
          pkId: this.qcData.businessData[0].pkMemberEmpty,
          status: 0,
        },
      });
    },
    details1(item) {
      if (
        this.directData.approvalBusiness == 141 ||
        this.directData.approvalBusiness == 161
      ) {
        this.$router.push(
          "/information/markerSpace/detail?code=" + item.storeCode
        );
      }
      if (
        this.directData.approvalBusiness == 142 ||
        this.directData.approvalBusiness == 162
      ) {
        this.$router.push(
          "/information/superStudio/detail?code=" + item.storeCode
        );
      }
      if (
        this.directData.approvalBusiness == 143 ||
        this.directData.approvalBusiness == 163
      ) {
        this.$router.push("/information/dealer/detail?code=" + item.storeCode);
      }
    },
    toDirectDetails() {
      if (this.directData.approvalBusiness == 723) {
        this.$router.push({
          path: "/marketing/directGifts/addDirect",
          query: {
            controlType: 4,
            data: this.directData.businessData,
          },
        });
      } else if (
        this.directData.approvalBusiness == 717 ||
        this.directData.approvalBusiness == 718 ||
        this.directData.approvalBusiness == 719
      ) {
        this.$router.push({
          path: "/marketing/lottery/lotteryInfo",
          query: {
            controlType: 4,
            data: this.directData.businessData,
          },
        });
      } else if (this.directData.approvalBusiness == 713) {
        this.$router.push({
          path: "/marketing/newcomerGift/newgiftInfo",
          query: {
            data: this.directData.businessData,
          },
        });
      } else if (
        this.directData.approvalBusiness == 726 ||
        this.directData.approvalBusiness == 727 ||
        this.directData.approvalBusiness == 728
      ) {
        this.$router.push({
          path: "/marketing/seaBean/addConsumptionInfo",
          query: {
            data: this.directData.businessData,
          },
        });
      } else if (
        this.directData.approvalBusiness == 714 ||
        this.directData.approvalBusiness == 715 ||
        this.directData.approvalBusiness == 716
      ) {
        this.$router.push({
          path: "/marketing/benefitsGift/addBenefitsGift",
          query: {
            data: this.directData.businessData,
          },
        });
      } else if (
        this.directData.approvalBusiness == 735 ||
        this.directData.approvalBusiness == 736 ||
        this.directData.approvalBusiness == 737
      ) {
        this.$router.push({
          path: "/marketing/tourismAct/addTourismAct",
          query: {
            data: this.directData.businessData,
          },
        });
      } else if (
        this.directData.approvalBusiness == 729 ||
        this.directData.approvalBusiness == 730 ||
        this.directData.approvalBusiness == 731
      ) {
        this.$router.push({
          path: "/marketing/giftGoods/addGiftGoodsInfo",
          query: {
            data: this.directData.businessData,
          },
        });
      } else if (
        this.directData.approvalBusiness == 738 ||
        this.directData.approvalBusiness == 739 ||
        this.directData.approvalBusiness == 740
      ) {
        this.$router.push({
          path: "/marketing/consumptionGift/addConsumptionInfo",
          query: {
            data: this.directData.businessData,
            controlType: 4,
          },
        });
      } else if (
        this.directData.approvalBusiness == 732 ||
        this.directData.approvalBusiness == 733 ||
        this.directData.approvalBusiness == 734
      ) {
        this.$router.push({
          path: "/marketing/plantCommonweal/addPlantCommonwealList",
          query: {
            data: this.directData.businessData,
          },
        });
      } else if (
        this.directData.approvalBusiness == 741 ||
        this.directData.approvalBusiness == 742 ||
        this.directData.approvalBusiness == 743
      ) {
        this.$router.push({
          name: "AddSeabuckEquityGift",
          query: {
            data: this.directData.businessData,
            controlType: 4,
          },
        });
      } else if (
        this.directData.approvalBusiness == 941 ||
        this.directData.approvalBusiness == 942 ||
        this.directData.approvalBusiness == 943 ||
        this.directData.approvalBusiness == 944
      ) {
        this.$router.push({
          path: "supplierManaged/supplierManage/supplierGoodsAdd",
          query: {
            data: this.directData.businessData,
            methods: 0,
          },
        });
      } else if (
        this.directData.approvalBusiness == 746 ||
        this.directData.approvalBusiness == 747 ||
        this.directData.approvalBusiness == 748
      ) {
        this.$router.push({
          name: "UpgradAddBenefitsGift",
          query: {
            data: this.directData.businessData,
            controlType: 4,
          },
        });
      } else if (
        this.directData.approvalBusiness == 749 ||
        this.directData.approvalBusiness == 750 ||
        this.directData.approvalBusiness == 751
      ) {
        this.$router.push({
          name: "MemberAddConsumptionInfo",
          query: {
            data: this.directData.businessData,
            controlType: 4,
          },
        });
      }
    },
    details() {
      this.twoGoods = true;
    },
    getApprove() {
      api.approvalOperation().then((res) => {
        this.ywsqList = res.data;
      });
      getpaymentType().then((res) => {
        this.paymentTypeList = res.data;
      });
      getenumsCzAccount({ accountProperty: 1 }).then((res) => {
        this.enumsAccountList = res.rows;
      });
    },
    getSignType() {
      api.signType().then((res) => {
        this.checkList = res.data;
      });
    },
    getDetails() {
      api.approvalDetails(this.approvalCode).then((res) => {
        this.qcData = res.data;
        let arr = [];
        let arr2 = [];
        if (this.qcData.filePathList) {
          this.qcData.filePathList.forEach((item) => {
            if (
              item.substr(item.lastIndexOf(".") + 1) == "jpg" ||
              item.substr(item.lastIndexOf(".") + 1) == "jpeg" ||
              item.substr(item.lastIndexOf(".") + 1) == "png"
            ) {
              arr.push(item);
            } else {
              arr2.push(item);
            }
          });
          // this.qcData.filePathList
          this.$set(this.qcData, "imgList", arr);
          this.$set(this.qcData, "fileList", arr2);
        }

        this.directData = JSON.parse(JSON.stringify(res.data));
        if (res.data.businessData) {
          if (
            res.data.approvalBusiness == 723 ||
            res.data.approvalBusiness == 713 ||
            res.data.approvalBusiness == 717 ||
            res.data.approvalBusiness == 718 ||
            res.data.approvalBusiness == 719 ||
            res.data.approvalBusiness == 726 ||
            res.data.approvalBusiness == 727 ||
            res.data.approvalBusiness == 728 ||
            res.data.approvalBusiness == 714 ||
            res.data.approvalBusiness == 715 ||
            res.data.approvalBusiness == 716 ||
            res.data.approvalBusiness == 735 ||
            res.data.approvalBusiness == 736 ||
            res.data.approvalBusiness == 737 ||
            res.data.approvalBusiness == 729 ||
            res.data.approvalBusiness == 730 ||
            res.data.approvalBusiness == 731 ||
            res.data.approvalBusiness == 738 ||
            res.data.approvalBusiness == 739 ||
            res.data.approvalBusiness == 740 ||
            res.data.approvalBusiness == 732 ||
            res.data.approvalBusiness == 733 ||
            res.data.approvalBusiness == 734 ||
            res.data.approvalBusiness == 741 ||
            res.data.approvalBusiness == 742 ||
            res.data.approvalBusiness == 743 ||
            res.data.approvalBusiness == 746 ||
            res.data.approvalBusiness == 747 ||
            res.data.approvalBusiness == 748 ||
            res.data.approvalBusiness == 749 ||
            res.data.approvalBusiness == 750 ||
            res.data.approvalBusiness == 751
          ) {
            this.qcData.businessData = [
              JSON.parse(res.data.businessData).activityParam,
            ];
          } else if (res.data.approvalBusiness == 300) {
            this.qcData.businessData = JSON.parse(
              res.data.businessData
            ).detailParams;
            return;
          } else if (res.data.approvalBusiness == 253) {
            this.twoThing = JSON.parse(res.data.businessData);
            this.qcData.businessData = this.twoThing.productList;
            this.qcData.businessData.forEach((item) => {
              item.memberCode = this.twoThing.memberCode;
              item.memberName = this.twoThing.memberName;
            });
          } else if (res.data.approvalBusiness == 231) {
            this.qcData.businessData = JSON.parse(res.data.businessData);
            this.qcData.businessData.forEach((item) => {
              item.oldItemDz = item.oldItem;
              item.newItemDz = item.newItem;
            });
          } else {
            if (JSON.parse(res.data.businessData).constructor === Object) {
              this.qcData.businessData = [JSON.parse(res.data.businessData)];
            } else {
              this.qcData.businessData = JSON.parse(res.data.businessData);
            }
          }
          const regex = new RegExp("<img", "gi");
          this.qcData.businessData.forEach((item) => {
            if (item.content) {
              item.content = item.content.replace(
                regex,
                `<img style="max-width: 300px;"`
              );
            }
          });
        }
        let tableColumn = [];
        this.onlineSign.forEach((item) => {
          if (item.id == res.data.approvalBusiness) {
            tableColumn = item.textList;
          }
        });
        // table表头添加到数组
        let arr1 = [];
        this.tableColumn = [...new Set(tableColumn)];
      });
    },
    cancelCz() {
      this.$router.go(-1);
    },
    openBlank(item) {
      window.open(item);
    },
    toReceive() {
      api
        .receiveApproval({
          pkIdList: [this.pkId],
        })
        .then((res) => {
          if (res.code == 200) {
            this.$message({
              type: "success",
              message: "接收成功",
            });
            this.$router.go(-1);
          }
        });
    },
    saveDate() {
      api
        .approvalTrue({
          approvalCode: this.approvalCode,
          approveOperation: this.approveOperation,
          remark: this.remark,
        })
        .then((res) => {
          if (res.code == 200) {
            this.$message({
              message: res.msg,
              type: "success",
            });
            this.$router.go(-1);
          }
        });
    },
    toPrint() {
      printJs({
        printable: "print",
        type: "html",
        targetStyles: ["*"],
        maxWidth: 1100,
        scanStyle: false,
      });
      // setTimeout(() => {
      //   this.$print(this.$refs.print)
      // }, 100)
    },
  },
};
</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;
  .prin {
    position: absolute;
    right: 40px;
    top: 0;
  }
  .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;
      justify-content: space-between;
      margin-top: 20px;
    }
    .spbox1 {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      // justify-content: space-between;
      margin-top: 20px;
    }
    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;
    margin-top: 20px;
    padding: 15px 0;
    background: #fff;
    .thebtn {
      width: 120px;
      height: 38px;
    }
  }
}
::v-deep .el-textarea__inner {
  border: 0;
  padding: 0;
}
.fj {
  display: flex;
  align-items: center;
  img {
    width: 167px;
    height: 138px;
    border-radius: 10px 10px 10px 10px;
    margin-right: 20px;
  }
}
.qcImg {
  img {
    width: 300px;
    height: 200px;
  }
}
* {
  -webkit-print-color-adjust: exact !important; /* Chrome, Safari */

  color-adjust: exact !important; /*Firefox*/

  print-color-adjust: exact !important;
}
.cover {
  width: 80px;
  height: 80px;
}
</style>
