<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%">{{ item.dispatch_no }}</div>
        </div>
        <div style="display: flex" class="unit">
          <label>发货单号：</label>
          <div style="width: 60%">{{ item.product_title }}</div>
        </div>
        <div style="padding: 0.5rem; width: 100%; display: flex">
          <label style="width: 20%; text-align: right">客户姓名：</label>
          <div style="width: 80%">浙江省金华市金东区方利青</div>
        </div>
        <div style="padding: 0.5rem; width: 100%; display: flex">
          <label style="width: 20%; text-align: right">产品名称：</label>
          <div style="width: 80%">大王椰700尊贵型E0全桉-面漆板W</div>
        </div>
        <div style="padding: 0.5rem; width: 100%; display: flex">
          <label style="width: 20%; text-align: right">工艺：</label>
          <div style="width: 80%">准分子爱格浅橡9327</div>
        </div>
        <div style="display: flex" class="unit">
          <label>发货包数：</label>
          <Input
            type="number"
            size="small"
            placeholder="请输入"
            style="width: 60%; padding: 0 0 0 0.2rem"
            v-model="item.quantity"
          />
        </div>
        <div style="display: flex" class="unit">
          <label>发货数量：</label>
          <Input
            type="number"
            size="small"
            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;
              "
            >
              <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>
          <b-form-select
            v-model="item.employee_id"
            :options="employeeList"
            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: 30%; margin-right: 3%"
          @click="handleReturn"
          >返回</b-button
        >
        <b-button
          variant="primary"
          style="width: 30%; margin-right: 3%"
          @click="handleInfo"
          >物流信息</b-button
        >
        <b-button variant="primary" style="width: 30%" @click="handleSure"
          >确认</b-button
        >
      </div>
    </div>
    <Modal
      v-model="show_info"
      width="80"
      footer-hide
      :closable="false"
      :mask-closable="false"
    >
      <div style="font-size: 1.2rem; font-weight: bold">物流信息</div>
      <Form :label-width="120">
        <FormItem label="预计到货日期:">
          <Input />
        </FormItem>
        <FormItem label="发货人:">
          <Input />
        </FormItem>
        <FormItem label="发货人联系方式:">
          <Input />
        </FormItem>
        <FormItem label="发货方式:">
          <Input />
        </FormItem>
        <FormItem label="快递公司:">
          <Input />
        </FormItem>
        <FormItem label="快递单号:">
          <Input />
        </FormItem>
        <FormItem label="司机姓名:">
          <Input />
        </FormItem>
        <FormItem label="司机联系电话:">
          <Input />
        </FormItem>
        <FormItem label="车牌号码:">
          <Input />
        </FormItem>
        <FormItem label="司机身份证号码:">
          <Input />
        </FormItem>
      </Form>
      <div style="text-align: center">
        <Button
          style="margin-right: 1rem"
          type="error"
          @click="show_info = false"
          >取消</Button
        >
        <Button
          style="margin-left: 1rem"
          type="primary"
          @click="show_info = false"
          >确认</Button
        >
      </div>
    </Modal>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [],
      email: "",
      name: "",
      food: null,
      checked: [],
      form: {},
      teamList: [],
      employeeList: [],
      state: true,
      modalData: {},
      show_info: false,
    }
  },
  created() {
    this.axios.post('/api/finishedOrderDetailsList', { id: this.$route.query.id.split(',') }).then(res => {
      this.list = res.data.list;
    })
    //获取班组
    this.axios.post('/api/teamList').then(res => {
      this.teamList = res.data.data;
      this.teamList.forEach(v => {
        v.value = v.id;
        v.text = v.title;
      })
    })
    //获取人员
    this.axios.post('/api/employeeList').then(res => {
      this.employeeList = res.data.data;
      this.employeeList.forEach(v => {
        v.value = v.id;
        v.text = v.emp_name
      })
    })
  },
  methods: {
    handleInfo() {
      this.show_info = true;
      this.modalData = {};
    },
    handleReturn() {
      this.$router.go(-1);
    },
    handleDelete(index) {
      if (this.list.length == 1) {
        return
      } else {
        this.list.splice(index, 1);
      }
    },
    handleAdd(item, index) {
      if (!item.quantity) {
        return
      } else {

        let 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() {
      let data = [];
      this.list.forEach(v => {
        let obj = {};
        obj.id = v.id;
        obj.team_id = v.team_id,
          obj.finished_id = v.employee_id,
          obj.equipment_id = v.equipment_id,
          obj.quantity = v.quantity;
        data.push(obj)
      });
      if (!this.state) {
        return
      } 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%;
    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-modal-content {
  top: -5rem;
}
/deep/.ivu-form-item {
  margin-bottom: 0.5rem;
}
</style>