<template>
  <a-card class="StoreManagement" :bordered="false">
    <!-- 搜索条件 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="48">
          <a-col :span="6">
            <a-form-item class="search-item" label="门店名称">
              <a-input id="store-name" v-model.trim="queryParam.name" placeholder="请输入门店名称" @pressEnter="$refs.table.refresh(true)" allowClear />
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item class="search-item" label="负责人手机">
              <a-input id="store-managerMobile" v-model.trim="queryParam.managerMobile" placeholder="请输入负责人手机" @pressEnter="$refs.table.refresh(true)" allowClear />
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item class="search-item" label="组织机构">
              <a-tree-select
                showSearch
                id="store-orgCode"
                v-model="queryParam.orgCode"
                allowClear
                :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                :tree-data="treeData"
                placeholder="请选择组织机构"
                treeNodeFilterProp="title">
              </a-tree-select>
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item class="search-item" label="门店类型">
              <v-select
                id="store-type"
                ref="selfFlag"
                allowClear
                placeholder="请选择门店类型"
                v-model="queryParam.selfFlag"
                code="STORE_TYPE"></v-select>
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item class="search-item" label="启用状态">
              <v-select
                id="store-status"
                ref="isEnable"
                allowClear
                placeholder="请选择启用状态"
                v-model="queryParam.isEnable"
                code="ENABLE_FLAG"></v-select>
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-button type="primary" id="store-search" class="search-btn" @click="$refs.table.refresh(true)">查询</a-button>
            <a-button id="store-reset" @click="reset">重置</a-button>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 表格列表 -->
    <s-table
      ref="table"
      size="default"
      :rowKey="(record) => record.id"
      :columns="columns"
      :data="loadData"
      bordered>
      <!-- 启用状态 -->
      <template slot="isEnable" slot-scope="text, record">
        <div v-if="record.isEnable == 0" style="color: #ff4d4f">{{ record.isEnableDictValue }}</div>
        <div v-if="record.isEnable == 1" style="color: #1890FF">{{ record.isEnableDictValue }}</div>
      </template>
      <!-- 操作 -->
      <template slot="action" slot-scope="text, record">
        <a-icon
          type="edit"
          title="编辑"
          id="store-edit"
          @click="edit(record)"
          :style="{ fontSize: '20px', color: '#1890FF', padding: '0 10px' }"
          v-hasPermission="'B_basicSettings_store_edit'" />
        <a-icon
          type="link"
          title="设置"
          id="store-set"
          @click="setEquipment(record)"
          :style="{ fontSize: '20px', color: '#e29e14', padding: '0 10px' }"
          v-hasPermission="'M_store_device'" />
      </template>
    </s-table>

    <!-- 编辑 门店所属组织 -->
    <store-modal :openModal="openModal" :storeId="storeId" @success="storeSubmit" @close="closeModal" />
    <!-- 门店 关联设备 -->
    <store-associated-equipment-modal :openModal="openEquipmentModal" :storeId="storeId" :storeCode="storeCode" @close="closeDetailsModal" />
  </a-card>
</template>

<script>
import { STable, VSelect } from '@/components'
import StoreModal from './StoreModal.vue'
import StoreAssociatedEquipmentModal from './StoreAssociatedEquipmentModal.vue'
import { findStoreList } from '@/api/store.js'
import { findOrgTree } from '@/api/atorg.js'
export default {
  name: 'StoreManagement',
  components: { STable, VSelect, StoreModal, StoreAssociatedEquipmentModal },
  data () {
    return {
      queryParam: {
        name: '', //  门店名称
        managerMobile: '', //  负责人手机
        orgCode: null, //  组织机构
        selfFlag: '', //  门店类型
        isEnable: '' //  启用状态
      },
      columns: [
        { title: '序号', dataIndex: 'no', width: '40', align: 'center' },
        { title: '创建时间', dataIndex: 'createDate', width: '100', align: 'center' },
        { title: '组织机构', dataIndex: 'orgCodeName', width: '100', align: 'center' },
        { title: '门店名称', dataIndex: 'name', width: '100', align: 'center' },
        { title: '门店类型', dataIndex: 'selfFlagDictValue', width: '100', align: 'center' },
        { title: '负责人名称', dataIndex: 'managerName', width: '100', align: 'center' },
        { title: '负责人手机', dataIndex: 'managerMobile', width: '100', align: 'center' },
        { title: '启用状态', scopedSlots: { customRender: 'isEnable' }, width: '100', align: 'center' },
        { title: '操作', scopedSlots: { customRender: 'action' }, width: '265', align: 'center' }
      ],
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        return findStoreList(Object.assign(parameter, this.queryParam)).then(res => {
          if (res.status == 200) {
            const no = (res.data.pageNo - 1) * res.data.pageSize
            for (let i = 0; i < res.data.list.length; i++) {
              const _item = res.data.list[i]
              _item.no = no + i + 1
            }
            res.data.count = Number(res.data.count)
            return res.data
          }
        })
      },
      openModal: false, //  编辑 门店所属组织  弹框展示状态
      openEquipmentModal: false, //  门店 关联设备  弹框展示状态
      storeId: '', //  门店id
      storeCode: '', //  门店code
      treeData: [] //  组织机构
    }
  },
  mounted () {
    this.getOrgList()
  },
  methods: {
    //  获取组织机构  数据
    getOrgList () {
      findOrgTree().then(res => {
        if (res.status == 200) {
          this.treeData = this.recursionFun(res.data)
        } else {
          this.treeData = []
        }
      })
    },
    //  递归函数
    recursionFun (data) {
      if (data) {
        data.map(item => {
          if (item.children && item.children.length == 0) {
            item.key = item.id ? 'org' + item.id : ''
            item.value = item.code ? item.code : ''
            item.title = item.name ? item.name : ''
          } else {
            item.key = item.id ? 'org' + item.id : ''
            item.value = item.code ? item.code : ''
            item.title = item.name ? item.name : ''
            this.recursionFun(item.children)
          }
        })
      }
      return data
    },
    //  编辑
    edit (item) {
      this.storeId = String(item.id)
      this.storeCode = String(item.code)
      this.openModal = true
      this.openEquipmentModal = false
    },
    // 新增编辑  提交成功
    storeSubmit () {
      this.$refs.table.refresh(true)
      this.openModal = false
    },
    //  设置
    setEquipment (item) {
      this.storeId = String(item.id)
      this.storeCode = String(item.code)
      this.openEquipmentModal = true
      this.openModal = false
    },
    //  重置
    reset () {
      this.queryParam = {
        name: '', //  门店名称
        managerMobile: '', //  负责人手机
        orgCode: null, //  组织机构
        selfFlag: '', //  门店类型
        isEnable: '' //  启用状态
      }
      this.addrCityList = []
      this.$refs.table.refresh(true)
    },
    // 新增、编辑 弹框关闭
    closeModal () {
      this.storeId = ''
      this.storeCode = ''
      this.openModal = false
    },
    // 关联设备 弹框关闭
    closeDetailsModal () {
      this.storeId = ''
      this.storeCode = ''
      this.openEquipmentModal = false
    }
  }
}
</script>

<style lang="less">
.StoreManagement {
	.table-page-search-wrapper {
		.search-btn {
			margin-right: 10px;
		}
	}
}
</style>