<template>
  <a-modal
    :visible="value"
    title="编辑广告位"
    @ok="handleOk"
    width="60%"
    @cancel="handleCancel"
  >
    <a-spin :spinning="loading">
      <a-form
        :form="form"
        v-if="formData"
      >
        <a-form-item
          v-bind="formItemLayout"
          label="名称"
        >
          {{ formData.name }}
        </a-form-item>
        <a-form-item
          v-bind="formItemLayout"
          label="类型"
        >
          {{ formData.type==='WX'?'微信':'终端' }}
        </a-form-item>
        <a-form-item
          v-bind="formItemLayout"
          label="描述"
        >
          <a-input
            v-decorator="[
              'description',
              {
                initialValue:formData.description,
                rules: [{ required: true, message: '请输入' }]
              }
            ]"
          ></a-input>
        </a-form-item>
        <a-form-item
          v-bind="formItemLayout"
          label="广告"
        >
          <a-select
            mode="multiple"
            placeholder="请选择"
            v-decorator="[
              'advs',
              {
                initialValue:formData.advs,
                rules: [{ required: true, message: '请选择' }]
              }
            ]"
          >
            <a-select-option
              v-for="(item, index) in advList"
              :key="index"
              :value="item.id"
            >
              {{ item.name }}
            </a-select-option>
          </a-select>
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import { editAdvPosition, getAdvPositionDetail } from '@/api/adv'
import advMixins from './advPosMixins'
export default {
  mixins: [advMixins],
  props: {
    advId: {
      type: Number,
      default: 0
    }
  },
  watch: {
    value (val) {
      if (!val || !this.advId) return
      this.loading = true
      getAdvPositionDetail(this.advId).then(res => {
        res.extraInfo.advs = res.extraInfo.schedule.advs.map(item => item.id)
        this.formData = res.extraInfo
      }).finally(() => {
        this.loading = false
      })
    }
  },
  methods: {
    handleOk (e) {
      e.preventDefault()
      this.form.validateFieldsAndScroll((err, values) => {
        if (!err) {
          console.log(this.formData)
          console.log(values)
          values.schedule = {
            type: 'SEQUENCE',
            advs: values.advs
          }
          editAdvPosition(this.advId, values).then(res => {
            this.$message.success('修改成功')
            this.$emit('update')
            this.handleCancel()
          })
        }
      })
    }
  }
}
</script>

<style scoped>
.ant-form-item{
  width: 50%; display: inline-block;
}
.color-block {
  display: flex;
}
.color-label {
  margin-left: 15px;
  font-size: 16px;
  font-weight: bold;
}
.time-block {
  display: flex;
  align-items: center;
}
</style>
