<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%">
			<customer-info-add ref="customerList" @successSubmit="successSubmit" />
		</base-dialog>
  </div>  
</template>

<script>
import CustomerInfoAdd from './components/customerInfoAdd.vue';
import { getCustomerConfigPage,delCustomerConfig } from '@/api/basicInfoConfig';
const tableProps = [
  {
    prop: 'name',
    label: '客户名称'
  },
  {
    prop: 'code',
    label: '客户编码'
  },
  {
    prop: 'factoryNameList',
    label: '所属基地',
    filter: (val) => val ? val.join(',') :'-'
  },
];
export default {
  name: 'CustomerInfoConfiguration',
  components:{CustomerInfoAdd},
  data () {
    return {
      formConfig: [
        {
          type: 'select',
          label: '所属基地',
          selectOptions: [
            { id: 2, name: '桐城' },
            { id: 3, name: '自贡' },
            { id: 5, name: '合肥' },
            { id: 6, name: '宿迁' },
            { id: 7, name: '宜兴' },
            { id: 8, name: '漳州' },
            { id: 9, name: '洛阳' },
            { id: 10, name: '秦皇岛' },
          ],
          param: 'factory',
          onchange: true
        },
        {
          type: 'input',
          label: '客户名称',
          placeholder: '客户名称',
          param: 'name'
        },
        {
          type: 'input',
          label: '客户编码',
          placeholder: '客户编码',
          param: 'code'
        },
        {
          type: 'button',
          btnName: '查询',
          name: 'search',
          color: 'primary',
        },
        {
          type: 'separate',
        },
        {
          type: 'button',
          btnName: '新增',
          name: 'add',
          color: 'success',
          plain: true
        }
      ],
      listQuery:{
        factory:'',
        name:'',
        code:'',
        pageSize:20,
        pageNo:1
      },
      total:0,
      tableData:[],
      tableProps,
      tableBtn:[
        {
          type: 'edit',
          btnName: '编辑',
        },
        {
          type: 'delete',
          btnName: '删除',
        },
      ],
      addOrEditTitle: '',
      centervisible: false,
    }
  },
  mounted() {
    this.getDataList();
  },
  methods: {
    buttonClick(val) {
      console.log(val)
      switch (val.btnName) {
        case 'search':
          this.listQuery.name = val.name
          this.listQuery.code = val.code
          this.listQuery.factory = val.factory
          this.listQuery.pageNo = 1;
          this.getDataList();
          break;
        case 'add':
          this.addOrEditTitle = '新增';
          this.$nextTick(() => {
            this.$refs.customerList.init();
          });
          this.centervisible = true;
          break;
      }
    },
    getDataList() {
      getCustomerConfigPage({...this.listQuery}).then(res => {
        if (res.code === 0) {
          this.tableData = res.data.list;
          this.total = res.data.total;
        }else{
          this.tableData = [];
          this.total = 0;
        }
      })
    },
    handleClick(val) {
      switch (val.type) {
				case 'edit':
					this.addOrEditTitle = '编辑';
					this.$nextTick(() => {
						this.$refs.customerList.init(val.data.id);
					});
					this.centervisible = true;
					break;
				default:
					this.handleDelete(val.data);
			}
    },
    handleCancel() {
			this.$refs.customerList.formClear();
			this.centervisible = false;
			this.addOrEditTitle = '';
		},
		handleConfirm() {
			this.$refs.customerList.submitForm();
		},
		successSubmit() {
			this.handleCancel();
			this.getDataList();
		},
		/** 删除按钮操作 */
		handleDelete(row) {
      let _this = this;
      _this.$modal.confirm('确定删除客户"' + row.name + '吗？').then(function() {
        delCustomerConfig({id:row.id}).then(response => {
          _this.$modal.msgSuccess("删除成功");
          _this.getDataList();
        })
      }).catch(() => {});
		}
  }
}
</script>
<style lang="scss" scoped>
  .app-container {
    padding: 16px;
  }
</style>