<template>
  <a-card :bordered="false">
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="$refs.table.refresh(true)">
        <a-row :gutter="48">
          <a-col :span="6">
            <a-form-item label="考评项目名称">
              <a-input id="evaluationItem-name" allowClear v-model.trim="queryParam.name" placeholder="请输入考评项目名称" />
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item label="启用状态">
              <v-select
                id="evaluationItem-status"
                ref="status"
                allowClear
                placeholder="状态"
                v-model="queryParam.status"
                code="ENABLE_FLAG"></v-select>
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-button id="evaluationItem-search" type="primary" style="margin-right: 10px;" @click="$refs.table.refresh(true)">查询</a-button>
            <a-button id="evaluationItem-reset" type="" @click="reset">重置</a-button>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <a-divider />
    <div class="table-operator">
      <a-button id="evaluationItem-add" type="primary" icon="plus" @click="openModal">新增</a-button>
    </div>
    <s-table
      ref="table"
      size="default"
      :rowKey="(record) => record.id"
      :columns="columns"
      :data="loadData"
      bordered>
      <!-- 操作 -->
      <template slot="action" slot-scope="text, record">
        <a-icon id="evaluationItem-edit" type="edit" class="actionBtn blue" v-if="record.status == '0'" @click="openModal(record)" />
        <a-icon id="evaluationItem-delete" type="delete" class="actionBtn red" v-if="record.status == '0'" @click="delect(record)" />
        <a-icon id="evaluationItem-setting" type="setting" class="actionBtn orange" @click="handleSet(record)" />
      </template>
      <!-- 启用禁用 -->
      <template slot="enable" slot-scope="text, row">
        <a-switch id="evaluationItem-enableStatus" checkedChildren="启用" unCheckedChildren="禁用" v-model="row.status" @change="changeFlagHandle(row)"/>
      </template>
    </s-table>
    <!-- 新增/编辑 弹窗 -->
    <add-evaItemModal :itemId="itemId" :visible="openAddModal" @refresh="$refs.table.refresh()" @close="openAddModal=false"></add-evaItemModal>
    <!-- 设置弹窗 -->
    <set-evaItemModal :itemId="itemId" :itemName="itemName" :visible="openSetting" @close="openSetting=false"></set-evaItemModal>
  </a-card>

</template>

<script>
import {
  STable,
  VSelect
} from '@/components'
import {
  getItemListByPage,
  itemDelete,
  itemEnable
} from '@/api/evaluationItem.js'
import addEvaItemModal from './AddEvaItemModal.vue'
import setEvaItemModal from './SetEvaItemModal.vue'
import moment from 'moment'
export default {
  name: 'EvaluationPlanList',
  components: {
    STable,
    VSelect,
    addEvaItemModal,
    setEvaItemModal
  },
  data () {
    return {
      moment,
      pageNo: 1,
      pageSize: 10,
      openAddModal: false, // 打开新增弹窗
	  openSetting: false, // 打开设置弹窗
      itemId: '', // 要编辑的考评项id
      itemName: '', // 要编辑的考评项名称
      // 查询参数
      queryParam: {
        name: '', // 项目名称
        status: '' // 状态
      },
      // 表头
      columns: [{
        title: '序号',
        dataIndex: 'no',
        width: '40',
        align: 'center'
      },
      {
        title: '考评项目名称',
        dataIndex: 'name',
        align: 'center'
      },
      {
        title: '考评项目说明',
        dataIndex: 'desc',
        width: '120',
        align: 'center'
      },
      {
        title: '状态',
        width: '200',
        align: 'center',
        dataIndex: 'status',
        scopedSlots: {
          customRender: 'enable'
        }
      },
      {
        title: '操作',
        width: '200',
        align: 'center',
        scopedSlots: {
          customRender: 'action'
        }
      }
      ],
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        return getItemListByPage(Object.assign(parameter, this.queryParam)).then(res => {
          if (res.status == 200) {
            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.status = _item.status + '' === '1'
            }
            res.data.count = Number(res.data.count)
            return res.data
          }
        })
      }
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      vm.reset()
    })
  },
  methods: {
    // 修改状态
    changeFlagHandle (record) {
      console.log(record, '222222222')
      const _data = {
        id: record.id,
        status: record.status ? '1' : '0'
      }
      itemEnable(_data).then(res => {
        console.log(res.status)
        if (res.status == '200') {
          this.$message.success(res.message)
          this.$refs.table.refresh()
        } else {
          record.status = !record.status
        }
      })
    },
    // 打开新增弹窗
    openModal (row) {
      this.itemId = row ? row.id : ''
      this.openAddModal = true
    },
    // 删除
    delect (row) {
      const _this = this
      this.$confirm({
        title: '警告',
        content: '删除考评项目时,其关联的考评指标将被同步删除,确认删除吗？',
        okText: '确定',
        cancelText: '取消',
        onOk () {
          itemDelete({
          	id: row.id
          }).then(res => {
          	if (res.status == 200) {
          		_this.$message.success(res.message)
          		_this.$refs.table.refresh()
          	}
          })
        }
      })
    },
    // 打开设置弹框
    handleSet (row) {
      this.openSetting = true
	  this.itemId = row.id
	  this.itemName = row.name
    },
    // 重置
    reset () {
      this.queryParam = {
        name: '',
        status: '' // 状态
      }
      this.$refs.table.refresh(true)
    }
  }
}
</script>
<style>
	.table-page-search-wrapper,
	.addButton {
		margin-bottom: 0;
	}

	.table-page-search-wrapper .ant-form-inline .ant-form-item {
		margin-bottom: 10px;
	}
	.table-operator {
		margin-bottom: 10px;
	}
	.textCount {
		border: 1px solid #91d5ff;
		background-color: #e6f7ff;
		padding: 10px 0;
		border-radius: 5px;
		padding-left: 20px;
		margin: 10px 0;
	}

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

	.menu-text {
		background-color: #f90;
	}

	.actionBtn {
		font-size: 20px;
		padding: 0 10px;
	}

	.blue {
		color: #1890FF;
	}

	.green {
		color: #16b50e;
	}

	.red {
		color: red;
	}
	.orange {
		color: #ffaa00;
	}
</style>
