<!-- @desc:商品属性  @auth:常皓宁  @time:2024-1-31 9:47 -->
<template>
  <div class="main-div" ref="mainDiv">
    <loading :loading="loading" v-if="!modalVisible"></loading>
    <BaseIndexButtonGroup ref="BaseIndexButtonGroup" id="BaseIndexButtonGroup">
      <template #left>
        <!--    查询    -->
        <BaseIndexButton ref="search" name="search"></BaseIndexButton>
        <!--    清空条件    -->
        <BaseIndexButton ref="clear" name="clear"></BaseIndexButton>
        <!--    编辑    -->
        <BaseIndexButton ref="edit" name="edit"></BaseIndexButton>
        <!--    启用    -->
        <BaseIndexButton ref="enable" name="enable"></BaseIndexButton>
        <!--    停用    -->
        <BaseIndexButton ref="disable" name="disable"></BaseIndexButton>
      </template>
      <template #right>
        <!--   新建     -->
        <BaseIndexButton ref="add" name="add"></BaseIndexButton>
      </template>
    </BaseIndexButtonGroup>

    <!--  查询条件区域  -->
    <div id="search-cond-div" ref="search-cond-div" class="search-cond-class">
      <SearchCond ref="searchCond" v-model="searchCond"
                  @collapse-change="collapseChange" :setFlag="false"
                  :searchContent="searchContent"
      ></SearchCond>
    </div>

    <!--  表格部分  -->
    <div :style="'height: ' + (tableHeight + 30) + 'px'" class="split-div-class">
      <DkSplit v-model="split">
        <!-- 左边部分   -->
        <DkTable slot="left" ref="leftTable" :data="leftData" :height="tableHeight + 30" :page-flag="false"
                 :page-total-flag="false" :show-setting-flag="false" :freeze="false" :choose-flag="false"
                 @current-change="currentChangeEvent($event)">
          <DkTableColumn :title="$t('allType')" field="kindName" width="auto" :filter="false" :sortable="false"
                         :center-flag="true">
          </DkTableColumn>
        </DkTable>

        <!-- 右边部分   -->
        <DkTable v-if="tableFlag" slot="right" :id="'table-' + $options.name" ref="table-select" :data="tableData" :pageFlag="true"
                 :page-total="pageInfo.total" :current-page="pageInfo.currentPage" :choose-flag="false"
                 :height="this.tableHeight" primaryKey="typeId" @pageChange="pageSizeChange">
          <DkTableColumn field="编码"></DkTableColumn>
          <DkTableColumn field="名称"></DkTableColumn>
          <DkTableColumn field="flgValid" type="switch" ></DkTableColumn>
        </DkTable>

        <!-- 表格   -->
        <DkTable v-if="treeFlag" :data="tableData" slot="right" :page-flag="false" :page-total-flag="false" :height="this.tableHeight"
                 :tree-flag="true"
                 :choose-flag="false"
                 :expand-flag="true"
                 tree-row-field="goodsAttrId"
                 ref="table-select" name="table">
          <DkTableColumn field="编码" min-width="150" tree-node></DkTableColumn>
          <DkTableColumn field="名称"></DkTableColumn>
        </DkTable>
      </DkSplit>
    </div>

    <!--新建编辑-->
    <DkModal
      :loading="loading"
      v-model="editAddModal"
      ref="modal_editAdd"
      @on-visible-change="handleVisibleModal"
      @modalOk="save"
      :saveFlag="true"
      :title="modalTitle"
    >
      <DkForm ref="formInline" v-model="formData" :col-count="1">
        <DkFormItem prop="编码" :required="true">
          <InputPop v-model="formData.编码"/>
        </DkFormItem>
        <DkFormItem prop="名称" :required="true">
          <InputPop v-model="formData.名称"/>
        </DkFormItem>
        <DkFormItem prop="分类" :required="true">
          <SelectPop v-model="formData.分类" ref="分类" :multiple="false" :options="kindList"
                     labelKey="kindName" valueKey="kindId">
          </SelectPop>
        </DkFormItem>
      </DkForm>
    </DkModal>

  </div>
</template>

<script>
import {indexMixin} from '@/mixins'

export default {
  name: 'goods-attr',
  mixins: [indexMixin],
  data() {
    let self = this
    return {
      modalTitle: '',//新建编辑弹窗名称
      submitType: '',//新建编辑提交类型
      split: 0.15,
      minSplit: 0.15,
      treeFlag:false,
      tableFlag:false,
      leftData: [
        {
          kindId: 1,
          kindName: '商品品牌',
        },
        {
          kindId: 2,
          kindName: '商品种类',
        },
        {
          kindId: 3,
          kindName: '商品系列',
        },
        {
          kindId: 4,
          kindName: '计量单位',
        },
      ],
      tableData: [],
      kindList:[
        {
          kindId: 1,
          kindName: '商品品牌',
        },
        {
          kindId: 2,
          kindName: '商品种类',
        },
        {
          kindId: 3,
          kindName: '商品系列',
        },
        {
          kindId: 4,
          kindName: '计量单位',
        },
      ],
      formData:{
        编码: '',
        名称: '',
        分类:null,
      },
      // 渲染数据
      test00: [
        {
          编码: 'CK00001',
          名称: '运营主仓',
          flgValid:true
        },
        {
          编码: 'CK00002',
          名称: '红星店面仓库',
          flgValid:true
        },
        {
          编码: 'CK00003',
          名称: '红星店面仓库',
          flgValid:true
        }],
      test01: [
        {
          goodsAttrId: 99,
          编码: 'CK001',
          parentId: 0,
          名称:'浴室柜类'
        },
        {
          goodsAttrId: 1,
          编码: 'CK002',
          parentId: 99,
          名称:'原木类'
        },
        {
          goodsAttrId: 2,
          编码: 'CK003',
          parentId: 99,
          名称:'古典类'
        },
        {
          goodsAttrId: 3,
          编码: 'CK004',
          parentId: 99,
          名称:'现代类'
        },
      ],
      test02: [
        {
          编码: 'SR00001',
          名称: '配送费',
          flgValid: true
        },
        {
          编码: 'SR00002',
          名称: '安装费',
          flgValid: true
        },
        {
          编码: 'SR00003',
          名称: '加工费',
          flgValid: true
        },
        {
          编码: 'SR00004',
          名称: '拆旧费',
          flgValid: true
        },
        {
          编码: 'SR00005',
          名称: '其他收入',
          flgValid: true
        }
      ],
      test03: [
        {
          编码: 'SR00001',
          名称: '房租费',
          flgValid: true
        },
        {
          编码: 'SR00002',
          名称: '水电费',
          flgValid: true
        },
        {
          编码: 'SR00003',
          名称: '送货费',
          flgValid: true
        },
        {
          编码: 'SR00004',
          名称: '员工工资',
          flgValid: true
        },
        {
          编码: 'SR00005',
          名称: '促销活动费',
          flgValid: true
        }
      ],
      test04: [
        {
          编码: 'RK00001',
          名称: '期初入库',
          flgValid: true
        },
        {
          编码: 'RK00002',
          名称: '其他入库',
          flgValid: true
        },
        {
          编码: 'RK00003',
          名称: '采购入库',
          flgValid: true
        },
        {
          编码: 'RK00004',
          名称: '销售回库',
          flgValid: true
        }
      ],
      test05: [
        {
          编码: 'CK00001',
          名称: '销售出库',
          flgValid: true
        },
        {
          编码: 'CK00002',
          名称: '其他出库',
          flgValid: true
        },
        {
          编码: 'CK00003',
          名称: '采购退货出库',
          flgValid: true
        },
        {
          编码: 'CK00004',
          名称: '调货出库',
          flgValid: true
        }
      ],
      test06: [
        {
          编码: 'SF00001',
          名称: '微信',
          flgValid: true
        },
        {
          编码: 'SF00002',
          名称: '现金',
          flgValid: true
        },
        {
          编码: 'SF00003',
          名称: '银行转账',
          flgValid: true
        },
        {
          编码: 'SF00004',
          名称: '支付宝',
          flgValid: true
        }
      ],
      searchContent:
        [
          {
            itemCode: '编码',
          },
          {
            itemCode: '名称',
          },
        ],
    }
  },
  methods: {
    /**
     * @desc   : 左侧列表行变化事件
     * @author : 常皓宁
     * @date   : 2024/1/31 9:03
     */
    currentChangeEvent({row}) {
      if (row != null) {
        let name = row.kindName
        if (name == '商品品牌') {
          this.tableData = this.test00
          this.tableFlag = true
          this.treeFlag = false
        }
        if (name == '商品种类') {
          this.tableData = this.test01
          this.tableFlag = false
          this.treeFlag = true
        }
        if (name == '商品系列') {
          this.tableData = this.test02
          this.tableFlag = true
          this.treeFlag = false
        }
        if (name == '计量单位') {
          this.tableData = this.test03
          this.tableFlag = true
          this.treeFlag = false
        }
      }
    },

    /**
     * @desc   : 新建按钮点击事件
     * @author : 常皓宁
     * @date   : 2024/1/31 9:19
     */
    add() {
      this.modalTitle = this.setTitle(this.$config.formMode.add, '商品属性')
      let row = this.$refs['leftTable'].$refs.table.getCurrentRecord()
      if (row) {
        this.formData = {}
        this.formData.分类 = row.kindId
      }
      this.editAddModal = true
    },

    /**
     * @desc   : 编辑按钮事件
     * @author : 常皓宁
     * @date   : 2024/1/31 10:35
     */
    edit(rows) {
      this.modalTitle = this.setTitle(this.$config.formMode.edit, '商品属性')
      if (rows.length > 0) {
        // this.detail(rows[0].typeId)
        this.formData.名称 = rows[0].名称
        this.formData.编码 = rows[0].编码
        let row = this.$refs['leftTable'].$refs.table.getCurrentRecord()
        if (row) {
          this.formData.分类 = row.kindId
        }
      }
      this.editAddModal = true
    },
  },
  created() {
    this.primaryKey = 'goodsAttrId'  // 设置主键Id
    this.routeObjName = 'goodsAttr'  // 设置路由名称
  }
}
</script>

<style scoped>

</style>
