<!-- 包装原型表格-->
<template>
  <div>
    <vxe-table id='bzuxtable' @checkbox-change="selectionChange" @checkbox-all="selectAllChange" max-height="400"
      :checkbox-config="{ checkRowKeys: selectlist }" :row-config="{ keyField: 'id' }" :custom-config="{ storage: true }"
      border show-overflow :data="bzyxTableData" :column-config="{ resizable: true }"
      :edit-config="{ trigger: 'click', mode: 'cell', showUpdateStatus: true, showInsertStatus: true }" class="ggdycss">
      <vxe-column type="checkbox" width="50" align="center"></vxe-column>
      <vxe-column field="name" title="盒型选择" :edit-render="{ autofocus: '.vxe-input--inner' }" width="140" align="left">
        <template #edit="{ row }">
          <span v-if="row.write !== 2"> {{ row.name }}</span>
          <vxe-input v-else v-model.trim="row.name" maxlenth='255' />
        </template>
      </vxe-column>
      <vxe-column field="image" title="图片" width="100" align="center">
        <template #default="{ row }">
          <el-image v-if="row.write !== 2" :src="row.image" class="avatar" @mousemove="enlarge($event, row)"
            @mouseout="enlargeOut(row)">
            <template #error>
              <div class="image-slot">
                <i class="el-icon-picture-outline"></i>
              </div>
            </template>
          </el-image>
          <el-upload ref="uploadRef" :action="data.upLoadUrl" :with-credentials="true" :on-success="function (res, file, file_list) {
            return handleSuccess(res, file, file_list, row)
          }" :show-file-list="false" name="file" :limit="1" :data="data.upLoadQuery" accept=".png, .jpg" v-else>
            <el-image v-if="row.image" :src="row.image" class="avatar" @mousemove="enlarge($event, row)"
              @mouseout="enlargeOut(row)" :with-credentials="data.withcredentials">
              <template #error>
                <div class="image-slot">
                  <i class="el-icon-picture-outline"></i>
                </div>
              </template>
            </el-image>
            <el-icon v-else class="el-icon-plus"></el-icon>
          </el-upload>
          <view v-show="row.enlargeImgShow" class="img-show position-f" v-if="data.enlargeImg" :style="data.top">
            <img :src="data.enlargeImg" />
          </view>
        </template>
      </vxe-column>
      <vxe-column field="type" title="包装形式" :edit-render="{ autofocus: '.vxe-input--inner' }" width="250" align="left">
        <template #edit="{ row }">
          <span v-if="row.write !== 2"> {{ row.type }}</span>
          <vxe-input v-else v-model.trim="row.type" maxlenth='255' />
        </template>
      </vxe-column>
      <vxe-column field="structure" title="包装结构组成" :edit-render="{ autofocus: '.vxe-input--inner' }" width="250"
        align="left">
        <template #edit="{ row }">
          <span v-if="row.write !== 2">{{ row.structure }}</span>
          <vxe-input v-else v-model.trim="row.structure" maxlenth='255' />
        </template>
      </vxe-column>
      <vxe-column field="size" title="包装尺寸（不含挂钩尺寸）" :edit-render="{ autofocus: '.vxe-input--inner' }" width="250"
        align="left">
        <template #edit="{ row }">
          <span v-if="row.write == 0"> {{ row.size }}</span>
          <vxe-input v-else v-model.trim="row.size" maxlenth='255' />
        </template>
      </vxe-column>
      <vxe-column field="transport_size" title="运输外箱尺寸" :edit-render="{ autofocus: '.vxe-input--inner' }" width="250"
        align="left">
        <template #edit="{ row }">
          <span v-if="row.write == 0"> {{ row.transport_size }}</span>
          <vxe-input v-else v-model.trim="row.transport_size" maxlenth='255' />
        </template>
      </vxe-column>
      <vxe-column field="layout" title="箱内排布" :edit-render="{ autofocus: '.vxe-input--inner' }" width="130" align="left">
        <template #edit="{ row }">
          <span v-if="row.write == 0"> {{ row.layout }}</span>
          <vxe-input v-else v-model.trim="row.layout" maxlenth='255' />
        </template>
      </vxe-column>
      <vxe-column field="molecule" title="用量（分子）" :edit-render="{ autofocus: '.vxe-input--inner' }" width="120"
        align="left">
        <template #edit="{ row }">
          <vxe-input v-model="row.molecule" type="number" min='0'
            @blur="checkNum($event, row.index, 'molecule', 8, 4)"></vxe-input>
        </template>
      </vxe-column>
      <vxe-column field="denominator" title="用量（分母）" :edit-render="{ autofocus: '.vxe-input--inner' }" width="180"
        align="left">
        <template #edit="{ row }">
          <vxe-input v-model="row.denominator" type="number" min='0'
            @blur="checkNum($event, row.index, 'denominator', 8, 4)"></vxe-input>
        </template>
      </vxe-column>
      <vxe-column field="price" title="单价（￥）" :edit-render="{ autofocus: '.vxe-input--inner' }" width="120" align="left">
        <template #edit="{ row }">
          <vxe-input v-model="row.price" type="number" min='0'
            @blur="checkNum($event, row.index, 'price', 8, 4)"></vxe-input>
        </template>
      </vxe-column>
      <vxe-column field="remark" title="备注" :edit-render="{ autofocus: '.vxe-input--inner' }" width="250" align="left">
        <template #edit="{ row }">
          <vxe-input v-model.trim="row.remark" maxlenth='200' />
        </template>
      </vxe-column>
    </vxe-table>
  </div>
</template>
<script>
import { defineComponent, reactive, getCurrentInstance, onMounted, defineEmits } from 'vue';
export default defineComponent({
  name: 'lcbzyxtable',
  props: {
    bzyxTableData: {
      type: Array,
      default: []
    },
    selectlist: {
      type: Array,
      default: []
    },
    projectId: {
      type: Number,
      default: null
    }
  },
  emits: ["update:bzyxTableData", "update:selectlist"],
  setup (props, context) {
    const apiVersion = process.env.VUE_APP_API_VERSION.replace(/\./g, '_')
    const baseUrl = process.env.VUE_APP_API_BASEURL + apiVersion + '/'
    const emit = defineEmits(['getPageInfo'])
    let { proxy } = getCurrentInstance()
    const data = reactive({
      withcredentials: true,
      enlargeImg: '',
      top: '',
      upLoadUrl: baseUrl + 'project/upload/file',
      upLoadQuery: { type: 'images' },
      loading: '',
      fileList: [], //上传的文件列表
      multipleSelection: [],// 字段选择显示选中结合
    })
    onMounted(() => { })
    // 输入校验前8侯三
    function checkNum (event, index, key, integerMax, digits) {
      let reg;
      if (integerMax) {
        reg = new RegExp(`^(\\-)*(\\d{${integerMax}}).*$`); // 通过 integerMax 限制整数位,
        if (!event.value.includes('.')) {
          event.value = event.value.replace(reg, '$1$2');
        }
      }
      if (digits) {
        reg = new RegExp(`^(-)*(\\d*)\\.(\\d{0,${digits}}).*$`); // 通过 digits 限制小数位,
        event.value = event.value.replace(reg, '$1$2.$3');
      }
      if (integerMax && digits) {
        reg = new RegExp(`^(-)*(\\d{${integerMax}}).*\\.(\\d{0,${digits}}).*$`);
      } else {
        reg = new RegExp(`^(-)*(\\d*).*\\.(\\d{0,2}).*$`);
      }

      event.value = event.value.replace(reg, '$1$2.$3');
      if (event.value) (
        props.bzyxTableData[index - 1][key] = parseFloat(event.value).toFixed(3)
      )
      context.emit('update:bzyxTableData', props.bzyxTableData)
      // return event.value
    }
    // 选中数据处理
    function dataseletset () {
      let aa = []
      if (data.multipleSelection && data.multipleSelection.length > 0) {
        data.multipleSelection.forEach(l => {
          props.bzyxTableData.forEach(k => {
            if (k.id == l.id) {
              k.selected = '1'
              aa.push(k.id)
            }
          })
        })
        props.bzyxTableData.forEach(M => {
          if (!aa.includes(M.id)) {
            M.selected = '0'
          }
        })
      } else {
        props.bzyxTableData.forEach(l => {
          l.selected = '0'
        })
      }
    }
    // 选中单行
    function selectionChange (value) {
      data.multipleSelection = value.records
      dataseletset()
    }
    // 选中全部
    function selectAllChange (value) {
      data.multipleSelection = value.records
      dataseletset()
    }
    // 显示隐藏选择
    function handleSelectionChange (arry) {
    }
    // 上传成功
    function handleSuccess (res, file, files, row) {
      if (res.status == 200) {
        row.image = res.data.fileurl
        proxy.$refs.uploadRef.clearFiles()
      }
    }
    function enlarge (e, row) {
      data.enlargeImg = row.image
      row.enlargeImgShow = true
      data.top = 'top:' + e.clientY + 'px'
    }
    function enlargeOut (row) {
      row.enlargeImgShow = false
      data.enlargeImg = ''
    }
    return {
      data,
      checkNum,
      selectionChange,
      selectAllChange,
      handleSelectionChange,
      handleSuccess,
      enlarge,
      enlargeOut,
      dataseletset
    };
  },
});
</script>

<style lang="scss" scoped>
@import '../../assets/style/lc.scss';
</style>
