<template>
  <el-dialog :visible.sync="showFlag" width="800px" center title="按期数导出收货信息">
    <el-form label-width="150px">
      <el-form-item label="期数">
        <el-cascader
          :options="goodsList"
          :props="{value:'id',label:'name'}"
          @active-item-change="handleItemChange"
          @change="changePeriods"
          v-model="selectedGoods"
        ></el-cascader>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="cancelClick">取 消</el-button>
      <el-button type="primary" @click="onAdd">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { getPeriodsApi, exportReceiveInfoApi } from "../../service/api";
export default {
  name: "receiveInfoDialog",
  props: ["showFlag", "goodsList", "cancelEvent", "sureEvent"],
  data() {
    return {
      selectedGoods: []
    };
  },
  methods: {
    cancelClick() {
      this.cancelEvent();
    },
    onAdd() {
      if (this.periods && this.periods.id) {
        this.exportReceiveInfo().then(() => {
          this.sureEvent();
        });
      } else {
        Vue.prototype.$msgbox({
          message: "请选择期数",
          type: "warning"
        });
      }
    },
    exportReceiveInfo() {
      return exportReceiveInfoApi(this.periods.id);
    },
    changePeriods(data) {
      if (data.length > 1) {
        this.goods_id = data[0];
        let nowGoods = this.goodsList.find(i => {
          return i.id === data[0];
        });
        this.periods = nowGoods.children.find(i => {
          return i.id === data[1];
        });
      }
    },
    handleItemChange(val) {
      getPeriodsApi({ goods_id: val[0], limit: 100 }).then(res => {
        res.list.forEach(i => {
          i.name = i.title;
        });
        this.goodsList.find(i => {
          return i.id === val[0];
        }).children = res.list;
      });
    }
  }
};
</script>