<template>
  <view class="contain">
    <view
      class="kuang"
      v-for="(item, index) in allData.handleBusinessList"
      :key="index"
    >
      <table class="tftable" border="1">
        <tr>
          <td colspan="4">
            <view class="tab_t">
              <view>{{ '编号' }} :</view>
              <view>
                <u-radio-group v-model="item.signType" placement="row">
                  <u-radio
                    :customStyle="{ marginRight: '10rpx' }"
                    v-for="(citem, cindex) in checkList"
                    :key="cindex"
                    :label="citem.label"
                    :name="citem.value"
                  >
                  </u-radio>
                </u-radio-group>
              </view>
            </view>
          </td>
        </tr>
        <tr>
          <td align="center" width="20%">{{ '发起部门' }}</td>
          <td align="center" width="30%">{{ item.signData.deptName || "" }}</td>
          <td align="center" width="20%">{{ '发起人' }}</td>
          <td align="center" width="30%">{{ item.signData.userName || "" }}</td>
        </tr>
        <tr>
          <td align="center" width="20%">{{ '主旨' }}</td>
          <td align="center" width="30%">
            {{ item.signData.approvalBusinessVal
            }}{{ item.signData.controlTypeVal || "" }}
          </td>
          <td align="center" width="20%">{{ '日期' }}</td>
          <td align="center" width="30%">
            {{ item.signData.creationTime }}
          </td>
        </tr>
        <tr>
          <td align="center" width="20%">{{ '审批流程' }}</td>
          <td colspan="3">
            <view class="disFlex">
              <view
                v-for="(ctem, cndex) in item.signData.detailList"
                :key="cndex"
                class="disFlex_i"
              >
                <picker
                  :range="approbalList"
                  range-key="nickName"
                  @change="bindPickerChange1($event, cndex, index)"
                >
                  <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(index)"
                  v-show="item.signData.detailList.length > 0"
                  name="minus-circle"
                  size="18"
                ></u-icon>
                <u-icon
                  @click="addData(index)"
                  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 item.signData.sendList"
                :key="cndex"
                class="disFlex_i"
              >
                <picker
                  :range="userAllList"
                  range-key="nickName"
                  @change="bindPickerChange2($event, cndex, index)"
                >
                  <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(index)"
                  v-show="item.signData.sendList.length > 0"
                  name="minus-circle"
                  size="18"
                ></u-icon>
                <u-icon
                  @click="addData1(index)"
                  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="item.remark"
                :placeholder="'请输入'"
              ></u--textarea>
            </view>
          </td>
        </tr>
        <tr>
          <td align="center" width="20%">{{ '业务诉求' }}</td>
          <td colspan="3">
            <view class="bigk">
              <view v-for="(aitem, aindex) in item.tableTit" :key="aindex">
                <view v-for="(ctem, cndex) in item.tableArr" :key="cndex">
                  <view class="hui">{{ aitem.label }}</view>
                  <view class="hei">{{ ctem[aitem.value] }}</view>
                </view>
              </view>
            </view>
          </td>
        </tr>
        <tr>
          <td align="center" width="20%">{{ '附件' }}</td>
          <td colspan="3">
            <view class="remark">
              <u-upload
                :fileList="allData.handleBusinessList[index].fileList"
                @afterRead="afterRead(index,$event)"
                @delete="deletePic(index,$event)"
                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: [],
          sendList: [],
        },
        approvalBusiness: "",
        handleBusinessList: [],
        processType: "",
      },
      onlineSign,
      approbalList: [],
      userAllList: [],
      checkList: [],
      fileList: [],
    };
  },
  onLoad(options) {
    this.allData = JSON.parse(options.data);

    this.allData.signData = {
      detailList: [],
      sendList: [],
    };
    this.allData.processType = options.index;
    this.allData.approvalBusiness = options.index;

    let arr = this.allData.handleBusinessList.map((item) => {
      return item.businessType;
    });
    this.getSignData(arr);
  },
  methods: {
    getSignData(arr) {
      api.signData(arr).then((res) => {
        this.allData.handleBusinessList.forEach((item) => {
          // 签呈表头数据添加到数组
          this.$set(item, "signType", 1);
          this.$set(item, "remark", "");
          this.$set(item, "fileList", []);
          res.data.forEach((ctem) => {
            if (item.businessType == ctem.approvalBusiness) {
              item.signData = ctem;
            }
          });
        });
        this.allData.handleBusinessList.forEach((item) => {
          item.tableArr = [];
          this.allData.signMemberList.forEach((ctem) => {
            if (item.businessType == ctem.businessType) {
              item.tableArr.push(ctem);
            }
          });
        });

        // // table表头添加到数组
        this.allData.handleBusinessList.forEach((item) => {
          this.onlineSign.forEach((ctem) => {
            if (item.businessType == ctem.id) {
              item.tableTit = ctem.textList;
            }
          });
        });

        this.unique(this.allData.handleBusinessList);

        // this.$forceUpdate();
        this.getApprove();
        this.getSignType();
      });
    },
    unique(arr) {
      for (var i = 0; i < arr.length; i++) {
        // 首次遍历数组
        for (var j = i + 1; j < arr.length; j++) {
          // 再次遍历数组
          if (arr[i].businessType == arr[j].businessType) {
            // 判断连个值是否相等
            arr.splice(j, 1); // 相等删除后者
            j--;
          }
        }
      }
      return arr;
    },
    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.handleBusinessList.forEach((item) => {
        item.fileList = item.fileList.map((ctem) => {
          return ctem.url;
        });
        item.userIdList = item.signData.detailList.map((ctem) => {
          return ctem.pkApprover;
        });
        item.sendIdList = item.signData.sendList.map((ctem) => {
          return ctem.pkSend;
        });
      });

      this.allData.handleBusinessList.forEach((item) => {
        item.userIdList = item.userIdList.filter((ctem) => ctem);
        item.sendIdList = item.sendIdList.filter((ctem) => ctem);
      });
      api.petitionConfirm(this.allData).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, aindex) {
      this.$set(
        this.allData.handleBusinessList[aindex].signData.detailList[index],
        "pkApproverVal",
        this.approbalList[e.detail.value].nickName +
          "(" +
          this.approbalList[e.detail.value].deptName +
          ")"
      );
      this.$set(
        this.allData.handleBusinessList[aindex].signData.detailList[index],
        "pkApprover",
        this.approbalList[e.detail.value].userId
      );
      this.$forceUpdate();
    },
    // 抄送人
    bindPickerChange2(e, index, aindex) {
      this.$set(
        this.allData.handleBusinessList[aindex].signData.sendList[index],
        "pkSendVal",
        this.userAllList[e.detail.value].nickName +
          "(" +
          this.userAllList[e.detail.value].deptName +
          ")"
      );
      this.$set(
        this.allData.handleBusinessList[aindex].signData.sendList[index],
        "pkSend",
        this.userAllList[e.detail.value].userId
      );
      this.$forceUpdate();
    },
    addData(index) {
      let arr = JSON.parse(
        JSON.stringify(
          this.allData.handleBusinessList[index].signData.detailList
        )
      );
      arr.push({
        pkApprover: "",
      });
      this.$set(
        this.allData.handleBusinessList[index].signData,
        "detailList",
        arr
      );
      this.$forceUpdate();
    },
    delData(index) {
      this.allData.handleBusinessList[index].signData.detailList.pop();
      this.$forceUpdate();
    },
    // 抄送
    addData1(index) {
      let arr = JSON.parse(
        JSON.stringify(this.allData.handleBusinessList[index].signData.sendList)
      );
      arr.push({
        pkSend: "",
      });
      this.$set(
        this.allData.handleBusinessList[index].signData,
        "sendList",
        arr
      );
      this.$forceUpdate();
    },
    delData1(index) {
      this.allData.handleBusinessList[index].signData.sendList.pop();
      this.$forceUpdate();
    },
   
    // 新增图片
    async afterRead(index, event) {
   
      let lists = [].concat(event.file);
      let fileListLen = this.allData.handleBusinessList[index].fileList.length;
      
      lists.map((item) => {
        this.allData.handleBusinessList[index].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.allData.handleBusinessList[index].fileList[fileListLen];
        this.$set(this.allData.handleBusinessList[index].fileList, fileListLen, {
          ...item,
          status: "success",
          message: "",
          url: result.data.url,
        });
        fileListLen++;
       
      }
    },
    //删除图片
    deletePic(index, event) {
      let file = event.file;
      let fileList = this.allData.handleBusinessList[index].fileList;
      let indexToDelete = fileList.findIndex((item) => item.url === file.url);
      if (indexToDelete !== -1) {
        fileList.splice(indexToDelete, 1);
      }
    },
   
    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(() => {
              console.log('🌈dasd',JSON.parse(res.data))
              resolve(JSON.parse(res.data));
            }, 1000);
          },
        });
      });
    },
  },
};
</script>
  
  <style lang="scss" scoped>
.contain {
  background: #f9f9f9;
  padding: 20rpx;
}
.kuang {
  padding: 20rpx 24rpx;
  background: #ffffff;
  margin-bottom: 20rpx;
  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: 2rpx solid #f9f9f9;
  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;
  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>