<script setup lang="ts">
import { reactive } from 'vue'
import { Salary_User_Get } from '@/api/salary/index'

let date = new Date()
const month = date.getMonth()
const year = date.getFullYear()
const salaryFromData = reactive({
  year: year + '',
  month: (month < 10 ? '0' : '') + month,
  T_uuid: ''
})
const isSalary = ['T_user_name', 'T_user_post', 'T_user_dept', 'T_attendance', 'T_cut_payment', 'T_laballot', 'T_total']

const salaryData = reactive([
  { name: '姓名', field: 'T_user_name', salary: '' },
  { name: '部门', field: 'T_user_dept', salary: '' },
  { name: '岗位', field: 'T_user_post', salary: '' },
  { name: '基础工资', field: 'T_base', salary: '' },
  { name: '需缴养老保险：', field: 'T_pension_insurance', salary: '' },
  { name: '岗位工资', field: 'T_post', salary: '' },
  { name: '需缴医疗保险：', field: 'T_unemployment_insurance', salary: '' },
  { name: '工龄工资：', field: 'T_seniority', salary: '' },
  { name: '需缴住房公积金：', field: 'T_medical_insurance', salary: '' },
  { name: '绩效金额：', field: 'T_perf', salary: '' },
  { name: '需缴纳失业保险：', field: 'T_large_medical_insurance', salary: '' },
  { name: '绩效得分：', field: 'T_perf_score', salary: '' },
  { name: '需缴大额医疗保险：', field: 'T_housing_fund', salary: '' },
  { name: '实发绩效', field: 'T_actual_Perf', salary: '' },
  { name: '个税扣款', field: 'T_tax', salary: '' },
  { name: '其他补款：', field: 'T_back_payment', salary: '' },
  { name: '扣款合计', field: 'T_laborage', salary: '' },
  { name: '考勤扣款：', field: 'T_attendance', salary: '' },
  { name: '其他扣款', field: 'T_cut_payment', salary: '' },
  { name: '应发合计', field: 'T_laballot', salary: '' },
  { name: '实发合计', field: 'T_total', salary: '' }
])

const getMySalary = async () => {
  let T_date = salaryFromData.year + '-' + salaryFromData.month
  const res: any = await Salary_User_Get({ T_date }).catch(error => {
    if (error.Code === 202) {
      for (let item of salaryData) {
        if (!['T_user_name', 'T_user_dept', 'T_user_post'].includes(item.field)) {
          item.salary = '0'
        }
      }
    }
  })
  if (res.Code === 200) {
    for (let item of salaryData) {
      item.salary = res.Data[item.field]
    }
  }
}

const salarDateYearChange = (val: string) => {
  if (!val) return
  getMySalary()
}

const salarDateMonthChange = (val: string) => {
  if (!val) return
  getMySalary()
}

const searchSalary = () => {
  getMySalary()
}

getMySalary()
</script>

<template>
  <div class="SalaryMy">
    <el-card class="m-b-3">
      <el-row :gutter="24">
        <el-col :span="12" class="d-flex">
          <span class="demonstration">年：</span>
          <el-date-picker
            v-model="salaryFromData.year"
            style="width: 100px"
            value-format="YYYY"
            type="year"
            placeholder="请选择年"
            @change="salarDateYearChange"
          />
          <span class="demonstration">月：</span>
          <el-date-picker
            popper-class="picker-date"
            v-model="salaryFromData.month"
            style="width: 100px"
            format="MM"
            value-format="MM"
            type="month"
            placeholder="请选择月"
            @change="salarDateMonthChange"
          />
        </el-col>
        <el-col :span="12">
          <el-button type="primary" @click="searchSalary">查询</el-button>
        </el-col>
      </el-row>
    </el-card>
    <el-card class="salary-content">
      <el-descriptions title="我的薪资" :column="3" border>
        <el-descriptions-item>
          <template #label>
            <h4>姓名：</h4>
          </template>
          <h4>{{ salaryData[0].salary }}</h4>
        </el-descriptions-item>
        <el-descriptions-item
          ><template #label>
            <h4>部门：</h4>
          </template>
          <h4>{{ salaryData[1].salary }}</h4></el-descriptions-item
        >
        <el-descriptions-item
          ><template #label>
            <h4>岗位：</h4>
          </template>
          <h4>{{ salaryData[2].salary }}</h4></el-descriptions-item
        >
      </el-descriptions>
      <el-descriptions :column="2" border>
        <template v-for="item in salaryData" :key="item.field">
          <el-descriptions-item v-if="!isSalary.includes(item.field)">
            <template #label>
              <div class="cell-item">
                <i class="iconfont">{{ '\ue7d1' }}</i>
                {{ item.name }}
              </div>
            </template>
            <el-tag type="danger">{{ item.salary }}￥</el-tag>
          </el-descriptions-item>
        </template>
        <el-descriptions-item :span="2">
          <template #label>考勤扣款：</template>
          <el-tag type="danger">{{ salaryData[17].salary }}￥</el-tag>
        </el-descriptions-item>
        <el-descriptions-item :span="2">
          <template #label>其他扣款：</template>
          <el-tag type="danger">{{ salaryData[18].salary }}￥</el-tag>
        </el-descriptions-item>
        <el-descriptions-item :span="2">
          <template #label>应发合计：</template>
          <el-tag type="danger">{{ salaryData[19].salary }}￥</el-tag>
        </el-descriptions-item>
        <el-descriptions-item :span="2">
          <template #label>实发合计：</template>
          <el-tag type="danger">{{ salaryData[20].salary }}￥</el-tag>
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
  </div>
</template>

<style lang="scss" scoped>
.d-flex {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-wrap: nowrap;
}
.salary-content {
  overflow-y: auto;
  height: 800px;
}
</style>
