<template>
  <div>
    <p class=" text-2xl font-bold mb-5">直播管理</p>
    <a-button class="float-right mb-3" type="primary" @click="addLive">添加开播员</a-button>
    <!-- 资讯列表 -->
    <a-table
      :columns="columns"
      :data-source="list"
      :loading="loading"
      rowKey="columns"
      style=" text-align: center; margin-top:40px;"
      bordered>
      <span slot="level" slot-scope="text,record">
        {{ record.level | formatLevel }}
      </span>
      <span slot="liveTime" slot-scope="text,record">
        {{ record.attr | formatLiveTime }}
      </span>
      <!-- 操作 -->
      <span slot="action" slot-scope="text,record">
        <a @click="editLive(record)">
            编辑
        </a>
        <a-divider v-if="record.attr.day_type === 0" type="vertical" />
        <a v-if="record.attr.day_type === 0"
          @click="delLive(record)">
          删除
        </a>
      </span>
    </a-table>
    <!-- 操作Modal -->
    <a-modal
      title="删除直播"
      v-model="show"
      :centered="true"
      :closable="false"
      @ok="handleOk"
      @cancle="show = false"
    >
      <p class="text-center">确认删除该条直播信息？</p>
    </a-modal>
    <a-modal v-model="showModal" :title="title" :centered="true" width="60%" footer="">
      <x-modal :type="type" :show="showModal" :info="info" @updated="submit" />
    </a-modal>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import timerange from '@/components//TimePicker/index.vue'
import xModal from '@/views/Root/Live/components/index.vue'
import { columns } from '@/const/columns/liveBroadcast'
import Live from '@/service/LiveService/index'
import { message } from 'ant-design-vue'
import Filter from '@/filter/index'

const live = new Live()

export default Vue.extend({
  components:{
    timerange,
    xModal
  },
  filters: {
    format(value: string) {
      return Filter.formatDate(value)
    },
    formatLevel(value: string) {
      return Filter.filterLevel(value)
    },
    formatLiveTime(value: {day_type: number, time_section: string}|undefined) {
      if (!value) return
      if (value?.day_type === 0) {
        return '00:00-00:00'
      }
      return Filter.filterLiveTime(value?.day_type) + ' ' + value?.time_section
    }
  },
  computed: {
    columns() {
      return columns
    }
  },
  props:{

  },
  data(){
    return{
      loading: false,
      list: [] as any,
      // pagination: {
      //   current: 1,
      //   defaultPageSize: 10,
      //   total: 0
      // },
      // modal
      show: false,
      uuid: '',

      showModal: false,
      title: '新增直播员',
      type: 'add',
      info: {} as any
    }
  },
  created() {
    this.getList()
  },
  methods:{
    getList() {
      this.loading = true
      live.liveList().then((res: any) => {
        this.list = res.data
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    // tableChange(e: any) {
    //   this.pagination.current = e.current
    //   this.getList()
    // },
    addLive() {
      this.showModal = true
      this.title = '新增直播员'
      this.type = 'add'
    },
    editLive(item: any) {
      this.showModal = true
      this.title = '编辑直播员'
      this.type = 'edit'
      this.info = item
    },
    submit(v: any) {
      this.showModal = false
      if (Object.keys(v).length === 0) {
        return
      }
      console.log(v, 'v')
      live.updateLive(v).then((res: any) => {
        if (res.code === 200) {
          if (this.type === 'add') {
            message.success('新增成功')
          } else {
            message.success('更新成功')
          }
          this.getList()
        }
      })
    },
    delLive(record: {uuid: string}) {
      this.show = true
      this.uuid = record.uuid
    },
    handleOk() {
      console.log('ok')
      live.delLive(this.uuid).then(res => {
        if (res.code === 200) {
          message.success('删除成功')
          this.getList()
        }
      })
      this.show = false
    }
  },
  watch: {
    showModal(n) {
      if (!n) {
        this.info = {}
      }
    }
  }
})
</script>
