<template>
  <div class="box">
    <nut-cell-group>
      <nut-cell title="订单编号" :desc="data?.id"></nut-cell>
      <nut-cell title="发布时间" :desc="data?.publish"></nut-cell>
      <nut-cell title="设备编号" :desc="data?.device.id"></nut-cell>
      <nut-cell title="设备地址" :desc="data?.device.addr"></nut-cell>
      <nut-cell title="授权码" :desc="data?.code"></nut-cell>
    </nut-cell-group>
    <div class="title">具体要求</div>
    <div class="table_header">
      <div class="table_col">仓号</div>
      <div class="table_col2">变更前(代码/名称/余量)</div>
      <div class="table_col2">变更后(代码/名称/体积)</div>
    </div>
    <div class="table_content">
      <div class="table_content1">1</div>
      <div class="table_content2">
        <div class="table_last">{{data?.old[0]?.id}}</div>
        <div class="table_last">{{data?.old[0]?.name}}</div>
        <div class="table_last">{{data?.old[0]?.remain}}ml</div>
      </div>
      <div class="table_content2">
        <div class="table_last blue">{{data?.new[0]?.id}}</div>
        <div class="table_last blue">{{data?.new[0]?.name}}</div>
        <div class="table_last blue">{{data?.new[0]?.remain}}ml</div>
      </div>
    </div>
    <div class="table_content">
      <div class="table_content1">2</div>
      <div class="table_content2">
        <div class="table_last">{{data?.old[1]?.id}}</div>
        <div class="table_last">{{data?.old[1]?.name}}</div>
        <div class="table_last">{{data?.old[1]?.remain}}ml</div>
      </div>
      <div class="table_content2">
        <div class="table_last blue">{{data?.new[1]?.id}}</div>
        <div class="table_last blue">{{data?.new[1]?.name}}</div>
        <div class="table_last blue">{{data?.new[1]?.remain}}ml</div>
      </div>
    </div>
    <div class="table_content">
      <div class="table_content1">3</div>
      <div class="table_content2">
        <div class="table_last">{{data?.old[2]?.id}}</div>
        <div class="table_last">{{data?.old[2]?.name}}</div>
        <div class="table_last">{{data?.old[2]?.remain}}ml</div>
      </div>
      <div class="table_content2">
        <div class="table_last blue">{{data?.new[2]?.id}}</div>
        <div class="table_last blue">{{data?.new[2]?.name}}</div>
        <div class="table_last blue">{{data?.new[2]?.remain}}ml</div>
      </div>
    </div>
    <div class="table_content">
      <div class="table_content1">4</div>
      <div class="table_content2">
        <div class="table_last">{{data?.old[3]?.id}}</div>
        <div class="table_last">{{data?.old[3]?.name}}</div>
        <div class="table_last">{{data?.old[3]?.remain}}ml</div>
      </div>
      <div class="table_content2">
        <div class="table_last blue">{{data?.new[3]?.id}}</div>
        <div class="table_last blue">{{data?.new[3]?.name}}</div>
        <div class="table_last blue">{{data?.new[3]?.remain}}ml</div>
      </div>
    </div>
    <br>
    <br>
  </div>
  <div class="button_fixed" v-if="data?.status!==2">
    <nut-button v-if="show === false" type="default" @click="jump">准备就绪</nut-button>
    <nut-button v-else type="primary" @click="onSubmit">完成上酒</nut-button>
  </div>
</template>

<script>
export default {
  name: "Detail"
}
</script>
<script setup>
  import { ref, onMounted, getCurrentInstance } from 'vue'
  import { showDialog, showSuccessToast, showFailToast  } from "vant";
  import { useRoute } from 'vue-router'
  import Api from '../../assets/api/home'

  const { proxy } = getCurrentInstance()
  const route = useRoute();
  const id = ref('');
  const data = ref({
    device: {
      id: '',
      addr: ''
    },
    old: [
      {id: '', name: '', remain: ''},
      {id: '', name: '', remain: ''},
      {id: '', name: '', remain: ''},
      {id: '', name: '', remain: ''},
    ],
    new: [
      {id: '', name: '', remain: ''},
      {id: '', name: '', remain: ''},
      {id: '', name: '', remain: ''},
      {id: '', name: '', remain: ''},
    ]
  })

  const show = ref(false)

  const init = () => {
    Api.QueryDetail(id.value).then(res => {
      data.value = res.data
      data.value.publish = proxy.$moment(data.value?.publish).format('YYYY-MM-DD HH:mm:ss')

    })
  }

  const jump = () => {
    Api.QueryReady(data.value?.id).then(res => {
      if(res.status) {
        showDialog({
          title: '温馨提示',
          message: `请在机器上填写授权码：${data.value?.code}`,
        })
        show.value = true;
      } else {
        showDialog({
          title: '温馨提示',
          message: res.msg,
        })
      }
    }).catch((err) => {
      showDialog({
        title: '错误',
        content: err.msg,
        noCancelBtn: true,
      })
    })
  }

  const onSubmit = () => {
    Api.QueryFinish(data.value?.id).then(res => {
      if(res.status) {
        showSuccessToast('上酒成功')
      } else {
        showFailToast(res.msg)
      }
    }).catch((err) => {
      showFailToast(err.msg)
    })
  }

  onMounted(() => {
    id.value = Number(route.query.id)
    init()
  })
</script>

<style scoped>
  .box {
    box-sizing: border-box;
    padding: 0 10px;
    width: 100%;
    height: calc(100% - 30px);
    overflow: auto;
  }
  .title {
    margin-top: 10px;
    position: relative;
    padding-left: 12px;
    font-size: 14px;
    line-height: 16px;
    margin-bottom: 10px;
  }
  .title:before {
    position: absolute;
    width: 5px;
    height: 100%;
    background: #54BCBD;
    top: 0;
    left: 0;
    content: ''
  }
  .table_header {
    box-sizing: border-box;
    width: 100%;
    height: 30px;
    line-height: 30px;
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    border: 1px solid #ddd;
    background: #B4FDFF;
    font-size: 14px;
  }
  .table_col {
    flex: 1;
    line-height: 30px;
    height: 30px;
    border-right: 1px solid #ddd;
    box-sizing: border-box;
  }
  .table_col2 {
    flex: 2;
    height: 30px;
    line-height: 30px;
    box-sizing: border-box;
    border-right: 1px solid #ddd;
    font-size: 12px;
  }
  .table_col2:last-child{
     border: 0;
  }
  .table_content {
    width: 100%;
    height: 90px;
    border: 1px solid #ddd;
    align-items: center;
    box-sizing: border-box;
    display: flex;
    font-size: 14px;
    border-top: 0;
    text-align: center;
  }
  .table_content1 {
    flex: 1;
    height: 90px;
    line-height: 90px;
    box-sizing: border-box;
    border-right: 1px solid #ddd;
  }
  .table_content2 {
    flex: 2;
    height: 90px;
    box-sizing: border-box;
    border-right: 1px solid #ddd;
  }
  .table_content2:last-child{
    border: 0;
  }
  .table_last {
    width: 100%;
    height: 30px;
    box-sizing: border-box;
    line-height: 30px;
    border-bottom: 1px solid #ddd;
  }
  .table_last:last-child{
    border: 0;
  }
  .blue {
    color: #0081FF;
  }
  .button_fixed {
    position: fixed;
    bottom: 5px;
    right: 10px;
  }
</style>
