<template>
  <div class="appProval">
    <div class="query-box ">
      <ul>
        <li><span><em>所属校区</em>
            <el-select :disabled="IsParentCompany!=1" v-model="QueryMsg.BranchId" @change="getList()">
              <el-option v-for="item in companyList" :label='item.BName' :value='item.Id' :key='item.Id'>
              </el-option>
            </el-select>
          </span></li>
        <li></li>
      </ul>
    </div>
    <div class="flexOne">
      <div class="approval_title">出勤休假(4)</div>
      <div class="approval_list" v-loading='loading'>
        <div class="row">
          <div class="approval_item col  shadow-1" v-for="(item,index) in dataList"
            :style="{'margin-right':dataList.length!=index+1?'40px':'0' }">
            <img :src="item.Icon" width="86" style="" />
            <span class="tit">{{item.Name}}</span>
            <p class="updateP">全部可见</p>
            <div style="width: 36px;height: 2px;background: #E2E2E2;margin: 8px;"></div>
            <p class="des" v-html="item.describe"></p>
            <p class="des" v-html="item.describe2"></p>
            <p class="tim">{{item.UpdateTime}}</p>
            <div class="row" style="margin-top: 50px;justify-content: space-around;width: 100%" v-if='item.Status==1'>
              <q-btn color="primary" label="审批流程" style="padding: 0 20px" @click="workflow(item.Id)"></q-btn>
              <q-btn outline style="color: #2961FE;padding: 0 10px" label="停用"
                @click="updateTempStatus(item.Id,item.TemplateType,item.Status)"></q-btn>
            </div>
            <div class="row" style="margin-top: 50px;justify-content: center;" v-if='item.Status==2'>
              <q-btn outline style="color: #2961FE;padding: 0 10px" label="启用"
                @click="updateTempStatus(item.Id,item.TemplateType,item.Status)"></q-btn>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    getTemplateList,
    setTemplate
  } from '../../api/administration/administration';
  import {
    getSchoolDropdown //校区下拉
  } from '../../api/school/index'
  export default {
    meta: {
      title: "审批"
    },
    data() {
      return {
        loading: true,
        //请求数据
        QueryMsg: {
          BranchId: '-1'
        },
        //返回数据
        dataList: [],
        companyList: [],
        IsParentCompany: 2,
        drawer: false,
        SpId: 0
      }
    },
    methods: {
      workflow(Id) {
        this.$router.push({
          path: '/administration/ApprovalProcess?Id=' + Id + '&Bid=' + this.QueryMsg.BranchId
        });
      },
      getList() {
        let describe = ['适用于请假申请', '适用于出差申请', '适用于外出申请', '当员工考勤出现缺卡时，可发起补卡审批']
        let describe2 = ['精确扣减出勤时间，并同步考勤报表', '精确汇总至考勤报表', '精确汇总至考勤报表', '审批通过后考勤报表中的缺卡记录改为正常']
        getTemplateList({
          BranchId: this.QueryMsg.BranchId
        }).then(res => {
          if (res.Code == 1) {
            this.loading = false;
            this.dataList = res.Data[0].List;
            this.dataList.forEach((item, index) => {
              item.describe = describe[index]
              item.describe2 = describe2[index]
            })
          }
        }).catch(() => {

        })
      },
      getCompanyList() {
        getSchoolDropdown({}).then(res => {
          if (res.Code == 1) {
            res.Data.forEach(x => {
              var obj = {
                Id: '',
                BName: ''
              }
              obj.Id = x.SId.toString();
              obj.BName = x.SName;
              this.companyList.push(obj);
            })
          }
        }).catch(() => {})
      },
      updateTempStatus(id, type, status) {
        if (status == 1) {
          this.$confirm('是否停用?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            setTemplate({
              Id: id,
              TemplateType: type,
              Status: 2,
              BranchId: this.QueryMsg.BranchId
            }).then(res => {
              if (res.Code == 1) {
                this.$message.success("已经停用")
                this.getList()
              } else {
                this.$message.error("操作失败")
              }
            }).catch(() => {})
          }).catch(() => {
            this.$message.info('已取消停用')
          });
        }
        if (status == 2) {
          this.$confirm('是否启用?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            setTemplate({
              Id: id,
              TemplateType: type,
              Status: 1,
              BranchId: this.QueryMsg.BranchId
            }).then(res => {
              if (res.Code == 1) {
                this.$message.success("启用成功")
                this.getList()
              } else {
                this.$message.error("操作失败")
              }
            }).catch(() => {})
          }).catch(() => {
            this.$message.info('已取消启用')
          });
        }
      },
      goUrl(path, id) {
        this.$router.push({
          name: path,
          query: {
            "id": id,
            "Bid": this.QueryMsg.BranchId
          }
        })
      }
    },
    mounted() {
      let userInfo = this.getLocalStorage();
      this.QueryMsg.BranchId = userInfo.School_Id.toString();
      let RefBranchId = this.$route.query.Bid;
      if (RefBranchId != null) {
        this.QueryMsg.BranchId = RefBranchId.toString();
      }
      this.getCompanyList();
      this.getList()
    }
  }

</script>

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

  .approval_title {
    height: 14px;
    line-height: 14px;
    padding-left: 15px;
    border-left: 3px solid #E95252;
    margin: 30px 0;
  }

  .appProval {
    background: white;
    height: 90%;
    padding: 0 20px;
  }

  .appProval .el-input__inner {
    height: 34px !important;
  }

  .approval_desDiv {
    float: left;
    width: 450px;
    height: 120px;
    padding: 15px 0;
    border-right: 1px dotted #DCDFE6;
  }

  .approval_item {
    background: white;
    /*border: 1px solid rgba(2, 44, 66, 0.15);*/
    border-radius: 4px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .approval_item .tit {
    font-size: 32px;
    color: #111111;
    font-weight: bold;
    margin-top: 30px;
  }

  .approval_item .des {
    font-size: 14px;
    color: #999999;
    line-height: 22px;
  }

  .approval_item .tim {
    font-size: 12px;
    color: #A6A6A6;
    line-height: 22px;
  }



  .approval_item .updateP {
    font-size: 14px;
    color: #999999;
    line-height: 24px;
  }

  .appProval .drawerTop {
    width: 100%;
    height: 50px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    background-color: #F0F5FB;
    padding: 5px 10px;
    align-items: center;
  }

  .el-drawer__body {
    overflow: auto;
  }

  /*2.隐藏滚动条，太丑了*/
  .el-drawer__container ::-webkit-scrollbar {
    display: none;
  }

</style>
