<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.product_no}}</div>
        </div>
        <div style="display: flex" class="unit">
          <label>产品名称：</label>
          <div style="width: 60%">{{ item.product_title }}</div>
        </div>
        <div style="display: flex; width: 100%; padding: 0.5rem">
          <label style="width: 15%; text-align: right">工艺：</label>
          <div style="width: 60%">准分子爱格浅橡9327</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.quantity"
          />
        </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"
            >
              <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="formData.employee_id"
            :options="employeeList"
            style="
              width: 60%;
              background: #fff;
            "
            multiple
            transfer
            size="small"
            :disabled="!formData.team_id"
          >
            <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.eyJzdWIiOiIxIiwiYXV0aCI6IlJPTEVfSU5ORVJfVVNFUixST0xFX0FETUlOIiwidG9rZW5JZCI6IjM1IiwiZXhwIjoxNjk0MjM3NzIyfQ.aO1_RGWVxXygefwuUg_au3ys71zc2KuIbxZNWgTBeLRK9JVEqQZeza4X1gtoA8_BxoKZUuaPnTP9gUrEGgF3UQ', 'Content-Sign: 88cb27fd67215452422c18f3ed71028e', '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
      })
    })
  },
  mounted () {
    this.list = []
    const id = this.$route.query.id.split(',')
    id.forEach(v => {
      const data = {
        url: `http://121.36.142.167:7774/jbl/api/module-data/production_orders/production_orders/473693703256879104/${v}`,
        header: ['Authorization: Bearer eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiIxIiwiYXV0aCI6IlJPTEVfSU5ORVJfVVNFUixST0xFX0FETUlOIiwidG9rZW5JZCI6IjM1IiwiZXhwIjoxNjk0MjM3NzIyfQ.aO1_RGWVxXygefwuUg_au3ys71zc2KuIbxZNWgTBeLRK9JVEqQZeza4X1gtoA8_BxoKZUuaPnTP9gUrEGgF3UQ', 'Content-Type:application/json']
      }
      this.initData(data)
    })
  },
  methods: {
    initData (row) {
      this.axios.post('/api/testdwyget', { ...row }).then(res => {
        this.list.push(...res.data.data['production_orders_dtl'])
        this.formData = res.data.data['production_orders']
        this.formData.employee_id = []
        this.list.forEach(v => {
          v.team_id = this.formData.team_id
          v.break = [
            { break_id: '', break_num: 0 }
          ]
        })
      })
    },
    handleChooseTeam (e) {
      if (e) {
        this.formData.team_id = e
        // 获取班组下的人员
        const id = this.teamList.find(v => v.team_code === this.formData.team_id).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.employeeList = res.data.data.employee
          this.employeeList.forEach(v => {
            v.value = v.team_code
            v.text = v.team_code_show
          })
          this.formData.employee_id = []
        })
      } else {
        this.formData.employee_id = []
      }
    },
    handleReturn () {
      this.$router.go(-1)
    },
    handleDelete (index) {
      if (this.list.length === 1) {
        return false
      } else {
        this.list.splice(index, 1)
      }
    },
    handleAdd (item, index) {
      if (!item.quantity) {
        return false
      } else {
        const copy = JSON.parse(JSON.stringify(item))
        copy.quantity = Math.floor(item.quantity / 2) + item.quantity % 2
        item.quantity = Math.floor(item.quantity / 2)
        this.list.splice(index, 1, item)
        this.list.splice(index + 1, 0, copy)
      }
    },
    handleSure () {
      const data = []
      this.list.forEach(v => {
        const obj = {}
        obj.id = v.id
        obj.team_id = v.team_id
        obj.finished_id = v.employee_id
        obj.num = v.num ? v.num : ''
        obj.quantity = v.quantity
        data.push(obj)
      })
      if (!this.state) {
        return false
      } else {
        this.state = false
        this.axios.post('/api/mobileFinishedOrderAdd', { ...data }).then(res => {
          if (res.code === 200) {
            this.state = true
            this.$Message.success(res.msg)
            this.handleReturn()
          }
        })
      }
    }
  }
}
</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>
