<template>
  <a-card :bordered="false">
    <div class="table-operator">
      <v-select v-show="false" code="BUSINESS_EXPERIRENCE_CONTENT_CLS" ref="contentCls" allowClear placeholder="请选择分类" ></v-select>
      <a-button type="primary" icon="plus" @click="openModal">新建</a-button>
    </div>
    <s-table
      ref="table"
      size="default"
      rowKey="id"
      :columns="columns"
      :data="loadData"
      bordered
    >
      <span slot="status" slot-scope="text, record">
        <a-switch checkedChildren="启用" unCheckedChildren="禁用" v-model="record.status==1 ? true : false" @change="changeFlagHandle(text, record)"/>
      </span>
      <span slot="contentCls" slot-scope="text, record">
        {{ $refs.contentCls.getNameByCode(text) }}
      </span>
      <span slot="action" slot-scope="text, record">
        <template>
          <a-icon type="eye" :style="{ fontSize: '20px', color: '#e29e14', padding: '0 10px' }" @click="handleDetail(record)"/>
          <a-icon type="edit" v-if="record.status==='0'" style="font-size: 20px;color: #1890FF;padding: 0 10px;" @click="handleEdit(record)"/>
          <a-icon type="delete" v-if="record.status==='0'" style="font-size: 20px;color: red;padding: 0 10px;" @click="delect(record)"/>
          <!-- <a class="action-button editBtns" v-if="!record.releaseStatus" @click="handleEdit(record)">编辑</a> -->
          <!-- <a class="action-button delBtns" v-if="!record.releaseStatus"  @click="delect(record)">删除</a> -->
        </template>
      </span>
    </s-table>
  </a-card>
</template>

<script>
import { STable, VSelect } from '@/components'
import { getSettingList, changeStatus, deleteItem, searcAdhDetail } from '@/api/videoSetting.js'
export default {
  name: 'VideoSetting',
  components: {
    STable, VSelect
  },
  data () {
    return {
      // 表头
      columns: [
        {
          title: '序号',
          dataIndex: 'no',
          width: '40',
          align: 'center'
        },
        {
          title: '名称',
          dataIndex: 'title',
          width: '100',
          align: 'center'
        },
        {
          title: '分类',
          dataIndex: 'contentCls',
          width: '100',
          align: 'center',
          scopedSlots: { customRender: 'contentCls' }
        },
        {
          title: '状态',
          dataIndex: 'status',
          width: '100',
          align: 'center',
          scopedSlots: { customRender: 'status' }
        },
        {
          title: '排序',
          dataIndex: 'sort',
          width: '100',
          align: 'center'
          // scopedSlots: { customRender: 'status' },
        },
        {
          title: '操作',
          width: '100',
          align: 'center',
          scopedSlots: { customRender: 'action' }
        }
      ],
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        return getSettingList(Object.assign(parameter, { title: '' }))
          .then(res => {
            const no = (res.data.pageNo - 1) * res.data.pageSize
            for (let i = 0; i < res.data.list.length; i++) {
              const _item = res.data.list[i]
              _item.no = no + i + 1
              _item.releaseStatus = _item.releaseStatus + '' === 'FB'
            }
            return res.data
          })
      }
    }
  },
  methods: {
    // 新建
    openModal () {
      this.$router.push({ name: 'videoSetting_add' })
      // this.$router.push({name: 'addVideoSetting'})
    },
    //  修改
    handleEdit (row) {
      this.$router.push({ name: 'videoSetting_edit', query: { id: row.id } })
    },
    // 删除
    delect (row) {
      const _this = this
      this.$confirm({
        title: '警告',
        content: '删除后无法恢复，确认删除?',
        okText: '确定',
        cancelText: '取消',
        onOk () {
          deleteItem({
            id: row.id
          }).then(res => {
            if (res.status == 200) {
              _this.$message.success('删除成功')
              _this.$refs.table.refresh()
            }
          })
        }
      })
    },
    // 修改状态
    changeFlagHandle (text, record) {
      console.log(record, 'record')
      const _data = {
        id: record.id,
        flag: record.status == 1 ? '0' : '1'
      }
      changeStatus(_data).then(res => {
        if (res.status == '200') {
          this.$message.success('修改成功')
          this.$refs.table.refresh()
        } else {
          record.status = !record.status
        }
      })
    },
    handleDetail (record) {
      console.log(record)
      this.$router.push({ name: 'videoSetting_detail', query: { id: record.id, relateAdvert: record.relateAdvert } })
    }
  }
}
</script>

<style>
  .action-button{
   line-height: 40px;
   white-space: nowrap;
    padding: 5px 10px;
    background-color: #1890ff;
    border-radius: 4px;
    color: #fff;
    margin-right: 5px;
    &:hover{
      background-color: #1db8ff;
      color: #fff;
    }
  }
  .delBtns{
    background-color: #FF0000;
    &:hover{
      background-color: #b91818;
      color: #fff;
    }
  }
</style>
