<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">
              <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 in totalData.wdsh">
              <div class="flex-row">
                <div class="flex-1">
                  <h3 class="font-size-14 text-overflow">{{ item.bt }}</h3>
                  <h4 class="mt10 font-size-14 color-4">
                    <span>{{ item.lx }}</span>
                    <span class="ml15">{{ item.cjsj }}</span>
                  </h4>
                </div>
                <div>
                  <el-button type="text">通过</el-button>
                  <el-button type="text">驳回</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">
              <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 in totalData.wdsq">
              <div class="flex-row">
                <div class="flex-1">
                  <h3 class="font-size-14 text-overflow">{{ item.bt }}</h3>
                  <h4 class="mt10 font-size-14 color-4">
                    <span>{{ item.lx }}</span>
                    <span class="ml15">{{ item.cjsj }}</span>
                  </h4>
                </div>
                <h4 class="font-size-14 color-6">{{ item.state }}</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="data.isSelected ? 'is-selected' : ''">
                {{ data.day.split('-').slice(1).join('-') }}
              </div>
              <el-button v-if="data.isSelected" type="text" @click="showApply(data,date)">申请补贴</el-button>
            </template>
          </el-calendar>
        </div>
      </div>
    </div>
    <el-dialog 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 != ''">金额总计：{{ total }}元</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 {gzt, bt_add,org_users} from "./api";
import {useUserStore} from "@/stores/user";

const {real_name, user_id,dept_ids} = useUserStore();
export default {
  name: "index",
  data() {
    return {
      totalData: {},
      todo_files: [{
        id: 1,
        title: '李文文加班补贴',
        type: '加班补贴',
        time: '2021/07/22',
        state: '待审核'
      }, {
        id: 2,
        title: '李文文加班补贴',
        type: '加班补贴',
        time: '2021/07/22',
        state: '待审核'
      }, {
        id: 3,
        title: '李文文加班补贴',
        type: '加班补贴',
        time: '2021/07/22',
        state: '待审核'
      }, {
        id: 4,
        title: '李文文加班补贴',
        type: '加班补贴',
        time: '2021/07/22',
        state: '待审核'
      }, {
        id: 5,
        title: '李文文加班补贴',
        type: '加班补贴',
        time: '2021/07/22',
        state: '待审核'
      }],
      timeValue: Date.now(),
      dialogFormVisible: false,
      dialogForm: {
        cbtl_title: '',
        cbtl_sqr: real_name,
        cbtl_date: '',
        cbtl_lb: '',
        cbtl_je: '',
        sqsc: '',
        cbtl_sqr_user_id: user_id,
        cbtl_shr: {}
      },
      lb_list: [
        {
          label: "加班",
          value: "1",
        },
        {
          label: "值班",
          value: "2",
        },
      ],
      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'}
        ],
      },
      money: 0,
      total: 0,
      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;
        }
      })
    },
    showApply(data) {
      this.dialogFormVisible = true;
      this.dialogForm = {
        cbtl_title: '',
        cbtl_lb: '',
        cbtl_sqr: real_name,
        cbtl_je: '',
        sqsc: '',
        cbtl_shr: {},
        cbtl_sqr_user_id: user_id,
      };
      this.dialogForm.cbtl_date = data.day;
    },
    getTotalData() {
      gzt({}).then(res => {
        if (res.code == 1) {
          this.totalData = res.data.content_json;
        }
      })
    },
    switchData() {
      if(this.dialogForm.cbtl_lb == 1) {
        this.money = 100;
      } else {
        this.money = 200;
      }
      if(this.dialogForm.sqsc != '') {
        this.total = parseInt(this.money * this.dialogForm.sqsc);
      }
    },
    handleChange() {
      this.total = parseInt(this.money * this.dialogForm.sqsc);
    },
    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.total,
            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
          }
          bt_add(data).then(res => {
            this.loading = false;
            if (res.code == 1) {
              this.$message({
                message: "补贴申请成功！",
                type: "success",
              });
              this.dialogFormVisible = false;
              this.getTotalData();
            } else {
              this.$message({
                message: res.msg,
                type: "error",
              });
            }
          })
        }
      })
    }

  },
  mounted() {
    this.getUserList();
    this.getTotalData();
  }
}
</script>

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

.info-list {
  margin: 0;
  padding: 0 15px;

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

    & + li {
      border-top: 1px solid #EBEEF5;
    }
  }
}
</style>