<template>
  <q-dialog v-model="dialog" maximized full-height seamless position="right" >
    <q-card style="margin-top:61px;width:900px" class="no-border-radius classinfo_Dialog">
      <div class="drawerTop2 row" >
        <div class="drawerTop-d">
          订
        </div>
        <div class="drawerTop-t">
          <span style="font-size: 16px;color: #000000;font-weight: bold">订单编号</span>
          <span style="font-size: 12px;color: #666666">{{saveObj.OrderId}}</span>
        </div>
        <div style="background: rgba(2, 196, 153, 0.2);border-radius: 4px;text-align: center;padding: 2px 13px;margin-left: 30px">
          <span style="color: #02C499">{{saveObj.OrderStateName}}</span>
        </div>
      </div>
      <div style="padding:20px 15px;" class="row wrap q-col-gutter-md">
        <div class="col-6 row">
          <span class="two-left">关联销售：</span>
          <span class="two-r">{{saveObj.EnterName}}</span>
        </div>
        <div class="col-6 row">
          <span  class="two-left">创建时间：</span>
          <span class="two-r">{{saveObj.CreateTime}}</span>
        </div>
        <div class="col-6 row">
          <span class="two-left">应收总额：</span>
          <span class="two-r">{{saveObj.PreferPrice.toFixed(2)}}</span>
        </div>
        <div class="col-6 row">
          <span  class="two-left">待收金额：</span>
          <span class="two-r">{{saveObj.DueInMoney.toFixed(2)}}</span>
        </div>
      </div>
      <div style="padding: 20px;">
        <q-tabs
          v-model="tab"
          align="left"
          class="qtabs"
        >
          <q-tab name="1"  label="订单详情" />
          <q-tab name="2"  label="名单" />
          <q-tab name="3"  label="备注" />
          <q-tab name="4"  label="财务单据" />
          <q-tab name="5"  label="日志" />
        </q-tabs>
        <div v-if="tab==1">
          <div class="col row" style="font-size: 14px;color:#000;align-items: center;margin-top: 20px">
            <div style="width: 3px;height: 12px;background: #3FC4FF;margin-right: 10px"></div>
            基本信息
          </div>
          <div style="padding:20px 15px;" class="row wrap q-col-gutter-md">
            <div class="col-6 row">
              <span class="two-left">人数：</span>
              <span class="two-r">{{saveObj.GuestNum}}</span>
            </div>
            <div class="col-6 row">
              <span  class="two-left">班级信息：</span>
              <span class="two-r">{{saveObj.ClassName}}</span>
            </div>
            <div class="col-6 row">
              <span class="two-left">单价：</span>
              <span class="two-r">{{saveObj.Class_Price.toFixed(2)}}</span>
            </div>
            <div class="col-6 row">
              <span  class="two-left">成交单价：</span>
              <span class="two-r" style="color: #3FC4FF">{{saveObj.Unit_Price.toFixed(2)}}</span>
            </div>
            <div class="col-6 row">
              <span class="two-left">应收金额：</span>
              <span class="two-r">{{saveObj.PreferPrice.toFixed(2)}}</span>
            </div>
            <div class="col-6 row">
              <span  class="two-left">实收金额：</span>
              <span class="two-r">{{saveObj.Income.toFixed(2)}}</span>
            </div>
            <div class="col-6 row">
              <span class="two-left">优惠金额：</span>
              <span class="two-r">{{saveObj.DiscountMoney.toFixed(2)}}</span>
            </div>
            <div class="col-6 row">
              <span  class="two-left">退款总额：</span>
              <span class="two-r">{{saveObj.Refund.toFixed(2)}}</span>
            </div>
            <div class="col-6 row">
              <span  class="two-left">待收总额：</span>
              <span class="two-r" style="color:#2961FE;">{{saveObj.DueInMoney.toFixed(2)}}</span>
            </div>
          </div>
        </div>
      </div>
      <div v-if="tab==2" style="padding: 10px 20px">
        <q-table :pagination="msg" :loading="loading" no-data-label="暂无相关数据" flat class="sticky-tow-column-table"
                 separator="none" :data="data" :columns="columns" row-key="name">

          <template v-slot:body-cell-Sex="props">
            <q-td :props="props">
              <span >{{props.row.Sex==1?'男':'女'}}</span>
            </q-td>
          </template>
          <template v-slot:body-cell-GuestName="props">
            <q-td :props="props" class="row" style="align-items: center">
              <div style="width: 34px;height: 34px;border-radius: 50%;background: rgba(41, 97, 254, 0.2);text-align: center;line-height: 34px;font-size: 14px;color: #2961FE;margin-right: 5px">
                {{props.row.GuestName.slice(0,1)}}
              </div>
              {{props.row.GuestName}}
            </q-td>
          </template>
          <template v-slot:bottom>
            <q-pagination class="full-width justify-end" v-model="msg.PageIndex" color="primary" :max="pageCount"
                          :input="true" @input="changePage" />
          </template>
        </q-table>
      </div>
      <div v-if="tab==3" style="padding: 10px 20px">
        <div class="row" style="justify-content: flex-end">
          <div class="row tis">
            <div class="tis-k" style="background: #2961FE"></div>
            <span>销售备注</span>
          </div>
          <div class="row tis">
            <div class="tis-k" style="background: #8175FB"></div>
            <span>教务备注</span>
          </div>
          <div class="row tis">
            <div class="tis-k" style="background: #F28C1D"></div>
            <span>校长备注</span>
          </div>
          <div class="row tis">
            <div class="tis-k" style="background: #F72E52"></div>
            <span>总经理备注</span>
          </div>
        </div>
        <div class="q-px-lg q-pb-md" style="padding-bottom: 50px;">
          <el-timeline>
            <el-timeline-item
              v-for="(activity, index) in data2"
              :key="index"
              :color="activity.color"
              size="large"
              >
              <div>
                <div class="row" style="font-size: 14px;color: #111111">
                  <span>{{activity.CreateByName}}</span>
                  <span style="margin-left: 10px">{{activity.CreateTime}}</span>
                </div>
                <div style="width: 100%;padding: 15px;line-height: 20px;background: #F0F5FB;border-radius: 4px;font-size: 12px;color: #333333">
                  {{activity.Content}}
                </div>
              </div>
            </el-timeline-item>
          </el-timeline>
          <q-pagination class="full-width justify-end" v-model="msg2.PageIndex" color="primary" :max="pageCount2"
                        :input="true" @input="changePage2" />
        </div>
      </div>
      <div v-if="tab==4" style="padding:0 20px">
        <div class="row " style="align-items: center;margin-bottom: 20px;" >
          <div style="width: 3px;height: 15px;background: #3FC4FF;margin-right: 10px"></div>收款单
        </div>
        <q-table :pagination="msg" :loading="floading" no-data-label="暂无相关数据" flat class="sticky-tow-column-table"
                 :hide-pagination="true"
                  :data="dataList" :columns="columnsf" row-key="name">

          <template v-slot:body-cell-FrID="props">
            <q-td :props="props" @click="goUrl('FinancialDocumentsDetail',props.row)">
              <span style="font-size: 14px;color: #2961FE;font-weight: bold;cursor: pointer;">{{props.row.FrID}}</span>
            </q-td>
          </template>
          <template v-slot:body-cell-CostTypeList="props">
            <q-td :props="props" v-for="(s,si) in props.row.CostTypeList" :key="si">
              <span  style="background-color: rgba(64,158,255,.1);display: inline-block;padding: 0 5px;height: 22px;line-height: 20px;font-size: 12px;color: #646464;border-radius: 4px;box-sizing: border-box;border: 1px solid rgba(64,158,255,.2);white-space: nowrap;margin-bottom: 4px;margin-right: 4px;">{{s}}</span>
            </q-td>
          </template>

          <template v-slot:body-cell-TradeWayList="props">
            <q-td :props="props" class="row" style="align-items: center;height: auto">
              <div v-if="props.row.TradeWayList&&props.row.TradeWayList.length>0" class="my-table-details">
                <div   v-for="(tw,twIn) in props.row.TradeWayList" style="line-height: normal !important;padding: 5px 10px;background-color: #EEEEEE;border-radius: 4px;width:210px;display: flex;flex-direction: column;align-items: center">
                  <p><span style="font-weight: bold;color:#333333">{{tw.Alias}}</span><span class="_bank_name" style="height:20px;;display: inline-block;background-color: #333333;color: white;padding: 2px 4px;border-radius: 4px;margin-left:10px;margin-letf:10px">{{props.row.TradeWayList[0].TypeName}}</span><span style="height:20px;display: inline-block;background-color: #333333;color: white;padding: 2px 4px;border-radius: 4px;margin-left:10px;" :style="{'background-color':tw.AccountType=='私'?'#2AAEF2':'#FF9C01'}">{{tw.AccountType==""?'无':tw.AccountType}}</span> </p>
                  <p style="color:#333333">{{tw.BankNo}}</p>
                </div>
              </div>

            </q-td>
          </template>
          <template v-slot:body-cell-zhaungt="props">
            <q-td :props="props"  >
              <i v-if="props.row.Status==1" class="iconfont icon-daiqueren" style="color: #4BCA81"></i>
              <i v-if="props.row.Status==4" class="iconfont icon-yiquxiao" style="color: #4BCA81"></i>
              <i v-if="props.row.Status==2" class="iconfont icon-yiqueren" style="color: #959595"></i>
              <i  v-if="props.row.Status==3" class="iconfont icon-shenhebohui" style="color: #E95252"></i>
              <i  v-if="props.row.Status==0" class="iconfont icon-zancun" style="color: #FF9C01"></i>
              <span  style="cursor: pointer;" @click="Financial_post_GetFinancLogList(props.row.FrID)">{{props.row.StatusStr}}</span>
              <q-popup-proxy >
                <q-banner>
                  <div style="height: auto;max-height: 220px;background-color: #FFFFFF;width: 230px">
                    <div class="changLog">
                      <p class="_log_t">流程日志</p>
                      <ul style="padding-left: 20px;max-height: 180px;overflow: auto;" v-if="GetFinancLogList" v-loading='LogLoading'>
                        <li style="border-left: 1px solid #E9E9E9;position: relative;padding-bottom: 10px;padding-left: 20px;padding-top: 10px;" v-for="(log,li) in GetFinancLogList">
                          <span style="background-color: #47BF8C;width: 7px;height: 7px;border-radius: 50%;display: inline-block;position: absolute;left: -4px;top: 19px;"></span>
                          <p class="row" style="justify-content: space-between"> <span class="_color_blue">{{log.EmName}}</span>  <span class="fr changLog_time">{{log.UpdateDate}}</span> </p>
                          <p class="_dtel">{{log.StartValue}}</p>
                        </li>
                      </ul>
                      <ul v-else>
                        <li>暂无修改日志</li>
                      </ul>
                    </div>
                  </div>
                </q-banner>
              </q-popup-proxy>
            </q-td>
          </template>
        </q-table>

<!--        付款单-->
        <div class="row " style="align-items: center;margin: 20px 0;" >
          <div style="width: 3px;height: 15px;background: #3FC4FF;margin-right: 10px"></div>付款单
        </div>
        <q-table :pagination="msg" :loading="floading" no-data-label="暂无相关数据" flat class="sticky-tow-column-table"
                 :hide-pagination="true"
                 :data="dataListP" :columns="columnsf" row-key="name">

          <template v-slot:body-cell-FrID="props">
            <q-td :props="props" @click="goUrl('FinancialDocumentsDetail',props.row)">
              <span style="font-size: 14px;color: #2961FE;font-weight: bold;cursor: pointer;">{{props.row.FrID}}</span>
            </q-td>
          </template>
          <template v-slot:body-cell-CostTypeList="props">
            <q-td :props="props" v-for="(s,si) in props.row.CostTypeList" :key="si">
              <span  style="background-color: rgba(64,158,255,.1);display: inline-block;padding: 0 5px;height: 22px;line-height: 20px;font-size: 12px;color: #646464;border-radius: 4px;box-sizing: border-box;border: 1px solid rgba(64,158,255,.2);white-space: nowrap;margin-bottom: 4px;margin-right: 4px;">{{s}}</span>
            </q-td>
          </template>

          <template v-slot:body-cell-TradeWayList="props">
            <q-td :props="props" class="row" style="align-items: center;height: auto">
              <div v-if="props.row.TradeWayList&&props.row.TradeWayList.length>0" class="my-table-details">
                <div   v-for="(tw,twIn) in props.row.TradeWayList" style="line-height: normal !important;padding: 5px 10px;background-color: #EEEEEE;border-radius: 4px;width:210px;display: flex;flex-direction: column;align-items: center">
                  <p><span style="font-weight: bold;color:#333333">{{tw.Alias}}</span><span class="_bank_name" style="height:20px;;display: inline-block;background-color: #333333;color: white;padding: 2px 4px;border-radius: 4px;margin-left:10px;margin-letf:10px">{{props.row.TradeWayList[0].TypeName}}</span><span style="height:20px;display: inline-block;background-color: #333333;color: white;padding: 2px 4px;border-radius: 4px;margin-left:10px;" :style="{'background-color':tw.AccountType=='私'?'#2AAEF2':'#FF9C01'}">{{tw.AccountType==""?'无':tw.AccountType}}</span> </p>
                  <p style="color:#333333">{{tw.BankNo}}</p>
                </div>
              </div>
            </q-td>
          </template>
          <template v-slot:body-cell-zhaungt="props">
            <q-td :props="props"  >
              <i v-if="props.row.Status==1" class="iconfont icon-daiqueren" style="color: #4BCA81"></i>
              <i v-if="props.row.Status==4" class="iconfont icon-yiquxiao" style="color: #4BCA81"></i>
              <i v-if="props.row.Status==2" class="iconfont icon-yiqueren" style="color: #959595"></i>
              <i  v-if="props.row.Status==3" class="iconfont icon-shenhebohui" style="color: #E95252"></i>
              <i  v-if="props.row.Status==0" class="iconfont icon-zancun" style="color: #FF9C01"></i>
              <span  style="cursor: pointer;" @click="Financial_post_GetFinancLogList(props.row.FrID)">{{props.row.StatusStr}}</span>
              <q-popup-proxy >
                <q-banner>
                  <div style="height: auto;max-height: 220px;background-color: #FFFFFF;width: 230px">
                    <div class="changLog">
                      <p class="_log_t">流程日志</p>
                      <ul style="padding-left: 20px;max-height: 180px;overflow: auto;" v-if="GetFinancLogList" v-loading='LogLoading'>
                        <li style="border-left: 1px solid #E9E9E9;position: relative;padding-bottom: 10px;padding-left: 20px;padding-top: 10px;" v-for="(log,li) in GetFinancLogList">
                          <span style="background-color: #47BF8C;width: 7px;height: 7px;border-radius: 50%;display: inline-block;position: absolute;left: -4px;top: 19px;"></span>
                          <p class="row" style="justify-content: space-between"> <span class="_color_blue">{{log.EmName}}</span>  <span class="fr changLog_time">{{log.UpdateDate}}</span> </p>
                          <p class="_dtel">{{log.StartValue}}</p>
                        </li>
                      </ul>
                      <ul v-else>
                        <li>暂无修改日志</li>
                      </ul>
                    </div>
                  </div>
                </q-banner>
              </q-popup-proxy>
            </q-td>
          </template>
        </q-table>

      </div>
      <div v-if="tab==5" style="padding: 10px 20px">

        <div class="q-px-lg q-pb-md" style="padding-bottom: 50px;">

          <el-timeline>
            <el-timeline-item
              v-for="(activity, index) in data3"
              :key="index"
              size="large"
            >
              <div>
                <div class="row" style="font-size: 14px;color: #111111">
                  <span>{{activity.CreateByName}}</span>
                  <span style="margin-left: 10px">{{activity.CreateTime}}</span>
                </div>
                <div style="width: 100%;padding: 15px;line-height: 20px;background: #F0F5FB;border-radius: 4px;font-size: 12px;color: #333333">
                  {{activity.LogContent}}
                </div>

              </div>

            </el-timeline-item>
          </el-timeline>
          <q-pagination class="full-width justify-end" v-model="msg3.PageIndex" color="primary" :max="pageCount3"
                        :input="true" @input="changePage3" />
        </div>
      </div>
    </q-card>
    <div class="dialog-out-close" @click="closeSaveForm"
         style="height:40px !important;border-top-left-radius: 4px !important;border-bottom-left-radius: 4px !important;">
      <q-icon name="iconfont icon-jujue1" size="26px" />
    </div>
  </q-dialog>
</template>

<script>
  import {
    getOrderGuestPageList,
    getClassOrderRemarkList,//获取备注列表
    getClassOrderLogList,//获取订单操作日志列表
  } from '../../api/sale/sale'
    export default {
        name: "myOrder-form",
      props: {
        saveObj: {
          type: Object,
          default: null,
          data:[],
          pageCount:0,
        }
      },
      data(){
          return{
            dialog:true,
            tab:'1',
            columns: [{
              name: 'GuestName',
              label: '名称',
              // field: 'GuestName',
              align: 'left'
            },
              {
                name: 'Profession',
                field: 'Profession',
                label: '职业',
                align: 'left',

              },
              {
                name: 'Sex',
                label: '性别',

                align: 'left'
              },
              {
                name: 'Age',
                label: '年龄',
                field: 'Age',
                align: 'left'
              },
              {
                name: 'Mobile',
                label: '电话',
                field: 'Mobile',
                align: 'left'
              },
              {
                name: 'Basics',
                label: '日语基础',
                field: 'Basics',
                align: 'left'
              },
              {
                name: 'GuestSourceName',
                label: '客户来源',
                field: 'GuestSourceName',
                align: 'left'
              },
              {
                name: 'LearningGoalsName',
                label: '学日语目的',
                field: 'LearningGoalsName',
                align: 'left'
              },
            ],
            columnsf:[
              {
                name: 'FrID',
                label: '单号',
                align: 'left',
              },
              {
                name: 'CostTypeList',
                label: '费用类型',
                align: 'left',
              },
              {
                name: 'TradeWayList',
                label: '交易方式',
                align: 'left',
              },
              {
                name: 'Money',
                field: 'Money',
                label: '应收',
                align: 'left',
              },
              {
                name: 'PayMoney',
                field: 'PayMoney',
                label: '实收',
                align: 'left',
              },
              {
                name: 'Fee',
                field: 'Fee',
                label: '手续费',
                align: 'left',
              },
              {
                name: 'TradeDate',
                field: 'TradeDate',
                label: '交易日期',
                align: 'left',
              },
              {
                name: 'EmName',
                field: 'EmName',
                label: '制单人员',
                align: 'left',
              },
              {
                name: 'zhaungt',

                label: '当前状态',
                align: 'left',
              },
            ],

            msg:{
              PageIndex: 1,
              PageSize: 12,
              OrderId: 0,
              ClassId: 0,
              GuestName: '',
              GuestState:0,
            },
            loading:false,
            data2:[],
            pageCount2:0,
            msg2:{
              PageIndex: 1,
              PageSize: 6,
              OrderId:0,
            },
            loading2:false,
            data3:[],
            pageCount3:0,
            msg3:{
              PageIndex: 1,
              PageSize: 6,
              SourceId:0,
            },
            financiaMsg:{
              pageIndex: 1,
              pageSize: 999,
              TCID:0,
              OrderID:0,
              Type:1,
            },
            dataList:[],
            dataListP:[],
            floading:false,
            LogLoading:false,
            GetFinancLogList:[]
          }
      },
      created(){
          if(this.saveObj.tab){
            this.tab = (this.saveObj.tab).toString();
          }

          this.msg.OrderId = this.saveObj.OrderId;
          this.msg2.OrderId = this.saveObj.OrderId;
          this.msg3.SourceId = this.saveObj.OrderId;
          this.msg.ClassId = this.saveObj.ClassId;
        this.getRolelist()
        this.getRemarkList()
        this.OrderLogList()
        this.getfinanciaALLPageList(1)//财务单据
      },
      methods:{
        Financial_post_GetFinancLogList: function(id){  // 获取单据日志

          this.LogLoading = true;
          this.apipost('Financial_post_GetFinancLogList',{ID: id, Type: 2}, res => {
            if (res.data.resultCode == 1) {
              let data = res.data.data;
              data.forEach(x=>{
                x.UpdateDate = this.$commonUtils.formatMsgTime(x.UpdateDate)
              })
              this.LogLoading = false;
              this.GetFinancLogList = data;
            }
          },null)
        },
        closeSaveForm(){
          this.$emit('close')
          this.dialog = false
        },
        //翻页
        changePage(val) {
          this.msg.PageIndex = val;
          this.getRolelist()
        },
        //翻页
        changePage2(val) {
          this.msg2.PageIndex = val;
          this.getRemarkList()
        },
        //翻页
        changePage3(val) {
          this.msg3.PageIndex = val;
          this.OrderLogList()
        },
        getRolelist() {//名单
          this.loading = true
          getOrderGuestPageList(this.msg).then(res => {
            this.data = res.Data.PageData
            this.pageCount = res.Data.PageCount
            this.loading = false
          }).catch(() => {
            this.loading = false
          })
        },
        getRemarkList(){
          this.loading2 = true
          getClassOrderRemarkList(this.msg2).then(res => {
            this.data2 = res.Data.PageData
            this.pageCount2 = res.Data.PageCount;
            this.data2.forEach(x=>{
              if(x.Type==1){
                x.color = '#2961FE'
              }else if(x.Type==2){
                x.color = '#8175FB'
              }else if(x.Type==3){
                x.color = '#F28C1D'
              }else if(x.Type==4){
                x.color = '#F72E52'
              }
            })
            this.loading2 = false
          }).catch(() => {
            this.loading2 = false
          })
        },
        OrderLogList(){
          getClassOrderLogList(this.msg3).then(res => {
            this.data3 = res.Data.PageData
            this.pageCount3 = res.Data.PageCount;
          }).catch(() => {

          })
        },
        getfinanciaALLPageList(Type){
          this.floading= true
          this.financiaMsg.TCID = this.saveObj.ClassId
          this.financiaMsg.OrderID = this.saveObj.OrderId
          this.financiaMsg.Type = Type
          this.apipost('Financial_post_GetALLPageList',this.financiaMsg,res=>{
            if(res.data.resultCode===1){
              let data = res.data.data.pageData.list;
              if (Type===1) {
                this.dataList = data;
                this.getfinanciaALLPageList(2)
              } else {
                this.dataListP = data;
                this.floading= false
              }
            }else{
              this.floading= false
              this.$message.error(res.data.message);
            }
          },err=>{})
        },
        goUrl(path, rowData,) {
          this.$router.push({
            path:'/financial/financalDocument/'+ path,
            query: {
              "id": rowData.FrID,
              blank: 'y',
              tab: '单据详情'
            }
          })
        },
      }
    }
</script>

<style scoped>
  .classinfo_Dialog .drawerTop2{
    padding: 10px 20px;
    align-items: center;
  }
  .classinfo_Dialog .drawerTop-d{
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(40, 96, 251, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #2860FB;
    font-weight: bold;
  }
  .classinfo_Dialog .drawerTop-t{
    margin-left: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

  }
  .classinfo_Dialog .two-left{
    width: 70px;
    display: inline-block;
    font-size: 12px;
    color: #999999;

  }
  .classinfo_Dialog .two-r{
    font-size: 12px;
    color: #111111;
  }
  .classinfo_Dialog .qtabs{
    border-bottom: 1px solid #E2E2E2;
  }
 .classinfo_Dialog .tis {align-items: center}
  .classinfo_Dialog .tis .tis-k{width: 12px;height: 12px;border-radius: 50%;margin-right: 8px}
  .classinfo_Dialog .tis span{font-size: 14px;color: #2D2D2D;font-weight: 600;margin-right: 20px}
  .classinfo_Dialog .my-table-details{max-width: 230px;white-space: normal;margin-bottom: 5px;}
  .classinfo_Dialog .my-table-details p{margin: 0}
  .classinfo_Dialog .q-px-lg{padding: 0}

</style>
