<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="drawerTop 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">
          <q-timeline color="secondary" >
            <q-timeline-entry
              v-for="(x,j) in data2" :index="j"
              :title="x.CreateByName"
              :subtitle="x.CreateTime"
            >
              <div>
                <span>{{x.Content}}</span>
              </div>
            </q-timeline-entry>
          </q-timeline>
        </div>
      </div>
      <div v-if="tab==5" style="padding: 10px 20px">

        <div class="q-px-lg q-pb-md">
          <q-timeline color="secondary" >
            <q-timeline-entry
              v-for="(x,j) in data3" :index="j"
              :title="x.CreateByName"
              :subtitle="x.CreateTime"
            >
              <div>
                <span>{{x.LogContent}}</span>
              </div>
            </q-timeline-entry>
          </q-timeline>
        </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'
              },
            ],
            msg:{
              pageIndex: 1,
              pageSize: 12,
              OrderId: 0,
              ClassId: 0,
              GuestName: '',
              GuestState:0,
            },
            loading:false,
            data2:[],
            pageCount2:0,
            msg2:{
              pageIndex: 1,
              pageSize: 12,
              OrderId:0,
            },
            loading2:false,
            data3:[],
            pageCount3:0,
            msg3:{
              pageIndex: 1,
              pageSize: 12,
              SourceId:0,
            },
          }
      },
      created(){
          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()
      },
      methods:{
        closeSaveForm(){
          this.$emit('close')
          this.dialog = false
        },
        //翻页
        changePage(val) {
          this.msg.pageIndex = val;
          this.getRolelist()
        },
        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(() => {

          })
        }
      }
    }
</script>

<style scoped>
  .drawerTop{
    padding: 10px 20px;
    align-items: center;
  }
  .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;
  }
  .drawerTop-t{
    margin-left: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

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

  }
  .two-r{
    font-size: 12px;
    color: #111111;
  }
  .qtabs{
    border-bottom: 1px solid #E2E2E2;
  }
  .tis {align-items: center}
   .tis .tis-k{width: 12px;height: 12px;border-radius: 50%;margin-right: 8px}
   .tis span{font-size: 14px;color: #2D2D2D;font-weight: 600;margin-right: 20px}
</style>
