<template>
  <div class="page">
    <topBar v-if="topList.length > 0"
            :topList="topList"
            :moren="moren"></topBar>
    <div class="main">
      <div class="thetable"
           v-for="item,index in allData.handleBusinessList"
           :key="index">
        <div class="fontTitle"> {{'在线签呈'}}</div>
        <div class="titleflex">
          <div>{{'编号'}} :</div>
          <div>
            <el-radio-group v-model="item.signType">
              <el-radio :label="ctem.value"
                        v-for="ctem in checkList"
                        :key="ctem.value">{{ ctem.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"
                v-if="item.signData">{{ item.signData.deptName }}</td>
            <td colspan="1"
                width="140px"
                align="center"> {{'发起人'}} :</td>
            <td colspan="1"
                v-if="item.signData">{{ item.signData.userName }}</td>
          </tr>
          <tr>
            <td colspan="1"
                align="center"> {{'主旨'}} :</td>
            <td colspan="1"
                v-if="item.signData">{{ item.signData.approvalBusinessVal }}</td>
            <td colspan="1"
                align="center"> {{'日期'}} :</td>
            <td colspan="1"
                v-if="item.signData">{{ item.signData.creationTime }}</td>
          </tr>
          <!-- // 审批流程 -->
          <tr v-if="item.signData">
            <td colspan="1"
                align="center"> {{'审批流程'}}</td>
            <td colspan="3">
              <span class="disflex">
                <span v-for="(ctem, cndex) in item.signData.detailList"
                      style="margin:0 5px 5px 0">
                  <el-select v-model="ctem.pkApprover"
                             filterable
                             size="mini"
                             @change="getApprover"
                             :placeholder="'请选择'">
                    <el-option v-for="stem in approbalList"
                               :key="stem.userId"
                               :label="stem.nickName + '(' +stem.deptName+')'"
                               :value="stem.userId">
                    </el-option>
                  </el-select>
                </span>
                <span style="margin:0 5px 5px 0">
                  <i class="el-icon-remove-outline"
                     @click.stop="delData(index)"
                     v-show="item.signData.detailList.length>0"
                     style="font-size:18px;margin-right:5px"></i>
                  <i class="el-icon-circle-plus-outline"
                     style="font-size:18px"
                     @click.stop="addData(index)"></i>
                </span>
              </span>
            </td>
          </tr>
          <tr v-if="item.signData">
            <td colspan="1"
                align="center">{{'抄送人'}}</td>
            <td colspan="3">
              <div class="disflex">
                <span v-for="(ctem, cndex) in item.signData.sendList"
                      style="margin:0 5px 5px 0">
                  <el-select v-model="ctem.pkSend"
                             filterable
                             size="mini"
                             @change="getApprover"
                             :placeholder="'请选择'">
                    <el-option v-for="stem in userAllList"
                               :key="stem.userId"
                               :label="stem.nickName + '(' +stem.deptName+')'"
                               :value="stem.userId">
                    </el-option>
                  </el-select>
                </span>
                <span style="margin:0 5px 5px 0">
                  <i class="el-icon-remove-outline"
                     @click.stop="delData1(index)"
                     v-show="item.signData.sendList.length>0"
                     style="font-size:18px;margin-right:5px"></i>
                  <i class="el-icon-circle-plus-outline"
                     style="font-size:18px"
                     @click.stop="addData1(index)"></i>
                </span>
              </div>
            </td>
          </tr>
          <tr>
            <td style="height: 190px"
                align="center">{{'情况说明'}}</td>
            <td colspan="3"
                style="padding: 0">
              <div >
                <el-input type="textarea"
                          :rows="6"
                          :placeholder="'请输入'"
                          v-model="item.remark">
                </el-input>
              </div>
            </td>
          </tr>
          <tr>
            <td style="height: 193px"
                align="center"> {{'业务诉求'}}</td>
            <td colspan="3"
                style="padding: 0;vertical-align: top;">
              <div >
                <el-table :data="item.tableArr"
                          style="width: 100%"
                          :header-cell-style="{ background: '#EEEEEE' }">
                  <el-table-column v-for="ctem in item.tableTit"
                                   :key="ctem.value"
                                   align="center"
                                   :prop="ctem.value"
                                   :label="ctem.label">
                  </el-table-column>

                </el-table>
              </div>
            </td>
          </tr>
          <tr>
            <td style="height: 190px"
                align="center">{{'附件'}}</td>
            <td colspan="3"
                style="padding: 0">
              <div style="height: 100%;padding: 10px 20px">
                <el-upload class="upload-demo"
                           :action="uploadImgUrl"
                           :http-request="function(file){
                            return uploadPdfFile(file,index)
                            }"
                           :on-remove="removeFile"
                           multiple
                           :headers="headers"
                           :file-list="item.fileListObj">
                  <el-button size="small"
                             type="primary">{{'点击上传'}}</el-button>
                </el-upload>
              </div>
            </td>
          </tr>
        </table>
      </div>
    </div>
    <div class="footer">
      <div style="margin: 0 auto">
        <el-button class="thebtn"
                   @click="cancelCz"> {{ '取消' }}</el-button>
        <el-button type="primary"
                   class="thebtn"
                   v-hasButtons="['OnlineSubmissionConfirm']"
                   @click="saveDate"> {{ '确认' }}</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import topBar from '@/components/topBar'
import * as api from '@/api/business'
import * as man from '@/api/manage'
import onlineSign from '../../dashboard/onlineSign.json'
import { getToken } from '@/utils/auth'
export default {
  name: 'Zxqc',
  components: {
    topBar,
  },
  data() {
    return {
      uploadImgUrl: process.env.VUE_APP_BASE_API + '/system/upload', // 上传的图片服务器地址
      headers: {
        Authorization: getToken(),
      },
      onlineSign,
      moren: 'zxqc',
      topList: [
        {
          name: '基础业务',
          path: 'jcyw',
        },
        {
          name: '订单业务',
          path: 'ddyw',
        },
        {
          name: '确认业务',
          path: 'shyw',
        },
        {
          name: '在线签呈',
          path: 'zxqc',
        },
      ],
      checked: [],
      checkList: [],
      ywsq: '',
      ywsqList: [],
      qcData: {},
      memberPetitionVo: {
        businessNo: '',
        signType: '',
        description: '',
        petitionListVoList: [],
        czlx: '',
      },
      orderNumber: '',
      allData: {
        signData: {
          detailList: [],
          sendList: [],
        },
      },
      // 审批流程
      approbalList: [],
      userAllList: [],
    }
  },
  mounted() {
    this.allData = JSON.parse(this.$route.query.data)
    console.log(
      '%c [ this.allData ]-243',
      'font-size:13px; background:#cb3eeb; color:#ff82ff;',
      this.allData
    )
    this.allData.signData = {
      detailList: [],
      sendList: [],
    }
    this.allData.processType = this.$route.query.index

    let arr = this.allData.handleBusinessList.map((item) => {
      return item.businessType
    })
    this.getSignData(arr)
    // this.getDetails()
  },
  methods: {
    getSignData(arr) {
      man.signData(arr).then((res) => {
      
        // 签呈表头数据添加到数组
        this.allData.handleBusinessList.forEach((item) => {
          this.$set(item, 'signType', 1)
          this.$set(item, 'remark', '')
          this.$set(item, 'fileList', [])
          this.$set(item, 'fileListObj', [])
          res.data.forEach((ctem) => {
            if (item.businessType == ctem.approvalBusiness) {
              item.signData = ctem
            }
          })
        })
        // table数据添加到数组
        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.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() {
      // 审批流程
      man.approvalUser().then((res) => {
        this.approbalList = res.data
      })
      man.userAll().then((res) => {
        this.userAllList = res.data
      })
      man.approvalOperation().then((res) => {
        this.ywsqList = res.data
      })
    },
    getSignType() {
      man.signType().then((res) => {
        this.checkList = res.data
      })
    },
    saveDate() {
      this.allData.handleBusinessList.forEach((item) => {
        item.fileList = item.fileListObj.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)
      })

      man.petitionConfirm(this.allData).then((res) => {
        if (res.code == 200) {
          this.$message({
            message: res.msg,
            type: 'success',
          })
          this.$router.replace({
            path: '/information/business/jcyw',
          })
        }
      })
    },
    cancelCz() {
      this.$router.go(-1)
    },
    // 审批流程
    getApprover() {
      this.$nextTick(() => {
        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()
    },
    uploadPdfFile(file, index) {
      var formData = new FormData()
      // 文件对象
      formData.append('file', file.file)
      man.upload(formData).then((res) => {
        if (res.code == 200) {
          this.allData.handleBusinessList[index].fileListObj.push(res.data)
        } else {
          this.$message({
            type: 'error',
            message: '上传失败',
          })
        }
      })
    },
    removeFile(file, fileList) {
      this.allData.handleBusinessList.forEach((item) => {
        item.fileListObj.forEach((ctem, cndex) => {
          if (file.uid == ctem.uid) {
            item.fileListObj.splice(cndex, 1)
          }
        })
      })
    },
  },
}
</script>

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