<template>
  <div class="app-container">
    <search-bar :formConfigs="formConfig" ref="searchBarForm" @headBtnClick="buttonClick" />
    <base-table v-if="tableData.length" class="right-aside" :table-props="tableProps"
      :page="listQuery.pageNo" :limit="listQuery.pageSize" :table-data="tableData">
      <method-btn v-if="tableBtn.length" slot="handleBtn" :width="200" label="操作" :method-list="tableBtn"
        @clickBtn="handleClick" />
    </base-table>
    <pagination :limit.sync="listQuery.pageSize" :page.sync="listQuery.pageNo" :total="total" @pagination="getDataList" :background="true" />
    <!-- 新增 -->
		<base-dialog
			:dialogTitle="addOrEditTitle"
			:dialogVisible="centervisible"
			@cancel="handleCancel"
			@confirm="handleConfirm"
			:before-close="handleCancel"
			width="50%">
			<group-key-add ref="groupKey" @successSubmit="successSubmit" />
		</base-dialog>
  </div>  
</template>

<script>
import GroupKeyAdd from './components/groupKeyAdd.vue';
const tableProps = [
  {
    prop: 'name',
    label: '重点工作'
  },
  {
    prop: 'code1',
    label: '单位'
  },
  {
    prop: 'code',
    label: '所属年份'
  },
  {
    prop: 'jd',
    label: '累计值计算方式'
  },
];
export default {
  name: 'GroupKeyTaskConfiguration',
  components:{GroupKeyAdd},
  data () {
    return {
      formConfig: [
        {
          type: 'input',
          label: '重点工作',
          placeholder: '重点工作',
          param: 'cName'
        },
        {
          type: 'datePicker',
          label: '所属年份',
          dateType: 'year', 
          format: 'yyyy',
          valueFormat: 'yyyy',
          placeholder: '所属年份',
          param: 'searchTime1',
          width: 150
        },
        {
          type: 'button',
          btnName: '查询',
          name: 'search',
          color: 'primary',
        },
        {
          type: 'separate',
        },
        {
          type: 'button',
          btnName: '新增',
          name: 'add',
          color: 'success',
          plain: true
        }
      ],
      listQuery:{
        pageSize:20,
        pageNo:1
      },
      total:2,
      tableData:[{name:'111'}],
      tableProps,
      tableBtn:[
        {
          type: 'edit',
          btnName: '编辑',
        },
        {
          type: 'delete',
          btnName: '删除',
        },
      ],
      addOrEditTitle: '',
      centervisible: false,

    }
  },
  methods: {
    buttonClick(val) {
      console.log(val)
      switch (val.btnName) {
        case 'search':
          this.listQuery.pageNo = 1;
          this.getList();
          break;
        case 'add':
          this.addOrEditTitle = '新增';
          this.$nextTick(() => {
            this.$refs.groupKey.init();
          });
          this.centervisible = true;
          break;
      }
    },
    getDataList() {
      
    },
    handleClick(val) {
      switch (val.type) {
				case 'edit':
					this.addOrEditTitle = '编辑';
					this.$nextTick(() => {
						this.$refs.groupKey.init(val.data.id);
					});
					this.centervisible = true;
					break;
				default:
					this.handleDelete(val.data);
			}
    },
    handleCancel() {
			this.$refs.groupKey.formClear();
			this.centervisible = false;
			this.addOrEditTitle = '';
		},
		handleConfirm() {
			this.$refs.groupKey.submitForm();
		},
		successSubmit() {
			this.handleCancel();
			this.getList();
		},
		/** 删除按钮操作 */
		handleDelete(row) {
      this.$modal.confirm('确定删除重点工作"' + row.name + '吗？').then(function() {
        deleteModel(row.id).then(response => {
          that.getList();
          that.$modal.msgSuccess("删除成功");
        })
      }).catch(() => {});
		}
  }
}
</script>
<style lang="scss" scoped>
  .app-container {
    padding: 16px;
  }
</style>