<style>
  .CM_look {
    padding: 4px !important;
    position: relative;
    top: 1px;
  }

  .opUl li {
    display: inline-block;
    margin: 10px 15px 10px 0;
  }

  .domesticCommissiondetails .opUl li input {
    height: 34px !important;
  }

  .domesticCommissiondetails .singeRowTable tr td {
    padding: 8px 5px;
  }

  .domesticCommissiondetails .hoverSpan span:hover {
    cursor: pointer;
    text-decoration: underline;
    color: red;
  }

</style>
<template>
  <div class="flexOne domesticCommissiondetails">
    <div style="min-height: 70px;">
      <ul class="opUl">
        <li>
          <em>{{$t('tips.qishu')}}</em>
          <el-select v-model="msg.PeriodId" size="mini" @change="handleCurrentChange(1)">
            <el-option :label="$t('pub.unlimitedSel')" :value="0"></el-option>
            <el-option v-for="(item,index) in PeriodsList" :key="item.index"
            :label="item.Name" :value="item.Id">
            </el-option>
          </el-select>
        </li>
        <li>
          <em>{{$t('scen.sc_cp')}}</em>
          <el-select v-model="msg.OutBranchId" size="mini" @change="handleCurrentChange(1)">
            <el-option :label="$t('pub.unlimitedSel')" :value="-1"></el-option>
            <el-option v-for="(item,index) in BranchList" :key="item.index"
            :label="item.BName" :value="item.Id">
            </el-option>
          </el-select>
        </li>
        <li>
          <em>{{$t('sm.company')}}</em>
          <el-select v-model="msg.RB_Branch_Id" size="mini" @change="handleCurrentChange(1)"
          :disabled='disabled'>
            <el-option :label="$t('pub.unlimitedSel')" :value="-1"></el-option>
            <el-option v-for="(item,index) in BranchList" :key="item.index" :label="item.BName"
            :value="item.Id">
            </el-option>
          </el-select>
        </li>
        <li>
          <em>{{$t('admin.admin_Department')}}</em>
          <el-select v-model="msg.RB_Department_Id" size="mini" @change="handleCurrentChange(1)"
          :disabled='disabled'>
            <el-option :label="$t('pub.unlimitedSel')" :value="-1"></el-option>
            <el-option v-for="(item,index) in departMentList" :key="item.index" :label="item.DepartmentName"
              :value="item.DepartmentID"></el-option>
          </el-select>
        </li>
        <li>
          <em>{{$t('salesModule.Personnel')}}</em>
          <el-select v-model="msg.UserId" size="mini" @change="handleCurrentChange(1)"
          filterable :disabled='disabled'>
            <el-option :label="$t('pub.unlimitedSel')" :value="-1"></el-option>
            <el-option v-for="(item,index) in searchList" :key="item.index" :label="item.name" :value="item.empId">
            </el-option>
          </el-select>
        </li>

        <!-- <li>
          <em>{{$t('hotel.order_Number')}}</em>
          <el-input maxlength="50" v-model="msg.OrderId" class="permiss-input w200"
            @keyup.native.enter="handleCurrentChange(1)" :placeholder="$t('pub.pleaseImport')"></el-input>
        </li> -->
        <li>
          <em>{{$t('visa.v_tuanhao')}}</em>
          <el-input maxlength="50" v-model="msg.TCNUM" class="permiss-input w200"
            @keyup.native.enter="handleCurrentChange(1)" @change="handleCurrentChange(1)"
            :placeholder="$t('pub.pleaseImport')"></el-input>
        </li>



      </ul>
    </div>
    <!-- <li>
            <input type="button" class="normalBtn" :value="$t('visa.v_daochu')" @click="exportExcel">
        </li> -->
    <div style="display: flex;align-items: center;height: 50px;justify-content: space-between;">
      <div style="display: flex;align-items: center;">
        <span>{{$t('fnc.a_zongjine')}}：{{TotalMoney}}{{$t('hotel.hotel_yuan')}}</span>
        <span style="margin-left: 15px;">{{$t('objFill.zongrenshu')}}：{{TotalNum}}{{$t('hotel.hotel_people')}}</span>
      </div>
      <input type="button" class="normalBtn" :value="$t('visa.v_daochu')" @click="exportExcel">

    </div>
    <table v-loading="loading" class="singeRowTable" border="0" cellspacing="0" cellpadding="0"
      style="margin-top: 10px;">
      <tr>

        <th>{{$t('sm.company')}}</th>
        <th>{{$t('admin.admin_Department')}}</th>
        <th>{{$t('visaT.sale')}}</th>
        <th>{{$t('objFill.v101.FinancialModule.tuanxinx')}}</th>
        <th>{{$t('advmanager.v_line')}}</th>
        <th>{{$t('hotel.order_Number')}}</th>
        <!-- <th>{{$t('objFill.v101.FinancialModule.tuanlirun')}}</th> -->
        <th>{{$t('admin.admin_personNumber')}}</th>
        <th>{{$t('salesModule.CommissionNum')}}</th>
        <!-- <th>{{$t('fnc.ewjiangli')}}</th>
        <th>{{$t('objFill.v101.commissonBill.ewaikouchu')}}</th>
        <th>{{$t('objFill.v101.FinancialModule.zuizff')}}</th> -->
        <th>{{$t('tips.qishu')}}</th>
        <th width='400'>{{$t('pub.pubRemark')}}</th>

        <!-- <th>{{$t('system.table_operation')}}</th> -->
      </tr>
      <tr v-for="item in dataList">

        <td>{{item.BranchName}}</td>
        <td>{{item.DeptName}}</td>
        <td>{{item.UserName}}</td>
        <td>
          <div>{{item.OutBranchName}}</div>
          <span style="cursor: pointer;text-decoration: underline;" @click="goTravel(item.TCID)">
            {{item.TCNUM}}({{item.TCID}})
          </span>

        </td>
        <td>{{item.LineName}}</td>
        <td>{{item.OrderId?item.OrderId:'-'}}</td>
        <!-- <td>{{item.TCProfit}}</td> -->
        <td>{{item.GuestCount}}</td>
        <td>{{item.CommissionMoney}}</td>
        <!-- <td>{{item.OtherMoney}}</td>
        <td>{{item.BackMoney}}</td>
        <td>{{item.RealityCommissionMoney}}</td> -->
        <td>{{item.Periods}}</td>
        <td>{{item.Description}}</td>


        <!-- <td>

                    <el-tooltip class="item" effect="dark" :content="$t('fnc.chakan')" placement="top">
                        <el-button type="primary" class="CM_look" @click="goUrl('OPCommissionDetail',item.ID)"
                            icon="iconfont icon-chakan" circle></el-button>
                    </el-tooltip>


                </td> -->
      </tr>
      <tr v-if="dataList.length==0">
        <td style="text-align:center" colspan="10">{{$t('system.content_noData')}}</td>
      </tr>
    </table>
    <!-- 分页 -->
    <el-pagination background @current-change="handleCurrentChange" :current-page.sync="msg.pageIndex"
      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 {
        Month: moment().format("YYYY-MM"),
        msg: {
          pageIndex: 1,
          pageSize: 20,
          PeriodId: 0,
          UserId: -1,
          RB_Branch_Id: -1,
          RB_Department_Id: -1,
          // OrderId: '',
          TCNUM: '',
          OutBranchId: -1
        },
        loading: false,
        //数据源
        dataList: [],
        total: 0,
        btnShow: false,
        PeriodsList: [],
        BranchList: [],
        searchList: [],
        departMentList: [],
        TotalMoney: 0,
        TotalNum: 0,
        disabled: true

      }
    },
    mounted() {
      let userInfo = this.getLocalStorage();
      let ActionMenuCode = userInfo.ActionMenuCode;
      if (this.$route.query) { //不大于0的话用默认值
        if (this.$route.query.PeriodId && this.$route.query.PeriodId > 0) {
          this.msg.PeriodId = Number(this.$route.query.PeriodId)
        }
        if (this.$route.query.UserId && this.$route.query.UserId > 0) {
          this.msg.UserId = Number(this.$route.query.UserId)
        }
        if (this.$route.query.RB_Branch_Id) {
          this.msg.RB_Branch_Id = Number(this.$route.query.RB_Branch_Id)
        }
        if (this.$route.query.RB_Department_Id && this.$route.query.RB_Department_Id > 0) {
          this.msg.RB_Department_Id = Number(this.$route.query.RB_Department_Id)
        }
        if (this.$route.query.OutBranchId && this.$route.query.OutBranchId!='') {
          this.msg.OutBranchId = Number(this.$route.query.OutBranchId)
        }
      }
      if (ActionMenuCode.indexOf('home_CommissionSeeAll') != -1) { //是否有看所有人的权限
        this.disabled = false;
      } else {
        this.disabled = true;
        this.msg.UserId = Number(userInfo.EmployeeId)
      }
      this.getList();
      this.getqishilist()
      this.getCompanyList() //获取公司
      this.getEmployee() //人员
      this.getDerpartMent() //部门
    },
    methods: {
      getDerpartMent() {
        //获取部门
        this.apipost(
          "admin_get_DepartmentGetList",
          this.getDepartmentMsg,
          res => {
            if (res.data.resultCode == 1) {
              this.departMentList = res.data.data;
            } else {}
          },
          err => {}
        );
      },
      getEmployee() { //所有人员下拉
        let employeeMsg = {
          RB_Group_id: "0",
          RB_Branch_id: "-1",
          departmentId: "0",
          IsLeave: "-1"
        }
        this.apipost(
          "app_get_company_employee",
          employeeMsg,
          res => {
            if (res.data.resultCode == 1) {
              this.searchList = res.data.data;
            }
          },
          err => {}
        );
      },
      //初始化公司
      getCompanyList() {
        let userInfo = this.getLocalStorage();
        var RB_Group_id = userInfo.RB_Group_id;
        let msg = {
          Status: 0,
          is_show: 0,
          RB_Group_Id: RB_Group_id
        };
        this.apipost(
          "admin_get_BranchGetList",
          msg,
          res => {
            if (res.data.resultCode == 1) {
              this.BranchList = res.data.data;

            }
          },
          err => {}
        );
      },
      getqishilist() {
        this.apipost(
          "sellcommission_GetTWCommissionPeriodsList", {},
          res => {
            if (res.data.resultCode == 1) {
              this.PeriodsList = res.data.data;
              if (this.PeriodsList && this.PeriodsList.length > 0) {
                // this.msg.Periods = Number(this.PeriodsList[0].Id)
              }

            } else {
              this.Error(res.data.message);
            }
          },
          null
        );
      },


      handleCurrentChange(val) {
        this.msg.pageIndex = val;
        this.getList();
      },
      goUrl(path, id) {
        this.$router.push({
          path: path,
          query: {
            PeriodsId: id,
            blank: 'y',
            tab: '期数详情'
          }
        });
      },
      //获取数据
      getList() {
        let msg = JSON.parse(JSON.stringify(this.msg))
        if (msg.OrderId == '') {
          msg.OrderId = 0
        }
        this.loading = true;
        this.apipost(
          "sellcommission_GetTWCommissionSingleDetailsList",
          msg,
          res => {
            this.loading = false;
            if (res.data.resultCode == 1) {
              this.TotalMoney = res.data.data.TotalMoney ? res.data.data.TotalMoney : 0
              this.TotalNum = res.data.data.TotalNum ? res.data.data.TotalNum : 0
              this.dataList = res.data.data.pmodel.pageData;
              this.total = res.data.data.pmodel.count;
            } else {
              this.Error(res.data.message);
            }
          },
          null
        );
      },
      exportExcel() { //导出
        let msg = JSON.parse(JSON.stringify(this.msg))
        if (msg.OrderId == '') {
          msg.OrderId = 0

        }
        let userInfo = this.getLocalStorage();
        msg.EmployeeIdUser = userInfo.EmployeeId
        var fileName = this.$t('objFill.v101.FinancialModule.taiwtcmx') + ".xls";
        this.GetLocalFile("sellcommission_GetTWCommissionSingleDetailsListToExcel", msg, fileName);
      },
      goTravel(TCID) { //跳转到团队列表
        this.$router.push({
          path: 'TravelControlList',
          query: {
            TCID: TCID,
            blank: 'y',
            tab: '团控列表'
          }
        });
      }

    }
  }

</script>