<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;
  }
</style>
<template>
  <div class="flexOne OPcommissionPeriods">
    <div>
      <ul class="opUl">
        <li>
          <em>选择月份</em>
          <el-date-picker
          v-model="Month"
          value-format="yyyy-MM"
          type="month"
          placeholder="选择月">
        </el-date-picker>
        </li>
        <li v-show="btnShow">
            <el-button size="mini" type="danger" style="border-radius:14px" :loading="btnLoading" @click="generateTable">生成提成</el-button>
            <!-- <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>期数</th>
        <th>提成总金额</th>
        <th>操作信息</th>
        <th width="500px">操作备注</th>
        <th>{{$t('system.table_operation')}}</th>
      </tr>
      <tr v-for="item in dataList">
        <td>{{item.Periods}}</td>
        <td>{{item.SumPrice}}</td>
        <td>
          <p>{{item.CreateByStr}}</p>
          <p>{{item.CreateStr}}</p>
          </td>
        <td>{{item.Discription}}</td>
        <td>
          
          <el-tooltip class="item" effect="dark" content="查看" placement="top">
            <el-button type="primary" class="CM_look" @click="goUrl('OPCommissionDetail',item.ID)" icon="iconfont icon-chakan" circle></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="一键制单" placement="top">
            <el-button @click="YijianZD(item)" type="danger" class="CM_look" icon="iconfont icon-mui-icon-add" circle></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="手动制单" placement="top">
            <el-button type="primary" class="CM_look" @click="goUrlZD" icon="iconfont icon-danju1" circle></el-button>
          </el-tooltip>    
          
            <el-tooltip class="item" effect="dark" content="查看详情" placement="top">
              <el-popover
              placement="left"
              width="700"
              trigger="click">
              <table class="OPcommissionPeriods singeRowTable" style="border:1px solid #E6E6E6;" cellspacing="0" cellpadding="0">
                  <tr>
                      <th>公司</th>
                      <th>制单人</th>
                      <th width="56%">单据</th>
                      <th>制单时间</th>
                  </tr>
                  <tr v-for="(item,index) in djList" :key="index">
                    <td>{{item.BName}}</td>
                    <td>{{item.EmName}}</td>
                    <td>
                      <div class="hoverSpan" style="text-align: left;padding: 6px 4px;">
                        <span style="margin-right:5px;margin-bottom:5px" @click="goFinal(fin)" v-for="(fin,key) in item.FinanceIdList" :key="key">{{fin}}</span>  
                      </div>
                    </td>
                    <td>{{item.CreateDate}}</td>
                  </tr>
                  <tr v-if="djList.length==0">
                    <td style="text-align:center" colspan="4">暂无数据</td>
                  </tr>
              </table>
              <el-button @click="Chankan(item)" style="margin-left:5px" slot="reference" type="warning" class="CM_look" icon="iconfont icon-caidan-fill" circle></el-button>
            </el-popover>
            </el-tooltip>
          
          
           
        </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>
    <el-dialog
    title="提示"
    :visible.sync="dialogVisible"
    width="30%">
    <span>{{ErrorMessage}}</span>
    <span slot="footer" class="dialog-footer">
      <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
      <el-button size="mini" type="danger" @click="dialogVisible = false">确 定</el-button>
    </span>
  </el-dialog>
  </div>
</template>

<script>
import moment from "moment"
  export default {
    data() {
      return {
        dialogVisible:false,
        ErrorMessage:'',
        Month:moment().format("YYYY-MM"),
        msg: {
          PageIndex: 1,
          PageSize: 20
        },
        loading:false,
        //数据源
        dataList:[],
        total:0,
        currentPage: 1,
        btnLoading:false,
        btnShow:false,
        djList:[],
      }
    },
    mounted() {
      let userInfo = this.getLocalStorage();
      let ActionMenuCode=userInfo.ActionMenuCode;
      if(ActionMenuCode.indexOf('P_OPCommissionSend')!=-1){
        this.btnShow=true;
      }

      this.getList();
    },
    methods: {
      goUrlZD(){
        let orderObj = {
          OrderID: 0,
          OrderSource: 8,
          Obj: {},
          SourceID: 0,
          CostType: 112,
          SelectState:true,
        }
        let id=[29,31];
        this.$router.push({
            name: 'ChoiceAddFinancialDocuments',
            query: {
              Type: 2,
              templateID: JSON.stringify(id),
              'blank': 'y',
              'orderObj': JSON.stringify(orderObj)
            }
          })
      },
      goFinal(fin){
        document.querySelector("#app").click();
        this.$router.push({
            name: 'FinancialDocumentsDetail',
            query: {
              id: fin,
              'blank': 'y',
            }
          })
      },
      Chankan(item){
        this.apipost(
          "Financial_post_GetOPCommissionBetchImportList",
          {PeriodsId:item.ID},
          res => {
            if(res.data.resultCode==1){
              this.djList=res.data.data;
            }else{
              this.Error(res.data.message);
            }
          },
          null
        );
      },
      YijianZD(item){
        this.loading=true;
        this.apipost(
          "Financial_post_SetOPCommissionBetchImport",
          {PeriodsId:item.ID},
          res => {
            this.loading=false;
            if(res.data.resultCode==1){
              this.Success(res.data.message)
              this.getList();
            }else{
              this.dialogVisible=true;
              this.ErrorMessage=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() {
        this.loading = true;
        this.apipost(
          "sellcommission_GetOPCommissionPageList",
          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
        );
      },
      //生成提成报表
      generateTable(){
        if(!this.Month||this.Month==""){
          this.Error("请选择月份！")
          return;
        }
        this.btnLoading=true;
        this.apipost(
            "sellcommission_SetOPCommission",{Month:this.Month},
            res => {
              this.btnLoading=false;

              if(res.data.resultCode==1){
                this.getList();
                this.Success('报表生成成功')
              }else{
                this.Error(res.data.message);
              }
            },
            null
          );
        }
    }
  }
</script>