<template>
  <a-card class="StoreManagement" :bordered="false">
    <!-- 搜索条件 -->
    <div class="table-page-search-wrapper">
      <a-form-model ref="queryForm" :model="queryParam" layout="inline" @keyup.enter.native="$refs.table.refresh(true)">
        <a-row :gutter="48">
          <a-col :span="6">
            <a-form-model-item prop="name" class="search-item" label="供应商名称">
              <a-input id="supplier-name" v-model.trim="queryParam.name" placeholder="请输入供应商名称" allowClear />
            </a-form-model-item>
          </a-col>
          <a-col :span="6">
            <a-form-model-item prop="orgCode" class="search-item" label="组织机构">
              <a-tree-select
                showSearch
                id="supplier-orgCode"
                v-model="queryParam.orgCode"
                allowClear
                :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                :replace-fields="{children:'children', title:'name', key:'id', value: 'code' }"
                :tree-data="treeData"
                placeholder="请选择组织机构"
                treeNodeFilterProp="title">
              </a-tree-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="6" style="padding-bottom: 10px;">
            <a-button type="primary" id="supplier-search" class="search-btn" @click="$refs.table.refresh(true)">查询</a-button>
            <a-button id="supplier-reset" @click="reset">重置</a-button>
          </a-col>
        </a-row>
      </a-form-model>
    </div>
    <!-- 表格列表 -->
    <s-table
      ref="table"
      size="default"
      :rowKey="(record) => record.id"
      :columns="columns"
      :data="loadData"
      bordered>
      <!-- 组织机构 -->
      <template slot="orgCode" slot-scope="text, record">
        <span v-for="(item, index) in record.codeNameArr" :key="index">
          {{ item }}
          <strong v-if="index != record.codeNameArr.length-1">></strong>
        </span>
        <span v-if="record.codeNameArr.length==0">--</span>
      </template>
      <!-- 负责人名称 -->
      <template slot="managerName" slot-scope="text, record">
        <div v-if="record.managerName">{{ record.managerName }}</div>
        <div v-else>--</div>
      </template>
      <!-- 操作 -->
      <template slot="action" slot-scope="text, record">
        <a-icon
          type="edit"
          title="编辑"
          id="supplier-edit"
          @click="handleEdit(record)"
          class="actionBtn icon-blues"
        />
      </template>
    </s-table>

    <!-- 编辑 门店所属组织 -->
    <supplier-modal :openModal="openModal" :supplierSn="supplierSn" @success="storeSubmit" @close="openModal=false" />
  </a-card>
</template>

<script>
import { STable, VSelect } from '@/components'
import SupplierModal from './SupplierModal.vue'
import { findOrgTree } from '@/api/atorg.js'
import { supplierListQuery } from '@/api/supplierManagement.js'
export default {
  name: 'StoreManagement',
  components: { STable, VSelect, SupplierModal },
  data () {
    return {
      queryParam: {
        name: '', //  供应商名称
        orgCode: null //  组织机构
      },
      columns: [
        { title: '序号', dataIndex: 'no', width: 60, align: 'center' },
        { title: '组织机构', scopedSlots: { customRender: 'orgCode' }, width: 150, align: 'center' },
        { title: '供应商名称', dataIndex: 'name', width: 120, align: 'center' },
        { title: '联系人', dataIndex: 'manager', width: 100, align: 'center', customRender: (text, record, index) => { return text || '--' } },
        { title: '手机号码', dataIndex: 'managerMobile', width: 100, align: 'center' },
        { title: '座机号码', dataIndex: 'tel', customRender: (text, record, index) => { return text || '--' }, width: 80, align: 'center' },
        { title: '操作', scopedSlots: { customRender: 'action' }, width: 120, align: 'center' }
      ],
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        return supplierListQuery(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
              // 重组组织机构
              let codeNameArr = []
              if (_item.orgParentNamePaths) { //  父级组织机构名称
                const orgPCodeNameArr = _item.orgParentNamePaths.split(',')
                codeNameArr = orgPCodeNameArr.splice(0, orgPCodeNameArr.length - 1)
              }
              if (_item.orgCodeName) { //  当前组织机构名称
                codeNameArr.push(_item.orgCodeName)
              }
              _item.codeNameArr = codeNameArr
            }
            return res.data
          }
        })
      },
      openModal: false, //  编辑 门店所属组织  弹框展示状态
      supplierSn: '', // 供应商信息
      supplierName: '', // 供应商名称
      treeData: [] //  组织机构
    }
  },
  methods: {
    //  获取组织机构  数据
    getOrgList () {
      findOrgTree().then(res => {
        if (res.status == 200) {
          this.treeData = res.data
          console.log(this.treeData, 'this.treeData')
        } else {
          this.treeData = []
        }
      })
    },
    // 编辑供应商
    handleEdit (item) {
      this.supplierSn = item.supplierSn
      this.openModal = true
    },
    // 编辑  提交成功
    storeSubmit () {
      this.$refs.table.refresh()
      this.openModal = false
    },
    //  重置
    reset () {
      this.$refs.queryForm.resetFields()
      this.$refs.table.refresh(true)
    }

  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      vm.$refs.queryForm.resetFields()
      vm.getOrgList()
    })
  }
}
</script>

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