<template>
  <div class="house-list">
    <tables
      :buttonList="buttonList"
      :data-api="dataApi"
      :delete-api="deleteApi"
      :columns="columns"
      @create="create"
      @toEdit="editStore"
      placeholder="门店名称"
      deleteIdKey="id"
      ref="table"
    />
    <createModal :showStatus="showStatus === 'create'" @close="showStatus=''" @createStoreSuccess="updateTable" />
    <editModal :showStatus="showStatus === 'edit'" :form="editForm" @close="showStatus=''" @editStoreSuccess="updateTable" />
  </div>
</template>

<script>
import tables from 'components/tables'
import { fetchStoreList, deleteStore, updateStore } from 'api/store'
import createModal from './components/create'
import editModal from './components/edit'
const storeStatusMap = {
  1: '启用',
  2: '停用'
}
export default {
  data() {
    return {
      // 传递给tables的表格列数据
      editForm: {
        status: '',
        name: '12122'
      },
      buttonList: [
        {
          text: '新增',
          handle: 'create'
        }
      ],
      dataApi: fetchStoreList,
      deleteApi: deleteStore,
      columns: [
        {
          type: 'index',
          title: '序号',
          align: 'center',
          width: 80
        },
        {
          title: '门店id',
          key: 'id',
          align: 'center'
        },
        {
          title: '门店名称',
          key: 'name',
          align: 'center'
        },
        {
          title: '门店地址',
          key: 'address',
          align: 'center'
        },
        {
          title: '状态',
          key: 'status',
          align: 'center',
          render: (h, params) => {
            return h('i-switch', {
              props: {
                trueValue: 1,
                falseValue: 0,
                value: params.row.status,
                // disabled: params.row.roleKey === 'admin'
              },
              on: {
                'on-change': (val) => {
                  updateStore(Object.assign(params.row, {status: val}))
                }
              }
            })
          }
        },
        {
          title: '创建时间',
          key: 'createTime',
          align: 'center'
        },
        {
          title: '操作',
          slot: 'action',
          tools: ['edit', 'del'],
          align: 'center'
        }
      ],
      showStatus: ''
    }
  },
  components: {
    tables,
    createModal,
    editModal
  },
  methods: {
    create () {
      this.showStatus = 'create'
    },
    updateTable () {
      this.$refs['table'].handleTableData()
      this.showStatus = ''
    },
    editStore (item) {
      this.showStatus = 'edit'
      this.editForm = JSON.parse(JSON.stringify(item))
      console.log(this.editForm)
    }
  }
}
</script>

<style lang="less" scoped>
.house-list {
  padding: 20px;
  background: #252828;
}

</style>