<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">{{this.product_total}} &nbsp;</div>
        <div class="ft">{{this.box_num}} &nbsp;</div>
        <div class="ft">{{this.product_total-this.box_num}} &nbsp;</div>
      </div>
      <div class="header_footer">
        <!--<div style="margin-left: 1rem">已完成56/10</div>-->
        <!--<div style="margin-right: 1.4rem">已完成10%</div>-->
      </div>
    </div>
    <div class="bdy">
      <table>
        <tr style="height: 2rem">
          <th style="width: 4rem">产品名称</th>
          <th style="width: 3rem">规格型号</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)"
            :class="item.is_choose ? 'choose_item' : ''"
        >

          <td>{{ item.material_code_show }}</td>
          <td>{{item.specs }}</td>
          <td>
            {{ item.decor_code_show }}
          </td>
          <td>{{ item.box_num_total }}</td>
          <td>{{ item.qty-item.box_num_total }}</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: [],
      is_show: true,
      is_use: false,
      product_total: 0,
      box_num: 0,
    }
  },
  mounted () {
    // if (localStorage.getItem('fyy_target')) {
    //   data.target = JSON.parse(localStorage.getItem('fyy_target'))
    // }
    this.tableData = []
    // const fyyTarget = ('SO202308070001').split(',')

    const data = {
      url: 'http://121.36.142.167:7774/jbl/api/module-data/sale_order/page',
      post: {"direction":"DESC","property":"id","fromClientType":"pc","number":0,"sorts":[],"rules":[{"field":"exe_sale_order_b.no","option":"LIKE_ANYWHERE","values":["SO202308070001"]}],"size":15,"specialConditions":[],"workflowSearchBean":{},"dynamicFormCode":"sale_order","dynamicFormTable":null,"ignoreField":true,"developmentSystemId":null,"debugFlag":true}
    }
    this.initData(data)
  },
  methods: {
    initData (row) {
      this.axios.post('/api/testdwy', { ...row }).then(res => {
        res.data.content.forEach(v => {
          v.is_choose = false
          v.no = v.exe_sale_order_b.no
          v.un_box_num = v.qty-v.box_num_total
          this.product_total += v.qty
          this.box_num += v.box_num_total
        })
        this.tableData.push(...res.data.content)
      })
    },
    handelGoSure () {
      if (this.tableData.filter(v => v.is_choose).length === 0) {
        return this.$Message.warning('请先选择数据！')
      }
      localStorage.removeItem('fyy_target')
      const dataId = Math.floor(Math.random() * 100)
      const text = JSON.stringify(this.tableData.filter(v => v.is_choose))
      localStorage.setItem(dataId + '', text)
      this.$router.push({ path: '/cms/package/detailed', query: { id: dataId } })
    },
    handleReturn () {
      localStorage.removeItem('fyy_target')
      this.$router.push('/cms/home')
    },
    handleChoose (item, index) {
      item.is_choose = !item.is_choose
      this.tableData.splice(index, 1, item)
    },
    handleShow () {
      this.is_show = !this.is_show
      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>
