<template>
  <div class="main-div" ref="mainDiv">
    <!--加载中-->
    <loading :loading="loading" v-if="!modalVisible"></loading>
    <DkPageButton :total="editKeys?editKeys.length:0"
                  :current="editIndex"
                  v-if="editKeys && editKeys.length > 1"
                  @pageChange="editPageChange"></DkPageButton>
    <DkCollapse @on-change="changeCollapse" ref="collapse">
      <DkPanel prop="基本信息">
        <!--  下拉区域  -->
        <DkForm slot="content" ref="formInline" v-model="formData"  :labelMaxWords=5>
          <!--唯一编码-->
          <DkFormItem :required="true" prop="唯一编码">
            <InputPop ref="唯一编码" v-model="formData.唯一编码" :readonly="type == $config.formMode.edit"/>
          </DkFormItem>
          <!--商品型号-->
          <DkFormItem :required="true" prop="商品型号">
            <InputPop ref="商品型号" v-model="formData.商品型号" :readonly="type == $config.formMode.edit"/>
          </DkFormItem>
          <!--商品名称-->
          <DkFormItem :required="true" prop="商品名称">
            <InputPop ref="商品名称" v-model="formData.商品名称"/>
          </DkFormItem>
          <DkFormItem prop="remarks">
            <InputPop v-model="formData.remarks" maxlength="255"/>
          </DkFormItem>
        </DkForm>
      </DkPanel>
      <DkPanel prop="商品属性">
        <!--  下拉区域  -->
        <DkForm slot="content" ref="formInline" v-model="formData" :labelMaxWords=5>
          <!--商品品牌-->
          <DkFormItem prop="商品品牌" :required="true" :data-type="this.$config.dataType.array" :label="'商品品牌'">
            <SelectPop v-model="formData.商品品牌" :multiple="false" :options="List1" ref="roleIds"
                       labelKey="roleName"
                       valueKey=roleId>
            </SelectPop>
          </DkFormItem>
          <!--商品种类-->
          <DkFormItem prop="商品种类" :required="true" :data-type="this.$config.dataType.array" :label="'商品种类'">
            <SelectPop v-model="formData.商品种类" :multiple="false" :options="List2" ref="roleIds"
                       labelKey="roleName"
                       valueKey=roleId>
            </SelectPop>
          </DkFormItem>
          <!--计量单位-->
          <DkFormItem prop="计量单位" :required="true" :data-type="this.$config.dataType.array" :label="'计量单位'">
            <SelectPop v-model="formData.计量单位" :multiple="false" :options="List4" ref="roleIds"
                       labelKey="roleName"
                       valueKey=roleId>
            </SelectPop>
          </DkFormItem>
          <!--商品系列-->
          <DkFormItem prop="商品系列" :data-type="this.$config.dataType.array" :label="'商品系列'">
            <SelectPop v-model="formData.商品系列" :multiple="false" :options="List3" ref="roleIds"
                       labelKey="roleName"
                       valueKey=roleId>
            </SelectPop>
          </DkFormItem>
          <!--商品规格-->
          <DkFormItem prop="商品规格" :data-type="this.$config.dataType.array" :label="'商品规格'">
            <SelectPop v-model="formData.商品规格" :multiple="false" :options="List5" ref="roleIds"
                       labelKey="roleName"
                       valueKey=roleId>
            </SelectPop>
          </DkFormItem>
          <!--辅助计量单位-->
          <DkFormItem prop="辅助计量单位">
            <InputPop ref="辅助计量单位" v-model="formData.辅助计量单位"/>
          </DkFormItem>
        </DkForm>
      </DkPanel>
      <DkPanel prop="仓库信息">
        <DkForm slot="content" ref="formInline" v-model="formData" :labelMaxWords=5>
          <!--初期仓库-->
          <DkFormItem :required="true" prop="orgId" :data-type="$config.dataType.number" :label="'初期仓库'">
            <SelectMagnifier v-model="formData.初期仓库" :display-text="formData.levelName"
                             :type="this.$config.MagnifierType.初期仓库"
                             :multiple="false"
                             title="初期仓库"
                             @ok="chooseHouse"></SelectMagnifier>
          </DkFormItem>
          <!--库存色号-->
          <DkFormItem prop="库存色号">
            <InputPop ref="库存色号" v-model="formData.库存色号"/>
          </DkFormItem>
          <!--期初数量-->
          <DkFormItem prop="期初数量">
            <InputPop ref="期初数量" v-model="formData.期初数量"/>
          </DkFormItem>
          <!--期初成本价-->
          <DkFormItem prop="期初成本价">
            <InputPop ref="期初成本价" v-model="formData.期初成本价"/>
          </DkFormItem>
        </DkForm>
      </DkPanel>
      <DkPanel prop="价格明细">
        <DkForm slot="content" ref="formInline" v-model="formData" :labelMaxWords=5>
          <!--采购价-->
          <DkFormItem prop="采购价">
            <InputPop ref="采购价" v-model="formData.采购价"/>
          </DkFormItem>
          <!--零售价-->
          <DkFormItem prop="零售价">
            <InputPop ref="零售价" v-model="formData.零售价"/>
          </DkFormItem>
          <!--批发价-->
          <DkFormItem prop="批发价">
            <InputPop ref="批发价" v-model="formData.批发价"/>
          </DkFormItem>
          <!--销售售价-->
          <DkFormItem prop="销售售价">
            <InputPop ref="销售售价" v-model="formData.销售售价"/>
          </DkFormItem>
        </DkForm>
      </DkPanel>
    </DkCollapse>

    <!--      下部分按钮区域-->
    <DkSaveButton ref="saveButton" :loading="loading" @save="save" @close="close"
                  v-if="type !== 'edit-staff'"></DkSaveButton>
  </div>
</template>

<script>
import {formMixin} from "@/mixins/form";

export default {
  components: {},
  mixins: [formMixin],

  data() {
    return {
      List1: [
        {
          roleId: 1,
          roleName: '蒙娜丽莎瓷砖'
        },
        {
          roleId: 2,
          roleName: '箭牌卫浴'
        },
        {
          roleId: 3,
          roleName: '恒洁位于'
        },
      ],
      List2: [
        {
          roleId: 1,
          roleName: '陶瓷类'
        },
        {
          roleId: 2,
          roleName: '浴室柜类'
        },
      ],
      List3: [
        {
          roleId: 1,
          roleName: '原木系列'
        },
        {
          roleId: 2,
          roleName: '金属系列'
        },
        {
          roleId: 3,
          roleName: '古典系列'
        },
        {
          roleId: 4,
          roleName: '沐浴系列'
        },
      ],
      List4: [
        {
          roleId: 1,
          roleName: '米'
        },
        {
          roleId: 2,
          roleName: '箱'
        },
        {
          roleId: 3,
          roleName: '平方米'
        },
        {
          roleId: 4,
          roleName: '个'
        },
      ],
      List5:[
        {
          roleId: 1,
          roleName: '800*800'
        },
        {
          roleId: 2,
          roleName: '300*800'
        },
        {
          roleId: 3,
          roleName: '600*600'
        },
      ],
      formData: {
        唯一编码: null,
        商品型号: null,
        商品名称: null,
        商品品牌: null,
        商品种类: null,
        商品系列: null,
        计量单位: null,
        商品规格: null,
        辅助计量单位: null,
        初期仓库: null,
        库存色号: null,
        期初数量: null,
        期初成本价: null,
        采购价: null,
        零售价: null,
        批发价: null,
        销售售价: null,
        remarks: null,
      },
    }
  },
  methods: {

  },
}
</script>

<style scoped>

</style>
