<template>
  <div>
    <a-modal  v-model="newVisible" title="订单详情" :afterClose="onClose" width="1194px" :bodyStyle="modeStyle">
      <p>订单当前状态：
        <span v-if="order.status==1">等待购买方付款</span>
        <span v-else-if="order.status==2">等待买卖双方交付</span>
        <span v-else-if="order.status==3">正在结算中</span>
        <span v-else-if="order.status==4">订单已完成</span>
        <span v-else-if="order.status==5">订单已关闭</span>
      </p>
      <div class="steps_body">
        <a-steps :current="order.status" class="steps">
          <a-step>
            <template slot="title">下单成功</template>
            <span slot="description">{{order.createtime}}</span>
          </a-step>
          <a-step title="待付款订单"  :description="order.paymenttime" />
          <a-step title="待交付订单" :description="order.receivetime" />
          <a-step title="待结算订单" :description="order.closetime" />
          <a-step title="已完成订单" :description="order.completetime" />
        </a-steps>
      </div>
      <div class="order_body">
        <div class="order_title">
          <div class="order_title_left">
            <span @click="orederActive=0">订单信息</span>
            <span @click="orederActive=1">资金结算表</span>
            <span @click="orederActive=2">交易发票</span>
            <!-- <span @click="orederActive=3">交易凭证</span>
            <span @click="orederActive=4">交付内容</span> -->
          </div>
          <div class="order_title_right">
            <span>{{order.status==5?'订单已关闭':'关闭订单'}}</span>
            <a-switch default-checked class="order_switch"  @change="closeOrder" :loading="closeLoad" :disabled="order.status==5"/>
          </div>
        </div>

        <div class="oreder_content">
          <div v-show="orederActive==0">
            <p class="oreder_content_title">订单信息</p>
            <div class="oreder_info">
              <p>委托方/收款方：{{order_info.entrust_name}}</p>
              <p>购买方/付款方：{{order_info.buy_username}}</p>
            </div>
            <div class="oreder_info">
              <p>订单类型：{{order_info.type==1?'委托订单':order_info.type==2?'认证订单':'服务订单'}}</p>
              <p>订单编号：{{order_info.batchcode}}</p>
              <p>订单ISLI标识码：{{order_info.contract_code}}</p>
              <p>交易流水号：{{order_info.close_serial_number}}</p>
            </div>
            <div class="oreder_info">
              <p>标的名称：{{order_info.goods_name}}</p>
              <p>标的类型：{{order_info.goods_type==1?'文化资源数据':'文化数字内容'}}</p>
              <p>交易方式：{{order_info.goods_entrust==1?'转让':'授权'}}</p>
              <p>权属类型：{{order_info.goods_ownership_str}}</p>
              <p>交易价额：¥ {{order_info.price}}</p>
              <p>交易数量：{{order_info.transaction_count}}</p>
              <p>保证金：¥ {{order_info.earnest_money}}</p>
              <p>服务费：¥ {{order_info.service_charge}}</p>
              <p>交易总额：¥ {{order_info.total_money}} 元</p>
            </div>
          </div>

          <div v-show="orederActive==1">
            <p class="oreder_content_title">资金结算表</p>
            <a-table :columns="columns" :data-source="data" bordered :pagination="false">
              <template slot="close_status" slot-scope="close_status">
                <span v-if="close_status==1">无结算信息</span>
                <span v-else-if="close_status==2">结算中</span>
                <span v-else-if="close_status==3">用户名和收款人不一致</span>
                <span v-else-if="close_status==4">收款信息错误</span>
                <span v-else-if="close_status==5">结算成功</span>
              </template>
            </a-table>
          </div>

          <div v-show="orederActive==2">
            <p class="oreder_content_title">交易发票</p>
            <div class="order_download">
              <!-- <a :href="bill.buy_bill" target="_blank" rel="nofollow">购买方服务费发票</a>
              <a :href="bill.entrust_bill" target="_blank" rel="nofollow">委托方服务费发票</a>
              <a :href="bill.third_party" target="_blank" rel="nofollow">第三方机构服务发票</a> -->
              <a :href="bill.platform" target="_blank" rel="nofollow">平台服务发票</a>
              <!-- <span>购买方服务费发票</span>
              <span>委托方服务费发票</span>
              <span>第三方机构服务发票</span>
              <span>平台服务发票</span> -->
            </div>
          </div>

          <div v-show="orederActive==3">
            <p class="oreder_content_title">交易凭证</p>
            <div class="order_download">
              <span>查看交易凭证</span>
              <span>下载交易凭证</span>
            </div>
          </div>

          <div v-show="orederActive==4">
            <p class="oreder_content_title">交付内容</p>
            <div class="order_download">
              <span>上传评价报告</span>
            </div>
          </div>

        </div>

      </div>
      <template slot="footer">
        <div>
          <a-button type="white" @click="onClose">返 回</a-button>
        </div>
      </template>
    </a-modal>
  </div>
</template>

<script>
  import {orderInfo,orderShut} from '../../api/index'
  export default {
    props:{
      visible:{
        type:Boolean,
        require: true
      },
      batchcode:{
        type:String
      }
    },
    data(){
      return{
        closeLoad:false,
        orederActive:0,
        newVisible:true,
        modeStyle:{
          'min-height':'311px',
          'padding-top':'15px'
        },
        order:{},
        order_info:{},
        bill:[],
        step:0,
        data:[],
        columns:[
          {
            title: '结算方',
            dataIndex: 'close_side',
            width:'120px',
            align:'center'
          },
          {
            title: '结算内容',
            dataIndex: 'close_message',
            width:'120px',
            align:'center'
          },
          {
            title: '金额',
            dataIndex: 'money',
            width:'120px',
            align:'center'
          },
          // {
          //   title: '税率',
          //   dataIndex: 'tax_rate',
          //   width:'120px',
          //   align:'center'
          // },
          {
            title: '税额',
            dataIndex: 'tax_rate_money',
            width:'120px',
            align:'center'
          },
          {
            title: '结算金额',
            dataIndex: 'close_money',
            width:'120px',
            align:'center'
          },
          {
            title: '结算状态',
            dataIndex: 'close_status',
            scopedSlots: { customRender: 'close_status' },
            width:'120px',
            align:'center'
          },
          {
            title: '结算流水号',
            dataIndex: 'close_number',
            width:'220px',
            align:'center'
          },
        ]
      }
    },
    created(){
      this.getorderInfo()
    },
    methods:{
      closeOrder(){
        let data={batchcode:this.batchcode}
        this.closeLoad=true
        orderShut(data).then(res=>{
          if(res.code==200){
            this.closeLoad=false
            this.$message.success('订单关闭成功！');
            this.getorderInfo()
          }else{
            this.$message.error(res.msg);
          }
        })
      },
      getorderInfo(){
        let data={batchcode:this.batchcode}
        orderInfo(data).then(res=>{
          if(res.code==200){
            this.order=res.data.order
            this.order_info=res.data.order_info
            this.data=res.data.close
            this.bill=res.data.bill
          }else{
            this.$message.error(res.msg);
          }
        })
      },
      onClose() {
        // this.newVisible=false
        this.$emit('update:visible', false)
      }
    },
  }

</script>

<style scoped>
  /deep/ .ant-modal-header{
    border-bottom: none;
  }
  /deep/ .ant-modal-footer{
    border-top: none;
    padding: 20px 16px;
  }
  p{
    margin-bottom: 0;
  }
  .steps_body{
    padding: 0 55px;
  }
  .steps{
    margin-top: 48px;
  }
  .order_body{
    padding: 0 26px;
    margin-top: 24px;
  }
  .order_title{
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #4E73E4;
    margin-bottom: 12px;
  }
  .order_title_left span{
    display: inline-block;
    cursor: pointer;
    text-decoration: underline;
    margin-right: 64px;
  }

  .order_title_right{
    display: flex;
    align-items: center;
  }
  .order_switch{
    margin-left: 20px;
  }
  .oreder_content{
    border: 1px #AAAAAA dashed ;
    min-height: 422px;
    border-radius: 5px;
    padding: 24px 20px;
    /* padding-top: 24px; */
  }
  .oreder_content_title{
    font-size: 16px;
    color: #4E5969;
    margin-bottom: 15px;
    font-weight: bold;
  }
  .oreder_info{
    margin-bottom: 20px;
  }
  .oreder_info:last-child{
    margin-bottom: 0;
  }
  /deep/ .ant-table-tbody > tr > td {
    padding: 15px 16px;
  }
  /deep/ .ant-table-thead > tr > th {
    padding: 15px 16px;
  }
  .order_download span,.order_download a{
    display: inline-block;
    cursor: pointer;
    text-decoration: underline;
    margin-right: 46px;
    color: #AAAAAA;
  }
</style>
