<template>
  <div class="order-content">
      <div class="order-status" v-if="order!=null" >
          <el-steps  :active="order.status===3?order.status+1:order.status" align-center>
            <el-step title="客服制单"></el-step>
            <el-step title="待业务核实"></el-step>
            <el-step title="待主管审核"></el-step>
            <el-step title="内勤对流向"></el-step>
          </el-steps>
      </div>
      <div>

      <el-card shadow="never" style="margin-top: 15px">
      <div class="operate-container"  v-if="order!=null">
        <span  style="margin-left: 20px" class="color-danger">订单状态：
           <el-tag prop="status" v-for="(item, index) in statusOptions"    v-if="order.status.toString()===item.dictValue">{{item.dictLabel}}</el-tag>
        </span>

        <div class="operate-button-container" >
          <el-button size="mini" v-if="order.status ===1" @click="handleCertificates()"  v-hasPermi="['store:storeOrderOffline:uploadCredentials']" >上传凭证</el-button>
          <el-button size="mini" v-if="order.crmId!=null&&order.crmId>0"  @click="handleCustomer()"    >查看客户详情</el-button>
        </div>
      </div>
      <div style="margin: 20px 0px"  v-if="order!=null">
        <span class="font-small">
          基本信息
        </span>
      </div>
      <el-descriptions :column="4" border  >
        <el-descriptions-item label="订单ID"  >
                <span v-if="order!=null">
                  {{order.orderId}}
                </span>
        </el-descriptions-item>
            <el-descriptions-item label="订单编号"  >
                <span v-if="order!=null">
                  {{order.orderCode}}
                </span>
            </el-descriptions-item>
            <el-descriptions-item label="客户名称"  >
                <span v-if="order!=null">
                  {{order.customerName}}
                </span>
            </el-descriptions-item>


            <el-descriptions-item label="客户电话"  >
                <span v-if="order!=null ">
                  {{order.mobile }}
                </span>
                <el-button icon="el-icon-search" size="mini" @click="handlePhone()" style="margin-left: 20px;" circle v-hasPermi="['store:storeOrder:queryPhone']"></el-button>
              </el-descriptions-item>
              <el-descriptions-item v-if="order!=null " label="应付金额"  >
                <span >
                  {{order.payPrice }}
                </span>
              </el-descriptions-item>
              <el-descriptions-item v-if="order!=null " label="实付金额"  >
                <span >
                  {{order.payMoney }}
                </span>
              </el-descriptions-item>
              <el-descriptions-item v-if="customerInfo!=null " label="客户编码"  >
                <span >
                  {{customerInfo.customerCode }}
                </span>
              </el-descriptions-item>
            <el-descriptions-item label="创建时间"  >
                <span v-if="order!=null ">
                  {{order.createTime }}
                </span>
            </el-descriptions-item>
            <el-descriptions-item label="所属客服"  >
                <span v-if="order!=null ">
                  {{order.companyUserName }}
                </span>
            </el-descriptions-item>
            <el-descriptions-item label="所属部门"  >
              <span v-if="order!=null ">
                {{order.companyName }}
              </span>
            </el-descriptions-item>
            <el-descriptions-item label="所属业务员"  >
              <span v-if="order!=null ">
                {{order.uploadUserName }}
              </span>
            </el-descriptions-item>
            <el-descriptions-item label="凭证上传时间"  >
                  <span v-if="order!=null ">
                    {{order.uploadTime }}
                  </span>
            </el-descriptions-item>
        <el-descriptions-item label="审核人"  >
                  <span v-if="order!=null ">
                    {{order.auditBy }}
                  </span>
        </el-descriptions-item>
        <el-descriptions-item label="审核时间"  >
                  <span v-if="order!=null ">
                    {{order.auditTime }}
                  </span>
        </el-descriptions-item>
            <el-descriptions-item label="备注"  >
                <span v-if="order!=null ">
                  {{order.remark }}
                </span>
            </el-descriptions-item>



      </el-descriptions>
      <div style="margin: 20px 0px"  v-if="certificates!=null">
        <span class="font-small">
          凭证信息
        </span>
      </div>
      <el-image
          v-if="this.certificates != null"
          :src="certificates"
          :preview-src-list="[certificates]"
          :style="{ width: '100px', height: '100px' }"
          @click.native="showImageDialog"
        ></el-image>
        <el-dialog :visible.sync="dialogVisibleImage" width="10%">
          <img :src="certificates" style="width: 100%" alt="">
        </el-dialog>

      <div style="margin-top: 20px">
        <span class="font-small">商品信息</span>
      </div>
      <el-table
        border
        v-if="items!=null"
        :data="items"
        size="small"
        style="width: 100%;margin-top: 20px" >
        <el-table-column label="商品图片" width="150" align="center">
          <template slot-scope="scope">
            <img :src="JSON.parse(scope.row.jsonInfo).image" style="height: 80px">
          </template>
        </el-table-column>
        <el-table-column label="商品名称" width="300" align="center">
          <template slot-scope="scope">
            <p>{{JSON.parse(scope.row.jsonInfo).productName}}</p>
          </template>
        </el-table-column>
        <el-table-column label="单价" width="240" align="center">
          <template slot-scope="scope">
            <p>￥{{JSON.parse(scope.row.jsonInfo).price.toFixed(2)}}</p>
          </template>
        </el-table-column>
        <el-table-column label="规格" width="240" align="center">
          <template slot-scope="scope">
            {{JSON.parse(scope.row.jsonInfo).sku}}
          </template>
        </el-table-column>
        <el-table-column label="数量" width="180" align="center">
          <template slot-scope="scope">
            {{scope.row.num}}
          </template>
        </el-table-column>
<!--        <el-table-column label="小计"  align="center">-->
<!--          <template slot-scope="scope" >-->
<!--            ￥{{scope.row.num*JSON.parse(scope.row.jsonInfo).price.toFixed(2)}}-->
<!--          </template>-->
<!--        </el-table-column>-->
      </el-table>
<!--      <div style="float: right;margin: 20px" v-if="order!=null">-->
<!--        合计：<span class="color-danger">￥{{order.totalPrice.toFixed(2)}}</span>-->
<!--      </div>-->
      </el-card>
    </div>
    <el-dialog :title="certificateDialig.title" :visible.sync="certificateDialig.open" append-to-body>
      <el-form ref="certificateForm" :model="certificateForm" :rules="certificateRules" label-width="100px">
        <el-form-item label="凭证" prop="certificates">
          <ImageUpload v-model="photoArr" type="image" :limit="1" :width="150" :height="150" />
        </el-form-item>
        <el-form-item label="实付金额" prop="payPrice">
          <el-input-number v-model="certificateForm.payMoney"  size="mini"    ></el-input-number>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleConfirm">确 定</el-button>
      </div>
    </el-dialog>
    <el-drawer
      :append-to-body="true"
      size="75%"
      :title="customer.title" :visible.sync="customer.open" append-to-body
      >
        <customer-details  ref="customerDetails" />
    </el-drawer>
    <el-dialog :title="addSms.title" :visible.sync="addSms.open" width="800px" append-to-body>
        <add-sms ref="sms" @close="closeSms()"></add-sms>
    </el-dialog>
  </div>
</template>

<script>
import { listStoreOrderOffline, getStoreOrderOffline, uploadCredentials } from "@/api/hisStore/storeOrderOffline";
import ImageUpload from '@/components/ImageUpload'
import customerDetails from '../../crm/components/customerDetails.vue';
import addSms from '../../crm/components/addSms.vue';
export default {
  name: "offlineOrder",
  components: {customerDetails,
    ImageUpload,addSms},
  data() {
    return {
      customerUserStatusOptions:[],
      scheduleOptions:[],
      dialogVisibleImage: false,
      customerInfo:null,
      customer:{
        title:"客户详情",
        open:false,
      },
      photoArr:null,
      certificateDialig:{
        title:"上传凭证",
        open:false,
      },
      certificateForm:{
        payMoney:null,
        certificates:null,
      },
      addSms:{
        open:false,
        title:"发短信"
      },
      certificateRules:{
        certificates:[
          { required: true, message: "凭证不能为空", trigger: "change" }
        ]
      },
      customers:[],

      orderId:null,
      statusOptions:[],
      certificates:null,
      order:null,
      user:{},
      logs:[],
      items:[],
      express:[],
      traces:[],
      payments:[],
    };
  },
  created() {
    this.getDicts("crm_customer_user_status").then((response) => {
            this.customerUserStatusOptions = response.data;
        });
    this.getDicts("sys_order_offline_status").then((response) => {
      this.statusOptions = response.data;
    });

  },
  computed: {
    company(){
      return this.$store.state.user.user;
    }
  },
  methods: {

    closeSms(){
      this.addSms.open=false;
    },
    handleSms(mobile){
      this.addSms.open=true;
      var that=this;
      setTimeout(() => {
          that.$refs.sms.getOrderId(this.orderId,mobile,2);
      }, 500);
    },
    handlePhone(){
      const id = this.order.id;
        getUserPhone(id).then(response =>{
          this.order.userPhone = response.userPhone;
        })
      },

    showImageDialog() {
      this.dialogVisible = true;
    },
    handleCustomer(){
      var that=this;
      this.customer.open = true;
      setTimeout(() => {
          that.$refs.customerDetails.getDetails(this.order.crmId);
      }, 200);
    },
    handleCertificates(){
      this.certificateDialig.open = true;
      this.photoArr = null;
    },
    handleConfirm(){
      this.certificateForm.orderId = this.orderId;
      this.certificateForm.certificates = this.photoArr;
      uploadCredentials(this.certificateForm).then(response => {
              if (response.code === 200) {
                this.msgSuccess("上传成功");
                this.certificateDialig.open = false;
                this.getOfflineOrder(this.orderId);
              }
            });
    },
    getOfflineOrder(orderId){
      this.order = null;
      this.orderId=orderId;
      this.certificates = null;
      getStoreOrderOffline(orderId).then(response => {
            this.order = response.order;
            if(response.order.certificates != null){
              this.certificates = response.order.certificates;
            }
            this.items = response.items;
            this.customerInfo=response.customer;
        });
     }
  }
};
</script>
<style scoped>
.order-content{
  margin: 10px;
}
.detail-container {
  width: 80%;
  padding: 20px 20px 20px 20px;
  margin: 20px auto;
}

.operate-container {
  background: #F2F6FC;
  height: 60px;
  margin: -20px -20px 0;
  line-height: 60px;
}

.operate-button-container {
  float: right;
  margin-right: 20px
}

.table-layout {
  margin-top: 20px;
  border-left: 1px solid #DCDFE6;
  border-top: 1px solid #DCDFE6;
}

.table-cell {
  height: 60px;
  line-height: 40px;
  border-right: 1px solid #DCDFE6;
  border-bottom: 1px solid #DCDFE6;
  padding: 10px;
  font-size: 14px;
  color: #606266;
  text-align: center;
  overflow: hidden;
}

.table-cell-title {
  border-right: 1px solid #DCDFE6;
  border-bottom: 1px solid #DCDFE6;
  padding: 10px;
  background: #F2F6FC;
  text-align: center;
  font-size: 14px;
  color: #303133;
}
</style>
