<template>

  <el-dialog class="originIndex-dialog" title="分配批次" v-loading="fullscreenLoading" :visible.sync="dialogVisible"
             :before-close="handleClose">
    <div>
      <el-form :model="OriginGroupForm" ref="form">
        <el-form-item label="批次号:" prop="originIndex">
          <el-col :span="18">{{ originIndex }}</el-col>
        </el-form-item>
        <el-form-item label="选择分组">
          <el-select v-model="bizGroup" placeholder="请选择">
            <el-col :span="18">
              <el-option v-for="item in bizGroups" :label="item.name" :value="item.value" :key="item.name">
              </el-option>
            </el-col>
          </el-select>
        </el-form-item>
        <el-form-item label="分配描述" prop="groupDesc">
          <el-col :span="18">
            <el-input type="textarea" v-model="desc"></el-input>
          </el-col>
        </el-form-item>
      </el-form>
    </div>
    <div slot="footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button v-if="$permissionUtils.btnPermission('allotGroup')" type="primary" @click="submitClick"
      >确认分配
      </el-button>
    </div>
    <br/>
    <h2>分配记录</h2>
    <div class="system-list">
      <el-table :data="records" stripe style="width: 100%">
        <el-table-column type="index" width="80"></el-table-column>
        <el-table-column prop="originIndex" sortable label="客户批次号"></el-table-column>
        <el-table-column prop="bizGroup" sortable label="销售组"></el-table-column>
        <el-table-column prop="groupDesc" sortable label="分配描述"></el-table-column>
        <el-table-column prop="creator" sortable label="创建人"></el-table-column>
        <el-table-column prop="gmtCreated" :formatter="transDateFormat" sortable
                         label="创建日期"></el-table-column>
      </el-table>
    </div>
  </el-dialog>
</template>

<script type="text/ecmascript-6">
import * as moment from "moment";

export default {
  name: "DistributionBatchDialog",

  props: {
    dialogVisible: {
      type: Boolean,
      required: true
    },
    originIndex: {
      type: String,
      required: true
    },
  },
  data() {
    return {
      fullscreenLoading: false,
      bizGroup: '',
      desc: '',
      OriginGroupForm: {
        originIndex: '',
        bizGroup: '',
        desc: ''
      },

      record: "",
      records: [],

      ui: {
        submitLoading: false,
      },
      visible: this.$props.dialogVisible,
      bizGroups: [
        {name: '营销一组', value: 'YX01'},
        {name: '营销二组', value: 'YX02'},
        {name: '营销三组', value: 'YX03'},
        {name: '营销四组', value: 'YX04'},
        {name: '昆明营销一组', value: 'KMYX01'},
        {name: '昆明营销二组', value: 'KMYX02'},
        {name: '昆明营销三组', value: 'KMYX03'},
        {name: '断约营销一组', value: 'R001'},
        {name: '断约营销二组', value: 'R002'},
      ],

    }
  },
  mounted() {
    this.loadQueryData();
  },
  methods: {
    loadQueryData() {
      this.$$get(`/originIndex/getAllotList/${this.$props.originIndex}`)
        .then(res => {
          if (res.data.code < 1)
            throw res.data.msg;
          this.records = res.data.data;
        })
        .catch(err => this.$$msg.err(err))
    },
    submitClick() {
      //显示loading 或者 进度图
      this.fullscreenLoading = true;
      this.$$post('/originIndex/allotGroup', {
        originIndex: this.originIndex,
        bizGroup: this.bizGroup,
        desc: this.desc,
      }).then(res => {
        setTimeout(() => {
          this.fullscreenLoading = false;
        });
        alert(res.data.data.result)
        //成功之后，关闭loading或者，把进度条隐藏
        if (res.data.code < 1) {
          this.$message.error(res.data.msg);
          return
        }
        // this.$message({message: res.data.data.result, type: 'err'});
        setTimeout(function () {
          this.visible = false;
          window.location.reload();
        }, 500)
      }).catch(err => {
        //失败之后，关闭loading或者，把进度条隐藏
        setTimeout(() => {
          this.fullscreenLoading = false;
        });
        this.$$msg.err(err)
      })
    },

    /** 关闭处理 */
    handleClose() {
      this.visible = false;
      setTimeout(() => {
        this.$emit('update:dialogVisible', false)
      }, 300);
    },
  },
}
</script>
<style lang="stylus" rel="stylesheet/stylus">
.originIndex-dialog {
  .input {
    width: 60%;
    margin: auto;
  }
}
</style>

