<!-- 选择平台 -->
<template>
  <j-modal :visible="visible" title="选择平台" width="400px" @ok="onOk" @cancel="close">

    <a-spin :spinning="confirmLoading">
      <j-form-container :disabled="formDisabled">
        <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
          <a-row>
            <a-col :span="24">
              <a-form-model-item label="选择平台" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="platform">
                <a-select v-model="model.platform" placeholder="请选择平台" :options="platformList"
                          :filter-option="filterOption"
                          allowClear />
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </j-form-container>
    </a-spin>
  </j-modal>
</template>

<script>
import { getDictItemsFromCache } from '@api/api'

export default {
  name: 'SelectPlatformModal',
  data: () => ({
    visible: false,
    formDisabled: false,
    confirmLoading: false,
    model: {
      platform:''
    },
    labelCol: {
      xs: { span: 24 },
      sm: { span: 5 }
    },
    platformList: [],
    wrapperCol: {
      xs: { span: 24 },
      sm: { span: 16 }
    },
    validatorRules: {
      platform: [
        { required: true, message: '请选择平台' }
      ]
    },
    type:null
  }),
  mounted() {
    this.getDictCode()
    },
  methods: {
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      )
    },
    open(type) {
      this.type = type
      this.visible = true
    },
    close() {
      // this.model.platform = ''
      this.$refs.form.resetFields()
      this.visible = false
      this.confirmLoading = false
    },
    onOk() {
      this.$emit('changePlatform',this.model.platform,this.type )
      if (this.model.platform){
        this.close()
      }
    },
    getDictCode() {
      const dictList = getDictItemsFromCache('platform_type')
      this.platformList = dictList.map(it => ({ ...it, value: it.value }))
      this.model.platform = this.platformList[0].value
      this.$emit('changePlatform',this.model.platform,this.type)
    }
  }
}
</script>

<style scoped>

</style>