<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="initWdshList"></el-input>
        </el-form-item>
        <el-button type="primary" class="ml5" @click="initWdshList">搜索</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"></el-table-column>
      <el-table-column label="加班地点" show-overflow-tooltip  prop="jbcb_jbdd"></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="补贴金额">
        <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="状态">
        <template slot-scope="scope">
          <div :class="scope.row.jbcb_shzt_option_k=='2' ? 'red' : '' ">{{scope.row.jbcb_shzt}}</div>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="150">
        <template slot-scope="scope">
          <!-- 待审核 0 -->
          <div v-if="scope.row.jbcb_shzt_option_k=='0'">
            <el-button type="text" @click="detailShow(scope.row)">详情</el-button>
            <el-button type="text" @click="handleCheck(scope.row)">审核</el-button>
          </div>
          <!-- 已通过 1 -->
          <div v-else-if="scope.row.jbcb_shzt_option_k=='1'">
            <el-button type="text" @click="detailShow(scope.row)">详情</el-button>
          </div>
          <!-- 驳回 -->
          <div v-else>
            <el-button type="text" @click="detailShow(scope.row)">详情</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="（默认本人）" :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.xb" placeholder="请选择性别" :disabled="markDis">
            <el-option v-for="item in sexList" :key="item.value" :label="item.label" :value="item.value">
            </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="jblx">
          <el-select  style="width: 100%"  v-model="dialogForm.jblx" placeholder="请选择加班类型"  :disabled="markDis">
            <el-option v-for="item in lb_list" :key="item.value" :label="item.label" :value="item.value" >
            </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"  :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" :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="请选择审核人员" :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>

    <!-- dialog弹出 -->
    <el-dialog title="审核" :visible.sync="dialogFormVisible_check" width="600px">
      <el-form :model="dialogForm" ref="addForm" :rules="rules" label-width="120px" label-position="left">
        <el-form-item label="审核结果" prop="result">
          <el-radio-group v-model="dialogForm.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.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="addFormSubmit('addForm')">确 定</el-button>
      </div>
    </el-dialog>    

  </div>
</template>

<script>
import {wdsh_list,wdsh_edit,lxjt_list,wdsh_detail,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: 0,
      cur_page: 1,
      loading: false,
      dialogFormVisible: false,
      dialogForm: {
        sqr: '',
        xb: '',
        sqks: '',
        sqks_id:'',
        zwgw:'',
        cjgzsj: '',
        jbsy: '',
        jblx: '',
        jbcb_jblx_id:'',
        jbdd: '',
        jbkssj: '',//加班开始时间
        jbjssj: '',//加班结束时间
        jbsc:'',
        btje: '',
        shr:'',
        shr_id:'',
      },
      dialogFormVisible_check:false,
      rules: {
        result: [
          { required: true, message: '请选择结果', trigger: 'change' }
        ],
        yj_text: [
          { required: true, message: '请输入处理意见', trigger: 'blur' }
        ],
      },
      currentJbcbId:'',
      markDis: true,
      userList: [],
      sexList: [
        {
          label: "男",
          value: "1",
        },
        {
          label: "女",
          value: "2",
        },
      ],
      sqksList:[],
      lb_list:[],

    };
  },
  mounted() {
    this.getUserList();
    this.jtlxList();
    this.initWdshList();
    
  },
  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)})
    },
    //初始化数据
    initWdshList() {
      let transObj = {
        page: this.cur_page,
        limit: this.limit,
        keyword: this.keyword,
        jbcb_spr_id:user_id,
      }
      wdsh_list(transObj)
        .then(res => {
          if (res.code == "1") {
            this.tableData = res.data.page_data;
            this.cur_page = Number(res.data.page_now);
            this.total = Number(res.data.total_rows);
          }
        })
        .catch(err => { console.log(err) });
    },
    //详情展示
    detailShow(item) {
      this.dialogFormVisible = true;
      this.dialogFormVisible = true;
      let transObj = {
        jbcb_id:item.jbcb_id
      }
      wdsh_detail(transObj)
        .then(res => {
          if (res.code == "1") {
            let singleData = res.data.one_info;
            this.dialogForm= {
              sqr: singleData.jbcb_sqr,
              xb: singleData.jbcb_xb=='1' ? '男' : '女',
              sqks: singleData.jbcb_zwgw_mc,
              sqks_id:singleData.jbcb_zwgw_id,
              zwgw:singleData.jbcb_zwgw_zwgw,
              cjgzsj: singleData.jbcb_cjgzsj,
              jbsy: singleData.jbcb_jbsy,
              jblx: singleData.jbcb_jblx_mc,
              jbcb_jblx_id: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) })
    },
    //审核
    handleCheck(item) {
      this.dialogFormVisible_check = true;
      this.currentJbcbId = item.jbcb_id;

    },
    //审核提交
    addFormSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let transObj = {
            issubmit:1,
            jbcb_id: this.currentJbcbId,
            jdbg_jbcb: {
              jbcb_shzt: this.dialogForm.result,//待审核 1通过 2驳回
              jbcb_clyj:this.dialogForm.yj_text//处理意见
            }
          };
          wdsh_edit(transObj)
            .then(res => {
              if (res.code == "1") {
                this.dialogFormVisible_check = false;
                this.$message({
                  message: res.msg,
                  type: "success",
                });
                this.initWdshList();
              }
            })
            .catch(err => { console.log(err) });
        }
      })
    },
    //翻页
    handleCurrentChange(val) {
      this.cur_page = val;
      this.initWdshList();
    },
  },
  }
</script>

<style lang="scss" scoped>
.red{
  color:red;
}
</style>