<template>
  <el-dialog
    title="确认打印订单"
    :modal="false"
    top="200px"
    :close-on-click-modal="false"
    :visible.sync="visible"
  >
    <el-form
      :model="dataForm"
      ref="dataForm"
      label-width="80px"
    >
      <el-form-item label="打印渠道" prop="printChannel">
        <el-select v-model="dataForm.printChannel" clearable filterable @change="handlePrintChannelChange">
<!--          <el-option key="GSART" label="广森数码" value="GSART"></el-option>-->
          <el-option key="Lightning" label="闪电打印" value="Lightning"></el-option>
<!--          <el-option key="WoNiu" label="蜗牛数码" value="WoNiu"></el-option>-->
<!--          <el-option key="KuaiYin" label="快印数码" value="KuaiYin"></el-option>-->
        </el-select>
      </el-form-item>
      <el-form-item label="打印产品" prop="prodType">
        <el-select v-model="dataForm.prodType" clearable filterable @change="handleProdTypeChange">
          <el-option v-for="(node, index) in prodTypeList"
                     :key="node.prodType"
                     :label="node.prodName"
                     :value="node.prodType">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="产品规格" prop="thirdSkuId">
        <el-select v-model="dataForm.thirdSkuId" clearable filterable>
          <el-option v-for="(node, index) in thirdSkuIdList"
                     :key="node.thirdSkuId"
                     :label="node.thirdSkuName"
                     :value="node.thirdSkuId">
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <span slot="footer">
      <el-button type="info" @click="visible = false">{{$t("crud.filter.cancelBtn")}}</el-button>
      <el-button :loading="orderCreateLoading" type="primary" @click="dataFormSubmit">{{$t("crud.filter.submitBtn")}}</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  data () {
    return {
      visible: false,
      provinceList: [],
      cityList: [],
      areaList: [],
      dataForm: {
        orderNumber: null,
        printChannel: "GSART",
        shopId: null,
        prodType: null,
        thirdSkuId: null,
      },
      dataRule: {
      },
      isTrue: false,
      errorInfo: '',
      dataListLoading: false,
      thirdSkuIdList: [],
      prodTypeList: [],
      dataList: [],
      orderCreateLoading: false
    }
  },
  methods: {
    // 获取数据列表
    init (data) {
      let printOrder = Object.assign({}, data)
      this.visible = true
      this.dataForm.shopId = printOrder.shopId
      this.dataForm.orderNumber = printOrder.orderNumber
      this.dataListLoading = false;
      this.$http({
        url: this.$http.adornUrl(`/prod/thirdPrintSku/list`),
        method: 'get',
        params: this.$http.adornParams({})
      }).then(({ data }) => {
        this.dataList = data;
        this.handlePrintChannelChange(this.dataForm.printChannel);
      })
    },
    // 确定事件
    dataFormSubmit () {
      this.orderCreateLoading = true;
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl(`/order/thirdPrintOrder/createOrder`),
            method: 'post',
            data: this.$http.adornData(this.dataForm)
          }).then(({ data }) => {
            this.orderCreateLoading = false;
            if(data.status === "success"){
              this.$message({
                message: "下单成功",
                type: 'success',
                duration: 500,
                onClose: () => {
                  this.visible = false

                }
              })
            }else{
              this.$message({
                message: data.msg,
                type: 'error',
                duration: 500,
                onClose: () => {
                  this.visible = false
                }
              })
            }
          }).catch(() => {
            this.visible = false
          })
        }
      })
    },
    handlePrintChannelChange(val){
      let tempProdTypeList = [];
      tempProdTypeList = this.dataList.filter(item =>{
          return item.printChannel === val
        });
       let temp = [];
       this.prodTypeList = tempProdTypeList.filter(item => {
         if(temp.indexOf(item.prodType) == -1){
           temp.push(item.prodType);
           return item;
         }
       });
    },
    handleProdTypeChange(val){
      this.thirdSkuIdList = this.dataList.filter(item =>{
        return item.printChannel === this.dataForm.printChannel && item.prodType === val;
      });
    }
  }
}
</script>
<style scoped>
.prods-select-body {
  height: auto;
  overflow: auto;
  border-top: 1px solid #eeeeee;
  border-right: 1px solid #eeeeee;
  border-bottom: 1px solid #eeeeee;
}
</style>
