<template>
  <div>
    <a-card title="广告列表">
      <a-button
        slot="extra"
        size="small"
        type="primary"
        icon="plus"
        @click="addVisible=true"
      >
        新建广告
      </a-button>
      <a-button
        slot="extra"
        size="small"
        type="primary"
        style="background: #F77E7E; border-color: #F77E7E;"
        @click="versionPreview"
      >
        发布
      </a-button>
      <a-tabs
        default-active-key="-1"
        @change="handleTabChange"
      >
        <a-tab-pane
          tab="全部"
          key="-1"
        >
          <div>
            <a-radio-group
              v-model="advStatus"
              @change="getList"
              default-value="active,inactive"
              button-style="solid"
            >
              <a-radio-button value="active,inactive">
                全部
              </a-radio-button>
              <a-radio-button value="active">
                已激活
              </a-radio-button>
              <a-radio-button value="inactive">
                已禁用
              </a-radio-button>
            </a-radio-group>
          </div>
          <br>
          <a-spin :spinning="loading">
            <a-table
              :columns="columns"
              :data-source="list"
              :pagination="pagination"
              :row-key="record => record.id"
              @change="changePage"
              :scroll="{x: 1200}"
            >
              <template
                slot="type"
                slot-scope="text, record"
              >
                <a-icon
                  :type="record.type.indexOf('video')>-1?'play-circle':'picture'"
                />
                {{ record.type | fileType }}
              </template>

              <template
                slot="duration"
                slot-scope="text, record"
              >
                {{ record.duration }} 秒
              </template>

              <template
                slot="size"
                slot-scope="text, record"
              >
                {{ Math.round(record.size / 1024) }} KB
              </template>

              <template
                slot="status"
                slot-scope="text, record"
              >
                <span :style="{color: record.status==='active'?'#1BAAAC':'#81A1A2'}">
                  {{ record.status==='active'?'已激活':'已禁用' }}
                </span>
              &nbsp;
                <a-button
                  size="small"
                  :type="record.status==='active'?'danger':'primary'"
                  @click="handleActive(record)"
                >
                  {{ record.status==='active'?'禁用':'激活' }}
                </a-button>
              </template>
              <template
                slot="operation"
                slot-scope="text, record"
              >
                <a-button
                  size="small"
                  type="primary"
                  @click="handleEdit(record)"
                >
                  编辑
                </a-button>
                <a-popconfirm
                  title="确认删除？"
                  @confirm="handleDelete(record)"
                  ok-text="是"
                  cancel-text="否"
                >
                  <a-button
                    size="small"
                    type="danger"
                  >
                    删除
                  </a-button>
                </a-popconfirm>
              </template>
            </a-table>
          </a-spin>
        </a-tab-pane>
        <a-tab-pane
          v-for="(pos, index) in posList"
          :key="index.toString()"
          :tab="pos.name"
        >
          <a-form layout="inline">
            <a-form-item
              label="广告列表"
            >
              <a-select
                mode="multiple"
                :default-value="pos.advIds"
                placeholder="请选择"
                @change="handleSelectChange($event, pos)"
                :max-tag-count="1"
                style="width: 200px"
              >
                <a-select-option
                  v-for="item in list.filter(adv => adv.status === 'active')"
                  :key="item.id"
                  :value="item.id"
                >
                  {{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item>
              <a-button
                type="primary"
                @click="saveAdvSelect(pos, index)"
              >
                保存
              </a-button>
            </a-form-item>
          </a-form>
          <br>
          <a-spin :spinning="posLoading">
            <a-table
              :columns="columns.slice(0, columns.length - 1)"
              :data-source="pos.advs"
              :row-key="record => record.id"
              :pagination="false"
              :scroll="{x: 1200}"
            >
              <template
                slot="type"
                slot-scope="text, record"
              >
                <a-icon
                  :type="record.type.indexOf('video')>-1?'play-circle':'picture'"
                />
                {{ record.type | fileType }}
              </template>

              <template
                slot="duration"
                slot-scope="text, record"
              >
                {{ record.duration }} 秒
              </template>

              <template
                slot="size"
                slot-scope="text, record"
              >
                {{ Math.round(record.size / 1024) }} KB
              </template>
            </a-table>
          </a-spin>
        </a-tab-pane>
      </a-tabs>
    </a-card>
    <AddModal
      v-model="addVisible"
      @update="getList"
    ></AddModal>
    <EditModal
      v-model="editVisible"
      :adv-id="advId"
      @update="getList"
    ></EditModal>
    <AddVersion
      v-model="addVersionVisible"
      :version-info="versionInfo"
    ></AddVersion>
  </div>
</template>

<script>
import { getList, getAdvPosition, active, deleteItem, getAdvPositionDetail, editAdvPosition, versionPreview } from '@/api/adv'
import AddModal from './advList/AddModal'
import EditModal from './advList/EditModal'
import AddVersion from './advList/AddVersion'
const columns = [
  {
    width: 120,
    title: '名称',
    dataIndex: 'name',
    key: 'name'
  },
  {
    title: '内容',
    dataIndex: 'content',
    key: 'content'
  },
  {
    width: 100,
    title: '大小',
    dataIndex: 'size',
    key: 'size',
    scopedSlots: { customRender: 'size' }
  },
  {
    width: 110,
    title: '类型',
    dataIndex: 'type',
    key: 'type',
    scopedSlots: { customRender: 'type' }
  },
  {
    width: 80,
    title: '时长',
    dataIndex: 'duration',
    key: 'duration',
    scopedSlots: { customRender: 'duration' }
  },
  {
    width: 160,
    title: '创建时间',
    dataIndex: 'create_time',
    key: 'create_time'
  },
  {
    width: 160,
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    fixed: 'right',
    scopedSlots: { customRender: 'status' }
  },
  {
    width: 160,
    title: '操作',
    dataIndex: 'operation',
    key: 'operation',
    fixed: 'right',
    scopedSlots: { customRender: 'operation' }
  }
]
export default {
  components: {
    AddModal,
    EditModal,
    AddVersion
  },
  async created () {
    await this.getPosList()
    this.getList()
  },
  data () {
    return {
      columns,
      loading: false,
      posLoading: false,
      advStatus: 'active,inactive',
      list: [],
      pagination: {
        current: 1,
        pageSize: 10,
        total: 0
      },
      addVisible: false,
      editVisible: false,
      advId: 0,
      posList: [],
      versionInfo: {},
      addVersionVisible: false
    }
  },
  methods: {
    changePage (page) {
      this.pagination = { ...page }
      this.getList()
    },
    getList () {
      const status = this.advStatus.split(',')
      const params = {
        pageNum: this.pagination.current,
        status: status
      }
      this.loading = true
      getList(params).then(res => {
        this.pagination.total = res.extraInfo.total
        this.list = res.extraInfo.list
        this.loading = false
      })
    },
    getPosList () {
      const params = {
        pageNum: 0,
        pageSize: 0,
        status: ['active']
      }
      return getAdvPosition(params).then(res => {
        res.extraInfo.list.forEach(pos => {
          pos.advs = []
          pos.advIds = []
        })
        this.posList = res.extraInfo.list
      })
    },
    handleActive (value) {
      active(value.id, value.status !== 'active').then(res => {
        this.$message.success('操作成功')
        this.getList()
      })
    },
    handleDelete (item) {
      deleteItem(item.id).then(res => {
        this.$message.success('操作成功')
        this.getList()
      })
    },
    handleEdit (item) {
      this.advId = item.id
      this.editVisible = true
    },
    async handleTabChange (key) {
      const index = +key
      if (index !== -1) {
        const item = this.posList[index]
        item.advs = await this.getPosDetail(item.id)
        item.advIds = item.advs.map(adv => adv.id)
      }
    },
    getPosDetail (id) {
      this.posLoading = true
      return getAdvPositionDetail(id).then(res => {
        this.posLoading = false
        return res.extraInfo.schedule.advs.filter(adv => adv.status === 'active')
      })
    },
    handleSelectChange (value, pos) {
      pos.advIds = value
      console.log(value)
      console.log(pos)
    },
    saveAdvSelect (pos, index) {
      const params = {
        schedule: {
          type: 'SEQUENCE',
          advs: pos.advIds
        }
      }
      editAdvPosition(pos.id, params).then(res => {
        this.$message.success('保存成功')
        console.log(index)
        this.handleTabChange(index)
      })
    },
    versionPreview () {
      versionPreview().then(res => {
        this.versionInfo = res.extraInfo
        this.addVersionVisible = true
      })
    }
  }
}
</script>

<style scoped>

</style>
