<template>
  <a-card :bordered="false">
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="48">
          <a-col :span="6">
            <a-form-item label="方案名称">
              <a-input id="evaluationPlan-name" allowClear v-model.trim="queryParam.name" placeholder="请输入企业名称" />
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item label="启用状态">
              <v-select
                id="evaluationPlan-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="evaluationPlan-search" type="primary" style="margin-right: 10px;" @click="$refs.table.refresh(true)">查询</a-button>
            <a-button id="evaluationPlan-reset" type="" @click="reset">重置</a-button>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <a-divider />
    <a-row class="add-btn" type="flex" justify="space-between">
      <a-button id="evaluationPlan-add" type="primary" icon="plus" @click="openModal">新增</a-button>
      <!-- 目前版本不要 -->
      <!-- <a-col id="evaluationPlan-setDefaultPlan" @click="handleDefaultSet">
        <a-icon type="setting" class="setting-icon" />
        <span class="setting">默认方案设置</span>
      </a-col> -->
    </a-row>
    <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="evaluationPlan-edit" type="edit" class="actionBtn blue" v-if="record.status == '0'" @click="openModal(record)" />
        <a-icon id="evaluationPlan-delete" type="delete" class="actionBtn red" v-if="record.status == '0'" @click="delect(record)" />
        <a-icon id="evaluationPlan-setting" type="setting" class="actionBtn orange" @click="handleSet(record)" />
      </template>
      <!-- 启用禁用 -->
      <template slot="enable" slot-scope="text, row">
        <a-switch id="evaluationPlan-enableStatus" checkedChildren="启用" unCheckedChildren="禁用" v-model="row.status" @change="changeFlagHandle(row)" />
      </template>
    </s-table>
    <!-- 新增/编辑 弹窗 -->
    <add-evaModal :itemId="itemId" :visible="openAddModal" @refresh="$refs.table.refresh()" @close="openAddModal=false"></add-evaModal>
    <!-- 选择考评项弹窗 -->
    <set-evaModal :itemId="itemId" :itemName="itemName" :visible="openSetting" @close="openSetting=false"></set-evaModal>
    <!-- 设置默认方案弹窗 -->
    <set-evaDefaultModal :itemId="itemId" :defaultPlanList="defaultPlanList" :visible="openDefaultSetting" @refresh="getDefaultPlan" @close="openDefaultSetting=false"></set-evaDefaultModal>
  </a-card>

</template>

<script>
import {
  STable,
  VSelect
} from '@/components'
import {
  planQueryByPage,
  planEnable,
  planDefaultQuery,
  planDelete
} from '@/api/evaluationPlan.js'
import addEvaModal from './AddEvaModal.vue'
import setEvaModal from './SetEvaModal.vue'
import setEvaDefaultModal from './SetEvaDefaultModal.vue'
export default {
  name: 'EvaluationPlanList',
  components: {
    STable,
    VSelect,
    addEvaModal,
    setEvaModal,
    setEvaDefaultModal
  },
  data () {
    return {
      pageNo: 1,
      pageSize: 10,
      openAddModal: false, // 打开新增弹窗
      openSetting: false, // 打开选择考评项弹窗
      openDefaultSetting: false, // 打开设置默认方案弹窗
      itemId: '', // 要编辑的方案id
      itemName: '', // 方案名称
      defaultPlanList: [], // 默认方案列表
      // 查询参数
      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: '120',
        align: 'center',
        dataIndex: 'scopeTypeDictValue'
      },
      {
        title: '状态',
        width: '250',
        align: 'center',
        dataIndex: 'status',
        scopedSlots: {
          customRender: 'enable'
        }
      },
      {
        title: '操作',
        width: '200',
        align: 'center',
        scopedSlots: {
          customRender: 'action'
        }
      }
      ],
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        return planQueryByPage(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'
            }
            return res.data
          }
        })
      }
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      vm.reset()
      vm.getDefaultPlan()
    })
  },
  methods: {
    // 默认方案查询
    getDefaultPlan () {
      planDefaultQuery().then(res => {
        // console.log(res, 'rrrrrrrr')
        if (res.status == 200) {
          this.defaultPlanList = res.data
        } else {
          this.defaultPlanList = []
        }
      })
    },
    // 修改状态
    changeFlagHandle (record) {
      const _data = {
        id: record.id,
        status: record.status ? '1' : '0'
      }
      planEnable(_data).then(res => {
        console.log(res.status)
        if (res.status == '200') {
          this.$message.success('修改成功')
          this.$refs.table.refresh()
        } else {
          record.status = !record.status
        }
      })
    },
    // 打开新增弹窗
    openModal (row) {
      this.itemId = row ? row.id : ''
      this.openAddModal = true
    },
    // 打开默认方案设置弹窗
    handleDefaultSet () {
      this.openDefaultSetting = true
    },
    // 删除
    delect (row) {
      const _this = this
      // 判断当前方案是否为默认方案
      const has = this.defaultPlanList.find(item => item.assessId == row.id)
      if (has) {
        this.$warning({
          title: '警告',
          content: '该考评方案为当前默认考评方案，不能删除，请取消该方案的默认后再进行删除！'
        })
      } else {
        this.$confirm({
          title: '警告',
          content: '删除后原数据不可恢复，是否删除？',
          okText: '确定',
          cancelText: '取消',
          onOk () {
            planDelete({
              id: row.id
            }).then(res => {
              if (res.status == 200) {
                _this.$message.success(res.message)
                _this.$refs.table.refresh()
              }
            })
          }
        })
      }
    },
    // 打开设置弹框
    handleSet (row) {
      this.itemId = row.id
      this.itemName = row.name
      this.openSetting = true
      console.log(this.openSetting)
    },
    // 重置
    reset () {
      this.queryParam = {
        name: '',
        status: '' // 状态
      }
      this.$refs.table.refresh(true)
    }
  }
}
</script>
<style scoped>
	.table-page-search-wrapper,
	.addButton {
		margin-bottom: 0;
	}

	.table-page-search-wrapper .ant-form-inline .ant-form-item {
		margin-bottom: 10px;
	}

	.add-btn {
		margin-bottom: 10px;
	}

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

	.setting-icon {
		font-size: 20px;
		margin-right: 5px;
		color: #1890FF;
	}

	.setting {
		font-size: 16px;
		color: #1890FF;
		border-bottom: 1px solid #1890FF;
		cursor: pointer;
	}

	.blue {
		color: #1890FF;
	}

	.green {
		color: #16b50e;
	}

	.red {
		color: red;
	}

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