<template>
  <div class="AppActivity Feedback RevenueFileMan page-body">
    <ul style="overflow: initial!important">
      <li>
        <span>
          <em>标题</em>
          <el-input class="w200" v-model="msg.Title" style="margin-left: 5px;" @change='handleCurrentChange(1)'>
          </el-input>
        </span>
      </li>
      <li v-if="F_Look == true">
        <span>
          <em>员工</em>
        </span>
        <el-select filterable v-model="msg.EmployeeId" style="margin-left: 5px;" @change='handleCurrentChange(1)'>
          <el-option label="不限" value=''></el-option>
          <el-option v-for="item in EmployeeList" :label='item.EmployeeName' :value='item.Id' :key='item.Id'>
          </el-option>
        </el-select>
      </li>
      <!-- <li>
            <span>
              <em>状态</em>
            </span>
            <el-select filterable v-model="msg.ConfirmStatus" >
              <el-option label="不限" :value='0'></el-option>
              <el-option label="未确认" :value='1'></el-option>
              <el-option label="已确认" :value='2'></el-option>
            </el-select>
          </li> -->
      <li>
        <span>
          <em>营收月份</em>
        </span>
        <el-date-picker class="w220" style="margin-left: 5px;" @change='handleCurrentChange(1)' v-model="msg.Date"
          type="month" value-format="yyyy-MM" placeholder="选择月">
        </el-date-picker>
      </li>

      <li style="float:right;margin-bottom:10px">
        <q-btn  color="primary"  size="11px"  label="查询"  @click="handleCurrentChange(1)"  style="margin-left:10px" />
        <q-btn  color="primary" v-if="F_Add == true"  size="11px"  label="新增"  @click="addRule"
           style="margin-left:10px" />

        <!-- <input  v-if="EmployeeId==1 || EmployeeId==5 || F_GeneralManager"
              type="button"
              class="hollowFixedBtn"
              value="制单"
              @click="goUrl"
            > -->
      </li>
    </ul>
    <table class="singeRowTable" border="0" cellspacing="0" cellpadding="0" v-loading="loading">
      <tr>
        <th>标题</th>
        <th>营收月份</th>
        <th>接收人</th>
        <th>描述</th>
        <!-- <th>状态</th> -->
        <th>文件列表</th>
        <!-- <th>签名图片</th>
          <th width="100">签名时间</th> -->
        <th>创建人/时间</th>
        <th>操作</th>
      </tr>
      <tr v-for="(item,i) in dataList" :key="i">
        <td>{{item.Title}}</td>
        <td>{{item.Date}}</td>
        <td>{{item.EmName}}</td>
        <td style="max-width: 200px;padding:  2px 5px ">{{item.Description}}</td>
        <!-- <td>{{item.ConfirmStatusName}}</td> -->

        <td>
          <p v-for="(list,index1) in item.EAddressList" :key="index1">
            <a :download="list.Name" style="text-decoration: underline;cursor: pointer;padding-top:4px" target="_blank"
              :href="list.Path">{{list.Name}}</a>
          </p>
        </td>
        <!-- <td style="padding:6px 0">
              <img v-if="item.SignImage" style="width:45px;height:45px" :src="item.SignImage" alt="">
          </td> -->
        <!-- <td>
              <span v-if="item.ConfirmStatus==1"></span>
              <span v-else>{{item.UpdateDate}}</span>
          </td> -->
        <td>
          <p>{{item.CreateByName}}</p>
          <p>{{item.CreateDate}}</p>
        </td>
        <td>
          <el-tooltip class="item" effect="dark" content="编辑" placement="top-start" v-if="EmployeeId == item.CreateBy">
            <el-button @click="SetRules(item)" v-if="EmployeeId == item.CreateBy" style="padding:4px;width: 28px;height: 28px;line-height: 0;" type="primary"
              icon="el-icon-edit" circle></el-button>
          </el-tooltip>
          <!-- <el-tooltip class="item" effect="dark" content="签名" placement="top-start">
                  <el-button v-if="item.ConfirmStatus==1 && item.EmployeeId==EmployeeId" @click="SetPic(item)" style="padding:4px" type="warning" icon="el-icon-star-off" circle></el-button>
              </el-tooltip> -->
          <el-tooltip class="item" effect="dark" content="删除" placement="top-start" v-if="EmployeeId == item.CreateBy">
            <el-button @click="Delete(item)" v-if="EmployeeId == item.CreateBy" style="padding:4px;width: 28px;height: 28px;line-height: 0;" type="danger"
              icon="el-icon-delete" circle></el-button>
          </el-tooltip>
          <!-- <el-tooltip class="item" effect="dark" content="利润分配制单" placement="top-start">
                  <el-button v-if="item.ConfirmStatus==2 && item.EmployeeId==EmployeeId" @click="goUrl(item)" style="padding:4px" type="success" icon="el-icon-circle-plus" circle></el-button>
              </el-tooltip> -->

        </td>
      </tr>
      <tr v-if="dataList.length==0">
        <td colspan="12" align="center">暂无数据</td>
      </tr>
    </table>
    <el-pagination background @current-change="handleCurrentChange" layout="total,prev, pager, next, jumper"
      :page-size="msg.pageSize" :total='total'>
    </el-pagination>
    <el-dialog title="营收文件" :visible.sync="ruleVisible" width="690px">
      <el-form ref="addMsg" :model="addMsg" :rules="rules" label-width="80px">
        <el-form-item label="标题" prop="Title">
          <el-input class="w220" v-model="addMsg.Title"></el-input>
        </el-form-item>
        <el-form-item label="接收人" prop="EmployeeId">
          <el-select class="w220" filterable v-model="addMsg.EmployeeId" @change="getName()">
            <!-- <el-option label="不限" value=''></el-option> -->
            <el-option label='所有人' value='0'></el-option>
            <el-option v-for="item in EmployeeList" :label='item.EmployeeName' :value='item.Id' :key='item.Id'>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="营收月份" prop="Date">
          <el-date-picker class="w220" v-model="addMsg.Date" type="month" value-format="yyyy-MM" placeholder="选择月">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="描述">
          <el-input style="width:525px" type="textarea" :autosize="{ minRows: 2, maxRows: 4}"
            v-model="addMsg.Description"></el-input>
        </el-form-item>
        <div style="padding-left:80px" class="_addUpload_box clearfix">
          <template v-for="(file,fIndex) in saveMsg">
            <div v-if="file.Type==3">
              <div style="width:100%;height:100%;overflow: hidden;">
                <img :src="file.Url?file.Url:file.Content">
              </div>
              <span class="iconfont icon-guanbi1" @click="deleteUploadFile(fIndex)"></span>
            </div>
            <div v-if="file.Type==1">
              <div class="iconfont "
                :class="file.Content.substring(file.Content.lastIndexOf('.')+1,file.Content.length).toUpperCase()=='PDF'? 'icon-pdf' : 'icon-excel'"
                @click="showUpLoadFile(file)">

              </div>
              <span class="iconfont icon-guanbi1" @click="deleteUploadFile(fIndex)"></span>
            </div>
            <div v-if="file.Type==2">
              <div class="iconfont icon-excel">

              </div>
              <span class="iconfont icon-guanbi1" @click="deleteUploadFile(fIndex)"></span>
            </div>
          </template>
          <div class="_pic_upload">
            <el-upload drag :http-request="uploadFileBtn" :multiple="true" :show-file-list="false" action="">
              <i class="el-icon-plus avatar-uploader-icon"></i>
              <div class="el-upload__text">点击/拖拽上传</div>
            </el-upload>
          </div>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="ruleVisible = false">取 消</el-button>
        <el-button size="small" type="danger" @click="RulesOk('addMsg')">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 签名 -->
    <div class="Sign" :class="signState?'zindex':''">
      <div class="signature">
        <p class="f14" style="padding:10px 10px 10px 0">签名
          <span @click="CloseSign" style="float:right" class="el-icon-close"></span>
        </p>
        <div class="signatureBox">
          <div class="canvasBox" ref="canvasHW">
            <canvas ref="canvasF" @touchstart='touchStart' @touchmove='touchMove' @touchend='touchEnd'
              @mousedown="mouseDown" @mousemove="mouseMove" @mouseup="mouseUp"></canvas>
            <div class="button" style="text-align:center;margin-top:20px">
              <el-button size="small" @click="overwrite">重写</el-button>
              <el-button size="small" type="danger" @click="commit">提交</el-button>

            </div>

          </div>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
  import moment from "moment"
  import {
    queryEmployee
  } from '../../../api/users/user'; //获取业务员
  import {
    UploadSelfFile
  } from '../../../api/common/common'
  export default {

    name: 'Feedback',
    data() {
      return {
        F_GeneralManager: false,
        total: 0,
        msg: {
          EmployeeId: '',
          Title: '',
          ConfirmStatus: 0,
          pageIndex: 1,
          pageSize: 10,
          Date: '',
          CreateBy: 0,
        },
        dataList: [],
        loading: false,
        companyList: [],
        ruleVisible: false,
        EmployeeList: [],
        addMsg: {
          Id: 0,
          EmployeeId: '',
          Title: '',
          EAddressList: [],
          Description: '',
          EmpName: '',
          CreateByName: '',
          UpdateByName: '',
        },
        rules: {
          Title: [{
            required: true,
            message: '请输入标题',
            trigger: 'blur'
          }],
          EmployeeId: [{
            required: true,
            message: '请选择接收人',
            trigger: 'change'
          }],
          Date: [{
            type: 'string',
            required: true,
            message: '请选择时间',
            trigger: 'change'
          }],
        },
        EmployeeId: '',
        saveMsg: [],
        addMsgNew: {
          Id: 0,
          SignImage: '',
        },
        signState: false,

        imgSrc: '',
        stageInfo: '',
        imgUrl: '',
        client: {},
        points: [],
        canvasTxt: null,
        startX: 0,
        startY: 0,
        moveY: 0,
        moveX: 0,
        endY: 0,
        endX: 0,
        w: null,
        h: null,
        isDown: false,
        isViewAutograph: this.$route.query.isViews > 0,
        contractSuccess: this.$route.query.contractSuccess,
        F_Look: false,
        F_Add: false

      }
    },
    created() {
      // this.getCompany();
      let userInfo = this.getLocalStorage();
      this.EmployeeId = userInfo.Id;
      userInfo.ActionMenuList.map(x => { //判断权限
        if (x.FunctionCode == "F_RevenueFileMan_Look") { //判断是否查看权限
          this.F_Look = true;
        }
        if (x.FunctionCode == "F_RevenueFileMan_Add") { //判断是否有新增权限
          this.F_Add = true;
        }
      })
      if (this.F_Look == false) {
        this.msg.CreateBy = userInfo.Id
      }

    },
    mounted() {
      this.getList();
      this.getEmployeeList();
      let canvas = this.$refs.canvasF
      canvas.height = this.$refs.canvasHW.offsetHeight - 100
      canvas.width = this.$refs.canvasHW.offsetWidth - 10
      this.canvasTxt = canvas.getContext('2d')
      this.stageInfo = canvas.getBoundingClientRect()

    },
    filters: {
      YMD(date) {
        return moment(date).format("YYYY-MM-DD");
      }
    },

    methods: {
      GetSupperOrderEditAuth() {
        // F_GeneralManager_Special 财务总经理副总经理权限
        var actionCode = this.$AuthCode.F_GeneralManager_Special;
        this.CheckUserAuth(actionCode, res => {
          if (res.data.resultCode == 1 && res.data.data == 1) {
            this.F_GeneralManager = true;
          }
        });
      },
      goUrl() {
        this.$router.push({
          name: 'addFinancialDocuments',
          query: {
            id: 116,
            Name: '利润分配单',
            Type: 2,
            IsUploadPic: 1,
            blank: "y",
            tab: name
          }
        });
      },
      Delete(item) {
        this.$confirm('是否删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.apipost('financestatistics_post_DelRevenueExcelInfoForEdu', {
            Id: item.Id
          }, res => {
            if (res.data.resultCode == 1) {
              this.Success(res.data.message)
              this.handleCurrentChange(1);
            } else {
              this.Error(res.data.message)
            }
          }, err => {})
        }).catch(() => {

        });
      },
      SetPic(item) {
        this.addMsgNew = {
          Id: item.Id,
          SignImage: '',
        }
        this.overwrite();
        this.signState = true
      },
      CloseSign() {
        this.signState = false;
      },
      // 签名
      //重写
      overwrite() {
        this.canvasTxt.clearRect(0, 0, this.$refs.canvasF.width, this.$refs.canvasF.height)
        this.points = []
      },
      uuid(len, radix) {
        var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');
        var uuid = [],
          i;
        radix = radix || chars.length;
        if (len) {
          // Compact form
          for (i = 0; i < len; i++) uuid[i] = chars[0 | Math.random() * radix];
        } else {
          var r;
          uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-';
          uuid[14] = '4';
          for (i = 0; i < 36; i++) {
            if (!uuid[i]) {
              r = 0 | Math.random() * 16;
              uuid[i] = chars[(i == 19) ? (r & 0x3) | 0x8 : r];
            }
          }
        }
        return uuid.join('');
      },
      dataURLtoFile(dataurl, filename) { //将base64转换为文件
        var arr = dataurl.split(','),
          mime = arr[0].match(/:(.*?);/)[1],
          bstr = atob(arr[1]),
          n = bstr.length,
          u8arr = new Uint8Array(n);
        while (n--) {
          u8arr[n] = bstr.charCodeAt(n);
        }
        return new File([u8arr], filename, {
          type: mime
        });
      },
      //提交签名
      commit() {
        let that = this;
        let imgUrl = this.$refs.canvasF.toDataURL();
        let newArr = [];
        var fileName = `${that.uuid(10,10)}.png`;
        var path = `/RevenueFile/`;
        newArr.push(this.dataURLtoFile(imgUrl, fileName))
        this.UploadSelfFileT(path, newArr, x => {
          this.addMsgNew.SignImage = that.domainManager().ViittoFileUrl + x.data.FilePath;
        }, 1);
        setTimeout(() => {
          this.apipost(
            "financestatistics_post_SetRevenueExcelSign",
            this.addMsgNew,
            res => {
              if (res.data.resultCode == 1) {
                this.getList();
              } else {
                this.Error(res.data.message)
              }
            },
            err => {}
          );
        }, 500);
        this.signState = false;


      },
      mouseDown(ev) {
        ev = ev || event
        ev.preventDefault()
        if (1) {
          let obj = {
            x: ev.offsetX,
            y: ev.offsetY
          }
          this.startX = obj.x
          this.startY = obj.y
          this.canvasTxt.beginPath()
          this.canvasTxt.moveTo(this.startX, this.startY)
          this.canvasTxt.lineTo(obj.x, obj.y)
          this.canvasTxt.stroke()
          this.canvasTxt.closePath()
          this.points.push(obj)
          this.isDown = true
        }
      },
      mouseMove(ev) {
        ev = ev || event
        ev.preventDefault()
        if (this.isDown) {
          let obj = {
            x: ev.offsetX,
            y: ev.offsetY
          }
          this.moveY = obj.y
          this.moveX = obj.x
          this.canvasTxt.beginPath()
          this.canvasTxt.moveTo(this.startX, this.startY)
          this.canvasTxt.lineTo(obj.x, obj.y)
          this.canvasTxt.stroke()
          this.canvasTxt.closePath()
          this.startY = obj.y
          this.startX = obj.x
          this.points.push(obj)
        }
      },
      mouseUp(ev) {
        ev = ev || event
        ev.preventDefault()
        if (1) {
          let obj = {
            x: ev.offsetX,
            y: ev.offsetY
          }
          this.canvasTxt.beginPath()
          this.canvasTxt.moveTo(this.startX, this.startY)
          this.canvasTxt.lineTo(obj.x, obj.y)
          this.canvasTxt.stroke()
          this.canvasTxt.closePath()
          this.points.push(obj)
          this.points.push({
            x: -1,
            y: -1
          })
          this.isDown = false
        }
      },
      //mobile
      touchStart(ev) {
        ev = ev || event
        ev.preventDefault()
        if (ev.touches.length == 1) {
          let obj = {
            x: ev.targetTouches[0].clienX,
            y: ev.targetTouches[0].clientY,
          }
          this.startX = obj.x
          this.startY = obj.y
          this.canvasTxt.beginPath()
          this.canvasTxt.moveTo(this.startX, this.startY)
          this.canvasTxt.lineTo(obj.x, obj.y)
          this.canvasTxt.stroke()
          this.canvasTxt.closePath()
          this.points.push(obj)
        }
      },
      touchMove(ev) {
        ev = ev || event
        ev.preventDefault()
        if (ev.touches.length == 1) {
          let obj = {
            x: ev.targetTouches[0].clientX - this.stageInfo.left,
            y: ev.targetTouches[0].clientY - this.stageInfo.top
          }
          this.moveY = obj.y
          this.moveX = obj.x
          this.canvasTxt.beginPath()
          this.canvasTxt.moveTo(this.startX, this.startY)
          this.canvasTxt.lineTo(obj.x, obj.y)
          this.canvasTxt.stroke()
          this.canvasTxt.closePath()
          this.startY = obj.y
          this.startX = obj.x
          this.points.push(obj)
        }
      },
      touchEnd(ev) {
        ev = ev || event
        ev.preventDefault()
        if (ev.touches.length == 1) {
          let obj = {
            x: ev.targetTouches[0].clientX - this.stageInfo.left,
            y: ev.targetTouches[0].clientY - this.stageInfo.top
          }
          this.canvasTxt.beginPath()
          this.canvasTxt.moveTo(this.startX, this.startY)
          this.canvasTxt.lineTo(obj.x, obj.y)
          this.canvasTxt.stroke()
          this.canvasTxt.closePath()
          this.points.push(obj)
        }
      },
      handleCurrentChange(val) {
        this.msg.pageIndex = val;
        this.getList();
      },
      getCompany() {
        this.apipost(
          "admin_get_BranchGetList",
          this.getCompanyMsg,
          res => {
            if (res.data.resultCode == 1) {
              this.companyList = res.data.data;
              this.companyList.map(item => {
                this.companyListObj[item.Id] = item.BName;
              })
            } else {}
          },
          err => {}
        );
      },

      addRule() {
        this.ruleVisible = true;
        this.InitaddMsg();
        this.saveMsg = [];

      },
      SetRules(item) {
        this.ruleVisible = true;
        this.addMsg = Object.assign({}, item);
        this.getName()
        this.saveMsg = [];
        //  1 文档  2 数据 3 图片
        let typeArr = [{
            stringArr: 'GIF|JPG|JPEG|PNG|BMP',
            type: 3
          },
          {
            stringArr: 'DOCX|DOC|XLSX|XLS|PPT|PPTX|PDF',
            type: 1
          },
        ]

        this.addMsg.EAddressList.forEach(item => {
          let ft = item.Name.substring(item.Name.lastIndexOf('.') + 1, item.Name.length).toUpperCase();
          let fileTypeNumber = 2;
          let typeOk = false;
          typeArr.forEach(x => {
            if (x.stringArr.indexOf(ft) != '-1') {
              fileTypeNumber = x.type;
              typeOk = true;
            }
          })
          let obj = {
            Content: item.Path,
            Path: item.Path,
            Url: item.Path,
            Name: item.Name,
            Type: fileTypeNumber,
          };
          this.saveMsg.push(obj)
        })

      },
      RulesOk(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if (this.saveMsg.length == 0) {
              this.Error("请上传文件！")
              return;
            }
            this.addMsg.EAddressList = [];
            this.saveMsg.forEach(item => {
              let obj = {
                Path: item.Url,
                Name: item.Name,
              };
              this.addMsg.EAddressList.push(obj)
            })
            let userInfo = this.getLocalStorage();
            this.addMsg.CreateByName = userInfo.AccountName
            this.addMsg.UpdateByName = userInfo.AccountName
            this.apipost(
              "financestatistics_post_SetRevenueExcelInfoForEdu",
              this.addMsg,
              res => {
                this.loading = false;
                if (res.data.resultCode == 1) {
                  this.handleCurrentChange(1);
                  this.ruleVisible = false;
                } else {
                  this.Error(res.data.message)
                }
              },
              err => {}
            );

          } else {


          }
        });

      },
      InitaddMsg() {
        this.addMsg = {
          Id: 0,
          EmployeeId: '',
          Title: '',
          EAddressList: [],
          Description: '',
          Date: '',
          EmpName: '',
          CreateByName: '',
          UpdateByName: '',
        }
      },
      deleteUploadFile(i) { // 删除上传文件
        this.saveMsg.splice(i, 1);
      },
      uploadFileBtn(file) { //上传
        if (file.file.size > 1024 * 1024 * 10) {
          this.$message.warning(this.$t('tips.wjdxbncgsz'))
          return
        }
        //  1 文档  2 数据 3 图片
        let typeArr = [{
            stringArr: 'GIF|JPG|JPEG|PNG|BMP',
            type: 3
          },
          {
            stringArr: 'DOCX|DOC|XLSX|XLS|PPT|PPTX|PDF',
            type: 1
          },
        ]
        let ft = file.file.name.substring(file.file.name.lastIndexOf('.') + 1, file.file.name.length).toUpperCase();
        let fileTypeNumber = 2;
        let typeOk = false;
        typeArr.forEach(x => {
          if (x.stringArr.indexOf(ft) != '-1') {
            fileTypeNumber = x.type;
            typeOk = true;
          }
        })
        if (!typeOk) return this.$message.error(this.$t('tips.qscWEfile'));
        let newArr = [];
        newArr.push(file.file)
        let path = "/RevenueFile/"
        this.$message.info(this.$t('tips.shangchuanzhong'))
        UploadSelfFile('Temporary', file.file, x => {
          let fileSize = file.file.size < 1024 ? file.file.size : (file.file.size / 1024).toFixed(0);
          this.saveMsg.push({
            Content: x.FileUrl,
            ID: 0,
            Type: fileTypeNumber,
            Url: x.FileUrl,
            Name: x.FileName
          })
          this.$message.success(this.$t('tips.scchenggong'));
        });

      },
      getEmployeeList() {
        var qMsg = {
          Dept_Id: 0
        }
        queryEmployee(qMsg).then(res => {
          if (res.Code == 1) {
            this.EmployeeList = res.Data;
          }
        }).catch(() => {

        })
      },
      getDepart(id) {
        this.form.DepartmentId = id;
        this.$forceUpdate();
      },

      getList() {
        this.loading = true;
        this.apipost(
          "financestatistics_get_GetRevenueExcelPageListForEdu",
          this.msg,
          res => {
            this.loading = false;
            if (res.data.resultCode == 1) {
              this.dataList = res.data.data.pageData;
              this.total = res.data.data.count;
            } else {}
          },
          err => {}
        );
      },
      showUpLoadFile(i) { // 预览上传文件
        if (i.Type == 3) {
          this.picIsShow = true;
          let isExsit = false
          this.images.forEach(x => {
            if (x == i.Content)
              isExsit = true
          })
          if (!isExsit) {
            this.images.push(i.Content)
          } else {
            this.$viewer.view(this.images.indexOf(i.Content))
          }
          this.$viewer.show()
        } else {
          if (i.Content.substring(i.Content.lastIndexOf('.') + 1, i.Content.length).toUpperCase() == 'PDF') {
            this.previewPDF(i.Url)
          } else {
            window.open("https://view.officeapps.live.com/op/view.aspx?src=" + i.Url)
          }
        }
      },
      getName() {
        if (this.addMsg.EmployeeId == 0) {
          this.addMsg.EmpName = '所有人'
        } else {
          this.EmployeeList.map(x => {
            if (x.Id == this.addMsg.EmployeeId) {
              this.addMsg.EmpName = x.EmployeeName;
              return
            }
          })
        }
      }
    }
  }

</script>
<style>
  @import "../css/cssReset.css";

  .RevenueFileMan {
    position: relative;
  }

  .RevenueFileMan .zindex {
    z-index: 9999 !important;
    opacity: 1 !important;
  }

  .RevenueFileMan .signature {
    width: 600px;
    background: #fff;
    padding: 15px;
    border-radius: 20px;
    cursor: pointer;
  }

  .RevenueFileMan .Sign {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, .4);
    z-index: -500;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
  }

  .RevenueFileMan .Sign .signatureBox {
    width: 100%;
    height: 300px;
    box-sizing: border-box;
    overflow: hidden;
    background: #fff;
    z-index: 100;
    display: flex;
    flex-direction: column;
    margin-top: 20px;
    padding: 0 20px;
    box-sizing: border-box;
  }

  .RevenueFileMan .Sign .canvasBox {
    box-sizing: border-box;
    flex: 1;
  }

  .RevenueFileMan .Sign canvas {
    border: 1px solid #7d7d7d;
  }

  .RevenueFileMan .Sign .btnBox {
    padding: 10px;
    text-align: center;
  }

  .RevenueFileMan .Sign .btnBox button:first-of-type {
    background: transparent;
    border-radius: 4px;
    height: 40px;
    width: 80px;
    font-size: 14px;
  }

  .RevenueFileMan .Sign .btnBox button:last-of-type {
    background: #71b900;
    color: #fff;
    border-radius: 4px;
    height: 40px;
    width: 80px;
    font-size: 14px;
  }

  .RevenueFileMan .el-upload-dragger,
  .page_fdd .el-upload-dragger {
    font-size: 28px;
    color: #8c939d;
    width: 126px;
    height: 80px;
    line-height: 41px;
    text-align: center;
  }

  .AppActivity .el-form-item {
    display: inline-block;
  }

  .Feedback ul>li {
    display: inline-block;
    font-size: 12px;
    color: #666;
    margin: 20px 30px 0px 0;
  }

  .Feedback .singeRowTable {
    margin-top: 20px;
  }

  ._addUpload_box {
    display: block;
    margin-top: 15px
  }

  ._addUpload_box img {
    width: 100%;
    height: 100%;
  }

  ._addUpload_box>div {
    float: left;
    width: 138px;
    height: 92px;
    border: 1px dashed rgba(210, 210, 210, 1);
    border-radius: 2px;
    cursor: pointer;
    margin-bottom: 10px;
    padding: 5px;
    margin-right: 10px;
    position: relative;
  }

  ._addUpload_box>div:hover {
    background-color: #f5f5f5;
  }

  ._addUpload_box .icon-guanbi1 {
    font-size: 12px;
    color: white;
    display: inline-block;
    margin-left: 15px;
    position: absolute;
    right: -6px;
    top: -9px;
    background-color: #f56c6c;
    border-radius: 50%;
    height: 20px;
    width: 20px;
    text-align: center;
    line-height: 20px;
  }

  ._addUpload_box .icon-guanbi1:hover {
    font-size: 12px;
    color: #c94052;
  }

  ._addUpload_box .icon-excel,
  ._addUpload_box .icon-pdf {
    text-align: center;
    font-size: 38px;
    color: green;
    line-height: 75px;
  }

</style>
