<template>
  <el-dialog
    :title="dialogObj.title"
    center
    append-to-body
    :visible.sync="dialogObj.show"
    :close-on-click-modal="false">
    <div v-if="dialogObj.gift_deliver" class="dialog-content">
      <div class="dialog-text">物流已发货，不能修改赠品信息！</div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogObj.show = false">知道了</el-button>
      </span>
    </div>
    <div v-else class="dialog-content">
      <div>当前商品：{{dialogObj.goods_name}}</div>
      <div>
        <el-form ref="form" :model="form" :rules="rules">
          <el-form-item label="选择赠品" required prop="selectedGiftList">
            <el-select multiple v-model="form.selectedGiftList" placeholder="全部">
              <el-option v-for="data in selectedGiftList"
                         :key="data.id"
                         :label="`【${data.id}】${data.name}`"
                         :value="data.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogObj.show = false">取 消</el-button>
        <el-button type="primary" @click="sub" :disabled="selectedGiftList.length == 0">确 定</el-button>
      </span>
    </div>
  </el-dialog>
</template>

<script>
    import {relationGiftApi, orderSetApi} from "../../service/api";

    export default {
        name: "giftDeliverDialog",
        props: [
            'dialogObj'
        ],
        data() {
            return {
                form: {
                    selectedGiftList: []
                },
                selectedGiftList: [],
                rules: {
                    selectedGiftList: [
                        {required: true, message: '请选择赠品', trigger: 'change'}
                    ]
                }
            }
        },
        methods: {
            initDialog() {
                relationGiftApi({goods_id: this.dialogObj.goods_id}).then(res => {
                    this.selectedGiftList = res.list;
                });
                relationGiftApi({out_trade_no: this.dialogObj.out_trade_no}).then(res => {
                    let giftListArr = [];
                    res.list.forEach(i => {
                        giftListArr.push(i.id);
                    });
                    this.form.selectedGiftList = giftListArr;
                });
            },
            sub() {
                this.$refs['form'].validate((valid) => {
                    if (valid) {
                        let json = {
                            gift_ids: this.form.selectedGiftList.join(','),
                            goods_id: this.dialogObj.goods_id,
                            user_id: this.dialogObj.user_id,
                            user_address_id: this.dialogObj.user_address_id,
                            out_trade_no: this.dialogObj.out_trade_no
                        };
                        orderSetApi(json).then(res => {
                            this.$message({
                                type: 'success',
                                message: '修改成功!'
                            });
                            this.$emit("reflash");
                            this.dialogObj.show = false;
                        });
                    } else {
                        return false;
                    }
                });
            },
        },
        watch: {
            'dialogObj.show'(val) {
                if (val) {
                    this.initDialog();
                }
            }
        },
    }
</script>

<style scoped>
  .dialog-content {
    text-align: center;
  }

  .dialog-content div {
    margin-bottom: 20px;
    text-align: left;
  }

  .dialog-content .dialog-text {
    text-align: center;
  }
</style>
