<template>
  <div>
    <div class="content">
      <div v-for="(item, index) in list" :key="index" class="item">
        <div class="unit" style="display: flex">
          <label style="width: 40%">派工单号：</label>
          <div style="width: 60%;word-break: break-all">{{ item.dispatch_order_no}}</div>
        </div>
        <div style="display: flex" class="unit">
          <label style="width: 40%">产品名称：</label>
          <div style="width: 60%">{{ item.product_title }}</div>
        </div>
        <div style="display: flex" class="unit">
          <label>数量：</label>
          <Input
            size="small"
            placeholder="请输入"
            style="width: 70%; padding: 0 0 0 0.2rem"
            v-model="item.finished_num"
            type="number"
            @on-change="handleChangeNumber($event,index)"
          />
        </div>
        <div class="unit">
          <label>班组：</label>
          <b-form-select
            v-model="item.team_finish_id"
            :options="teamList"
            style="
              height: 1.4rem;
              width: 70%;
              border: 0.1rem solid;
              border-radius: 0.6rem;
              background: #fff;
            "
            @change="(e)=>handleChangeTeam(e,index)"
          >
<!--            @change="handleChooseTeam"-->
            <template v-slot:first>
              <b-form-select-option value="" disabled
                >请选择班组</b-form-select-option
              >
            </template></b-form-select
          >
        </div>
        <div class="unit">
          <label>人员：</label>
          <Select
              v-model="item.employee_id"
              style="
              width: 70%;
              background: #fff;
            "
              size='small'
              transfer
              multiple
              @on-change="handleChangeEmployee($event,index)"
          >
            <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.equipment_id"
            :options="equipmentList"
            style="
              height: 1.4rem;
              width: 70%;
              border: 0.1rem solid;
              border-radius: 0.6rem;
              background: #fff;
            "
            @change="(e) => handleChangeEquipment(e,index)"
          >
            <template v-slot:first>
              <b-form-select-option value="" disabled
                >请选择设备</b-form-select-option
              >
            </template></b-form-select
          >
        </div>
        <div
          v-for="(_item, _index) in item.break"
          :key="_index"
          style="display: flex; align-items: center"
        >
          <div style="width: 35%; padding: 0 0.5rem 1rem 0.5rem">
            <label>不良品原因：</label>
            <b-form-select
              v-model="_item.break_id"
              :options="breakList"
              style="
                height: 1.4rem;
                width: 100%;
                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 style="width: 35%; padding: 0 0.5rem 1rem 0.5rem">
            <label>不良品数量：</label>
            <Input
              style="width: 100%"
              size="small"
              placeholder="请输入"
              v-model="_item.break_num"
              type="number"
            />
          </div>
          <div style="width: 30%; display: flex">
            <div class="boo" @click="handleBreakAdd(_index, item, index)">
              +
            </div>
            <div class="boo" @click="handleBreakCancel(_index, item, index)">
              -</div>
          </div>
        </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 class="footer">
      <div>总计：</div>
      <div class="footer_content">
        <div>
          <label>派工单号：</label>
          <div>123456</div>
        </div>
        <div>
          <label>产品名称：</label>
          <div>实木板</div>
        </div>
        <div>
          <label>数量：</label>
          <div>23</div>
        </div>
        <div>
          <label>班组：</label>
          <div>一班</div>
        </div>
        <div>
          <label>人员：</label>
          <div>张三</div>
        </div>
        <div>
          <label>设备：</label>
          <div>一号机</div>
        </div>
      </div>
    </div> -->
  </div>
</template>
<script>
export default {
  data () {
    return {
      list: [],
      name: '',
      formData: {},
      teamList: [],
      employeeList: [],
      equipmentList: [],
      state: true,
      breakList: []
    }
  },
  created () {
    // 获取不良品原因
    const data2 = {
      url: 'http://121.36.142.167:7774/jbl/api/module-data/defective_list/page',
      post: {"direction":"DESC","property":"id","fromClientType":"pc","number":0,"sorts":[],"rules":[],"size":15,"specialConditions":[],"dynamicFormCode":"defective","developmentSystemId":null,"debugFlag":true},
      header: ['Authorization: Bearer eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiIxIiwiYXV0aCI6IlJPTEVfSU5ORVJfVVNFUixST0xFX0FETUlOIiwidG9rZW5JZCI6IjM1IiwiZXhwIjoxNjk0MjM3NzIyfQ.aO1_RGWVxXygefwuUg_au3ys71zc2KuIbxZNWgTBeLRK9JVEqQZeza4X1gtoA8_BxoKZUuaPnTP9gUrEGgF3UQ', 'Content-Sign: 5fb0ea21d28dc57425577987fbeaf1dc', 'Content-Type:application/json']
    }
    this.axios.post('/api/testdwy', { ...data2 }).then(res => {
      this.breakList = res.data.content.filter(v => v.status)
      this.breakList.forEach(v => {
        v.value = v.defective_code
        v.text = v.title
      })
    })
    // 获取设备
    const data1 = {
      url: 'http://121.36.142.167:7774/jbl/api/module-data/device_list/page',
      post: {"direction":"DESC","property":"id","fromClientType":"pc","number":0,"sorts":[],"rules":[],"size":15,"specialConditions":[],"dynamicFormCode":"device","developmentSystemId":null,"debugFlag":true},
      header: ['Authorization: Bearer eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiIxIiwiYXV0aCI6IlJPTEVfSU5ORVJfVVNFUixST0xFX0FETUlOIiwidG9rZW5JZCI6IjM1IiwiZXhwIjoxNjk0MjM3NzIyfQ.aO1_RGWVxXygefwuUg_au3ys71zc2KuIbxZNWgTBeLRK9JVEqQZeza4X1gtoA8_BxoKZUuaPnTP9gUrEGgF3UQ', 'Content-Sign: 27a0ae807d9437f5fdad7449cdf52e08', 'Content-Type:application/json']
    }
    this.axios.post('/api/testdwy', { ...data1 }).then(res => {
      this.equipmentList = res.data.content.filter(v => v.status)
      this.equipmentList.forEach(v => {
        v.value = v.device_code
        v.text = v.title
      })
    })
    // 获取班组
    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
      })
    })
    // 获取人员
    const data3 = {
      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', { ...data3 }).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/finish/detail')
        // 跳到该路由页面后，再替换为from.path来源路径
      })
    }
  },
  mounted () {
    const id = this.$route.query.id
    this.initData(id)
  },
  methods: {
    handleChangeNumber (e, index) {
      this.list[index].not_finished_num = this.list[index].dispatch_num - (e.target.value * 1)
    },
    handleChangeEmployee (e, index) {
      this.list[index].employee_id_show = this.employeeList.filter(v => e.indexOf(v.no) !== -1).map(v => v.name).toString().replace(/,/g, '/$/$/$').replace(/\//g, '')
      console.log(this.list[index])
    },
    handleChangeTeam (e, index) {
      this.list[index].team_id_show = this.teamList.find(v => v.team_code === e).title
    },
    handleChangeEquipment (e, index) {
      this.list[index].equipment_id_show = this.equipmentList.find(v => v.device_code === e).title
    },
    initData (id) {
      this.list = JSON.parse(localStorage.getItem(id + ''))
      this.list.forEach(v => {
        v.team_finish_id = v.dispatch_orders.team_id
        v.team_id_show = v.dispatch_orders.team_id_show
        v.equipment_id = v.dispatch_orders.equipment_id
        v.equipment_id_show = v.dispatch_orders.equipment_id_show
        v.finished_num = v.not_finished_num
        v.dispatch_order_no = v.dispatch_no
        v.id = null
        v.employee_id = v.dispatch_orders.employee_id.split(',')
        v.employee_id_show = v.dispatch_orders.employee_id_show
        v.break = [
          { break_id: '', break_num: 0 }
        ]
      })
    },
    handleBreakAdd (_index, item, index) {
      item.break.splice(_index + 1, 0, {
        break_id: '',
        break_num: 0
      })
      this.list.splice(index, 1, item)
    },
    handleBreakCancel (_index, item, index) {
      if (_index === 0) {
        item.break = [{ break_id: '', break_num: 0 }]
      } else {
        item.break.splice(_index, 1)
      }
      this.list.splice(index, 1, item)
    },
    handleReturn () {
      localStorage.removeItem(this.$route.query.id + '')
      this.$router.go(-1)
    },
    // 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 = []
    //   }
    // },
    handleSure () {
      console.log(this.list)
      this.list.forEach(v => {
        const data3 = {
          url: 'http://121.36.142.167:7774/jbl/api/module-data/completion_orders/completion_orders',
          post: {
            bizId: -1,
            bizTypeEk: 'LOWCODE',
            dynamicFormId: "474201923419320320",
            showModelId: "474382714828959744",
            data: {
              completion_orders: {
                completion_order_no: null,
                completion_time: new Date(),
                created_by: null,
                created_date: null,
                employee_id: v.employee_id.toString(),
                employee_id_show: v.employee_id_show,
                equipment_id: v.equipment_id,
                equipment_id_show: v.equipment_id_show,
                last_modified_by: null,
                last_modified_date: null,
                process_id: v.dispatch_orders.process_id,
                process_id_show: v.dispatch_orders.process_id_show,
                remark: null,
                site: null,
                team_id: v.team_finish_id,
                team_id_show: v.team_id_show
              },
              completion_orders_dtl: [v]
            }
          },
          header: ['Authorization: Bearer eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiIxIiwiYXV0aCI6IlJPTEVfSU5ORVJfVVNFUixST0xFX0FETUlOLFJPTEVfSU5URVJGQUNFIiwidG9rZW5JZCI6IjM1IiwiZXhwIjoxNjk0Njc0MTE0fQ.L3Di3K_cpF0rWSgvzbcLufLm8bkCxd3Y-xudfKzSm4F-qdpDr0hYWWQP5K5BYTNuZnu4tWpGmSW2KRHU0pjt-A', 'Content-Type:application/json']
        }
        this.axios.post('/api/testdwy', { ...data3 }).then(res => {

        })
      })
    }
  }
}
</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;
      display: flex;
      align-items: center;
      label {
        width: 30%;
        text-align: right;
      }
    }
  }
}
.footer_btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.boo {
  font-size: 2rem;
  border-radius: 50%;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0.5rem;
  border: 0.1rem solid;
}

</style>
