<template>
  <el-dialog title="创建订单" :close-on-click-modal="false" :visible.sync="createOrderVisible" width="500px">
    <el-dialog :title="innerTitle" :append-to-body="true" :visible.sync="createInnerVisible">
      <productInfo v-if="innerType == 1" :is-choose="true" @chooseProduct='chooseProduct'></productInfo>
      <clientInfo v-if="innerType == 2" :is-choose="true" @chooseClient='chooseClient'></clientInfo>
    </el-dialog>
    <el-form :model="createInfo" ref="createInfo" :rules="rules" label-width="80px" label-position="right">
      <el-form-item label="业务类型">
        <el-select v-model="createInfo.businessKind" placeholder="请选择" style="width: 300px">
          <el-option
            key="0"
            label="正常业务"
            :value="0"></el-option>
          <el-option
            key="2"
            label="物料订单"
            :value="2"></el-option>
          <el-option
            key="1"
            label="外协业务"
            :value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="产品类型" prop="productName" v-if="createInfo.businessKind != 2">
        <el-select
          v-model="createInfo.productName"
          style="width: 300px"
          filterable
          placeholder="请选择"
          value-key="id"
          @change="productInfoChange">
          <el-option
            v-for="item in productList"
            :key="item.id"
            :label="item.productName"
            :value="item">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="客户名称" prop="clientName">
        <el-input
          style="width: 300px"
          v-model="createInfo.clientName"
          disabled
          class="input-with-select"
          @click.native="createInnerVisible = true;innerType = 2;innerTitle ='选择客户'"
        >
          <el-button
            slot="append"
            @click="createInnerVisible = true;innerType = 2;innerTitle ='选择客户'">选择
          </el-button>
        </el-input>
      </el-form-item>
      <el-form-item label="订单名称">
        <el-input v-model="createInfo.orderName" style="width: 300px">
        </el-input>
      </el-form-item>
      <el-form-item label="订单类型" v-if="createInfo.businessKind != 2">
        <el-select v-model="createInfo.orderType" placeholder="请选择" style="width: 300px">
          <el-option
            key="0"
            label="短版订单"
            :value="0"></el-option>
          <el-option
            key="1"
            label="长版订单"
            :value="1"></el-option>
          <el-option
            key="2"
            label="通货订单"
            :value="2"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="createOrderVisible = false">取 消</el-button>
      <el-button type="primary" v-if="createInfo.businessKind == 0 || createInfo.businessKind == 1" @click="createBtn">确 定</el-button>
      <el-button type="primary" v-else-if="createInfo.businessKind == 2" @click="createMaterialBtn">确 定</el-button>
    </div>
    <material-detail :key="timer" ref="materialDetail" :append-flag="true" @requestSuccess="requestSuccess"></material-detail>
  </el-dialog>
</template>

<script>
import {getSimpleProductInfoList} from "@/api/order/orderList";
import productInfo from '@/views/productFile/product/productInfo'
import clientInfo from '@/views/doc/client/clientList'
import MaterialDetail from "@/components/materialDetail/materialDetail";

const createInfo = {
  idProduct: '',
  productName: '',
  clientName: '',
  idClient: '',
  orderName: '',
  orderType: 0,
  businessKind: 0
}
export default {
  name: "createOrderDialog",
  components: {MaterialDetail, clientInfo, productInfo},
  data() {
    return {
      createOrderVisible: false,
      createInnerVisible: false,
      innerTitle: '',
      innerType: 1,
      createInfo: Object.assign({}, createInfo), // 创建信息
      orderCategory: 1,
      productList: [],

      // 物料订单
      materialDialog: false,
      timer: new Date().getTime(),
      // 验证规则
      rules: {
        productName: [{ required: true, trigger: 'blur', message: '请选择产品类型' }],
        clientName: [{ required: true, trigger: 'blur', message: '请选择客户' }]
      },
    }
  },
  methods: {
    // 获取产品列表
    getProductInfo() {
      const _that = this
      var data = {}
      // console.log(data);
      getSimpleProductInfoList(data).then(response => {
        // console.log(response)
        const data = response.data
        _that.productList = data
      }).catch(err => {
        _that.$message.error(err)
      })
    },

    productInfoChange(val) {
      // console.log(val)
      this.createInfo.idProduct = val.id
      this.createInfo.productName = val.productName
    },

    // 选择产品
    chooseProduct(data) {
      this.createInnerVisible = false
      // console.log(data);
      this.createInfo.productName = data.productName
      this.createInfo.idProduct = data.id
    },
    // 选择客户
    chooseClient(data) {
      this.createInnerVisible = false
      // console.log(data);
      this.createInfo.clientName = data.clientName
      this.createInfo.idClient = data.id
    },

    // 创建
    createBtn() {
      var _that = this
      _that.$refs.createInfo.validate((valid) => {
        if (valid) {
          _that.createOrderVisible = false
          if (_that.$store.state.app.sidebar.opened) {
            _that.$store.dispatch('app/toggleSideBar')
          }

          _that.$router.push({
            name: 'CreateOrder',
            params: {
              id: Date.parse(new Date()),
              info: _that.createInfo,
              orderCategory: _that.orderCategory
            }
          })
        }
      })
    },

    // 创建物料订单
    createMaterialBtn() {
      const _that = this
      _that.timer = new Date().getTime()
      _that.$nextTick(function (){
        _that.$refs.materialDetail.materialDialog = true
        _that.$refs.materialDetail.form.idClient = _that.createInfo.idClient
        _that.$refs.materialDetail.form.clientName = _that.createInfo.clientName
        _that.$refs.materialDetail.form.orderName = _that.createInfo.orderName
        _that.$refs.materialDetail.form.materialList = []
      })
    },
    requestSuccess() {
      this.createOrderVisible = false
      this.$emit('tableRefresh','')
    }
  }
}
</script>

<style scoped>

</style>
