<template>
  <a-modal
    :visible="value"
    title="版本详情"
    width="60%"
    @ok="handleCancel"
    @cancel="handleCancel"
  >
    <a-form>
      <a-form-item
        v-bind="formItemLayout"
        label="名称"
      >
        <span>{{ versionInfo.name }}</span>
      </a-form-item>
      <a-form-item
        v-bind="formItemLayout"
        label="描述"
      >
        <span>{{ versionInfo.description }}</span>
      </a-form-item>
      <a-form-item
        v-bind="formItemLayout"
        label="大小"
      >
        <span>{{ versionInfo.size }}</span>
      </a-form-item>
      <a-form-item
        v-bind="formItemLayout"
        label="创建时间"
      >
        <span>{{ versionInfo.create_time }}</span>
      </a-form-item>
    </a-form>
    <a-table
      :columns="columns"
      :data-source="advPosList"
      :row-key="record => record.id"
      :pagination="false"
    >
      <template
        slot="schedule"
        slot-scope="text, record, index"
      >
        <a-tag
          v-for="(item, index) in record.schedule.advs"
          :key="index"
          color="blue"
        >
          {{ item.name }}
        </a-tag>
      </template>
    </a-table>
  </a-modal>
</template>
<script>
import { getVersionDetail } from '@/api/adv'
const columns = [
  {
    width: 100,
    title: '广告位',
    dataIndex: 'name',
    key: 'name'
  },
  {
    title: '描述',
    dataIndex: 'description',
    key: 'description'
  },
  {
    title: '广告',
    dataIndex: 'schedule',
    key: 'schedule',
    scopedSlots: { customRender: 'schedule' }
  }
]
export default {
  props: {
    versionId: {
      type: Number,
      default: 0
    },
    value: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      columns,
      versionInfo: {},
      advPosList: [],
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 6 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 18 }
        }
      }
    }
  },
  watch: {
    value (val) {
      if (val) {
        getVersionDetail(this.versionId).then(res => {
          this.versionInfo = res.extraInfo
          this.advPosList = JSON.parse(res.extraInfo.content).positions
          console.log(this.versionInfo)
          console.log(JSON.parse(res.extraInfo.content))
        })
      }
    }
  },
  methods: {
    handleCancel () {
      this.$emit('input', false)
    }
  }
}
</script>
<style scoped>
.ant-form-item{
  width: 50%; display: inline-block;
}
</style>
