<template>
  <div>
    <div class="content">
      <div v-for="(item, index) in list" :key="index" class="item">
        <!--<div class="add" @click="handleAdd(item, index)">+</div>-->
        <!--<div class="delete" @click="handleDelete(index)">x</div>-->
        <div class="unit" style="display: flex">
          <label style="width: 50%">销售订单号：</label>
          <div style="width: 50%;word-break: break-all">{{ item.no}}</div>
        </div>
        <div style="display: flex" class="unit">
          <label>产品名称：</label>
          <div style="width: 60%">{{ item.material_code_show }}</div>
        </div>
        <div style="display: flex; width: 100%; padding: 0.5rem">
          <label style="width: 15%; text-align: right">工艺：</label>
          <div style="width: 60%">{{ item.specs }}</div>
        </div>
        <div style="display: flex" class="unit">
          <label>包装数量：</label>
          <Input
            size="small"
            type="number"
            placeholder="  请输入"
            style="width: 60%; padding: 0 0 0 0.2rem"
            v-model="item.un_box_num"
          />
        </div>
        <div class="unit">
          <label>班组：</label
          ><span>
            <b-form-select
              v-model="item.team_id"
              :options="teamList"
              style="
                height: 1.4rem;
                width: 60%;
                border: 0.1rem solid;
                border-radius: 0.6rem;
                background: #fff;
              "
              @change="handleChooseTeam($event,index)"
            >
              <template v-slot:first>
                <b-form-select-option value="" disabled
                  >请选择班组</b-form-select-option
                >
              </template></b-form-select
            ></span
          >
        </div>
        <div class="unit">
          <label>人员：</label>
          <Select
            v-model="item.employee_id"
            :options="employeeList"
            style="
              width: 60%;
              background: #fff;
            "
            multiple
            transfer
            size="small"
            :disabled="item.team_id ? false : true"
          >
            <Option v-for="item in employeeList" :key="item.id" :label="item.text" :value="item.value"/>
          </Select>
        </div>
        <div class="unit">
          <label>商标损耗：</label>
          <b-form-select
            v-model="item.num"
            :options="numList"
            style="
              height: 1.4rem;
              width: 60%;
              border: 0.1rem solid;
              border-radius: 0.6rem;
              background: #fff;
            "
          >
            <template v-slot:first>
              <b-form-select-option value="" disabled
                >请选择数量</b-form-select-option
              >
            </template></b-form-select
          >
        </div>
      </div>
      <div class="footer_btn">
        <b-button
          variant="primary"
          style="width: 35%; margin-left: 3%"
          @click="handleReturn"
          >返回</b-button
        >
        <b-button
          variant="primary"
          style="width: 35%; margin-right: 3%"
          @click="handleSure"
          >确认</b-button
        >
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      list: [],
      formData: {},
      teamList: [],
      employeeList: [],
      numList: [
        { value: 1, text: 1 },
        { value: 2, text: 2 },
        { value: 3, text: 3 }
      ],
      state: true
    }
  },
  created () {
    // 获取班组
    const data = {
      url: 'http://121.36.142.167:7774/jbl/api/module-data/team_list/page',
      post: {"direction":"DESC","property":"id","fromClientType":"pc","number":0,"sorts":[],"rules":[],"size":15,"specialConditions":[],"dynamicFormCode":"team","developmentSystemId":null,"debugFlag":true},
      header: ['Authorization: Bearer eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiIxIiwiYXV0aCI6IlJPTEVfSU5ORVJfVVNFUixST0xFX0FETUlOLFJPTEVfSU5URVJGQUNFIiwidG9rZW5JZCI6IjM1IiwiZXhwIjoxNjk0Njc0MTE0fQ.L3Di3K_cpF0rWSgvzbcLufLm8bkCxd3Y-xudfKzSm4F-qdpDr0hYWWQP5K5BYTNuZnu4tWpGmSW2KRHU0pjt-A', 'Content-Type:application/json']
    }
    this.axios.post('/api/testdwy', { ...data }).then(res => {
      this.teamList = res.data.content.filter(v => v.status)
      this.teamList.forEach(v => {
        v.value = v.team_code
        v.text = v.title
      })
    })
    // 获取人员
    const data1 = {
      url: 'http://121.36.142.167:7774/jbl/api/module-data/team_code_btn/page',
      post:{"direction":"DESC","property":"id","fromClientType":"pc","number":0,"sorts":[],"rules":[],"size":15,"specialConditions":[],"workflowSearchBean":{},"dynamicFormCode":"person","dynamicFormTable":null,"ignoreField":true,"developmentSystemId":null,"debugFlag":true},
      header: ['Authorization: Bearer eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiIxIiwiYXV0aCI6IlJPTEVfSU5ORVJfVVNFUixST0xFX0FETUlOLFJPTEVfSU5URVJGQUNFIiwidG9rZW5JZCI6IjM1IiwiZXhwIjoxNjk0Njc0MTE0fQ.L3Di3K_cpF0rWSgvzbcLufLm8bkCxd3Y-xudfKzSm4F-qdpDr0hYWWQP5K5BYTNuZnu4tWpGmSW2KRHU0pjt-A', 'Content-Type:application/json']
    }
    this.axios.post('/api/testdwy', { ...data1 }).then(res => {
      this.employeeList = res.data.content
      this.employeeList.forEach(v => {
        v.value = v.no
        v.text = v.name
      })
    })
  },
  beforeRouteLeave (to, from, next) {
    localStorage.removeItem(this.$route.query.id + '')
    next()
  },
  beforeRouteEnter (to, from, next) {
    if (localStorage.getItem(to.query.id)) {
      next()
    } else {
      next(vm => {
        vm.$router.replace('/cms/package/detail')
        // 跳到该路由页面后，再替换为from.path来源路径
      })
    }
  },
  mounted () {
    const id = this.$route.query.id
    this.initData(id)
  },
  methods: {
    initData (id) {
      this.list = JSON.parse(localStorage.getItem(id + ''))
      this.list.forEach(v => {
        v.team_id = ''
      })
    },
    handleChooseTeam (e, index) {
      if (e) {
        // 获取班组下的人员
        const id = this.teamList.find(v => v.team_code === e).dynamic_form_value_id
        const data = {
          url: `http://121.36.142.167:7774/jbl/api/module-data/team/team/472629516238663680/${id}`,
          header: ['Authorization: Bearer eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiIxIiwiYXV0aCI6IlJPTEVfSU5ORVJfVVNFUixST0xFX0FETUlOIiwidG9rZW5JZCI6IjM1IiwiZXhwIjoxNjk0MjM3NzIyfQ.aO1_RGWVxXygefwuUg_au3ys71zc2KuIbxZNWgTBeLRK9JVEqQZeza4X1gtoA8_BxoKZUuaPnTP9gUrEGgF3UQ', 'Content-Type:application/json']
        }
        this.axios.post('/api/testdwyget', { ...data }).then(res => {
          this.list[index].employee_id = res.data.data.employee.map(v => v.team_code)
          this.$forceUpdate()
        })
      }
    },
    handleReturn () {
      this.$router.go(-1)
    },
    handleSure () {

      let box_orders_products = [];
      let team_id = '';
      let team_name = '';
      let employee_ids = '';
      let employee_names = '';
      this.list.forEach((v,index) => {

        let box_orders_product = {
          "item_num": (index+1),
          "product_no": v.material_code,
          "product_title": v.material_code_show,
          "color_code": v.craft_type_code_show,
          "process_code_two": v.craft_type_two_code,
          "color_code_two": v.decor_two_code,
          "process_title": v.craft_type_code_show,
          "color": v.decor_code_show,
          "process_title_two": v.craft_type_two_show,
          "color_two":  v.decor_two_code_show,
          "product_size": v.specs,
          "product_unit": v.unit_code,
          "product_unit_title": v.unit_code_show,
          "order_no": v.exe_sale_order_b.no,
          "order_item_id": v.id,
          "order_item_no": v.item_no,
          "customer_no": v.exe_sale_order_b.customer_code,
          "customer_name": v.exe_sale_order_b.customer_code_show,
          "dealer_no": v.exe_sale_order_b.jingxiaoshang,
          "dealer_name": v.exe_sale_order_b.jingxiaoshang_show,
          "box_num": v.un_box_num
        }
        team_id = v.team_id;

        box_orders_products.push(box_orders_product);
      })
      const box_orders = {
        "defective_order_no": null,
        "box_time": new Date(),
        "team_id": "BZ00016",
        "employee_id": "RX0001",
        "query_order_on": null,
        "site": null,
        "created_by": null,
        "created_date": null,
        "last_modified_by": null,
        "last_modified_date": null,
        "employee_id_show": "郭银",
        "team_id_show": "包装一组"

      }
      // return false;
      let data = {
        "bizTypeEk": "LOWCODE",
        "bizId": -1,
        "dynamicFormId": "474107044420857856",
        "showModelId": "474108545251880960",
        data: {
          "box_orders" : box_orders,
          "box_orders_label_product" : [],
          "box_orders_product" : box_orders_products,
          "production_orders_dtl" : box_orders_products,
        }
      }
      console.log(JSON.stringify(data));return false;

    }
  }
}
</script>
<style lang="scss" scoped>
.content {
  height: calc(100% - 5rem);
  overflow: auto;
  .item {
    width: 94%;
    height: auto;
    position: relative;
    left: 3%;
    margin: 1.5rem 0;
    border-radius: 1rem;
    background-color: #fff;
    box-shadow: 0.16rem 0.1rem 0.1rem 0.1rem #9d9b9b;
    font-size: 0.8rem;
    display: flex;
    flex-wrap: wrap;
    .add {
      position: absolute;
      width: 1.5rem;
      height: 1.5rem;
      bottom: -0.5rem;
      left: -0.5rem;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.3rem;
      border-radius: 50%;
      box-shadow: 0.1rem 0.1rem 0.1rem 0rem #777676;
      background: #fff;
    }
    .delete {
      width: 1.5rem;
      height: 1.5rem;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.3rem;
      position: absolute;
      top: -0.5rem;
      right: -0.5rem;
      border-radius: 50%;
      box-shadow: 0.1rem 0.1rem 0.1rem 0rem #777676;
      background: #fff;
    }
    .unit {
      width: 50%;
      padding: 0.5rem;

      vertical-align: middle;
      label {
        width: 40%;
        text-align: center;
      }
    }
  }
}

.footer_btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/deep/ .ivu-select-dropdown-list{
  padding: 0 !important;
}
</style>
