<template>
  <div>
    <en-table-layout :tableData="tableData.data" :loading="loading">
      <div slot="toolbar" class="inner-toolbar">
        <div class="toolbar-btns">
          <el-button size="mini" type="primary" v-if="checkPermission(['store:add'])"
                     @click="handleAdd">添加</el-button>
        </div>
        <div class="toolbar-search">
          <en-table-search @search="handleSearchBranch" placeholder="请输入门店名称">
          </en-table-search>
        </div>
      </div>

      <template slot="table-columns">
        <el-table-column prop="store_name" label="门店名称" />
        <el-table-column prop="contact_person" label="联系人" />
        <el-table-column prop="telephone" label="联系方式" />
        <el-table-column prop="address" label="门店地址" />
        <el-table-column prop="create_time" label="创建时间">
          <template slot-scope="{ row }">{{ row.create_time | unixToDate }}</template>
        </el-table-column>
        <el-table-column label="操作" width="300">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="handleEdit(scope.row)" v-if="checkPermission(['store:edit'])">编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              v-if="checkPermission(['store:delete'])"
              @click="handleDelete(scope.row.id)">删除
            </el-button>
          </template>
        </el-table-column>
      </template>

      <el-pagination v-if="tableData" slot="pagination" @size-change="handlePageSizeChange"
        @current-change="handlePageCurrentChange" :current-page="tableData.page_no" :page-sizes="[10, 20, 50, 100]"
        :page-size="tableData.page_size" layout="total, sizes, prev, pager, next, jumper" :total="tableData.data_total">
      </el-pagination>
    </en-table-layout>
    <el-dialog
      :title="storeForm.id ? '添加门店' : '编辑门店'"
      :visible.sync="dialogVisible"
      width="500px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <el-form :model="storeForm" ref="storeForm" label-width="100px">
        <!--用户名-->
        <el-form-item label="门店名称" prop="store_name">
          <el-input v-model="storeForm.store_name" :maxlength="20"></el-input>
        </el-form-item>
        <el-form-item label="联系人" prop="contact_person">
          <el-input v-model="storeForm.contact_person" :maxlength="20"></el-input>
        </el-form-item>
        <el-form-item label="门店地址" prop="address">
          <el-input v-model="storeForm.address" :maxlength="20"></el-input>
        </el-form-item>
        <el-form-item label="联系人电话" prop="telephone">
          <el-input v-model="storeForm.telephone" :maxlength="20"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="submitForm()">确 定</el-button>
    </span>
    </el-dialog>
  </div>
</template>

<script>
import * as API_Branch from '@/api/basicSetting'
export default {
  name: 'store',
  data() {
    return {
      // 列表loading状态
      loading: false,
      // 列表参数
      params: {
        page_no: 1,
        page_size: 10,
        shop_name: ''
      },
      advancedForm: {
        link_name: '',
        link_phone: ''
      },
      // 列表数据
      tableData: '',
      dialogVisible: false, // 添加弹窗
      storeForm: {} // 添加表单
    }
  },
  watch: {
    '$route': {
      immediate: true,
      handler(newVal) {
        if (newVal.name !== 'store') return
        this.params.franchise_id = newVal.query.franchise_id
        this.GET_BranchList()
      }
    }
  },
  methods: {
    /** 分页大小发生改变 */
    handlePageSizeChange(size) {
      this.params.page_size = size
      this.GET_BranchList()
    },

    /** 分页页数发生改变 */
    handlePageCurrentChange(page) {
      this.params.page_no = page
      this.GET_BranchList()
    },

    /** 搜索 */
    handleSearchBranch(keyword) {
      this.params.page_no = 1
      this.params.store_name = keyword
      this.GET_BranchList()
    },

    /** 添加 */
    handleAdd() {
      this.dialogVisible = true
      this.storeForm = {}
    },

    /** 编辑 */
    handleEdit(row) {
      this.dialogVisible = true
      this.storeForm = row
    },

    /** 删除 */
    handleDelete(id) {
      let msg = '确认删除当前门店？'
      this.$confirm(msg, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        API_Branch.deleteStore(id).then(res => {
          this.$message.success('删除成功！')
          this.GET_BranchList()
        })
      })
    },

    /** 获取门店列表 */
    async GET_BranchList(advanced) {
      let params = this.MixinClone(this.params)
      if (advanced) {
        params = { ...params, ...this.advancedForm }
      }
      this.loading = true
      try {
        this.tableData = await API_Branch.getBranches(params)
      } finally {
        this.loading = false
      }
    },

    /** 提交表单 */
    submitForm() {
      if (this.storeForm.id) {
        API_Branch.editStore(this.storeForm.id, this.storeForm).then(res => {
          this.$message.success('修改成功！')
          this.dialogVisible = false
          this.GET_BranchList()
        })
      } else {
        API_Branch.addStore(this.storeForm).then(res => {
          this.$message.success('添加成功！')
          this.dialogVisible = false
          this.GET_BranchList()
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.toolbar-search {
  display: flex;

  .item-search {
    display: flex;
    align-items: center;

    &+.item-search {
      margin-left: 10px;
    }

    >span {
      flex-shrink: 0;
      font-size: 12px;
      color: #666666;
    }
  }

  .search-btn {
    margin-left: 10px;
  }
}
</style>
