<template>
  <div >
    <Modal id="studio_update_modal" v-model="showMd" :title="title" :footer-hide="true" class-name="vertical-center-modal" :width="500">
      <div class="studio_update">
        <Form ref="formSubmit" :model="formSubmit" :rules="formSubmitRule" :label-width="120" class="add-adminguild-form">
          <FormItem  label="绑定平台" prop="platform">
            <Select v-model="platform" multiple placeholder="选择绑定平台" class="wid_347 fl zd1" filterable>
              <Option v-for="(item,index) in platformList" :value="item.id.toString()" :key="index" >{{item.name}}</Option>
            </Select>
          </FormItem>
          <FormItem class="form_btn">
            <Button type="primary" @click="formConfirmClick">保存</Button>
            <Button class="mar_L_15 return_btn" @click="formCancelClick">取消</Button>
          </FormItem>
        </Form>
      </div>
    </Modal>
  </div>
</template>
<script>
export default {
  name: "studio_update",
  props: {
    show: Boolean,
    value:Number,
    name: String,
  },
  data() {
    return {
      title: '',
      formSubmit: {
        id: 0,
        platform_ids: ''
      },
      formSubmitRule: {
        platform_ids: [
          {
            type: 'array',
            required: true,
            message: "请选择绑定平台",
            trigger: "change"
          }
        ]
      },
      platformList: [],
      platform: []
    };
  },
  computed: {
    showMd: {
      get(n) {
        this.title = '公会【' + this.name + '】绑定平台'
        if(this.show){
          this.getData()
          if (!this.formSubmit.id) { 
            this.formSubmit.id = this.value
            this.platform = []
          } else if (this.formSubmit.id !== this.value) {
            this.formSubmit.id = this.value
            this.platform = []
          }
        }
        return this.show;
      },
      set(val) {
        this.$emit("update:show", val);
      }
    }
  },
  watch: {
    platform: function(n) {
      this.formSubmit.platform_ids = n.join(',')
    }
  },
  methods: {
    getData () {
      this.$api.getPlatformSelectList().then(data => {
        if (data.code == 200) {
          this.platformList = data.data
        }
      })
    },
    formConfirmClick () {
      this.$api.getStudioChannelBind(this.formSubmit)
        .then(response => {
          if (response.code == 200) {
            this.$Message.success(response.msg)
            this.$emit("studio-bind")
          } else {
            this.$Message.error(response.msg)
          }
        })
    },
    formCancelClick () {
      this.showMd = false
    }
  },
  created() {},
};
</script>
<style scoped>
.studio_update {
  padding: 20px 15px;
}
</style>


