<!--
 * @Descripttion: 
 * @version: 
 * @Author: 王三华
 * @Date: 2023-10-11 10:12:16
-->
<template>
  <view class="contain">
    <view class="kuang">
      <table class="tftable"
             border="1">
        <tr>
          <td colspan="4">
            <view class="tab_t">
              <view>{{'编号'}} :{{ qcData.approvalCode }}</view>
              <view>
                <u-radio-group v-model="qcData.signType"
                               placement="row">
                  <u-radio :customStyle="{marginRight:'10rpx'}"
                           v-for="(item, index) in checkList"
                           :key="index"
                           disabled
                           :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>
        </tr>
        <tr>
          <td align="center"
              width="20%">{{'抄送人'}}</td>
          <td colspan="3">
            <span style="margin-left: 20rpx">
              {{ qcData.sendStr }}
            </span>
          </td>
        </tr>
        <tr>
          <td align="center"
              style="height: 130px"
              width="20%">{{'情况说明'}}</td>
          <td colspan="3">
            <view class="bigk">
              {{ qcData.remark }}
            </view>
          </td>
        </tr>
        <tr v-if="directData.approvalBusiness != 0">
          <td align="center"
              style="height: 130px"
              width="20%">{{'业务诉求'}}</td>
          <td colspan="3">
            <view class="bigk">
              <view v-if="directData.approvalBusiness == 300"
                    v-for="(ctem, cndex) in qcData.businessData"
                    :key="cndex">
                <div>
                  <span class="hui">{{ '会员编号' }}:</span>{{ ctem.memberCode }}
                </div>
                <div>
                  <span class="hui">{{ '会员姓名' }}:</span>{{ ctem.memberName }}
                </div>
                <div>
                  <span class="hui">{{ '交款方式' }}:</span>{{ ctem.paymentMethodStr }}
                </div>
                <div v-for="(item, index) in enumsAccountList"
                     :key="index">
                  <span class="hui">{{ item.pkTransactionKeyVal  }}:
                  </span>
                  {{ctem.rechargeDetailMap[`${item.pkId}`]|numberToCurrency}}
                </div>
                <div>
                  <span class="hui">{{ '备注(前台)' }}:</span>{{ ctem.memberRemarks }}
                </div>
                <div>
                  <span class="hui">{{ '备注(后台)' }}:</span>{{ ctem.remarks }}
                </div>
              </view>
              <view v-else
                    v-for="(item, index) in tableColumn"
                    :key="index">
                <view v-for="(ctem, cndex) in qcData.businessData"
                      :key="cndex">
                  <view class="hui">{{ item.label }}</view>
                  <view v-if="item.value== 'oldItemDz'">
                    <div>
                      <span class="hui">{{ '收货人' }}:</span>{{ ctem.oldItemDz.recName }}
                    </div>
                    <div>
                      <span class="hui">{{ '收货电话' }}:</span>{{ ctem.oldItemDz.recPhone }}
                    </div>
                    <div>
                      <span class="hui">{{ '收货地址' }}:</span>{{ ctem.oldItemDz.nameList }}{{ ctem.oldItemDz.recAddress }}
                    </div>
                  </view>
                  <view v-else-if="item.value== 'newItemDz'">
                    <div>
                      <span class="hui">{{ '收货人' }}:</span>{{ctem.newItemDz.recName }}
                    </div>
                    <div>
                      <span class="hui">{{ '收货电话' }}:</span>{{ ctem.newItemDz.recPhone }}
                    </div>
                    <div>
                      <span class="hui">{{ '收货地址' }}:</span>{{ ctem.newItemDz.nameList }}{{ ctem.newItemDz.recAddress }}
                    </div>
                  </view>
                  <div v-else-if="item.value == 'actExplain'"
                       style="
                            color: #48b2fd;
                            text-decoration: underline;
                            cursor: pointer;
                          ">
                    {{'查看详情'}}
                  </div>
                  <div v-else-if="item.value== 'oldItem'">
                    <div v-for="stem,sndex in ctem.oldItemList">
                      <div>
                        名称:{{stem.productName }}
                      </div>
                      <div>
                        {{'编号'}}:{{ stem.productCode }}
                      </div>
                      <div>
                        {{'规格'}}:{{ stem.specsName }}
                      </div>
                      <div>
                        {{ '数量' }}:{{ stem.quantity }}
                      </div>
                      <div>
                        {{ '价格' }}(￥):{{ stem.price }}
                      </div>
                      <div>
                        {{ '业绩' }}({{isLocals()}}):{{ stem.achievement }}
                      </div>
                      <div style="margin-bottom: 10px;">
                        是否赠品:{{ stem.isGiftVal}}
                      </div>
                    </div>
                    <div> {{'邮费'}}:{{ ctem.oldPostage }}</div>
                  </div>
                  <div v-else-if="item.value== 'newItem'">
                    <div v-for="stem,sndex in ctem.newItemList">
                      <div>
                        名称:{{stem.productName }}
                      </div>
                      <div>
                        {{'编号'}}:{{ stem.productCode }}
                      </div>
                      <div>
                        {{'规格'}}:{{ stem.specsName }}
                      </div>
                      <div>
                        数量:{{ stem.quantity }}
                      </div>
                      <div>
                        {{ '价格' }}(￥):{{ stem.price }}
                      </div>
                      <div>
                        {{ '业绩' }}({{isLocals()}}):{{ stem.achievement }}
                      </div>
                      <div style="margin-bottom: 10px;">
                        是否赠品:{{ stem.isGiftVal}}
                      </div>
                    </div>
                    <div> {{'邮费'}}:{{ ctem.newPostage }}</div>
                  </div>
                  <div v-else-if="item.value == 'zzoldItemAddress'">
                    <div> {{ '收货人' }}:{{ ctem.recName }}</div>
                    <div>{{ '收货电话' }}:{{ ctem.recPhone }}</div>
                    <div> {{ '收货地址' }}:{{ ctem.recAddress }}</div>
                  </div>
                  <div v-else-if="item.value == 'zznewItemAddress'">
                    <div> {{ '收货人' }}:{{ ctem.newRecName }}</div>
                    <div>{{ '收货电话' }}:{{ ctem.newRecPhone }}</div>
                    <div> {{ '收货地址' }}:{{ ctem.newRecAddress }}</div>
                  </div>
                  <div v-else-if="item.value == 'licenseImage'">
                    <u-album :urls="[ctem[item.value]]"></u-album>
                  </div>
                  <div v-else-if="
                            item.value == 'action1' && ctem.signSource != 1
                          "
                       style="
                            color: #48b2fd;
                            text-decoration: underline;
                            cursor: pointer;
                          "
                       @click="details1(ctem)">
                    资质认证
                  </div>
                  <div v-else-if="item.value == 'idFront'"
                      >
                      <u-album :urls="[ctem.idFront]" keyName="src1"></u-album>
                      <u-album :urls="[ctem.idBack]" keyName="src2"></u-album>
                  </div>
                  <div v-else-if="item.value == 'changeIdFront'"
                      >
                      <u-album :urls="[ctem.changeIdFront]" keyName="src1"></u-album>
                      <u-album :urls="[ctem.changeIdBack]" keyName="src2"></u-album>
                  </div>
                  <view v-else>{{ctem[item.value] }}</view>
                </view>
              </view>
            </view>
          </td>
        </tr>
        <tr>
          <td align="center"
              style="height: 130px"
              width="20%">{{'附件'}}</td>
          <td colspan="3">
            <div v-if="qcData.imgList.length>0"
                 class="fj"
                 v-for="(item, index) in qcData.imgList"
                 :key="index">
              <img :src="item"
                   alt="" />
            </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>
          <td align="center"
              style="height: 130px"
              width="20%">{{$t('部门意见')}}</td>
          <td colspan="3">

          </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;">
            <span v-if="item.status != 0"
                  style="margin-right: 20px">{{
                item.remark
              }}</span>
            <u--textarea v-else
                         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="(ctem, cndex) in ywsqList"
                             :key="cndex"
                             disabled
                             :label="ctem.label"
                             :name="ctem.value">
                    </u-radio>
                  </u-radio-group>
                </span>
              </div>
              <div class="spbox1"> {{'日期'}} :：{{ item.approverTime }}</div>
            </div>
            <div class="spbox1"
                 v-if="item.status == 0">
              <span>审批状态：</span>
              <span>
                <u-radio-group v-model="approveOperation"
                               placement="row">
                  <u-radio :customStyle="{marginRight:'10rpx'}"
                           v-for="(ctem, cndex) in ywsqList"
                           :key="cndex"
                           :label="ctem.label"
                           :name="ctem.value">
                  </u-radio>
                </u-radio-group>
              </span>
            </div>
          </td>
        </tr>
      </table>
    </view>
    <view class="zhan"></view>
    <view class="footer_a"
          v-if="isLook == 0">
      <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 class="footer_a"
          v-if="isLook == 2">
      <view class="footer">

        <u-button @click="cancelCz"
                  color="#CCCCCC"
                  text="取消"></u-button>
        <u-button @click="toReceive"
                  color="#70BEFE"
                  text="接收"
                  class="btnn"></u-button>
      </view>
    </view>
  </view>
</template>

<script>
import * as api from '@/api/index'
import { isLocals, isLocalSymbol } from '@/util/numberToCurrency'
import onlineSign from '@/assets/onlineSign.json'
export default {
  data() {
    return {
      approvalCode: '',
      ywsqList: [],
      checkList: [],
      qcData: {},
      directData: '',
      onlineSign,
      tableColumn: [],
      remark: '',
      approveOperation: 1,
      isLook: 0,
      pkId: '',
      paymentTypeList: [],
      enumsAccountList: [],
    }
  },
  onLoad(options) {
    this.approvalCode = options.id
    this.isLook = options.index
    this.pkId = options.pkId || ''
    this.getApprove()
    this.getSignType()
    this.getDetails()
  },
  methods: {
    isLocals,
    getApprove() {
      api.approvalOperation().then((res) => {
        this.ywsqList = res.data
      })
      api.getpaymentType().then((res) => {
        this.paymentTypeList = res.data
      })
      api.getenumsCzAccount({ accountProperty: 1 }).then((res) => {
        this.enumsAccountList = res.rows
      })
    },
    getSignType() {
      api.signType().then((res) => {
        this.checkList = res.data
      })
    },
    details1(ctem) {
      uni.navigateTo({
        url:
          '/pages/index/zzrz?code=' +
          ctem.storeCode +
          '&approvalBusiness=' +
          this.directData.approvalBusiness,
      })
    },
    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.$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 == 724
          ) {
            this.qcData.businessData = [
              JSON.parse(res.data.businessData).activityParam,
            ]
          } else if (res.data.approvalBusiness == 300) {
            this.qcData.businessData = JSON.parse(
              res.data.businessData
            ).detailParams
            this.qcData.businessData.forEach((item) => {
              this.paymentTypeList.forEach((ctem) => {
                if (item.paymentMethod == ctem.value) {
                  item.paymentMethodStr = ctem.label
                }
              })
            })
            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)
            }
          }
        }
        console.log(
          '%c [ this.qcData.businessData ]-191',
          'font-size:13px; background:#bda943; color:#ffed87;',
          this.qcData.businessData
        )
        let tableColumn = []
        this.onlineSign.forEach((item) => {
          if (item.id == res.data.approvalBusiness) {
            tableColumn = item.textList
          }
        })
        // table表头添加到数组
        let arr1 = []
        this.tableColumn = [...new Set(tableColumn)]
      })
    },
    openBlank(item) {
      window.open(item)
    },
    cancelCz() {
      uni.navigateBack({ delta: 1 })
    },
    saveDate() {
      api
        .approvalTrue({
          approvalCode: this.approvalCode,
          approveOperation: this.approveOperation,
          remark: this.remark,
        })
        .then((res) => {
          if (res.code == 200) {
            uni.showToast({
              title: res.msg,
              icon: 'none',
              duration: 1500,
            })
            uni.navigateBack({ delta: 1 })
          }
        })
    },
    toReceive() {
      api
        .receiveApproval({
          pkIdList: [this.pkId],
        })
        .then((res) => {
          if (res.code == 200) {
            uni.showToast({
              title: res.msg,
              icon: 'none',
              duration: 1500,
            })
            uni.navigateBack({ delta: 1 })
          }
        })
    },
  },
}
</script>

<style lang="scss" scoped>
.contain {
  // background: #f9f9f9;
}
.kuang {
  padding: 20rpx 24rpx;
  background: #f9f9f9;
  box-shadow: 0px 2px 10px 0px rgba(204, 204, 204, 0.4);
  border-radius: 10px 10px 10px 10px;
}
.tftable {
  font-size: 12px;
  border-collapse: collapse;
  border-radius: 10px;
  width: 100%;
  background: #fff;
  border: 1px solid #333;
  tr td {
    font-size: 11px;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    padding: 30rpx 0px;
    // height: 60px;
  }
}
.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: 0px 2px 10px 0px rgba(204, 204, 204, 0.4);
}
.footer {
  display: flex;
  align-items: center;
  padding: 0 60rpx;
  .btnn {
    margin-left: 40rpx;
  }
}
</style>