<template>
  <div style="padding: 0 20px">
    <div ref="lxHeader">
      <lx-header icon="md-apps" text="门店管理" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
        <div slot="content"></div>
        <slot>
          <div>
            <Input clearable style="width: 200px; margin-right: 10px" v-model="select.keywords" placeholder="关键字搜索" />
            <Button type="primary" @click="getStores" style="margin-right: 10px;">查询</Button>
            <Button type="primary" @click="$refs['addStore'].isShow = true,$refs['addStore'].type = 'add'" style="margin-right: 10px;">新增</Button>
          </div>
        </slot>
      </lx-header>
    </div>

    <xy-table :total="total" @pageSizeChange="pageSizeChange" @pageIndexChange="pageChange" :list="list" :table-item="tableItem" @delete="deleteStore" @editor="editorStore"></xy-table>

<!--    新增门店-->
    <add-store ref="addStore" @refresh="getStores"></add-store>
  </div>
</template>

<script>
import {index,destroy} from '@/api/shop'

import addStore from '@/views/business/component/addStore'
import { Message } from 'element-ui'
export default {
  components:{
    addStore
  },
  data() {
    return {
      select:{
        pageIndex:1,
        pageSize:10,
        keywords:''
      },

      total:0,
      list:[],
      tableItem:[
        {
          prop:'name',
          label:'名称/用户名',
          align:'left',
          width:140
        },
        {
          prop:'merchant.name',
          label:'所属商户',
          width:220,
          align:'left'
        },
        {
          prop:'address',
          label:'地址',
          width: 300,
          align:'left'
        },
        {
          prop:'contact',
          label:'联系人',
          width: 120
        },
        {
          prop:'phone',
          label:'联系电话',
          width: 160
        },
        {
          prop:'state',
          label:'状态',
          width: 120,
          customFn:(row)=>{
            if(row.state == 1 || row.state == 'active'){
              return (<div style={{'color':'green'}}>启用</div>)
            }else{
              return (<div style={{'color':'red'}}>禁用</div>)
            }
          }
        },
        {
          label:'是否为主营门店',
          prop:'is_default',
          width: 150,
          customFn:(row)=>{
            if(row.is_default == 1){
              return (<div style={{'color':'green'}}>是</div>)
            }else{
              return (<div style={{'color':'red'}}>否</div>)
            }
          }
        }
      ]
    }
  },
  methods: {
    pageSizeChange(e){

         this.select.pageSize = e
      this.doSearch();
    },
    doSearch(){
       this.select.pageIndex = 1
       this.getStores()
    },
    async getStores(){
      const res = await index({
        page_size:this.select.pageSize,
        page:this.select.pageIndex,
        keyword:this.select.keywords
      })
      this.list = res.data
      this.total = res.total
    },

    pageChange(e){
      this.select.pageIndex = e
      this.getStores()
    },

    deleteStore(row){
      destroy({
        id:row.id
      }).then(res => {
        Message({
          type:'success',
          message:'删除成功'
        })
        this.getStores()
      })
    },
    editorStore(row){
      this.$refs['addStore'].type = 'editor'
      this.$refs['addStore'].id = row.id
      this.$refs['addStore'].isShow = true
    }
  },
  mounted() {
    this.getStores()
  }
}
</script>

<style scoped lang="scss">
.selects {
  display: flex;
  flex-wrap: wrap;

  &-item{
    display: flex;
    align-items: center;
    justify-content: center;

    margin-top: 6px;
    &-label{
      white-space: nowrap;

      padding: 0px 6px;
    }
  }
}

.select-content-item{
  display: flex;
  align-items: center;

  margin-bottom: 10px;
  &-label{

    padding: 0 20px;
  }
}

$primaryColor: #bf617c;
::v-deep .ivu-alert-success{
  color:#fff;
  border-color: $primaryColor !important;
  background: rgba(213, 120, 145, 0.8) !important;

  margin: auto 0;
  margin-right: 10px;
}
::v-deep .ivu-icon-ios-close:before{
  color: #fff;
}
</style>
