<template>
  <a-modal
    :visible="value"
    title="发布广告"
    width="60%"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-form :form="form">
      <a-form-item
        v-bind="formItemLayout"
        label="版本名称"
      >
        <span>{{ versionInfo.name }}</span>
      </a-form-item>
      <a-form-item
        v-bind="formItemLayout"
        label="终端"
      >
        <a-tree-select
          style="width: 300px"
          :tree-data="treeData"
          tree-checkable
          tree-default-expand-all
          search-placeholder="请选择"
          v-decorator="[
            'terms',
            {
              rules: [{ required: true, message: '请选择' }]
            }
          ]"
        />
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script>
import { publishAdv } from '@/api/adv'
export default {
  props: {
    versionInfo: {
      type: Object,
      default: () => {}
    },
    termList: {
      type: Array,
      default: () => []
    },
    value: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      form: this.$form.createForm(this),
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 6 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 18 }
        }
      },
      treeData: []
    }
  },
  watch: {
    value (val) {
      if (val) {
        this.treeData = [{
          title: '全部',
          value: -1,
          key: -1,
          children: this.termList.map(item => {
            return {
              title: item.nickname,
              value: item.id,
              key: item.id
            }
          })
        }]
      }
    }
  },
  methods: {
    handleOk (e) {
      e.preventDefault()
      this.form.validateFieldsAndScroll((err, values) => {
        if (!err) {
          publishAdv(this.versionInfo.id, values.terms).then(res => {
            this.$message.success('发布成功')
            this.handleCancel()
          })
        }
      })
    },
    handleCancel () {
      this.$emit('input', false)
      this.form.resetFields()
    }
  }
}
</script>
<style scoped>
.ant-form-item{
  width: 50%; display: inline-block;
}
</style>
