<template>
  <div class="app-list-content">
    <x-crud class="liu-crud-wrap order-list-wrap" @load="onLoad">
      <!-- tabs -->
      <template #slot-tabs>
        <el-tabs class="liu-tabs" type="border-card" v-model="tabIndex" @tab-click="handleClick">
          <el-tab-pane
              v-for="(item, index) in tabsData"
              :key="index"
              :label="`${item.text}(${item.val})`"
              :name="item.key"
          ></el-tab-pane>
        </el-tabs>
      </template>

      <!-- 单号 -->
      <template #table-column-orderSn="{scope}">
        <el-link
            :underline="true"
            style="font-size:12px;display:inline-block;"
        >{{ scope.row.orderSn }}</el-link>
      </template>

      <template #table-column-customName="{scope}">
        <div>
          {{ scope.row.customName }}
        </div>
      </template>

      <template #table-column-customMobile="{scope}">
        <div v-if="scope.row.customMobile == ''">-</div>
        <div v-else>{{ scope.row.customMobile }}</div>
      </template>

      <!-- 状态 -->
      <template #table-column-status="{scope}">
        <span v-if="scope.row.status == 2">待配送</span>
        <span v-else-if="scope.row.status == 3">配送中</span>
        <span v-else-if="scope.row.status == 4">已完成</span>
        <span v-else-if="scope.row.status == 5">已取消</span>
        <span v-else>待付款</span>
      </template>

      <!-- 送达时间 -->
      <template #table-column-reachTime="{scope}">
				<span>
					{{scope.row.requireReachTime}}
				</span>
      </template>

      <!-- 操作 -->
      <template #slot-column-option="{scope}">
        <template >
          <div style="display: flex">
            <div v-for="res in scope.row.buttonList" >
              <el-button v-if="res.type=='item'&&res.show==1&&res.disable==0" size="small">改花材</el-button>
              <el-button v-if="res.type=='item'&&res.show==1&&res.disable==1" size="small" disabled>改花材</el-button>

              <el-button v-if="res.type=='send'&&res.show==1&&res.disable==0" @click.stop="shipDrawFn(scope.row)" size="mini" type="primary" plain >发货</el-button>
              <el-button v-if="res.type=='send'&&res.show==1&&res.disable==1" disabled size="mini" plain >发货</el-button>

              <el-popover v-if="res.type=='selfGet'&&res.show==1&&res.disable==0" style="margin-left:14px;" placement="top" width="160" :ref="'popover-' + scope.row.id">
                <p>确认已自取？</p>
                <div style="text-align: right; margin: 0">
                  <el-button size="mini" type="text" @click.stop="selfGetCancel(scope.row.id)">取消</el-button>
                  <el-button type="primary" size="mini" @click.stop="noSendShipFn(scope.row)">确定</el-button>
                </div>
                <el-button slot="reference" size="mini" type="primary" plain @click.stop="">自取</el-button>
              </el-popover>
              <el-button v-if="res.type=='selfGet'&&res.show==1&&res.disable==1" style="margin-left:14px;" size="small" disabled>自取</el-button>

              <el-button v-if="res.type=='print'&&res.show==1&&res.disable==0" @click.stop="printOrder(scope.row)" size="mini" type="primary" plain style="margin-left:14px;">打印</el-button>
              <el-button v-if="res.type=='print'&&res.show==1&&res.disable==1" disabled size="mini" type="primary" plain style="margin-left:14px;">打印</el-button>
            </div>
          </div>
        </template>
      </template>
    </x-crud>
    <!-- 用户详情 -->
    <order-detail ref="orderDetail" :orderOperate="optionData" />
    <!-- 发货状态 -->
    <sel-order ref="selOrder" :id="optionData.id" @song-success="onSongSuccess" />
    <!-- 配送单 -->
    <div class="print-html-box" >

      <table border="0" width="780" style="border:solid 1px #fff;border-collapse:collapse">
        <tr>
          <td style="padding: 10px;width: 260px;">客户：{{orderMsg.customName}}</td>
          <td style="padding: 10px;width: 260px;">单号：{{orderMsg.orderSn}}</td>
          <td style="padding: 10px;width: 260px;">日期：{{orderMsg.deadline}}</td>
        </tr>
      </table>
      <table border="1" width="780" style="border:solid 1px black;border-collapse:collapse">
        <tr>
          <td style="padding: 10px;width: 100px;text-align: center;">序号</td>
          <td style="padding: 10px;width: 100px;text-align: center;">名称</td>
          <td style="padding: 10px;width: 100px;text-align: center;">单位</td>
          <td style="padding: 10px;width: 100px;text-align: center;">数量</td>
          <td style="padding: 10px;width: 100px;text-align: center;">单价</td>
          <td style="padding: 10px;width: 100px;text-align: center;">金额</td>
          <td style="padding: 10px;width: 100px;text-align: center;">备注</td>
        </tr>
        <tr v-for="(res,i) in orderMsg.product">
          <td style="padding: 10px;width: 100px;text-align: center;">{{ i+1 }}</td>
          <td style="padding: 10px;width: 100px;text-align: center;">{{ res.name }}</td>
          <td style="padding: 10px;width: 100px;text-align: center;">扎/支</td>
          <td style="padding: 10px;width: 100px;text-align: center;">{{ `${res.bigNum}/${res.smallNum}` }}</td>
          <td style="padding: 10px;width: 100px;text-align: center;">{{ res.price }}</td>
          <td style="padding: 10px;width: 100px;text-align: center;" v-if="res.ratio==0">{{  Number(res.price) * (Number(res.bigNum) + 0) }}</td>
          <td style="padding: 10px;width: 100px;text-align: center;" v-else>{{  Number(res.price) * (Number(res.bigNum) + Number(res.smallNum) / Number(res.ratio)) }}</td>
          <td style="padding: 10px;width: 100px;text-align: center;"></td>
        </tr>
        <tr>
          <td style="padding: 10px;width: 100px;" colspan="2">合计：{{orderMsg.actPrice}}</td>
          <td style="padding: 10px;width: 100px;" colspan="2">实收：{{orderMsg.debt==0?orderMsg.actPrice:'0.00'}}</td>
          <td style="padding: 10px;width: 100px;" colspan="2">欠款：{{orderMsg.debt==1?orderMsg.actPrice:'0.00'}}</td>
          <td style="padding: 10px;width: 100px;"></td>
        </tr>
        <tr>
          <td style="padding: 10px;width: 100px;">其他说明：</td>
          <td style="padding: 10px;width: 100px;" colspan="6">{{orderMsg.remark}}</td>
        </tr>
      </table>
      <table border="0" width="780" style="border:solid 1px #fff;border-collapse:collapse">
        <tr >
          <td style="padding: 10px;width: 260px;">开单：{{orderMsg.shopAdminName}}</td>
          <td style="padding: 10px;width: 260px;">配送：</td>
          <td style="padding: 10px;width: 260px;">打印时间：{{todays(1)}}</td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>
import SelOrder from './components/sel-order';
import OrderDetail from './components/order-detail';
import { getLodop } from '@/utils/lodop';
export default {
  components: {
    SelOrder,
    OrderDetail
  },
  data() {
    return {
      // x-crud
      app: null,
      tabIndex: '0',
      tabsData: [
        {
          text: '全部',
          key: '0',
          val: 0
        },
        {
          text: '待付款',
          key: '1',
          val: 0
        },
        {
          text: '待配送',
          key: '2',
          val: 0
        },
        {
          text: '配送中',
          key: '3',
          val: 0
        },
        {
          text: '已完成',
          key: '4',
          val: 0
        }
      ],
      optionData: {},
      orderMsg:'',
    };
  },
  created() {
    this.init();
  },
  methods: {
    todays(type) {
      var myDate = new Date();
      let todaty = '';
      if(type==1){
        todaty = myDate.getFullYear()+'-'+parseInt(myDate.getMonth()+1)+'-'+myDate.getDate()+' '+myDate.getHours()+':'+myDate.getMinutes()+':'+myDate.getSeconds()
      }else if(type=='time'){
        todaty = myDate.getHours()+':'+myDate.getMinutes();
      }else{
        let getDate = myDate.getDate()>9?myDate.getDate():'0'+myDate.getDate()
        let getDateMonth = parseInt(myDate.getMonth()+1)>9?parseInt(myDate.getMonth()+1):'0'+parseInt(myDate.getMonth()+1)
        todaty = myDate.getFullYear()+'-'+getDateMonth+'-'+getDate
      }
      return todaty
    },
    formatProgress(){
      return ''
    },
    init() {
      // this.$store.dispatch('getCategory');
      this.$store.dispatch('getUsage');
    },
    printOrder(e){
      this.$service.order.info({ id: e.id }).then(res => {
        this.orderMsg = res;
        this.$nextTick(() => {
          let LODOP = getLodop();

          LODOP.SET_PRINT_STYLE('FontSize', 20);
          LODOP.SET_PRINT_STYLE('Bold', 1);
          LODOP.ADD_PRINT_TEXT(150, 10, 790, 30, `纯彩花艺销售单`);
          LODOP.SET_PRINT_STYLEA(0, 'Alignment', 2);
          LODOP.SET_PRINT_STYLE('FontSize', 12);

          LODOP.ADD_PRINT_HTM(
              200,
              10,
              790,
              600,
              document.querySelector('.print-html-box').innerHTML
          );
          LODOP.PREVIEW();
          // LODOP.PRINT();
        });
      });
    },
    //取消自取
    selfGetCancel(id) {
      this.$refs[`popover-` + id][1].doClose();
    },
    noSendShipFn(item) {
      this.$refs[`popover-` + item.id][1].doClose();
      this.$service.order.freeShipping({ id: item.id }).then(res => {
        this.$message.success('操作成功！');
        item.buttonList.forEach((ele)=>{
          if(ele.type=='selfGet'){
            console.log(ele)
            ele.disable = 1
          }
        })
      });
    },
    //发货详情
    shipDrawFn(item) {
      this.optionData = item;
      setTimeout(() => {
        this.$refs.selOrder.init();
      });
    },
    //获取订单详情
    detailShowFn(item) {
      this.optionData = item;
      setTimeout(() => {
        this.$refs.orderDetail.init();
      });
    },
    handleClick(tab, e) {
      this.app.refresh({ status: this.tabIndex });
    },
    onLoad({ ctx, app }) {
      this.app = app;

      //传入参数 shish 2020.5.9
      if(this.$route.query.status){
        this.tabIndex = this.$route.query.status
      }

      ctx.service(this.$service.order)
          .set('table', {
            columns: [
              {
                prop: 'orderSn',
                label: '单号',
                align: 'center',
                width: '160'
              },
              {
                prop: 'prePrice',
                label: '总价',
                align: 'center',
                width: '110'
              },
              {
                prop: 'actPrice',
                label: '实付款',
                align: 'center',
                emptyText: '无',
                width: '110'
              },
              {
                prop: 'customName',
                label: '客户',
                align: 'center',
                width: '150'
              },
              {
                prop: 'customMobile',
                label: '手机号',
                align: 'center',
                width: '120'
              },
              {
                prop: 'bigNum',
                label: '数量',
                align: 'center',
                width: '150'
              },
              {
                prop: 'sendTypeName',
                label: '配送方式',
                align: 'center',
                width: '150'
              },
              {
                prop: 'reachTime',
                label: '送达时间',
                align: 'center',
                width: 120
              },
              {
                prop: 'sendNum',
                label: '编号',
                align: 'center',
                width: 110
              },
              {
                prop: 'status',
                label: '状态',
                align: 'center',
                width: 110
              },
              {
                prop: 'shopAdminName',
                label: '开单人',
                align: 'center',
                width: 110
              }
            ],

            on: {
              'row-click': (row, column) => {
                this.detailShowFn(row)
              }
            },

            props: {
              'default-sort': {
                prop: 'createTime',
                order: 'descending'
              }
            },
            op: {
              visible: true, // 是否显示
              // 同 element-ui Table-column Attributes
              props: {
                width: 220,
                align: 'center',
                fixed: 'right',
                label: '操作'
              },
              // 布局，请移步 `layout`
              layout: ['slot-column-option']
            }
          })
          .set('search', {
            key: { placeholder: '订单号 / 姓名，支持拼音首字母搜索' }
          })
          .set('layout', [
            ['slot-tabs'],
            ['search-key'],
            ['data-table'],
            ['flex1', 'pagination']
          ])
          .on('refresh', async (params, { next }) => {
            // 继续执行刷新
            let  asset  = await next(params);
            this.tabsData[0].val = asset.shop.totalOrder;
            this.tabsData[1].val = asset.shop.unPayOrder;
            this.tabsData[2].val = asset.shop.unSendOrder;
            this.tabsData[3].val = asset.shop.sendingOrder;
            this.tabsData[4].val = asset.shop.finishOrder;
          })
          .done();
      app.refresh({ status: this.tabIndex });
    },
    onSongSuccess() {
      this.app.refresh();
    }
  }
};
</script>
<style lang="scss" scoped>
.book-wrap {
  @include disFlex(center, flex-start);
  & > div {
    margin-left: 6px;
    &:first-child {
      margin-left: 0;
    }
  }
}
.print-html-box {
  position: fixed;
  left: 0;
  top: 9990px;
}
.steps-wrap {
  width: 150px;
  //height: 26px;
  margin: 0 auto;
}
</style>

<style lang="scss">
.order-list-wrap {
  .el-step__head.is-process {
    color: #c0c4cc;
    border-color: #c0c4cc;
    .el-step__icon.is-text {
      background-color: #c0c4cc;
    }
  }
  .el-step__head.is-success {
    color: #409eff;
    border-color: #409eff;
    .el-step__icon.is-text {
      background-color: #409eff;
      font-size: 1px;
    }
    .el-step__line {
      background-color: #409eff;
      .el-step__line-inner {
        display: inline-block;
      }
    }
  }
  .el-step__head.is-wait {
    .el-step__icon.is-text {
      background-color: #c0c4cc;
    }
  }
  .el-step__icon-inner {
    font-size: 1px;
    display: none;
  }
  .el-step__icon {
    width: 10px;
    height: 10px;
  }
  .el-step.is-horizontal .el-step__line {
    height: 1px;
    left: 16px;
    right: -16px;
    top: 9px;
  }
}
</style>