<template>
  <a-card size="small" :bordered="false" class="chainGroupSetList-wrap">
    <!-- 搜索条件 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="getList()">
        <a-row :gutter="15">
          <a-col :md="6" :sm="24">
            <a-form-item label="连锁组名称">
              <a-input id="chainGroupSetList-linkageGroupName" v-model.trim="queryParam.linkageGroupName" allowClear placeholder="请输入连锁组名称"/>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="24">
            <a-form-item label="关联连锁店名称">
              <a-input id="chainGroupSetList-dealerName" v-model.trim="queryParam.dealerName" allowClear placeholder="请输入关联连锁店名称"/>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="24">
            <a-button style="margin-bottom: 18px;" type="primary" @click="getList()" :disabled="disabled" id="chainGroupSetList-refresh">查询</a-button>
            <a-button style="margin: 0 0 18px 8px" @click="resetSearchForm()" :disabled="disabled" id="chainGroupSetList-reset">重置</a-button>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 操作按钮 -->
    <div class="table-operator">
      <a-button id="chainGroupSetList-add" type="primary" class="button-error" @click="openEditModal=true">新增</a-button>
    </div>
    <!-- 列表 -->
    <a-table
      class="sTable"
      ref="table"
      size="default"
      :rowKey="(record) => record.linkageGroupSn"
      :columns="columns"
      :pagination="pagination"
      :data-source="list"
      @expand="expand"
      @change="change"
      :expandedRowKeys="expandedRowKeys"
      :expandRowByClick="true"
      :scroll="{ y: tableHeight }">
      <a-table
        slot="expandedRowRender"
        :rowKey="(record) => record.id"
        :columns="innerColumns"
        :data-source="innerData"
        :pagination="false"
      >
        <!-- 操作 -->
        <template slot="action" slot-scope="text, record">
          <a-button
            type="link"
            class="button-error"
            size="small"
            icon="close"
            :id="'chainGroupSetList-delSubItem'+record.id"
            @click.stop="handleDisassociate(record)">取消关联</a-button>
        </template>
      </a-table>
      <!-- 操作 -->
      <template slot="action" slot-scope="text, record">
        <a-button
          type="link"
          class="button-success"
          size="small"
          icon="plus"
          :id="'chainGroupSetList-addSubItem'+record.id"
          @click.stop="handleAssociate(record)">关联分店</a-button>
        <a-button
          type="link"
          class="button-info"
          size="small"
          icon="edit"
          :id="'chainGroupSetList-addSubItem'+record.id"
          @click.stop="handleEdit(record)">编辑</a-button>
      </template>
    </a-table>
    <!-- 关联下级 -->
    <associate-modal :openModal="openModal" :itemSn="itemSn" @ok="addItemOk" @close="closeModal" />
    <!-- 新增/编辑 -->
    <chain-group-edit-modal :openModal="openEditModal" :nowData="nowData" :itemId="itemId" @ok="getList" @close="closeEditModal" />
  </a-card>
</template>

<script>
import { STable, VSelect } from '@/components'
import associateModal from './associateModal.vue'
import chainGroupEditModal from './editModal.vue'
import { linkageGroupList, linkageGroupDetail, linkageGroupUnRelation } from '@/api/linkageGroup'
export default {
  components: { STable, VSelect, associateModal, chainGroupEditModal },
  data () {
    return {
      tableHeight: 0,
      formItemLayout: {
        labelCol: { span: 6 },
        wrapperCol: { span: 16 }
      },
      queryParam: {
        linkageGroupName: '',
        dealerName: ''
      },
      disabled: false, //  查询、重置按钮是否可操作
      columns: [
        { title: '连锁组名称', dataIndex: 'linkageGroupName', customRender: function (text) { return text || '--' }, ellipsis: true, align: 'left' },
        { title: '操作', scopedSlots: { customRender: 'action' }, align: 'center' }
      ],
      expandedRowKeys: [],
      list: [],
      parameter: {
        pageNo: 1,
        pageSize: 10
      },
      pagination: {
        total: 1,
        current: 1,
        showTotal: total => `共 ${total} 条记录 第 ${this.pagination.current} / ${Math.ceil(total / this.pagination.pageSize)} 页`,
        showQuickJumper: true,
        showSizeChanger: true,
        pageSize: 10
      },
      innerColumns: [
        { title: '关联连锁店名称', dataIndex: 'dealer.name', customRender: function (text) { return text || '--' }, ellipsis: true },
        { title: '负责人', dataIndex: 'dealer.contactName', customRender: function (text) { return text || '--' }, ellipsis: true },
        { title: '联系电话', dataIndex: 'dealer.contactPhone', customRender: function (text) { return text || '--' } },
        { title: '操作', scopedSlots: { customRender: 'action' }, align: 'center' }
      ],
      innerData: [],
      openModal: false, //  新增编辑  弹框
      nowData: null, //  当前记录数据
      tabInd: '1', //  tabs选中项
      dealerSn: [],
      openEditModal: false,
      itemId: '',
      itemSn: ''
    }
  },
  mounted () {
    this.tableHeight = window.innerHeight - 380
    this.getList()
  },
  methods: {
    expand (expanded, record) {
      this.nowData = record
      this.expandedRowKeys = [] // 重置展开节点，只展开当前点击的节点（内部数据调用模板，无法做到同时几个内层表格数据直接缓存在页面）
      if (expanded) {
        this.getSubItem(record) // 获取表格内部数据
      }
    },
    // 外层表格操作
    change (pagination, filters, sorter) { // 对页面大小，筛选，排序等条件修改后重新查询数据
      this.pagination = pagination
      this.parameter.pageNo = pagination.current
      this.parameter.pageSize = pagination.pageSize
      this.getList()
    },
    // 获取子节点数据
    getSubItem (record) {
      this.innerData = []
      linkageGroupDetail({ sn: record.linkageGroupSn }).then(res => {
        if (res.status == 200 && res.data && res.data.length) {
          this.innerData = res.data
        } else {
          this.innerData = []
        }
        if (res.data.length == 0) {
          this.$message.info('暂无分店，请关联分店')
        } else {
          this.expandedRowKeys = [record.linkageGroupSn]
        }
      })
    },
    // 添加子级成功
    addItemOk () {
      this.getSubItem(this.nowData)
    },
    // 获取列表数据
    getList () {
      this.disabled = true
      linkageGroupList(Object.assign(this.parameter, this.queryParam)).then(res => {
        const data = res.data
        this.pagination.total = Number(data.count)
        this.pagination.current = data.pageNo
        this.pagination.pageSize = data.pageSize
        this.parameter.pageNo = data.pageNo
        this.parameter.pageSize = data.pageSize
        const no = (data.pageNo - 1) * data.pageSize
        for (var i = 0; i < data.list.length; i++) {
          data.list[i].no = no + i + 1
        }
        this.disabled = false
        this.list = data.list
      })
    },
    // 关闭  新增编辑 弹框
    closeEditModal () {
      this.itemId = ''
      this.nowData = null
      this.openEditModal = false
    },
    // 编辑连锁组
    handleEdit (row) {
      this.itemId = row.id
      this.nowData = JSON.parse(JSON.stringify(row)) //  为避免编辑数据未改变无法触发表单赋值
      this.openEditModal = true
    },
    //  重置
    resetSearchForm (flag) {
      if (!flag) {
        this.queryParam.linkageGroupName = ''
        this.queryParam.dealerName = ''
        this.parameter.pageNo = 1
        this.parameter.pageSize = 10
        this.expandedRowKeys = []
      }
      this.getList()
    },
    // 关联下级
    handleAssociate (row) {
      this.itemSn = row.linkageGroupSn
      this.nowData = row
      this.openModal = true
    },
    // 取消关联
    handleDisassociate (row) {
      const _this = this
      _this.nowData = row
      _this.$confirm({
        title: '提示',
        content: '确认要解除关联的关系吗？',
        centered: true,
        onOk () {
          linkageGroupUnRelation({ sn: row.linkageGroupDetailSn }).then(res => {
            if (res.status == 200) {
              _this.$message.success(res.message)
              _this.addItemOk()
            }
          })
        }
      })
    },
    //  关闭弹框
    closeModal () {
      this.openModal = false
    }
  }
}
</script>
