<template>
  <el-dialog
    title="生成打印PDF"
    :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="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>
    <span slot="footer">
      <el-button type="info" @click="visible = false">{{$t("crud.filter.cancelBtn")}}</el-button>
      <el-button :loading="generatePdfLoading" 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: [],
      generatePdfLoading: false,
      resourcesUrl: process.env.VUE_APP_RESOURCES_URL,
    }
  },
  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);
      })
    },
    /**
     *  生成作品打印PDF
     */
    generatePrintPdf () {

    },
    // 确定事件
    dataFormSubmit () {
      this.generatePdfLoading = true;
      this.$http({
        url: this.$http.adornUrl('/order/thirdPrintOrder/generatePrintPdf'),
        method: 'post',
        data: this.$http.adornData(this.dataForm),
      }).then(({ data }) => {
        if(data.status === "success"){
          this.generatePdfLoading = false;
          window.open(this.resourcesUrl + data.result.worksUrl);
        }else{
          this.generatePdfLoading = false;
          this.$message({
            message: data.msg,
            type: 'error'
          })
        }
      })
    },
    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>
