<template>
  <div>
    <div class="d-flex flex-between">
      <div>
        <el-button type="primary" size="medium" @click="dialogFormVisible = true">
          <span class="d-in-block v-mid el-icon-plus font-size-16"></span>
          <span class="d-in-block v-mid font-size-16">新建申请</span>
        </el-button>
      </div>
      <el-form label-width="100px" :inline="true">
        <el-form-item prop="time">
          <el-date-picker style="width: 100%" v-model="time" type="date" placeholder="请选择时间">
          </el-date-picker>
        </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>
    <el-tabs v-model="activeName">
      <el-tab-pane label="我申请的" name="first">
        <el-table :data="applyTable" tooltip-effect="dark" v-loading="loading" style="width: 100%">
          <el-table-column type="selection" align="center" width="55">
          </el-table-column>
          <el-table-column label="序号" align="center" type="index" width="50">
          </el-table-column>
          <el-table-column label="标题" show-overflow-tooltip prop="cbtl_title" width="auto">
          </el-table-column>
          <el-table-column label="申请人" width="100" prop="cbtl_sqr"></el-table-column>
          <el-table-column label="日期" width="150" prop="cbtl_date"></el-table-column>
          <el-table-column label="状态" prop="cbtl_zt" width="100">
          </el-table-column>
          <el-table-column label="类别" width="100">
            <template slot-scope="scope">
              <span v-if="scope.row.cbtl_lb_option_k == 1">加班</span>
              <span v-if="scope.row.cbtl_lb_option_k == 2">值班</span>
            </template>
          </el-table-column>
          <el-table-column label="金额/元" prop="cbtl_je" align="center" width="120">
          </el-table-column>
          <el-table-column label="操作" width="150">
            <template slot-scope="scope">
              <el-button type="text" @click="editData(scope.row)">编辑
              </el-button>
              <el-button type="text" @click="delData(scope.row.cbtl_id)">删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>

      <el-tab-pane label="待我审核的" name="second">
        <el-table :data="auditTable" 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" width="50">
          </el-table-column>
          <el-table-column label="标题" show-overflow-tooltip prop="cbtl_title" width="auto">
          </el-table-column>
          <el-table-column label="申请人" width="auto" prop="cbtl_sqr"></el-table-column>
          <el-table-column label="日期" width="150" prop="cbtl_date"></el-table-column>

          <el-table-column label="状态" prop="cbtl_zt" width="100">
          </el-table-column>
          <el-table-column label="类别" width="100">
            <template slot-scope="scope">
              <span v-if="scope.row.cbtl_lb_option_k == 1">加班</span>
              <span v-if="scope.row.cbtl_lb_option_k == 2">值班</span>
            </template>
          </el-table-column>
          <el-table-column label="金额/元" prop="cbtl_je" align="center" width="100">
          </el-table-column>
          <el-table-column label="操作" width="150">
            <template slot-scope="scope">
              <el-button type="text" @click="verify(2, scope.row)">通过
              </el-button>
              <el-button type="text" @click="verify(3, scope.row)">不通过
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
    <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>
    <el-dialog :title="title" :visible.sync="dialogFormVisible" width="600px">
      <el-form :model="dialogForm" ref="addForm" :rules="rules" label-width="90px" label-position="left">
        <el-form-item label="标题" prop="cbtl_title">
          <el-input v-model="dialogForm.cbtl_title"></el-input>
        </el-form-item>
        <el-form-item label="补贴类型" prop="cbtl_lb">
          <el-select style="width: 100%" v-model="dialogForm.cbtl_lb" @change="switchData" placeholder="请选择类型">
            <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="cbtl_date">
          <el-date-picker v-model="dialogForm.cbtl_date" placeholder="选择日期" type="date" value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="审核人" prop="cbtl_shr">
          <el-select style="width: 100%" v-model="dialogForm.cbtl_shr" placeholder="请选择审核人员">
            <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="sqsc">
          <el-input-number v-model="dialogForm.sqsc" controls-position="right" @change="handleChange" :min="0"></el-input-number>
          小时
        </el-form-item>
      </el-form>
      <h3 class="font-size-14" v-if="dialogForm.sqsc != ''">金额总计：{{ totalMoney }}元</h3>
      <h4 class="mt10 font-size-12 text-red" v-if="dialogForm.cbtl_lb != ''">*工作日加班补贴规则：{{ money }}元/小时</h4>
      <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 { btlb_list, btlb_add, btlb_edit, btlb_del, org_users } from "./api";
import { useUserStore } from "@/stores/user";
const { real_name, user_id, dept_ids } = useUserStore();
export default {
  name: "index",

  data() {
    return {
      time: "",
      keyword: "",
      activeName: "first",
      applyTable: [],
      auditTable: [], //审核列表
      limit: 10,
      total: 12,
      cur_page: 1,
      dialogFormVisible: false,
      lb_list: [
        {
          label: "加班",
          value: "1",
        },
        {
          label: "值班",
          value: "2",
        },
      ],
      dialogForm: {
        cbtl_id: '',
        cbtl_title: '',
        cbtl_sqr: real_name,
        cbtl_date: '',
        cbtl_lb: '',
        cbtl_je: '',
        sqsc: '',
        cbtl_sqr_user_id: user_id,
        cbtl_shr: {}
      },
      rules: {
        cbtl_title: [
          { required: true, message: '请输入标题', trigger: 'blur' }
        ],
        cbtl_lb: [
          { required: true, message: '请选择补贴类型', trigger: 'change' }
        ],
        cbtl_shr: [
          { required: true, message: '请选择审核人', trigger: 'change' }
        ],
        cbtl_date: [
          { required: true, message: '请选择日期', trigger: 'blur' }
        ],
        sqsc: [
          { required: true, message: '请输入时长', trigger: 'blur' }
        ],
      },
      title: "",
      money: 0,
      totalMoney: 0,
      isEdit: false,
      id: "",
      loading: false,
      userList: []
    };
  },
  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;
        }
      })
    },
    getListData() {
      this.loading = true;
      let data = {
        page: this.cur_page,
        limit: this.limit,
        keyword: this.keyword,
      };

      btlb_list(data).then((res) => {
        this.loading = false;
        this.applyTable = res.data.page_data;
        this.auditTable = res.data.page_data;
        this.cur_page = Number(res.data.page_now);
        this.total = Number(res.data.total_rows);
      });
    },
    handleCurrentChange(val) {
      this.cur_page = val;
      this.getListData();
    },

    addData() {
      this.title = "新建申请";
      this.dialogForm = {
        cbtl_id: '',
        cbtl_title: '',
        cbtl_lb: '',
        cbtl_date: '',
        cbtl_sqr: real_name,
        cbtl_je: '',
        sqsc: '',
        cbtl_shr: {},
        cbtl_sqr_user_id: user_id,
      };
      this.isEdit = false;
      this.dialogFormVisible = true;
    },
    handleChange() {
      this.totalMoney = parseInt(this.money * this.dialogForm.sqsc);
    },
    switchData() {
      if (this.dialogForm.cbtl_lb == 1) {
        this.money = 100;
      } else {
        this.money = 200;
      }
      if (this.dialogForm.sqsc != '') {
        this.totalMoney = parseInt(this.money * this.dialogForm.sqsc);
      }
    },
    editData(item) {
      this.title = "编辑申请";
      this.isEdit = true;
      this.dialogForm.cbtl_id = item.cbtl_id;
      this.dialogForm.cbtl_title = item.cbtl_title;
      this.dialogForm.cbtl_lb = item.cbtl_lb_option_k;
      this.dialogForm.cbtl_date = item.cbtl_date;
      this.dialogForm.cbtl_sqr = item.cbtl_sqr;
      this.dialogForm.cbtl_je = item.cbtl_je;
      this.dialogForm.sqsc = item.cbtl_sc;
      this.dialogForm.cbtl_shr = {
        label: item.cbtl_shr,
        value: item.cbtl_shr_user_id
      }
      if (this.dialogForm.cbtl_lb == 1) {
        this.money = 100;
      } else {
        this.money = 200;
      }
      this.totalMoney = item.cbtl_je;
      this.dialogFormVisible = true;
    },
    addFormSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true;
          let data = {
            cbtl_title: this.dialogForm.cbtl_title,
            cbtl_sqr: this.dialogForm.cbtl_sqr,
            cbtl_date: this.dialogForm.cbtl_date,
            cbtl_lb: this.dialogForm.cbtl_lb,
            cbtl_je: this.totalMoney,
            cbtl_sqr_user_id: this.dialogForm.cbtl_sqr_user_id,
            cbtl_shr: this.dialogForm.cbtl_shr.label,
            cbtl_shr_user_id: this.dialogForm.cbtl_shr.value,
            cbtl_sc: this.dialogForm.sqsc
          }
          if (!this.isEdit) {
            btlb_add(data).then(res => {
              this.loading = false;
              if (res.code == 1) {
                this.$message({
                  message: "补贴申请成功！",
                  type: "success",
                });
                this.dialogFormVisible = false;
                this.getListData();
              } else {
                this.$message({
                  message: res.msg,
                  type: "error",
                });
              }
            })
          } else {
            data.cbtl_id = this.dialogForm.cbtl_id;
            btlb_edit(data).then(res => {
              this.loading = false;
              if (res.code == 1) {
                this.$message({
                  message: "补贴申请编辑成功！",
                  type: "success",
                });
                this.dialogFormVisible = false;
                this.getListData();
              } else {
                this.$message({
                  message: res.msg,
                  type: "error",
                });
              }
            })
          }

        }
      })
    },
    verify(type, item) {
      let data = {
        cbtl_zt: type,
        cbtl_id: item.cbtl_id,
      };
      btlb_edit(data).then((res) => {
        if (res.code == 1) {
          this.$message({
            message: "审核成功！",
            type: "success",
          });
          this.getListData();
        }
      });
    },
    formCancel() {
      this.dialogFormVisible = false;
    },
    delData(id) {
      let data = {
        cbtl_id: id,
      };
      this.$confirm("确认删除该申请?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          btlb_del(data).then((res) => {
            if (res.code == 1) {
              this.$message({
                message: "申请删除成功！",
                type: "success",
              });
              this.getListData();
            } else {
              this.$message({
                message: res.msg,
                type: "error",
              });
            }
          });
        })
        .catch(() => { });
    },
  },
  mounted() {
    this.getUserList();
    this.getListData();
  },
};
</script>

<style scoped>
</style>