<template>
  <div class="flexOne">
    <div class="query-box" style="border-bottom: none;">
      <ul>
        <li>
          <span><em>公司</em>
            <el-select filterable @change='getUser' v-model='msg.RB_BranchId'>
              <el-option label='不限' value='-1'></el-option>
              <el-option v-for='item in companyList' :label='item.BName' :value='item.Id' :key='item.Id'></el-option>
            </el-select>
          </span>
        </li>
        <li>
          <span><em>申请人</em>
            <el-select filterable v-model='msg.CreateBy'>
              <el-option label='不限' value='0'></el-option>
              <el-option v-for='item in userList' :label='item.name' :value='item.empId' :key='item.empId'></el-option>
            </el-select>
          </span>
        </li>
        <li>
          <span><em>待审核人</em>
            <el-select filterable v-model='msg.ToAuditId'>
              <el-option label='不限' value='0'></el-option>
              <el-option v-for='item in userList' :label='item.name' :value='item.empId' :key='item.empId'></el-option>
            </el-select>
          </span>
        </li>
        <li>
          <span><em>已审核人</em>
            <el-select filterable v-model='msg.AuditedId'>
              <el-option label='不限' value='0'></el-option>
              <el-option v-for='item in userList' :label='item.name' :value='item.empId' :key='item.empId'></el-option>
            </el-select>
          </span>
        </li>
        <li>
          <span><em>请假类型</em>
            <el-select v-model='msg.TemplateId'>
              <el-option v-for='item in ApplyTypeList' :label='item.label' :value='item.value' :key='item.value'>
              </el-option>
            </el-select>
          </span>
        </li>
        <li>
          <span><em>申请审核状态</em>
            <el-select v-model='msg.appAuditStatus'>
              <el-option v-for='item in appAuditStatusList' :label='item.label' :value='item.value' :key='item.value'>
              </el-option>
            </el-select>
          </span>
        </li>
        <li><span><em>申请时间</em>
            <el-date-picker v-model='msg.StartTime' class='w135' value-format="yyyy-MM-dd" type="date"></el-date-picker>
            -
            <el-date-picker v-model='msg.EndTime' class='w135' value-format="yyyy-MM-dd" type="date"></el-date-picker>
          </span>
        </li>
        <li>
          <input type="button" class="hollowFixedBtn" value="查询" @click="resetPageIndex(),getList()" />
        </li>
      </ul>
    </div>
    <div style="width: 100%; overflow: auto;">
      <table style="min-width: 1400px;" class="singeRowTable" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <th>公司</th>
          <th>申请人</th>
          <th>请假类型</th>
          <th width="300">待审核人</th>
          <th width="300">已审核人</th>
          <th>申请时间</th>
          <th>{{$t('admin.admin_status')}}</th>
          <th width="150">{{$t('system.table_operation')}}</th>
        </tr>
        <tbody v-loading='loading'>
          <tr v-for='item in list'>
            <td>{{item.BName}}</td>
            <td>{{item.EmName}}</td>
            <td>{{item.TemplateName}}</td>
            <td>{{item.ToAuditName}}</td>
            <td>{{item.AuditedName}}</td>
            <td>{{item.CreateTime}}</td>
            <td>{{item.Status}}</td>
            <td>
              <el-tooltip class="item" effect="dark" content="详情" placement="top">
                <el-button type="primary" icon="el-icon-tickets" circle @click="getDetail(item.Id,item.TemplateType)">
                </el-button>
              </el-tooltip>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <el-pagination background @current-change="handleCurrentChange" :current-page.sync="currentPage"
      layout="total,prev, pager, next, jumper" :page-size=msg.pageSize :total=total>
    </el-pagination>
    <el-dialog custom-class='w500' :title="dialogTitle" :visible.sync="outerVisible" center>
      <div class="approvalStatisticalDialog">
        <div class="title">{{detailList.Proposer}}{{detailList.TempleteTypeName}}</div>
        <div class="user">
          <img v-if="!detailList.ProposerPhoto" src="../../assets/img/litheader.png" alt="">
          <img v-else :src="detailList.ProposerPhoto" alt="" :onerror="defaultImg">
          <p>{{detailList.Proposer}}</p>
          <p><span style="color:#257BF1; font-size: 14px;">{{detailList.Status}}</span></p>
        </div>
        <div class="detail">
          <table border="0" cellspacing="0" cellpadding="0" class="myApprovalTable">
            <tr v-for="(item,index) in detailList.Details"
              v-if="(item.formType=='Image' && item.value.length>0) || item.formType!='Image'">
              <td width="80">{{item.title}}：</td>

              <td v-if="item.formType=='String'">{{item.value}}</td>
              <td v-if="item.formType=='Json'">
                <div v-for="(i,index) in item.value" style="border-bottom: 1px solid #ccc; padding:10px 0;">
                  <p style="line-height: 24px;" v-for="o in i">{{o.title}}：{{o.value}}</p>
                </div>
              </td>
              <td v-if="item.formType=='Image'">
                <img v-if='item.value.length>0'
                  style="width: 50px; height: 50px; border-radius: 4px; margin:0 10px 0 0;"
                  v-for="(img,index) in item.value" :src="img" @click="getPic(item.value)" />
              </td>
            </tr>
          </table>
        </div>
        <div class="audit">
          <div class="auditItem">
            <img v-if="!detailList.ProposerPhoto" src="../../assets/img/litheader.png" alt="">
            <img v-else :src="detailList.ProposerPhoto" alt="" :onerror="defaultImg">
            <p>
              <span>{{detailList.Proposer}}</span>&nbsp;&nbsp;<span>发起申请</span><span
                class="fr">{{detailList.ProposerTime}}</span>
            </p>
          </div>
          <div class="auditItem" v-for="(item,index) in detailList.arList">
            <img v-if='item.AuditRecordList.length==1&&!item.AuditRecordList[0].AuditEmPhoto'
              src="../../assets/img/litheader.png" />
            <img v-if='item.AuditRecordList.length==1&&item.AuditRecordList[0].AuditEmPhoto'
              :src='item.AuditRecordList[0].AuditEmPhoto' alt="" :onerror="defaultImg" />
            <img v-if='item.AuditRecordList.length>1' src="../../assets/img/bg_z1@2x.png" />
            <p v-if='item.AuditRecordList.length==1'>
              <span>{{item.AuditRecordList[0].AuditEmName}}</span>
              <span
                :style="'color: ' + item.AuditRecordList[0].StatusColor + ' !important'">{{item.AuditRecordList[0].Stauts}}</span>
              <span class="fr">{{item.AuditRecordList[0].AuditTime}}</span>
              <span
                style="display:block; padding-left: 40px; text-indent: 0; font-size: 12px; line-height: 24px; color: #333;">{{item.AuditRecordList[0].Description}}</span>
              <span v-if="item.AuditRecordList[0].CareOfList!=null"
                style="display: inline-block; line-height: 24px; font-size: 12px; text-indent: 0; padding-left:40px; color: #666;">
                <b style="color: red;">由 </b>{{item.AuditRecordList[0].CareOfList[0].BeFrom}} <b
                  style="color: red;">转</b> {{item.AuditRecordList[0].CareOfList[0].Target}}
                <br />
                {{item.AuditRecordList[0].CareOfList[0].Remarks}}
              </span>
            </p>
            <p v-if='item.AuditRecordList.length>1' style="cursor: pointer;">
              <span>{{item.AuditDescription}}{{item.AuditWay}}</span>
              <i class="el-icon-arrow-right"></i>
            </p>
            <div v-if='item.AuditRecordList.length>1'
              style=" width: 300px; height: auto; margin:15px 0; border-radius: 4px; background: #F0F3FA;">
              <p v-if='item.AuditWayStatus==2' style="padding: 10px; color: #666;">须以下人员全部审批通过</p>
              <p v-if='item.AuditWayStatus==3' style="padding: 10px; color: #666;">以下人员大于等于一人审批通过即可</p>

              <div v-for="i in item.AuditRecordList">
                <p class="auditItemDetailtitle">
                  <img width="28" height="28" v-if="!i.AuditEmPhoto" src="../../assets/img/litheader.png" alt="">
                  <img width="28" height="28" v-else :src="i.AuditEmPhoto" alt="" :onerror="defaultImg">
                  <span>{{i.AuditEmName}}</span>
                  <span :style="'color: ' + i.StatusColor + ' !important'">{{i.Stauts}}</span>
                  <span
                    style="display:block; padding-left: 40px; text-indent: 0; font-size: 12px; line-height: 24px; color: #333;">{{i.Description}}</span>
                  <span v-if='i.CareOfList!=null'
                    style="display: inline-block; line-height: 24px; font-size: 12px; text-indent: 0; padding-left:40px; color: #666;">
                    <b style="color: red;">由 </b>{{i.CareOfList[0].BeFrom}} <b style="color: red;">转</b>
                    {{i.CareOfList[0].Target}}
                    <br />
                    {{i.CareOfList[0].Remarks}}
                  </span>
                </p>
                <div class="auditItemImgList" v-if="toArr(i.Image).length>0">
                  <img v-for='img in toArr(i.Image)' :src="img" @click="getPic(toArr(i.Image))" />
                </div>
              </div>
            </div>
          </div>
        </div>
        <!--audit end-->
        <div class="send" v-if="detailList.AuditStatus==5">
          <!--v-if="detailList.AuditStatus==5"-->
          <p class="sentTitle">抄送<span>审批通过后，通知抄送人</span></p>
          <div class="sendList">
            <div v-for="(item,index) in detailList.CopyToPeopleList">
              <img v-if="!item.EmPhoto" src="../../assets/img/litheader.png" alt="">
              <img v-else :src="item.EmPhoto" alt="" :onerror="defaultImg">
              <br />
              {{item.EmName}}
            </div>
          </div>
        </div>
        <!--send end-->
      </div>

      <div :class="{viewBigPicLayer:true,viewBigPicLayerDisplayNone:dspNone}" @click="closePicLayer">
        <i @click="closePicLayer" class="el-icon-circle-close-outline clolseViewBigPicLayer"></i>
        <el-carousel height="600px" :interval="5000" trigger="click">
          <el-carousel-item v-for="(item,index) in picObj" :key="index">
            <img :src="item" />
          </el-carousel-item>
        </el-carousel>
      </div>

      <div slot="footer" class="dialog-footer">
        <button class="hollowFixedBtn" @click="outerVisible=false">关闭</button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        picObj: [],
        dspNone: true,
        loading: true,
        outerVisible: false,
        dialogTitle: "",
        total: 0,
        currentPage: 1,
        defaultImg: 'this.src="' + require('../../assets/img/litheader.png') + '"',
        //请求数据
        msg: {
          RB_BranchId: '-1',
          Status: '0',
          CreateBy: '0',
          ToAuditId: '0',
          AuditedId: '0',
          TemplateId: 0,
          pageIndex: 1,
          pageSize: 15,
          StartTime: '',
          EndTime: '',
        },
        getCompanyMsg: {
          RB_Group_Id: '0',
          Status: '0',
        },
        getUserMsg: {
          RB_Branch_id: '-1',
        },
        //返回数据
        list: [],
        companyList: [],
        userList: [],
        ApplyTypeList: [],
        appAuditStatusList: [],
        detailList: {},
      }
    },
    methods: {
      getPic(obj) {
        this.picObj = obj
        this.dspNone = false;
      },
      closePicLayer() {
        this.dspNone = true
      },
      toArr(val) {
        let arr = []
        if (val != "[]") {
          val.substring(1, val.length - 1).split(',').forEach(item => {
            arr.push(item.substring(1, item.length - 1))
          });
        }
        return arr;
      },
      getDetail(id, type) {
        this.apipost('app_user_workflow_GetAuditInfo', {
          WorkFlowId: id,
          TemplateType: type
        }, res => {
          if (res.data.resultCode == 1) {
            this.outerVisible = true;
            this.dialogTitle = '审批详情'
            this.detailList = res.data.data
          }
        }, err => {})
      },
      getAppAuditStatus() {
        this.apipost('app_user_workflow_get_myinitiate_auditstatus', {}, res => {
          if (res.data.resultCode == 1) {
            res.data.data.forEach(item => {
              for (let key in item) {
                if (item.hasOwnProperty(key)) {
                  this.appAuditStatusList.push({
                    label: key,
                    value: item[key]
                  })
                }
              }
            })
          }
        }, err => {})
      },
      getApplyType() { //模板类型
        this.apipost('app_user_workflow_get_templatetype', {}, res => {
          if (res.data.resultCode == 1) {
            res.data.data.forEach(item => {
              for (let key in item) {
                if (item.hasOwnProperty(key)) {
                  this.ApplyTypeList.push({
                    label: key,
                    value: item[key]
                  })
                }
              }
            })
          }
        }, err => {})
      },
      getCompany() {
        this.apipost('admin_get_BranchGetList', this.getCompanyMsg, res => {
          if (res.data.resultCode == 1) {
            this.companyList = res.data.data;
          } else {}
        }, err => {})
      },
      getUser() {
        this.msg.CreateBy = '0'
        this.msg.ToAuditId = '0'
        this.msg.AuditedId = '0'
        this.getUserMsg.RB_Branch_id = this.msg.RB_BranchId;
        this.apipost('app_get_company_employee', this.getUserMsg, res => {
          if (res.data.resultCode == 1) {
            this.userList = res.data.data;
          } else {}
        }, err => {})
      },
      getList() {
        this.loading = true;
        this.apipost('WorkFlow_get_GetOAPageList', this.msg, res => {
          if (res.data.resultCode == 1) {
            this.list = res.data.data.pageData;
            this.total = res.data.data.count;
            this.loading = false

          } else {}
        }, err => {})
      },
      handleCurrentChange(val) {
        this.msg.pageIndex = val;
        this.getList();
      },
      resetPageIndex() {
        this.msg.pageIndex = 1;
        this.currentPage = 1

      },

    },
    mounted() {
      let userInfo = this.getLocalStorage();
      this.getUserMsg.RB_Group_id = this.getCompanyMsg.RB_Group_Id = userInfo.RB_Group_id; //集团ID		
      this.getCompany()
      this.getUser()
      this.getList()
      this.getApplyType()
      this.getAppAuditStatus()
    }

  }

</script>

<style>
  .approvalStatisticalDialog {
    width: 400px;
    background: #fff
  }

  .approvalStatisticalDialog .title {
    height: 48px;
    background: #EDEEF0;
    line-height: 48px;
    font-size: 16px;
    color: #333;
    text-indent: 30px;
  }

  .approvalStatisticalDialog .user {
    width: 340px;
    margin: 0 30px;
    border-bottom: 1px solid #E6E6E6;
    height: 60px;
    padding: 30px 0;
    box-sizing: content-box
  }

  .approvalStatisticalDialog .user>p {
    line-height: 28px;
  }

  .approvalStatisticalDialog .user>img {
    width: 58px;
    height: 58px;
    border-radius: 29px;
    float: left;
    margin: 0 12px 0 0;
  }

  .approvalStatisticalDialog .detail {
    width: 340px;
    margin: 0 30px;
    padding: 25px 0;
    border-bottom: 1px solid #E6E6E6;
    min-height: 120px;
  }

  .approvalStatisticalDialog .audit {
    width: 340px;
    margin: 30px 30px 0;
    min-height: 120px;
    border-bottom: 1px solid #E6E6E6;
  }

  .approvalStatisticalDialog .audit .auditItem {
    min-height: 80px;
    width: 320px;
    margin-left: 20px;
    border-left: 1px solid #EDEDED;
    position: relative;
    font-size: 14px;
  }

  .approvalStatisticalDialog .audit .auditItem:last-child {
    border-left: none;
  }

  .approvalStatisticalDialog .audit .auditItem>p {
    line-height: 40px;
    text-indent: 40px;
  }

  .approvalStatisticalDialog .audit .auditItem>img {
    width: 40px;
    height: 40px;
    border-radius: 20px;
    position: absolute;
    left: -20px;
  }

  .approvalStatisticalDialog .send {
    width: 340px;
    margin: 30px 30px 0;
    min-height: 120px;
  }

  .approvalStatisticalDialog .send .sentTitle {
    height: 14px;
    line-height: 14px;
    text-indent: 10px;
    border-left: 3px solid #E95252;
    font-size: 14px;
  }

  .approvalStatisticalDialog .send .sentTitle span {
    color: #666;
    margin-left: 20px;
  }

  .approvalStatisticalDialog .send .sendList>div {
    float: left;
    margin: 10px 10px 0 0;
    font-size: 12px;
    color: #666;
    width: 40px;
    text-align: center;
  }

  .approvalStatisticalDialog .send .sendList>div>img {
    width: 40px;
    height: 40px;
    border-radius: 20px;
  }

  .approvalStatisticalDialog .myApprovalTable tr {
    height: 40px;
    font-size: 14px;
  }

  .approvalStatisticalDialog .myApprovalTable tr td:nth-child(1) {
    text-align: right;
    color: #666;
  }

</style>