<!--
 * @Descripttion: 
 * @version: 
 * @Author: 王三华
 * @Date: 2023-10-18 09:55:41
-->
<!--
 * @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>{{'编号'}} :</view>
              <view>
                <u-radio-group v-model="allData.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%">{{ allData.signData.deptName }}</td>
          <td align="center"
              width="20%">{{'发起人'}}</td>
          <td align="center"
              width="30%">{{ allData.signData.userName }}</td>
        </tr>
        <tr>
          <td align="center"
              width="20%">{{'主旨'}}</td>
          <td align="center"
              width="30%">{{ allData.signData.approvalBusinessVal }}{{ allData.signData.controlTypeVal || "" }}</td>
          <td align="center"
              width="20%">{{'日期'}}</td>
          <td align="center"
              width="30%">{{ allData.signData.creationTime }}</td>
        </tr>
        <tr>
          <td align="center"
              width="20%">{{'审批流程'}}</td>
          <td colspan="3">
            <view class="disFlex">
              <view v-for="(ctem, cndex) in allData.signData.detailList"
                    :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="allData.signData.detailList.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 allData.signData.sendList"
                    :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="allData.signData.sendList.length>0"
                        name="minus-circle"
                        size="18"></u-icon>
                <u-icon @click="addData1"
                        name="plus-circle"
                        size="18"></u-icon>
              </view>
            </view>
          </td>
        </tr>
        <tr>
          <td align="center"
              width="20%">{{'情况说明'}}</td>
          <td colspan="3">
            <view class="remark">
              <u--textarea v-model="allData.remark"
                           :placeholder="'请输入'"></u--textarea>
            </view>
          </td>
        </tr>
        <tr>
          <td align="center"
              width="20%">{{'业务诉求'}}</td>
          <td colspan="3">
            <view class="bigk"  v-if="allData.cancelType == 3||allData.cancelType == 1">
              <view  v-for="(item, index) in allData.tableTit"
                    :key="index">
                <view  v-for="(ctem, cndex) in allData.tableList" :key="cndex">
                  <view v-if="item.value =='returnCode'">
                    <view class="hui">{{ item.label }}</view>
                    <view class="hei">{{ctem.orderCode }}</view>
                  </view>
                  <view v-if="item.value =='productName'">
                    <view class="hui">{{ item.label }}</view>
                    <view class="hei" 
                    v-for="(stem, sndex) in ctem.orderCancelDetailVOList" :key="sndex">{{stem.productName }}</view>
                  </view>
                  <view v-else>
                    <view class="hui">{{ item.label }}</view>
                    <view class="hei">{{ctem[item.value] }}</view>
                  </view>
                </view>
              </view>
            </view>
            <view class="bigk"  v-if="allData.cancelType == 2">
              <view  v-for="(ctem, cndex) in allData.tableList[0].memberList"
                    :key="cndex">
              <view  v-for="(item, index) in allData.tableTit" :key="index">
                  <view v-if="item.value =='returnCode'">
                    <view class="hui">{{ item.label }}</view>
                    <view class="hei">{{ctem.orderCode }}</view>
                  </view>
                  <view v-if="item.value =='productName'">
                    <view class="hui">{{ item.label }}</view>
                    <view class="hei">{{ctem.productName }}</view>
                  </view>
                  <view v-else>
                    <view class="hui">{{ item.label }}</view>
                    <view class="hei">{{ctem[item.value] }}</view>
                  </view>
                </view>
              </view>
            </view>
          </td>
        </tr>
        <tr>
          <td align="center"
              width="20%">{{'附件'}}</td>
          <td colspan="3">
            <view class="remark">
              <u-upload :fileList="fileList"
                        @afterRead="afterRead"
                        @delete="deletePic"
                        name="1"
                        multiple></u-upload>
            </view>
          </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/manage'
import onlineSign from '@/assets/onlineSign.json'
import { getToken } from '@/config/auth.js'
export default {
  data() {
    return {
      headers: {
        Authorization: getToken(),
      },
      uploadImgUrl: process.env.VUE_APP_BASE_API + '/system/upload', // 上传的图片服务器地址
      allData: {
        remark: '',
        signType: 1,
        fileList: [],
        signData: {
          detailList: [],
        },
        approvalBusiness: '',
      },
      onlineSign,
      approbalList: [],
      userAllList: [],
      checkList: [],
      fileList: [],
    }
  },
  onLoad(options) {
    this.allData.tableList = JSON.parse(options.data)
    console.log('%c [ this.allData.tableList ]-204', 'font-size:13px; background:#1125ba; color:#5569fe;', this.allData.tableList)
    this.allData.signData = {
      detailList: [],
      sendList: [],
    }
    
    this.allData.approvalBusiness = options.index
    this.allData.cancelRoad = options.cancelRoad

    this.getSignData([this.allData.approvalBusiness])
  },
  methods: {
    getSignData(arr) {
      api.signData(arr).then((res) => {
        this.allData.signData = res.data[0]
        // 签呈表头数据添加到数组
        this.$set(this.allData, 'signType', 1)
        this.$set(this.allData, 'remark', '')
        this.$set(this.allData, 'fileList', [])
        this.$set(
          this.allData,
          'cancelType',
          this.allData.tableList[0].cancelType
        )
        this.$set(
          this.allData,
          'orderCode',
          this.allData.tableList[0].orderCode
        )
        // table表头添加到数组
        this.onlineSign.forEach((ctem) => {
          if (this.allData.approvalBusiness == ctem.id) {
            this.allData.tableTit = ctem.textList
          }
        })
        this.$forceUpdate()
        this.getApprove()
        this.getSignType()
      })
    },
    getApprove() {
      // 审批人
      api.approvalUser().then((res) => {
        this.approbalList = res.data
      })
      // 抄送人
      api.userAll().then((res) => {
        this.userAllList = res.data
      })
    },
    // 签呈类型
    getSignType() {
      api.signType().then((res) => {
        this.checkList = res.data
      })
    },
    saveDate() {
      this.allData.userIdList = this.allData.signData.detailList.map((item) => {
        return item.pkApprover
      })
      this.allData.userIdList = this.allData.userIdList.filter((item) => item)
      // 抄送流程
      this.allData.sendIdList = this.allData.signData.sendList.map((item) => {
        return item.pkSend
      })
      this.allData.sendIdList = this.allData.sendIdList.filter((item) => item)
      this.allData.fileList = this.fileList.map((item) => {
        return item.url
      })
      let obj = {
        cancelType: this.allData.cancelType,
        orderCode: this.allData.orderCode,
        signType: this.allData.signType,
        remark: this.allData.remark,
        fileList: this.allData.fileList,
        userIdList: this.allData.userIdList,
        sendIdList: this.allData.sendIdList,
        cancelRoad: this.allData.cancelRoad,
      }
      api.cancelOrderConfirm(obj).then((res) => {
        if (res.code == 200) {
          uni.showToast({
            title: res.msg,
            icon: 'none',
            duration: 1500,
          })
          this.cancelCz()
        }
      })
    },
    cancelCz() {
      setTimeout(() => {
        uni.navigateBack({ delta: 2 })
      }, 1500)
    },
    // 审批流
    bindPickerChange1(e, index) {
      this.$set(
        this.allData.signData.detailList[index],
        'pkApproverVal',
        this.approbalList[e.detail.value].nickName +
          '(' +
          this.approbalList[e.detail.value].deptName +
          ')'
      )
      this.$set(
        this.allData.signData.detailList[index],
        'pkApprover',
        this.approbalList[e.detail.value].userId
      )
      this.$forceUpdate()
    },
    // 抄送人
    bindPickerChange2(e, index) {
      this.$set(
        this.allData.signData.sendList[index],
        'pkSendVal',
        this.userAllList[e.detail.value].nickName +
          '(' +
          this.userAllList[e.detail.value].deptName +
          ')'
      )
      this.$set(
        this.allData.signData.sendList[index],
        'pkSend',
        this.userAllList[e.detail.value].userId
      )
      this.$forceUpdate()
    },
    addData() {
      let arr = JSON.parse(JSON.stringify(this.allData.signData.detailList))
      arr.push({
        pkApprover: '',
      })
      this.$set(this.allData.signData, 'detailList', arr)
      this.$forceUpdate()
    },
    delData() {
      this.allData.signData.detailList.pop()
      this.$forceUpdate()
    },
    // 抄送
    addData1() {
      let arr = JSON.parse(JSON.stringify(this.allData.signData.sendList))
      arr.push({
        pkSend: '',
      })
      this.$set(this.allData.signData, 'sendList', arr)
      this.$forceUpdate()
    },
    delData1() {
      this.allData.signData.sendList.pop()
      this.$forceUpdate()
    },
    // 删除图片
    deletePic(event) {
      this.fileList.splice(event.index, 1)
    },
    // 新增图片
    async afterRead(event) {
      // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
      let lists = [].concat(event.file)
      let fileListLen = this.fileList.length
      lists.map((item) => {
        this.fileList.push({
          ...item,
          status: 'uploading',
          message: '上传中',
        })
      })
      for (let i = 0; i < lists.length; i++) {
        const result = await this.uploadFilePromise(lists[i].url)
        let item = this.fileList[fileListLen]
        this.fileList.splice(
          fileListLen,
          1,
          Object.assign(item, {
            status: 'success',
            message: '',
            url: result.data.url,
          })
        )
        fileListLen++
      }
    },
    uploadFilePromise(url) {
      return new Promise((resolve, reject) => {
        let a = uni.uploadFile({
          url: this.uploadImgUrl, // 仅为示例，非真实的接口地址
          filePath: url,
          name: 'file',
          header: this.headers,
          formData: {
            user: 'test',
          },
          success: (res) => {
            setTimeout(() => {
              resolve(JSON.parse(res.data))
            }, 1000)
          },
        })
      })
    },
  },
}
</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 #f9f9f9;
  tr td {
    font-size: 11px;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    padding: 30rpx 0px;
    border: 1px solid #333;

    // 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;
  margin-bottom: 10rpx;
}
.hei{
  margin-bottom: 10rpx;

}
.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;
  }
}
.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;
}
::v-deep .u-input {
  padding: 0 9px !important;
}
::v-deep .u-form-item__body__left__content__label {
  font-size: 12px;
}
::v-deep .u-form-item__body {
  padding: 5px 0;
}
.remark {
  padding: 0 20rpx;
}
</style>