<template>
  <a-card :bordered="false">
    <div class="table-operator">
      <a-button v-hasPermission="'B_openTimeSetting_add'" type="primary" icon="plus" @click="openModal" id="openTimeSetting-add">新增</a-button>
    </div>
    <s-table
      ref="table"
      size="default"
      rowKey="id"
      :columns="columns"
      :data="loadData"
      bordered>
      <!-- 时间段 -->
      <template slot="deliveryTimeRuleItemList" slot-scope="text, record">
        <span>{{ filterData(record.deliveryTimeRuleItemList) }}</span>
      </template>
      <!-- 操作 -->
      <span slot="action" slot-scope="text, record">
        <a-icon
          id="openTimeSetting-edit"
          type="edit"
          title="编辑"
          class="actionBtn icon-blues"
          @click="handleEdit(record)"
          v-hasPermission="'B_openTimeSetting_edit'"/>
        <a-icon
          type="delete"
          title="删除"
          id="openTimeSetting-del"
          class="actionBtn icon-red"
          v-if="$hasPermissions('B_openTimeSetting_del') && !record.isEnable"
          @click="delect(record)" />
        <span v-if="!$hasPermissions('B_openTimeSetting_edit') && (!$hasPermissions('B_openTimeSetting_del') && !record.isEnable)">--</span>
      </span>
    </s-table>
    <!-- 新增/编辑 弹窗 -->
    <add-time-modal :visible="showModal" :id="itemId" @refresh="refreshTable" @close="showModal = false" v-hasPermission="'B_openTimeSetting_add'"></add-time-modal>
  </a-card>
</template>

<script>
import {
  STable,
  VSelect
} from '@/components'
import AddTimeModal from './AddTimeModal.vue'
import { getList, deleteTimeSetting } from '@/api/openTimeSetting.js'
export default {
  name: 'RoleList',
  components: {
    STable,
    VSelect,
    AddTimeModal
  },
  data () {
    return {
      showModal: false, // 是否打开新增时间段弹窗
      itemId: '', // 编辑行id
      // 表头
      columns: [{
        title: '序号',
        dataIndex: 'no',
        width: 60,
        align: 'center'
      },
      {
        title: '创建时间',
        dataIndex: 'createDate',
        width: 150,
        align: 'center'
      },
      {
        title: '投放时间段名称',
        dataIndex: 'name',
        width: 200,
        align: 'center'
      },
	  {
	    title: '投放时间段',
	    dataIndex: 'deliveryTimeRuleItemList',
	    width: 200,
	    align: 'center',
        scopedSlots: {
		  customRender: 'deliveryTimeRuleItemList'
        }
	  },
      {
        title: '操作',
        width: 150,
        align: 'center',
        scopedSlots: {
          customRender: 'action'
        }
      }
      ],
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        console.log(parameter, 'parameter')
        return getList(Object.assign(parameter, this.queryParam)).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
          }
          return res.data
        })
        //     return new Promise((resolve) => {
		  // const data = [
		  //   { no: 1, id: '1', createDate: '2020-10-30 09:14', name: '上下班高峰', time: '8:00-9:00,18:00-20:00' },
		  //   { no: 2, id: '12', createDate: '2020-10-30 09:14', name: '中午', time: '8:00-9:00,18:00-20:00' },
		  //   { no: 3, id: '13', createDate: '2020-10-30 09:14', name: '下午茶', time: '8:00-9:00,18:00-20:00' },
		  //   { no: 4, id: '14', createDate: '2020-10-30 09:14', name: '晚高峰', time: '8:00-9:00,18:00-20:00' },
		  //   { no: 5, id: '15', createDate: '2020-10-30 09:14', name: '早高峰', time: '8:00-9:00,18:00-20:00' },
		  //   { no: 6, id: '16', createDate: '2020-10-30 09:14', name: '深夜', time: '8:00-9:00,18:00-20:00' }
		  // ]
		  // resolve(data)
        //     })
      }
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      // vm.$refs.table.refresh()
    })
  },
  methods: {
    // 刷新列表
    refreshTable () {
      this.$refs.table.refresh(true)
    },
    // 新建
    openModal () {
      this.showModal = true
      this.itemId = ''
    },
    // 时间段数据处理
    filterData (row) {
	  if (row) {
		  let str = ''
		  row.map((item, index) => {
			  const p = item.openTime + '-' + item.closeTime
		    str = str + p + ((index == row.length - 1) ? '' : ',')
		  })
		  return str
	  } else {
		  return '--'
	  }
    },
    // 删除
    delect (row) {
      const _this = this
      this.$confirm({
        title: '警告',
        centered: true,
        content: '删除后无法恢复，确认删除?',
        okText: '确定',
        cancelText: '取消',
        onOk () {
          deleteTimeSetting({
            id: row.id
          }).then(res => {
            console.log(res, 'res1111')
            if (res.status == 200) {
              _this.$message.success(res.message)
              _this.$refs.table.refresh()
            }
          })
        }
      })
    },
    // 编辑
    handleEdit (row) {
      console.log(row, 'row')
      this.showModal = true
      this.itemId = row.id
    }
  }
}
</script>
<style scoped>
	.table-page-search-wrapper .ant-form-inline .ant-form-item {
		margin-bottom: 0;
	}

	.action-button {
		line-height: 40px;
		white-space: nowrap;
		padding: 5px 10px;
		background-color: #1890ff;
		border-radius: 4px;
		color: #fff;
		margin-right: 5px;
	}

	.red-text {
		background-color: red;
	}

	.menu-text {
		background-color: #f90;
	}
</style>
