<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="marqueeList"
      :row-key="record => record.id"
      :pagination="false"
    >
      <template
        slot="periods"
        slot-scope="text, record, index"
      >
        <div
          v-for="(time, index) in record.periods"
          :key="index"
        >
          {{ time.start }} - {{ time.end }}
        </div>
      </template>
    </a-table>
  </a-modal>
</template>
<script>
import { getVersionDetail } from '@/api/marquee'
const columns = [
  {
    width: 100,
    title: '名称',
    dataIndex: 'name',
    key: 'name'
  },
  {
    title: '内容',
    dataIndex: 'content',
    key: 'content'
  },
  {
    width: 120,
    title: '开始日期',
    dataIndex: 'start',
    key: 'start'
  },
  {
    width: 120,
    title: '结束日期',
    dataIndex: 'end',
    key: 'end'
  },
  {
    width: 100,
    title: '时间',
    dataIndex: 'periods',
    key: 'periods',
    scopedSlots: { customRender: 'periods' }
  },
  {
    width: 70,
    title: '速度',
    dataIndex: 'speed',
    key: 'speed'
  },
  {
    width: 100,
    title: '每次重复',
    dataIndex: 'count_per_time',
    key: 'count_per_time'
  }
]
export default {
  props: {
    versionId: {
      type: Number,
      default: 0
    },
    value: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      columns,
      versionInfo: {},
      marqueeList: [],
      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.marqueeList = JSON.parse(res.extraInfo.content).marquees
          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>
