<template>
  <div>
    <div class="header">
      <div class="header_top">
        <Button
                type="primary"
                class="header_btn"
                ghost
                @click="handleShow"
                :icon="is_show ? 'ios-arrow-dropup' : 'ios-arrow-dropdown'"
        >
          <div style="margin-right: 0.6rem">
            {{ is_show ? "收起" : "展开" }}
          </div></Button
        >
        <div style="margin-right: 1rem; color: #66a9f0">王小伟</div>
      </div>
      <div class="header_middle">
        <b-dropdown size="sm" text="产品总数" class="m-2" :disabled="is_use">
          <b-dropdown-item-button>Action</b-dropdown-item-button>
          <b-dropdown-item-button>Another action</b-dropdown-item-button>
          <b-dropdown-item-button>Something else here</b-dropdown-item-button>
        </b-dropdown>
        <b-dropdown size="sm" text="已扫总数" class="m-2" :disabled="is_use">
          <b-dropdown-item-button>Action</b-dropdown-item-button>
          <b-dropdown-item-button>Another action</b-dropdown-item-button>
          <b-dropdown-item-button>Something else here</b-dropdown-item-button>
        </b-dropdown>
        <b-dropdown size="sm" text="未扫总数" class="m-2" :disabled="is_use">
          <b-dropdown-item-button>Action</b-dropdown-item-button>
          <b-dropdown-item-button>Another action</b-dropdown-item-button>
          <b-dropdown-item-button>Something else here</b-dropdown-item-button>
        </b-dropdown>
      </div>
      <div class="header_middle1 ot">
        <div class="ft">{{total_num}} &nbsp;</div>
        <div class="ft">{{scan_num}} &nbsp;</div>
        <div class="ft">{{total_num-scan_num}} &nbsp;</div>
      </div>
      <div class="header_footer">
        <div style="margin-left: 1rem">已发货{{transport_total}}</div>
        <!--<div style="margin-right: 1.4rem">已完成10%</div>-->
      </div>
    </div>
    <div class="bdy">
      <table>
        <tr style="height: 2rem">
          <th style="width: 3rem">销售单号</th>
          <th style="width: 4rem">产品名称</th>
          <th style="width: 3rem">规格型号</th>
          <th style="width: 3rem">已扫到数量</th>
          <th style="width: 3rem">未发货数量</th>
        </tr>
        <tr
                v-for="(item, index) in tableData"
                :key="index"
                @click="handleChoose(item, index)"
        >
          <td>
            {{ item.bus_no }}
          </td>
          <td>{{ item.product_title }}</td>
          <td>{{item.product_size}}</td>
          <td>{{ item.out_qty }}</td>
          <td>{{ item.this_delivery_qty - item.out_qty }}</td>
        </tr>
      </table>
    </div>
    <div class="footer">
      <Button
              type="primary"
              class="header_btn"
              style="margin-right: 3rem; height: 2.6rem"
              @click="handleReturn"
      >
        返回</Button
      >
      <Button
              type="primary"
              class="header_btn"
              style="margin-left: 3rem; height: 2.6rem"
              @click="handelGoSure"
      >
        确认</Button
      >
    </div>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        tableData: [],
        key_tableData: {},
        send_goods_out: {},
        data: {},
        send_goods_out_product: {},
        is_show: true,
        is_use: false,
        total_num: 0,
        scan_num: 0,
        saveData: 0,
        transport_total: 0,
        scan_data: [],
        is_box_data: [],
      }
    },
    mounted () {
      // if (localStorage.getItem('fyy_target')) {
      //   data.target = JSON.parse(localStorage.getItem('fyy_target'))
      // }
      this.tableData = []
      const data = {
        url: 'http://121.36.142.167:7774/jbl/api/module-data/send_goods_out/send_goods_out/474061443708694528/479522916090908672',
        // post: {"direction":"DESC","property":"id","fromClientType":"pc","number":0,"sorts":[],"rules":[{"field":"dispatch_orders.dispatch_no","option":"LIKE_ANYWHERE","values":[v]},{"field":"product_no","option":"LIKE_ANYWHERE","values":["BC030101000001"]}],"size":15,"specialConditions":[],"workflowSearchBean":{},"dynamicFormCode":"dispatch_orders","dynamicFormTable":null,"ignoreField":true,"developmentSystemId":null,"debugFlag":true},
        header: ['Authorization: Bearer eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiIxIiwiYXV0aCI6IlJPTEVfSU5ORVJfVVNFUixST0xFX0FETUlOLFJPTEVfSU5URVJGQUNFIiwidG9rZW5JZCI6IjM1IiwiZXhwIjoxNjk0Njc0MTE0fQ.L3Di3K_cpF0rWSgvzbcLufLm8bkCxd3Y-xudfKzSm4F-qdpDr0hYWWQP5K5BYTNuZnu4tWpGmSW2KRHU0pjt-A', 'Content-Type:application/json']
      }
      // console.log(data);
      this.initData(data)


      // console.log(data);

    },
    methods: {
      //原始数据获取
      initData (row) {
        this.axios.post('/api/testdwyget', { ...row }).then(res => {
          this.tableData.push(...res.data.data.send_goods_out_product);
          res.data.data.send_goods_out_product.forEach((element, index) => {
            this.data = res.data;
            this.total_num = this.total_num + element.this_delivery_qty
            this.transport_total = this.transport_total + element.out_qty
            this.key_tableData[element.bus_item_id] = element;
            if(element.box_orders_show){
              this.is_box_data.push(this.deelUniqueKey(element));
            }
          });
        const dataBox = {
          url: 'http://121.36.142.167:7774/jbl/api/module-data/box_orders/box_orders/diy/defective_order_no_list',
          post: { "defective_order_no_list":["BZ00025"]},
          header: ['Authorization: Bearer eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiIxIiwiYXV0aCI6IlJPTEVfSU5ORVJfVVNFUixST0xFX0FETUlOLFJPTEVfSU5URVJGQUNFIiwidG9rZW5JZCI6IjM1IiwiZXhwIjoxNjk0Njc0MTE0fQ.L3Di3K_cpF0rWSgvzbcLufLm8bkCxd3Y-xudfKzSm4F-qdpDr0hYWWQP5K5BYTNuZnu4tWpGmSW2KRHU0pjt-A', 'Content-Type:application/json']
        }
        this.initDataBox(dataBox)


        })

      },
      //扫描数据获取
      initDataBox (row) {
        this.axios.post('/api/testdwy', { ...row }).then(res => {
          let scan_data = [];

          res.data.data.forEach((element, index) => {
            let object = {"order_item_id":element.order_item_id,"order_no":element.order_no,"box_num":element.box_num,"product_no":element.product_no,"box_no":element.box_orders.defective_order_no,"box_id":element.box_orders.id};
            this.scan_data.push(object);
        })
        this.deelTableData();
      })
      },
      deelUniqueKey(element){
        let key = element.box_orders_show
        return key;
      },
      //将原始数据处理拼接成提交的数据
      deelTableData(){
        let new_table_data = [];
        this.scan_data.forEach((element, index) => {
              if(this.is_box_data.indexOf(element.box_no) == -1&&Object.keys(this.key_tableData).indexOf(element.order_item_id) != -1&&(this.key_tableData[element.order_item_id].this_delivery_qty-element.box_num)>0){

                 let table_data_detail = JSON.parse(JSON.stringify(this.key_tableData[element.order_item_id]));
                 table_data_detail.box_orders = element.box_id;
                 table_data_detail.box_orders_show = element.box_no;
                 table_data_detail.out_qty = element.box_num;
                 table_data_detail.this_delivery_qty = element.box_num;
                 table_data_detail.id = null;
                 this.key_tableData[element.order_item_id].this_delivery_qty -= element.box_num;
                 new_table_data.push(table_data_detail)
            }
      })

        this.tableData.forEach((element, index) => {
            if(element.this_delivery_qty > 0 ){
          new_table_data.push(element)
        }
        })
        this.tableData = new_table_data;

    },







      //end
      handelGoSure (qcode) {
        console.log(       this.tableData );
        this.tableData.forEach((element, index) => {
          element.item_num = (index+1)
        })
        this.data.data.send_goods_out_product =this.tableData

        console.log(JSON.stringify(this.data));
      },
      handleReturn () {
        localStorage.removeItem('fyy_target')
        this.$router.push('/cms/finish')
      },
      handleChoose (item, index) {
        item.is_choose = !item.is_choose
        this.tableData.splice(index, 1, item)
      },
      handleShow () {
        this.is_show = !this.is_show
        console.log(document.getElementsByClassName('header'))
        if (this.is_show) {
          document.getElementsByClassName('header')[0].style = 'height:7rem;overflow:hidden;transition:all .4s;'
          setTimeout(() => {
            document.getElementsByClassName('header')[0].style = 'overflow:none;'
          this.is_use = false
        }, 400)
        } else {
          this.is_use = true
          document.getElementsByClassName('header')[0].style = 'height:2.7rem;overflow:hidden;transition:all .4s;'
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
  .header {
    width: 94%;
    height: 7rem;
    // overflow: hidden;
    // transition: all 0.4s;
    position: relative;
    top: 0.5rem;
    left: 3%;
    box-shadow: 0.16rem 0.1rem 0.1rem 0.1rem #9d9b9b;
    border-radius: 1rem;
    padding: 0.4rem 0.7rem 0 1rem;
    background: #fff;
  }
  .header_btn {
    border-radius: 1rem;
    padding: 0.1rem;
    width: 5rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
  .header_top {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .ot {
    position: relative;
    top: -1.3rem;
  }
  .header_middle1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .ft {
      font-size: 1.5rem;
      width: 5rem;
      text-align: center;
    }
  }
  .header_middle {
    position: relative;
    top: -0.3rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  /deep/ .btn-group > .btn,
  .btn-group-vertical > .btn {
    background: #ffffff;
    color: #2c3e50;
    outline: none;
    border: none;
    margin: 0;
    z-index: 3;
  }
  .header_footer {
    position: relative;
    top: -1.7rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    div {
      font-size: 0.5rem;
      color: rgb(244, 136, 42);
    }
  }
  .bdy {
    width: 94%;
    height: calc(100% - 18.7rem);
    overflow: auto;
    position: relative;
    top: 1rem;
    left: 3%;
  }

  /deep/td {
    text-align: center;
    vertical-align: middle;
  }
  table {
    border-collapse: collapse; /* 合并边框 */
    width: 100%; /* 表格宽度 */
    background: #fff;
    table-layout: fixed;
  }
  th {
    font-size: 0.6rem;
    background: #66b1f4;
    color: #fff;
  }
  td {
    font-size: 0.6rem;
    word-break: break-all;
  }
  td,
  th {
    vertical-align: middle;
    text-align: center;
    border: 0.1rem solid #dddddd; /* 单元格边框样式 */
    padding: 0.02rem; /* 单元格内边距 */
  }
  .choose_item {
    background: #c8c8c8;
  }
  .footer {
    display: flex;
    justify-content: space-around;
    width: 100%;
    position: absolute;
    bottom: 4.8rem;
  }
</style>
