<template>
  <zj-page-container>
    <zj-page-fill class="neibuview">
      <zj-form-container ref="formRef" :form-data="orderInfo" :form-attributes="{ size: 'mini' }">
        <zj-form-module
          title="派单信息"
          label-width="100px"
          :form-data="orderInfo"
          :form-items="pandanxinxi"
        ></zj-form-module>
        <zj-form-module
          title="已选工单"
          label-width="100px"
          :form-data="orderInfo"
          :form-items="selectedItems"
        ></zj-form-module>
      </zj-form-container>
    </zj-page-fill>
    <!-- 操作按钮 -->
    <div>
      <div style="box-sizing: border-box; padding: 16px; text-align: right">
        <el-button size="mini" @click="$emit('close')"> 取消 </el-button>
        <el-button type="primary" size="mini" @click="allVerify"> 确定 </el-button>
      </div>
    </div>
  </zj-page-container>
</template>

<script>
import pandanxinxi from './pandanxinxi.js'
import showRecordSelected from '../mixins/showRecordSelected.js'
import { required } from '@/components/template/rules_verify.js'
import { changeOrderChangeWorker } from '@/api/workOrderPool.js'
export default {
  mixins: [pandanxinxi, showRecordSelected],
  data() {
    return {
      orderInfo: {
        websitId: '',
        workerId: '',
        workerId_fz: '',
        orderWorkers: [],
        recordSelected: []
      },
      isAllWebsit: true
    }
  },
  computed: {
    formOptions() {
      return {
        // 派单信息-----------------------------
        // 服务商网点
        websitId: {
          isEdit: true,
          isShow: true,
          isRules: [...required]
        },
        isQd: {
          isEdit: false,
          isShow: false,
          isRules: []
        },
        workerId: {
          isEdit: true,
          isShow: true,
          isRules: [...required]
        },
        orderWorkers: {
          isEdit: true,
          isShow: true,
          isRules: [...required]
        }
      }
    }
  },
  methods: {
    allVerify() {
      this.$refs.formRef.validate((valid, invalidFields, errLabels) => {
        if (valid) {
          changeOrderChangeWorker({
            ids: this.orderInfo.recordSelected.map(item => item.id),
            websitId: this.orderInfo.websitId,
            workerIds: this.orderInfo.orderWorkers.map(item => item.workerId)
          }).then(res => {
            this.$message({
              type: 'success',
              message: '派单成功!'
            })
            this.$emit('close')
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.neibuview {
  box-sizing: border-box;
  padding-left: 16px;

  ::v-deep & > .zj-page-fill-scroll {
    box-sizing: border-box;
    padding-right: 16px;

    & > div:nth-child(1) {
      margin-top: 20px;
    }
  }
}
</style>
