<style>
  .CM_look{
      padding:4px!important;
      position: relative;
      top:1px;
  }
  .opUl li{
    display: inline-block;
    margin:10px 15px 10px 0;
  }
  .OPcommissionPeriods .singeRowTable tr td{
    padding: 8px 5px;
  }
  .OPcommissionPeriods .hoverSpan span:hover{
    cursor: pointer;
    text-decoration: underline;
    color: red;
  }
  .opUl li em{
      font-size:12px;
      display:inline-block;
      margin-right:15px;
  }
  .OPcommissionPeriods .underline{
      text-decoration:underline;
      cursor:pointer;
  }
</style>
<template>
  <div class="flexOne OPcommissionPeriods">
    <div>
      <ul class="opUl">
        <li>
          <em>{{$t('advmanager.v_type')}}</em>
          <el-select v-model="msg.Type" :placeholder="$t('pub.pleaseSel')">
            <el-option :label="$t('fnc.shenhe')" :value="1"></el-option>
            <el-option :label="$t('objFill.preparedocument')" :value="2"></el-option>
          </el-select>
        </li>
        <li>
          <em>{{$t('system.query_name')}}</em>
          <el-select  filterable  v-model='msg.EmployeeId' >
              <el-option :value="0" :label="$t('pub.unlimitedSel')"></el-option>
              <el-option v-for='item in EmployeeList'
                  :label='item.EmName'
                  :value='item.EmployeeId'
                  :key='item.EmployeeId'>
              </el-option>
          </el-select>
        </li>
        <li>
          <em>{{$t('salesModule.Time')}}</em>
          <el-date-picker
            v-model="dateList"
            type="daterange"
            :range-separator="$t('OrderList.zhi')"
            :start-placeholder="$t('OrderList.star')"
            value-format="yyyy-MM-dd"
            :end-placeholder="$t('OrderList.end')">
            </el-date-picker>
        </li>
        <li>
            <el-button size="mini" type="danger" style="border-radius:14px" :loading="btnLoading" @click="getList">{{$t('pub.searchBtn')}}</el-button>
            <!-- <el-button size="mini" type="danger" style="border-radius:14px" :loading="btnLoading" @click="generateTable">{{$t('objFill.v101.FinancialModule.shengchengtc')}}</!-->
            <!-- <input v-loading="btnLoading" type="button" class="normalBtn" @click="generateTable" value="生成提成"/> -->
        </li>
      </ul>
    </div>
    <table v-loading="loading" class="singeRowTable" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <th>ID</th>
        <th>{{$t('objFill.v101.FinancialModule.shenhzdr')}}</th>
        <th>{{$t('objFill.v101.FinancialModule.shenhzdrq')}}</th>
        <th>{{$t('advmanager.v_type')}}</th>
      </tr>
      <tr v-for="item in dataList">
        <td>
            <span class="underline" @click="goFinal(item.FrID)">{{item.FrID}}</span>
        </td>
        <td>{{item.EmName}}</td>
        <td>{{item.CreateDate}}</td>
        <td>{{item.Type}}</td>
      </tr>
    </table>
    <!-- 分页 -->
    <el-pagination background @current-change="handleCurrentChange" :current-page.sync="currentPage"
          layout="total,prev, pager, next, jumper" :page-size='msg.PageSize' :total='total'>
    </el-pagination>

  </div>
</template>

<script>
import moment from "moment"
  export default {
    data() {
      return {
        dialogVisible:false,
        ErrorMessage:'',
        Month:moment().format("YYYY-MM"),
        dateList:[],
        msg: {
          PageIndex: 1,
          PageSize: 20,
          Type:1,
          EmployeeId:0,
          StartTime:'',
          EndTime:'',
        },
        loading:false,
        //数据源
        dataList:[],
        total:0,
        currentPage: 1,
        btnLoading:false,
        btnShow:false,
        djList:[],
        EmployeeList:[],
        employeeMsg:{ // 员工
            GroupId:'',
            BranchId:-1,
            DepartmentId:0,
            PostId:0,
            IsLeave:0,
        },

      }
    },
    created() {
        this.dateList[0]=moment().format("YYYY-MM-DD");
        this.dateList[1]=moment().format("YYYY-MM-DD");
        if(this.$route.query.Type){
            this.msg.Type=Number(this.$route.query.Type);
        }
        if(this.$route.query.EmployeeId){
            this.msg.EmployeeId=Number(this.$route.query.EmployeeId);
        }

    },
    mounted() {
      let userInfo = this.getLocalStorage();
      let ActionMenuCode=userInfo.ActionMenuCode;
      if(ActionMenuCode.indexOf('P_OPCommissionSend')!=-1){
        this.btnShow=true;
      }
      this.employeeMsg.DepartmentId=userInfo.RB_Department_Id;

      this.getList();
      this.getEmployee();
    },
    methods: {
        getEmployee() { //员工
            this.apipost('admin_get_EmployeeGetList', this.employeeMsg, res => {
                if(res.data.resultCode == 1) {
                    this.EmployeeList = res.data.data;
                }
            }, err => {})
        },

      goFinal(fin){
        document.querySelector("#app").click();
        this.$router.push({
            name: 'FinancialDocumentsDetail',
            query: {
              id: fin,
              'blank': 'y',
            }
          })
      },
      handleCurrentChange(val) {
        this.msg.PageIndex = val;
        this.getList();
      },
      goUrl(path,id) {
        this.$router.push({
          path: path,
          query: {
            PeriodsId:id,
            blank: 'y',
            tab: '期数详情'
          }
        });
      },
      //获取数据
      getList() {
          if(this.dateList && this.dateList.length>0){
              this.msg.StartTime=this.dateList[0];
              this.msg.EndTime=this.dateList[1];
          }
        this.loading = true;
        this.apipost(
          "Financial_get_GetDepartmentAuditDetail",
          this.msg,
          res => {
            this.loading = false;
            if(res.data.resultCode==1){
              this.dataList = res.data.data.pageData;
              this.total = res.data.data.count;
            }else{
              this.Error(res.data.message);
            }
          },
          null
        );
      },
    }
  }
</script>
