<template>
  <div class="categorySet-wrap">
    <a-spin :spinning="spinning" tip="Loading...">
      <div ref="headerBar">
        <a-page-header :ghost="false" :backIcon="false" class="header-bar">
          <!-- 自定义的二级文字标题 -->
          <template slot="subTitle">
            <span class="subTitle-word text-overflow" style="max-width:300px;">用户姓名：测试测试</span>
            <a-button id="purchaseNewOrderEdit-back-btn" type="link" @click="handleBack" class="button-default"> <a-icon type="rollback" /> 返回列表</a-button>
          </template>
        </a-page-header>
      </div>
      <a-card size="small" :bordered="false" class="categorySet-cont">
        <div :style="{ height: tableHeight+84.5+'px' }">
          <a-tabs default-active-key="1">
            <a-tab-pane key="1" tab="设置管辖区域">
              <div class="areaSet-wrap">
                <div class="table-page-search-wrapper newTableSearchName" >
                  <div class="areaSet-btnGroup" style="margin-bottom:20px;">
                    <a-button type="primary" class="button-error" @click="openAreaModal" ghost>选择区域</a-button>
                    <a-button type="primary" class="button-error" @click="openDealerModal" ghost>选择经销商</a-button>
                  </div>
                  <a-form layout="inline" @keyup.enter.native="$refs.table.refresh(true)">
                    <a-row :gutter="15">
                      <a-col :md="6" :sm="24">
                        <a-form-model-item label="所在区域/分区">
                          <subarea id="areaSet-subareaSn" ref="subarea" v-model="queryParam.subareaSn" @change="subareaChange"></subarea>
                        </a-form-model-item>
                      </a-col>
                      <a-col :md="6" :sm="24">
                        <a-form-item label="经销商名称">
                          <a-input id="areaSet-dealerName" v-model.trim="queryParam.dealerName" allowClear placeholder="请输入经销商名称"/>
                        </a-form-item>
                      </a-col>
                      <a-col :md="6" :sm="24">
                        <a-button type="primary" @click="$refs.table.refresh(true)" :disabled="disabled" id="areaSet-refresh">查询</a-button>
                        <a-button style="margin-left: 5px" @click="resetSearchForm" :disabled="disabled" id="areaSet-reset">重置</a-button>
                      </a-col>
                    </a-row>
                  </a-form>
                </div>
                <a-spin :spinning="spinning" tip="Loading...">
                  <!-- 列表 -->
                  <s-table
                    class="sTable fixPagination"
                    ref="table"
                    size="small"
                    :rowKey="(record) => record.id"
                    :columns="columns"
                    :showPagination="false"
                    :data="loadData"

                    :defaultLoadData="false"
                    bordered>
                  </s-table>
                </a-spin>
                <!-- :style="{ height: tableHeight+'px' }"
                :scroll="{ y: tableHeight }" -->
              </div>
            </a-tab-pane>
            <a-tab-pane key="2" tab="设置管辖品类" force-render>
              <categorySet></categorySet>
            </a-tab-pane>
          </a-tabs>
        </div>
      </a-card>
      <!-- 选择区域 -->
      <chooseAreaModal
        ref="partQuery"
        :showModal="openChooseArea"
        @close="openChooseArea=false">
      </chooseAreaModal>
      <!-- 选择经销商 -->
      <a-drawer
        title="选择经销商"
        width="80%"
        :zIndex="100"
        :visible="openChooseDealer"
        :get-container="false"
        :wrap-style="{ position: 'absolute' }"
        @close="openChooseDealer = false">
        <div class="dealerModalCon">
          <chooseDealer></chooseDealer>
        </div>
      </a-drawer>
    </a-spin>
  </div>
</template>

<script>
import { commonMixin } from '@/utils/mixin'
import { STable } from '@/components'
import categorySet from './categorySet'
import chooseAreaModal from './chooseAreaModal'
import chooseDealer from '@/views/common/chooseDealer.vue'
export default {
  name: 'SettingsIndex',
  mixins: [commonMixin],
  components: { STable, categorySet, chooseAreaModal, chooseDealer },
  data () {
    return {
      openChooseArea: false,
      openChooseDealer: false,
      spinning: false,
      tableHeight: 0,
      queryParam: {
        subareaSn: undefined,
        subareaAreaSn: undefined,
        dealerName: ''
      },
      columns: [
        { title: '序号', dataIndex: 'no', width: '4%', align: 'center' },
        { title: '添加时间', dataIndex: 'subareaName1', width: '16%', align: 'center', customRender: function (text) { return text || '--' } },
        { title: '区域', dataIndex: 'subareaName2', width: '10%', align: 'center', customRender: function (text) { return text || '--' } },
        { title: '分区', dataIndex: 'subareaName3', width: '10%', align: 'center', customRender: function (text) { return text || '--' } },
        { title: '经销商', dataIndex: 'subareaName4', width: '16%', align: 'center', customRender: function (text) { return text || '--' }, ellipsis: true },
        { title: '操作', scopedSlots: { customRender: 'action' }, width: '8%', align: 'center' }
      ],
      disabled: false, //  查询、重置按钮是否可操作
      dataSource: [],
      openModal: false, //  新增编辑产品品牌  弹框
      itemSn: '', //  当前sn
      nowData: null, //  当前记录数据
      showClassifyModal: false,
      showBrandModal: false,
      ChooseClassifyPos: null,
      loadData: parameter => {
        this.disabled = true
        this.spinning = true
        return subareaQueryIncludeAreaAll(Object.assign(parameter,this.queryParam)).then(res => {
          let data
          if (res.status == 200) {
            data = res.data
            const no = 0
            for (var i = 0; i < data.length; i++) {
              data[i].no = no + i + 1
            }
            this.disabled = false
          }
          this.spinning = false
          return data
        })
      }
    }
  },
  methods: {
    subareaChange(val){
      this.queryParam.subareaSn = val[0] ? val[0] : undefined
      this.queryParam.subareaAreaSn = val[1] ? val[1] : undefined
    },
    resetSearchForm () {
      this.queryParam = {
        subareaSn: undefined,
        subareaAreaSn: undefined,
        dealerName: ''
      }
      this.$refs.subarea.clearData()
      this.$refs.table.refresh(true)
    },
    openAreaModal () {
      this.openChooseArea = true
    },
    openDealerModal () {
      this.openChooseDealer = true
    },
    //  返回
    handleBack () {
      this.$router.push({ name: 'businessOwnerSettings' })
    },
    // 新增管辖品类
    addCategory () {
      const newData = {
        classifyList: [],
        brandList: []
      }
      this.dataSource.push(newData)
    },
    // 删除分类、品牌标签
    delLabel (pos, i, name) {
      this.dataSource[pos][name].splice(i, 1)
    },
    // 添加分类标签
    addClassifyTag (pos, row) {
      this.ChooseClassifyPos = pos
      this.showClassifyModal = true
    },
    handleClassifyModal (con) {
      const chooseList = con
      this.showClassifyModal = false
      this.dataSource[this.ChooseClassifyPos].classifyList = [...this.dataSource[this.ChooseClassifyPos].classifyList, ...chooseList]
    },
    // 添加品牌标签
    addBrandTag (pos, row) {
      this.ChooseBrandPos = pos
      this.showBrandModal = true
    },
    // 保存
    save () {

    },
    //  新增/编辑
    handleEdit (row) {
      if (row) {
        this.itemSn = row.warehouseLocationSn
        row.warehouseSn = this.$route.params.sn
        this.nowData = row
      } else {
        this.itemSn = null
        this.nowData = { warehouseSn: this.$route.params.sn }
      }
      this.openModal = true
    },
    //  新增/编辑  成功
    handleOk () {
      this.$refs.table.refresh(true)
    },
    //  关闭弹框
    closeModal () {
      this.itemSn = ''
      this.openModal = false
    },
    //  删除
    handleDel (pos) {
      const _this = this
      this.$confirm({
        title: '提示',
        content: '删除后不可恢复，确定要进行删除吗？',
        centered: true,
        onOk () {
          _this.dataSource.splice(pos, 1)
        }
      })
    },
    pageInit () {
      const _this = this
      this.$nextTick(() => { // 页面渲染完成后的回调
        _this.setTableH()
      })
    },
    setTableH () {
      const headHeight = this.$refs.headerBar.offsetHeight
      this.tableHeight = window.innerHeight - headHeight - 230
    }
  },
  watch: {
    '$store.state.app.winHeight' (newValue, oldValue) { //  窗口变更时，需同时更改表格高度
      this.setTableH()
    }
  },
  mounted () {
    if (!this.$store.state.app.isNewTab) { // 页签刷新时调用
      this.pageInit()
    }
  },
  activated () {
    // 如果是新页签打开，则重置当前页面
    if (this.$store.state.app.isNewTab) {
      this.pageInit()
    }
    // 仅刷新列表，不重置页面
    if (this.$store.state.app.updateList) {
      this.pageInit()
      this.$refs.table.refresh()
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {})
  }
}
</script>

<style lang="less" scoped>
  .categorySet-wrap{
    .table-operator{
    text-align:right;
    }
  }
</style>
