<template>
  <!-- 日计划量跟踪查询 -->
  <el-container>
    <el-header style="width: 100%">
      <el-form
        ref="requestForm"
        :model="queryParam"
        label-width="75px"
        class="flex-form"
      >
        <div class="flex-query">
          <div style="width: 300px">
            <el-form-item label="月份:">
              <el-date-picker v-model="queryParam.yf" value-format="yyyy/MM"  type="month"  style="width: 80%;" />
            </el-form-item>
          </div>

        </div>
        <div>
          <el-button type="primary" @click="initList()">查询</el-button>
        </div>
      </el-form>
    </el-header>
    <el-container style="padding-top: 10px">
      <el-container>
        <el-main>
          <div class="mytable">
            <vxe-grid
              id="id"
              ref="tableRef"
              border
              resizable
              keep-source
              :align="'center'"
              :height="height"
              :auto-resize="true"
              :columns="tableColumn1"
              :data="list"
              :custom-config="{ storage: true }"
              :scroll-y="{ enabled: true }"
              highlight-hover-row
            >
              <template #wcxltsDefault="{ row }">
                <span>{{ xlNum(row) }}</span>
              </template>
              <template #wcbfDefault="{ row }">
                <span>{{ jhNum(row) }}</span>
              </template>
<!--              <template #ljqgDefault="{ row }">-->
<!--                <span>{{ ljqgNum(row) }}</span>-->
<!--              </template>-->
            </vxe-grid>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </el-container>
</template>

<script>
import { getRjhList } from "@/api/sjzx/jcsj";
import XEUtils from "xe-utils";
export default {
  name: "RjhlgzCx",
  data() {
    return {
      queryParam: {
        yf:"",
      },
      list: [],
      height: "500px",
      day:'',
      tableColumn1:[],
      tableColumn: [
        { type: 'seq', width: 60, title: '序号',fixed:"left" },
        {field: 'gw', title: '工位', width: 100,fixed:"left",
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', }, },
        {field: 'rjwc_sy', title: '上月日均实际完成工作量', width: 100,fixed:"left",
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', }, },
        {field: 'rjjh_by', title: '日均计划工作量', width: 100,fixed:"left",
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', }, },
        {field: 'rjwc_by', title: '日均实际完成工作量', width: 100,
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', }, },
        // {field: 'wcxlts', title: '效率提升', width: 100,slots: { default: 'wcxltsDefault' },
        //   filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
        //   filterRender: { name: 'FilterCombination', }, },
        {field: 'wcbf', title: '计划实现率', width: 100,slots: { default: 'wcbfDefault' },
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', }, },
        {field: 'ljqg', title: '累计超欠工作量', width: 100,
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', }, },
      ]

    };
  },
  created() {
    const today=new Date();
    this.queryParam.yf=today.getFullYear()+"/"+(today.getMonth()+1);
    window.addEventListener("resize", this.getHeight);
    this.getHeight();
    this.initList();
  },
  methods: {
    xlNum(row){
      if (row.rjwc_sy){
        var n=(((row.rjwc_by-row.rjwc_sy)/row.rjwc_sy)*100).toFixed(1);
        return n+'%';
      }
      return 0+'%';
    },
    jhNum(row){
      if (row.rjwc_by && row.rjjh_by){
        var n=((row.rjwc_by/row.rjjh_by)*100).toFixed(1);;
        return n+'%';
      }
      return 0+'%';
    },
    ljqgNum(row){
      // let [year, month,days] = this.day.split("/");
      // var num =parseInt(days);
      // var n=(row.rjwc_by-row.rjjh_by)*num;
      // return n.toFixed(1);
    },
    generateHeader( year,month){
      this.tableColumn1=[];
      this.tableColumn1.push(...this.tableColumn);
      // 获取当前月份的天数
      const daysInMonth = new Date(year, month , 0).getDate();
      // 生成日期数组
      for (let day = 1; day <= daysInMonth; day++) {
        this.tableColumn1.push(   {field: 'field_'+(day<10?("0"+day):day), title: (day<10?("0"+day):day)+'日', width: 100,
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', }, })
      }
    },
    // 获取列表接口
    initList() {
      if (!this.queryParam.yf) {
        this.$message.warning('选择查询月份')
        return
      }
      let dateStr = this.queryParam.yf;
      let [year, month] = dateStr.split("/");
      this.generateHeader(year,month);
      let today=new Date();
      if(!(today.getFullYear()==year&&(today.getMonth()+1)==month)){
        today=new Date(year, month , 0);
      }
      this.day=XEUtils.toDateString(today, 'yyyy/MM/dd');
      getRjhList(this.day).then((res) => {
        if (res.success) {
          this.list = res.data;
        }
      });
    },
    getHeight() {
      this.height = window.innerHeight - 160;
    },
  },
};
</script>
<style lang="scss" scoped>
.el-header {
  margin: 0;
  padding: 5px 0;
  height: auto;
}
.el-container {
  padding: 0;
  margin: 0;
}
.el-main {
  padding: 0;
}
.el-col {
  padding: 0;
}
.el-aside {
  background: #fff;
  padding: 0;
}
.el-container {
  padding: 0;
}
.el-row {
  margin-bottom: 5px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.tableStyles {
  background: #0a76a4;
}
.my-dropdown {
  width: 450px;
  height: 250px;
  background-color: #fff;
  border: 1px solid #dcdfe6;
  box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.1);
  font-size: 12px;
}
::v-deep .mytable .vxe-input {
  display: flex !important;
}
::v-deep .el-form-item {
  margin-bottom: 0px !important;
}
::v-deep .el-date-editor.el-input__inner {
  width: auto !important;
}
.flex-form {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .flex-query {
    display: flex;
  }
}
</style>
