<!-- 选择估价员 -->
<template>
  <a-drawer width="30%" :visible="visible" title="指派估价员" @close="close">
    <a-steps :current="step" @change="stepChange">
      <a-step title="选择维修工" />
      <a-step title="填写信息" />
    </a-steps>
    <br />
    <div v-show="step == 0">
      <a-form layout="inline">
        <a-form-item label="名称">
          <a-input v-model="name" />
        </a-form-item>
        <a-form-item>
          <a-button type="primary" icon="search" @click="search" />
        </a-form-item>
      </a-form>
      <br />

      <a-radio-group v-model="id">
        <template v-for="(valuator, i) in workers">
          <div class="valuator-selector-item-box" :key="i">
            <a-radio :value="valuator.id" />
            <div class="valuator-selector-item">
              <p>姓名：{{ valuator.name }}</p>
              <p>电话：{{ valuator.phone }}</p>
              <div class="valuator-selector-item-assign-list">
                <template v-for="(assign, idx) in valuator.assignTime">
                  <p :key="idx">已派时间：{{ assign }}</p>
                </template>
              </div>
            </div>
          </div>
        </template>
      </a-radio-group>
    </div>
    <div v-show="step == 1">
      <a-form :form="form">
        <a-form-item label="备注">
          <a-textarea
            v-decorator="[
              'remark',
              { rules: [{ required: true, message: '请填写备注' }] }
            ]"
            :autoSize="{ minRows: 5 }"
          />
        </a-form-item>
      </a-form>
    </div>
    <div class="drawer-form-bottom-toolbar">
      <a-button v-show="step == 0" type="primary" @click="choose">
        选择
      </a-button>
      <a-button type="primary" v-show="step == 1" @click="dispatch">
        指派
      </a-button>
    </div>
  </a-drawer>
</template>
<script>
import { searchWorkers } from '@/api/worker'
import { dispatchWorker, reDispatchWorker } from '@/api/order'

export default {
  name: 'ChooseWorker',
  props: ['afterChoose', 'orderId'],
  data() {
    return {
      visible: false,
      id: null,
      name: null,
      workers: [],
      step: 0,
      form: this.$form.createForm(this),
      mode: null,
    }
  },
  methods: {
    choose() {
      if (!this.id) {
        return
      }
      console.info('chosen id', this.id)
      this.step = 1
    },
    close() {
      this.id = null
      this.name = null
      this.step = 0
      this.mode = null
      this.form.resetFields()
      this.visible = false
    },
    show(mode) {
      this.visible = true
      this.mode = mode
    },
    search() {
      searchWorkers(this.name).then(({ data }) => {
        this.workers = data
      })
    },
    stepChange(step) {
      if (step == 0) {
        this.step = 0
      }
    },
    dispatch() {
      this.form.validateFieldsAndScroll((err, values) => {
        if (err) {
          return
        }
        const reqData = {
          ...values,
          id: this.orderId,
          hostId: this.id
        }
        console.info('reqData', reqData)
        const dispatch =
          this.mode == 'first' ? dispatchWorker : reDispatchWorker
        dispatch(reqData).then(({ code }) => {
          if (code == 200) {
            this.$message.success('指派成功')
            this.close()
            this.afterChoose()
          }
        })
      })
    }
  },
  mounted() {
    this.search()
  }
}
</script>
<style lang="less" scoped>
.valuator-selector-item-box {
  display: flex;
  .valuator-selector-item {
    margin-left: 10px;
    font-size: 15px;
    font-weight: bold;
    .valuator-selector-item-assign-list {
      padding-left: 5px;
      color: rgb(139, 139, 139);
    }
  }
}
</style>