<template>
  <div>
    <div class="content d-flex">
      <div class="flex-1">
        <div class="info-box">
          <div class="flex-row ph15 border-grey-bottom">
            <h3 class="font-size-16 lh40">我的审核</h3>
            <a href="javascript:;" class="lh40" @click.stop="toMore('sh')">
              <span class="font-size-14 color-2">更多</span>
              <span class="ml3 el-icon-more font-size-15 icon-more text-light"></span>
            </a>
          </div>
          <ul class="ph15 info-list">
            <li  v-for="(item,index) in totalDataSh" :key="index">
              <div class="flex-row">
                <div class="flex-1 singleItem">
                    <div class="noemalPice">{{item.jbcb_sqr}}</div>
                    <div class="noemalPice">{{item.jbcb_jbdd}}</div>
                    <div class="noemalPice">{{item.jbcb_jbsy}}</div>
                    <div class="noemalPice">{{item.jbcb_jblx_mc}}</div>
                </div>

                <div v-if="item.jbcb_shzt_option_k=='0'">
                  <el-button type="text" @click="dialogCheck(item)">审核</el-button>
                </div>
                <div v-else>
                  <el-button type="text" disabled >已审核</el-button>
                </div>
              </div>
            </li>
          </ul>
        </div>
        <div class="mt10 info-box">
          <div class="flex-row ph15 border-grey-bottom">
            <h3 class="font-size-16 lh40">我的申请</h3>
            <a href="javascript:;" class="lh40" @click.stop="toMore('sp')">
              <span class="font-size-14 color-2">更多</span>
              <span class="ml3 el-icon-more font-size-15 icon-more text-light"></span>
            </a>
          </div>
          <ul class="ph15 info-list">
            <li v-for="(item,index) in totalDataSq" :key="index">
              <div class="flex-row">
                <div class="flex-1 singleItem">
                    <div class="noemalPice">{{item.jbcb_sqr}}</div>
                    <div class="noemalPice">{{item.jbcb_jbdd}}</div>
                    <div class="noemalPice">{{item.jbcb_jbsy}}</div>
                    <div class="noemalPice">{{item.jbcb_jblx_mc}}</div>
                </div>
                <h4 class="font-size-14 color-6">{{item.jbcb_shzt}}</h4>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="flex-1 ml10">
        <div class="info-box">
          <div class="flex-row ph15 border-grey-bottom">
            <h3 class="font-size-16 lh40">我的排班</h3>
            <a href="javascript:;" class="lh40">
              <span class="font-size-14 color-2">更多</span>
              <span class="ml3 el-icon-more font-size-15 icon-more text-light"></span>
            </a>
          </div>
          <el-calendar v-model="timeValue">
            <template  slot="dateCell"  slot-scope="{date, data}">
              <div class="timeInfoShow" :class="data.isSelected ? 'is-selected' : ''">
                {{ data.day.split('-').slice(1).join('-') }}
              </div>
              <div class="carrerInfoShow">正常班</div>
              <el-button v-if="data.isSelected" type="text" @click="showApply(data,date)">加班申请</el-button>
            </template>
          </el-calendar>
        </div>
      </div>
    </div>
    <!-- dialog——审核 -->
    <el-dialog title="审核" :visible.sync="dialogFormVisible_check" width="600px">
      <el-form :model="dialogForm_check" ref="addForm_check" :rules="rules_check" label-width="120px" label-position="left">
        <el-form-item label="审核结果" prop="result">
          <el-radio-group v-model="dialogForm_check.result">
            <el-radio label="1" value="1">通过</el-radio>
            <el-radio label="2" value="2">不通过</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="处理意见" prop="yj_text">
          <el-input type="textarea" v-model="dialogForm_check.yj_text" placeholder="请输入处理意见"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="dialogFormVisible_check = false">取 消</el-button>
        <el-button type="primary" @click="addFormSubmitCheck('addForm_check')">确 定</el-button>
      </div>
    </el-dialog>   

    <!-- dialog——加班申请 -->
    <el-dialog title="加班申请" :visible.sync="dialogFormVisible" width="600px">
      <el-form :model="dialogForm" ref="addForm" :rules="rules" label-width="120px" label-position="left">
        <el-form-item label="申请人" prop="sqr">
          <el-select  style="width: 100%"  v-model="dialogForm.sqr"  placeholder="（默认本人）" @change="chooseAppler" filterable>
            <el-option  v-for="item in userList"  :key="item.user_id"  :label="item.user_realname"  :value="{value:item.user_id,label:item.user_realname}">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="性别" prop="xbArr">
          <el-select  style="width: 100%"  v-model="dialogForm.xbArr" placeholder="请选择性别" filterable>
            <el-option v-for="item in sexList" :key="item.value" :label="item.label" :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="申请科室" prop="sqks">
          <el-select  style="width: 100%"  v-model="dialogForm.sqks"  placeholder="默认本人科室" filterable>
            <el-option v-for="item in sqksList" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
         <el-form-item label="职务岗位" prop="zwgw">
          <el-input v-model="dialogForm.zwgw" placeholder="输入职务岗位"></el-input>
        </el-form-item>
        <el-form-item label="参加工作时间" prop="cjgzsj">
          <el-date-picker  v-model="dialogForm.cjgzsj"  placeholder="年/月"  type="date"  value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="加班事由" prop="jbsy">
          <el-input v-model="dialogForm.jbsy" placeholder="输入加班事由"></el-input>
        </el-form-item>
        <el-form-item label="津贴(加班)类型" prop="jblxObj">
          <el-select  style="width: 100%"  v-model="dialogForm.jblxObj" placeholder="请选择加班类型" @change="switchData" value-key="value" filterable>
            <el-option v-for="item in lb_list" :key="item.value" :label="item.label" :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="加班地点" prop="jbdd">
          <el-input v-model="dialogForm.jbdd" placeholder="输入加班地点"></el-input>
        </el-form-item>
        <el-form-item label="加班开始时间" prop="jbkssj">
          <el-date-picker  v-model="dialogForm.jbkssj"  placeholder="选择日期"  type="datetime"  value-format="yyyy-MM-dd HH:mm:ss" @change="calcuDate">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="加班结束时间" prop="jbjssj">
          <el-date-picker  v-model="dialogForm.jbjssj"  placeholder="选择日期"  type="datetime"  value-format="yyyy-MM-dd HH:mm:ss" @change="calcuDate">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="加班时长">
          <el-input v-model="dialogForm.jbsc" placeholder="自动计算">
            <template slot="append">小时</template>
          </el-input>
        </el-form-item>
        <el-form-item label="补贴金额">
          <el-input v-model="dialogForm.btje" placeholder="自动计算"></el-input>
        </el-form-item>

        <el-form-item label="审核人" prop="shr">
          <el-select  style="width: 100%"  v-model="dialogForm.shr"  placeholder="请选择审核人员" @change="chooseChecker" filterable>
            <el-option  v-for="item in userList"  :key="item.user_id"  :label="item.user_realname"  :value="{value:item.user_id,label:item.user_realname}">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
     
      <div slot="footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addFormSubmit('addForm')">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import {gzt_wdsh,gzt_wdsq, gzt_add,lxjt_list,calculApi,wdsh_edit,org_users} from "./itemApi";
  import {useUserStore} from "@/stores/user";
  const {real_name, user_id,dept_ids,user_org} = useUserStore();
  export default {
    name: 'gzt',
    data() {
      return {
        totalDataSh: [],
        totalDataSq:[],
        todo_files: [],
        dialogFormVisible_check: false,
        dialogForm_check: {
          result:'',
          yj_text:''
        },
        rules_check: {
          result: [
            { required: true, message: '请选择审核结果', trigger: 'blur' }
          ],
          yj_text: [
            { required: true, message: '请输入处理意见', trigger: 'blur' }
          ],
        },
        timeValue: Date.now(),
        dialogFormVisible: false,
        chooseDate:'',
        dialogForm: {
          sqr: '',
          sqr_id:'',
          xbArr: '',
          sqks: '',
          sqks_id:'',
          zwgw:'',
          cjgzsj: '',
          jbsy: '',
          jblxObj: '',
          // jbcb_jblx_id:'',
          jbdd: '',
          jbkssj: '',//加班开始时间
          jbjssj: '',//加班结束时间
          jbsc:'',
          btje: '',
          shr:'',
          shr_id:'',
        },
        sexList: [
          {
            label: "男",
            value: "1",
          },
          {
            label: "女",
            value: "2",
          },
        ],
        sqksList: [],
        lb_list: [],//津贴类型列表
        rules: {
          sqr: [
            {required: true, message: '请选择申请人', trigger: 'change'}
          ],
          xb: [
            {required: true, message: '请选择性别', trigger: 'change'}
          ],
          sqks: [
          {required: true, message: '请选择职务岗位', trigger: 'change'}
          ],
          zwgw:[
            {required: true, message: '请选择职务岗位', trigger: 'blur'}
          ],
          cjgzsj: [
            {required: true, message: '请选择参加工作时间', trigger: 'change'}
          ],
          jbsy: [
            {required: true, message: '请输入加班事由', trigger: 'blur'}
          ],
          jblxObj: [
            {required: true, message: '请选择加班类型', trigger: 'change'}
          ],
          jbdd: [
            {required: true, message: '请输入加班地点', trigger: 'blur'}
          ],
          jbkssj: [
            {required: true, message: '请选择加班开始时间', trigger: 'change'}
          ],
          jbjssj: [
            {required: true, message: '请选择加班结束时间', trigger: 'change'}
          ],
          // jbsc: [
          //   {required: true, message: '加班时长（自动计算）', trigger: 'blur'}
          // ],
          // btje: [
          //   {required: true, message: '补贴金额（自动计算）', trigger: 'blur'}
          // ],
          shr: [
            {required: true, message: '请输入审核人', trigger: 'change'}
          ],
        },
        total: 0,
        loading: false,
        userList:[],
      }
    },
    mounted() {
      this.getUserList();
      this.getTotalData_wdsh();
      this.getTotalData_wdsq();
    },
    methods: {
      //获取用户数据
      getUserList() {
        let data = {
          dept_id: dept_ids[0],
          page: 1,
          limit: 9999
        }
        org_users(data).then(res => {
          if (res.code == 1) {
            this.userList = res.data.page_data;
          }
        })
      },
      //点击加班申请（弹出）
      showApply(data, date) {
        this.dialogFormVisible = true;
        //取值职务岗位
        if (user_org.length == 0) {
          let temp_org = {
            uo_id: "0",
            uo_master_username: "0",
            uo_name: ""
          };

          user_org.push(temp_org);
        }
        let partDepart = user_org.slice(-1);
        this.sqksList = [];
        partDepart.forEach(item => {
          this.sqksList.push({
            label: item.uo_name,
            value: item.uo_id,
          })
        })
        this.chooseDate = data.day+" 18:00:00";//默认是18:00:00开始加班
        this.dialogForm = {
          sqr: real_name,
          sqr_id:user_id,
          xbArr: '',
          sqks: partDepart[0].uo_name,
          sqks_id: partDepart[0].uo_id,// 职务岗位ID
          zwgw:'',
          cjgzsj: '',
          jbsy: '',
          jblxObj: '',//津贴（加班）类型
          // jbcb_jblx_id:'',//津贴（加班）类型ID
          jbdd: '',
          jbkssj: this.chooseDate,//加班开始时间
          jbjssj: '',//加班结束时间
          jbsc:'',
          btje: '',
          shr: '',
          shr_id: '',
          currentJbcbId:'',
        };
        //请求津贴列表
        lxjt_list({})
          .then(res => {
            if (res.code == "1") {
              this.lb_list = [];
              res.data.page_data.forEach(item => {
                this.lb_list.push({
                  label: item.lxjt_lxjtmc,
                  value: item.lxjt_id,
                })
              });
            }
        })
        .catch(err=>{console.log(err)})
      },
      //工作台-我的审核
      getTotalData_wdsh() {
        let transObj = {
          limit:5,
          jbcb_spr_id:user_id//审核人ID
        };
      //工作台-我的审核
        gzt_wdsh(transObj).then(res => {
          if (res.code == 1) {
            this.totalDataSh = res.data.page_data;
          }
        })
      },
      //工作台-我的申请
      getTotalData_wdsq() {
        let transObj = {
          limit:5,
          jbcb_sqr:real_name//申请人
        };
      //工作台-我的申请
        gzt_wdsq(transObj).then(res => {
          if (res.code == 1) {
            this.totalDataSq = res.data.page_data;
          }
        })
      },
      //加班类型——表单改变的时候触发
      switchData(val) {
        this.dialogForm.jblxObj = val;
        //开始计算时，判断是否为空
        if (this.dialogForm.jblxObj == "" || this.dialogForm.jbjssj == "") {
          this.$message({
            message: "请添加--加班类型--或--加班结束时间--",
            type: "warning",
          });
          return
        } else {
          let transObj = {
            jbcb_jblx_id: this.dialogForm.jblxObj.value,//加班类型Id
            jbcb_jbsj_ks: this.dialogForm.jbkssj,//加班开始时间
            jbcb_jbsj_js:this.dialogForm.jbjssj,//加班结束时间
          };
          calculApi(transObj)
            .then(res => {
              if (res.code == "1") {
                this.dialogForm.jbsc = res.data.jbsc;
                this.dialogForm.btje = res.data.btje;
              } else {
                
              }
          })
          .catch(err => { console.log(err) }); 
        }
      },
      //自动计算
      calcuDate() {
        let transObj = {
            jbcb_jblx_id: this.dialogForm.jblxObj.value,//加班类型Id
            jbcb_jbsj_ks: this.dialogForm.jbkssj,//加班开始时间
            jbcb_jbsj_js:this.dialogForm.jbjssj,//加班结束时间
          };
          calculApi(transObj)
          .then(res=>{
            if (res.code == "1") {
              this.dialogForm.jbsc = res.data.jbsc;
              this.dialogForm.btje = res.data.btje;
            }
          })
          .catch(err => { console.log(err) }); 
      },
      //选择申请人
      chooseAppler(val) {
        this.dialogForm.sqr = val.label;
        this.dialogForm.sqr_id= val.value;
      },
      //选择审核人
      chooseChecker(val) {
        this.dialogForm.shr = val.label;
        this.dialogForm.shr_id= val.value;
      },
      //工作台-更多详情
      toMore(mark) {
        switch (mark) {
          case 'sp':
          this.$router.push({name: "gzt_wdsq"})
            break;
          case 'sh':
          this.$router.push({name: "gzt_wdsh"})
            break;
        }
      },
      //加班申请确定按钮
      addFormSubmit(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.loading = true;
            let transObj = {
              issubmit:1,
              jdbg_jbcb:{
                jbcb_sqr:this.dialogForm.sqr, //申请人
                jbcb_xb:this.dialogForm.xbArr.value,//性别
                jbcb_zwgw_mc:this.dialogForm.sqks,//职务岗位->申请科室
                jbcb_zwgw_id: this.dialogForm.sqks_id,//职务岗位ID->申请科室ID
                jbcb_zwgw_zwgw:this.dialogForm.zwgw,//职务岗位
                jbcb_cjgzsj:this.dialogForm.cjgzsj,// 参加工作时间
                jbcb_jbsy:this.dialogForm.jbsy,//加班事由
                jbcb_jblx_mc:this.dialogForm.jblxObj.label,//加班类型
                jbcb_jblx_id:this.dialogForm.jblxObj.value,//加班类型ID
                jbcb_jbdd:this.dialogForm.jbdd,//加班地点
                jbcb_jbsj_ks: this.dialogForm.jbkssj,//加班时间开始
                jbcb_jbsj_js:this.dialogForm.jbjssj,//加班时间结束
                jbcb_jbsc:this.dialogForm.jbsc,//加班时长 （计算接口返回）
                jbcb_btje: this.dialogForm.btje,//补贴金额（计算接口返回）
                jbcb_spr_mc: this.dialogForm.shr,//审批人
                jbcb_spr_id: this.dialogForm.shr_id,// 审批人ID
                // jbcb_cs: '',//次数（计算接口返回）
                // jbcb_shzt:'',//审核状态 0 待审核 1通过 2驳回
                // jbcb_clyj:'',//处理意见
              }
            }
            //审批人申请人不能为同一人
            if (this.dialogForm.sqr==this.dialogForm.shr && this.dialogForm.sqr_id==this.dialogForm.shr_id) {
              this.$message({
                message:'审核人不能为申请人,请重新选审核人~',
                type:'error'
              });
              return false;
            } else {
              gzt_add(transObj).then(res => {
                this.loading = false;
                if (res.code == 1) {
                  this.$message({
                    message: res.msg,
                    type: "success",
                  });
                  this.getTotalData_wdsh();
                  this.getTotalData_wdsq();
                  this.dialogFormVisible = false;
                } else {
                  this.$message({
                    message: res.msg,
                    type: "error",
                  });
                }
              })
            }
          }
        })
      },

      //我的审核-审核
      dialogCheck(item) {
        this.dialogFormVisible_check = true;
        this.currentJbcbId = item.jbcb_id;
      },
      //我的审核-审核提交
      addFormSubmitCheck(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let transObj = {
            issubmit:1,
            jbcb_id: this.currentJbcbId,
            jdbg_jbcb: {
              jbcb_shzt: this.dialogForm_check.result,//待审核 1通过 2驳回
              jbcb_clyj:this.dialogForm_check.yj_text//处理意见
            }
          };
          wdsh_edit(transObj)
            .then(res => {
              if (res.code == "1") {
                this.dialogFormVisible_check = false;
                this.$message({
                  message: res.msg,
                  type: "success",
                });
                this.getTotalData_wdsh();
                this.getTotalData_wdsq();
                
              }
            })
            .catch(err => { console.log(err) });
          }
        })
      },

    },
    
  }
</script>

<style lang="scss" scoped>
.content {
  background: #F2F6FC;
  height: 100%;
  width: 100%;
  margin: -10px;
  padding-right: 20px;
  padding-bottom: 20px;
}
.info-box{
  min-height:345px;
}
.info-list {
  margin: 0;
  padding: 0 15px;

  li {
    cursor: pointer;
    padding: 15px 0;

    & + li {
      border-top: 1px solid #EBEEF5;
    }
  }
}
.singleItem{
  display: flex;
  width: 100%;
  flex-direction: row;
  flex-wrap: wrap;
  .noemalPice{
    font-size:14px;
    text-align: left;
    color: #606266;
    margin-right:2%;
    white-space:nowrap;
    overflow: hidden;
    text-overflow: ellipsis; 
  }
  .noemalPice:nth-child(1){
    width:18%;
    font-weight: 400;
    color: #000000;
  }
  .noemalPice:nth-child(2){
    width:18%;
  }
  .noemalPice:nth-child(3){
    width:38%;
    white-space:nowrap;
    text-overflow:ellipsis;
    overflow: hidden;
  }
  .noemalPice:nth-child(4){
    width:20%;
    margin-right:0!important;
  }
}
.timeInfoShow{
  font-size: 16px;
  font-weight: 400;
  text-align: center;
  color: #000000;
}
.carrerInfoShow{
  font-size: 10px;
  font-weight: 400;
  text-align: center;
  color: #c0c4cc;
  margin-top:5px;
}
</style>