<template>
   <div>
    <div class="d-flex flex-between">
      <div>
        <el-button type="primary" size="medium" v-show="false">
          <span class="d-in-block v-mid font-size-16">通过</span>
        </el-button>
      </div>
      <div>
        <el-form label-width="100px" :inline="true">
        <!-- <el-form-item prop="state_value">
          <el-select class="mr10" v-model="type_value" placeholder="请选择类别">
            <el-option  v-for="item in type_list"  :key="item.value"  :label="item.label"  :value="item.value" ></el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item prop="keyword">
          <el-input  placeholder="请输入搜索关键字"  v-model="keyword"  clearable  @clear="getListData"></el-input>
        </el-form-item>
        <el-button type="primary" class="ml5" @click="getListData">搜索</el-button>
      </el-form>
      </div>
      
    </div>

    <el-table :data="tableData" tooltip-effect="dark" style="width: 100%">
      <el-table-column type="selection" align="center" width="55"></el-table-column>
      <el-table-column label="序号" align="center" type="index"></el-table-column>
      <el-table-column label="申请人" show-overflow-tooltip prop="jbcb_sqr" ></el-table-column>
      <el-table-column label="申请科室" show-overflow-tooltip  prop="jbcb_zwgw_mc"></el-table-column>
      <el-table-column label="加班事由" show-overflow-tooltip  prop="jbcb_jbsy"></el-table-column>
      <el-table-column label="加班类型"  prop="jbcb_jblx_mc" show-overflow-tooltip></el-table-column>
      <el-table-column label="加班地点"  prop="jbcb_jbdd" show-overflow-tooltip></el-table-column>
      <el-table-column label="加班时间" show-overflow-tooltip>
        <template slot-scope="scope">
          <div>{{scope.row.jbcb_jbsj_ks}}->{{scope.row.jbcb_jbsj_js}}</div>
        </template>
      </el-table-column>
      <el-table-column label="加班时长">
        <template slot-scope="scope">
          <div>{{scope.row.jbcb_jbsc}}小时</div>
        </template>
      </el-table-column>
      <el-table-column label="补贴金额" prop="">
         <template slot-scope="scope">
          <div>{{scope.row.jbcb_btje}}元</div>
        </template>
      </el-table-column>
      <el-table-column label="审批人"  prop="jbcb_spr_mc"></el-table-column>
      <el-table-column label="状态" prop="jbcb_shzt"> </el-table-column>
      <el-table-column label="操作" width="150">
        <template slot-scope="scope">
          <div v-if="scope.row.jbcb_shzt_option_k=='1'">
            <el-button type="text" @click="handleDetail(scope.row,'detail')">详情</el-button>
          </div>
          <div v-else>
            <el-button type="text" @click="handleEdit(scope.row,'edit')">编辑</el-button>
            <el-button type="text" @click="handleDetail(scope.row,'detail')">详情</el-button>
          </div>
          
        </template>
      </el-table-column>
    </el-table>
    <footer class="flex-item-none" style="display: flex; justify-content: flex-end; margin-top: 30px">
      <el-pagination
        background
        layout="total,prev, pager, next"
        :page-size="limit"
        :total="total"
        :current-page.sync="cur_page"
        @current-change="handleCurrentChange"
      ></el-pagination>
    </footer>



    <!-- 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="chooseChecker" :disabled="markDis">
            <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="xb">
          <el-select  style="width: 100%"  v-model="dialogForm.xbArr" placeholder="请选择性别" :disabled="markDis">
            <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="默认本人科室" :disabled="markDis">
            <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="输入职务岗位" :disabled="markDis"></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" :disabled="markDis">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="加班事由" prop="jbsy">
          <el-input v-model="dialogForm.jbsy" placeholder="输入加班事由" :disabled="markDis"></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 :disabled="markDis">
            <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="输入加班地点" :disabled="markDis"></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" :disabled="markDis">
          </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" :disabled="markDis">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="加班时长">
          <el-input v-model="dialogForm.jbsc" placeholder="自动计算" :disabled="markDis">
            <template slot="append">小时</template>
          </el-input>
        </el-form-item>
        <el-form-item label="补贴金额">
          <el-input v-model="dialogForm.btje" placeholder="自动计算" :disabled="markDis">
            <template slot="append">元</template>
          </el-input>
        </el-form-item>

        <el-form-item label="审核人" prop="shr">
          <el-select  style="width: 100%"  v-model="dialogForm.shr"  placeholder="请选择审核人员" @change="chooseChecker" :disabled="markDis">
            <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')" v-show="!markDis">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import {wdsq_list,wdsq_edit,wdsq_detail,lxjt_list,calculApi,org_users} from "./itemApi";
import {useUserStore} from "@/stores/user";

const {real_name, user_id,dept_ids} = useUserStore();
  export default {
  name: 'wdsh',
  data() {
    return {
      keyword: "",
      type_value: "",
      type_list: [
        {
          label: "全部",
          value: "0",
        },
        {
          label: "未参与",
          value: "1",
        },
        {
          label: "已参与",
          value: "2",
        },
      ],
      tableData: [],
      limit: 10,
      total: 12,
      cur_page: 1,
      loading: false,
      sqksList: [],
      lb_list: [],//津贴类型列表
      dialogFormVisible: false,
      dialogForm: {
        sqr: '',
        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",
        },
      ],
      rules: {
        sqr: [
          {required: true, message: '请选择申请人', trigger: 'change'}
        ],
        xbArr: [
          {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'}
        ],
      },
      userList: [],
      markDis:false,
      jbcbId:'',
    };
  },
  mounted() {
    this.getUserList();
    this.jtlxList();
    this.getListData();
  },
  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;
        }
      })
    },
    //津贴加班类型列表
    jtlxList() {
       //请求津贴列表
       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)})
    },
    //初始化数据
    getListData() {
      this.loading = true;
      let transObj = {
        jbcb_sqr:real_name,//申请人
        page: this.cur_page,
        limit: this.limit,
        keyword: this.keyword,
      };
      wdsq_list(transObj).then((res) => {
        this.loading = false;
        this.tableData = res.data.page_data;
        this.cur_page = Number(res.data.page_now);
        this.total = Number(res.data.total_rows);
      });
    },
    //点击编辑
    handleEdit(item,markA) {
      this.dialogFormVisible = true;
      let transObj = {
        jbcb_id:item.jbcb_id
      }
      wdsq_detail(transObj)
        .then(res => {
          if (res.code == "1") {
            let singleData = res.data.one_info;
            console.log(singleData,"0909")
            this.jbcbId = singleData.jbcb_id;
            this.dialogForm = {
              sqr: singleData.jbcb_sqr,
              xbArr: {label: singleData.jbcb_xb_option_n, value:singleData.jbcb_xb},
              sqks: singleData.jbcb_zwgw_mc,
              sqks_id:singleData.jbcb_zwgw_id,
              zwgw:singleData.jbcb_zwgw_zwgw,
              cjgzsj: singleData.jbcb_cjgzsj,
              jbsy: singleData.jbcb_jbsy,
              jblxObj:{label:singleData.jbcb_jblx_mc,value:singleData.jbcb_jblx_id} ,
              jbdd: singleData.jbcb_jbdd,
              jbkssj: singleData.jbcb_jbsj_ks,//加班开始时间
              jbjssj: singleData.jbcb_jbsj_js,//加班结束时间
              jbsc:singleData.jbcb_jbsc,
              btje: singleData.jbcb_btje,
              shr:singleData.jbcb_spr_mc,
              shr_id:singleData.jbcb_spr_id,
            };
        }
      })
        .catch(err => { console.log(err) })
      if (markA == "edit") {
        this.markDis = false;
      } else {
        this.markDis = true;
      }
    },
    //详情弹框
    handleDetail(item,markA) {
      this.handleEdit(item,markA);
    },
    //提交
    addFormSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let transObj = {
            issubmit:1,
            jbcb_id:this.jbcbId,
            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:'',//处理意见
            }
          };
          wdsq_edit(transObj)
            .then(res => {
              if (res.code == "1") {
                this.dialogFormVisible = false;
                this.$message({
                  message: res.msg,
                  type: "success",
                });
                this.getListData();
              }
            })
            .catch(err => { console.log(err) });
        }
      })
    },
    //加班类型——表单改变的时候触发
    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) }); 
      },
    //选择审核人
    chooseChecker(val) {
      this.dialogForm.shr = val.label;
      this.dialogForm.shr_id= val.value;
    },
    //翻页
    handleCurrentChange(val) {
      this.cur_page = val;
      this.getListData();
    },
  },
  }
</script>

<style lang="scss" scoped>

</style>