<template>
  <vxe-modal
    v-model="modalVisible"
    title="设置产品对照"
    @hide="onHide"
    esc-closable
    mask-closable
    :show-footer="false"
    :z-index="1003"
  >
    <el-form
      ref="formRef"
      size="small"
      inline
      label-width="80px"
      :model="formState"
      :rules="formRules"
    >
      <el-row :gutter="24">
        <el-col :span="24">
          <el-form-item label="产品名称" prop="productId_dictText">
            <el-input v-model="formState.productId_dictText" disabled>
              <template #append>
                <el-button :icon="MoreFilled" @click="openModal('prod')" />
              </template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="客户名称" prop="customerId_dictText">
            <el-input v-model="formState.customerId_dictText" disabled>
              <template #append>
                <el-button :icon="MoreFilled" @click="openModal('cust')" />
              </template>
            </el-input>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="24">
          <el-form-item label="产品单位" prop="customerUnit">
            <el-input v-model="formState.customerUnit"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="单位" prop="unit">
            <el-input v-model="formState.unit"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="换算值" prop="unitRatio">
            <el-input type="number" v-model="formState.unitRatio"></el-input>
          </el-form-item>
        </el-col> -->
        <el-col :span="24">
          <el-form-item label="产品描述" prop="excelFiled">
            <el-input
              disabled
              style="width: 250px"
              type="textarea"
              :rows="5"
              v-model="formState.excelFiled"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" justify="center">
        <el-button size="default" type="primary" @click="onSubmit" :loading="saveLoading"
          >提交</el-button
        >
        <el-button size="default" @click="modalVisible = false">取消</el-button>
      </el-row>
    </el-form>
  </vxe-modal>

  <ProductModal v-model:visible="prodVisible" @confirm="(list) => confirmModal(list, 'prod')" />
  <CustomerModal
    v-model:visible="customerVisible"
    @confirm="(list) => confirmModal(list, 'customer')"
  />
</template>

<script lang="ts" setup>
import { reactive, ref, watch } from 'vue'
import ProductModal from '@/components/ProductModal/ProductModal.vue'
import CustomerModal from '@/components/CustomerModal/CustomerModal.vue'
import { MoreFilled } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { saveExcelProdFileConf } from '@/api/product'
import { useCommentExcel } from '@/stores/commentExcel'

const { getFileInfo } = useCommentExcel()
const props = defineProps(['visible'])
const emits = defineEmits(['confirm', 'update:visible', 'success'])
const formRef = ref()
const modalVisible = ref(false)
const prodVisible = ref(false)
const customerVisible = ref(false)
const saveLoading = ref(false)
const luckysheet = (window as any).luckysheet
const formRules = reactive({})
const formState = reactive({
  customerId: '',
  productId: '',
  customerId_dictText: '',
  productId_dictText: '',
  excelFiled: '',
  customerUnit: '',
  unit: '',
  unitRatio: ''
})
watch(
  () => props.visible,
  (val) => {
    modalVisible.value = val
    if (val) {
      // 如果有客户，默认带出来
      formState.customerId = getFileInfo.customerId || ''
      formState.customerId_dictText = getFileInfo.customerId_dictText || ''
      formState.excelFiled = getText()
    }
  }
)

const getText = () => {
  const { luckysheet_select_save } = luckysheet.getSheet()

  if (!luckysheet_select_save.length) return

  const effectVal: any = []

  luckysheet_select_save.forEach((area) => {
    const rangeJson = luckysheet.getRangeJson(false, { column: area.column, row: area.row })
    rangeJson.forEach((item) => {
      const vs = Object.values(item)
      effectVal.push(...vs.filter((v) => !!v))
    })
  })

  return effectVal.join(';')
}
// 表单提交
const onSubmit = async () => {
  await formRef.value.validate()
  saveLoading.value = true

  try {
    await saveExcelProdFileConf(formState)
    ElMessage.success('操作成功！')
    modalVisible.value = false
    emits('success')
  } catch {}
  saveLoading.value = false
}
const onHide = () => {
  // 重置表单
  Object.assign(formState, {
    customerId: '',
    productId: '',
    customerId_dictText: '',
    productId_dictText: '',
    excelFiled: '',
    customerUnit: '',
    unit: '',
    unitRatio: ''
  })
  emits('update:visible', false)
}
const openModal = (type: string) => {
  if (type == 'prod') {
    prodVisible.value = true
  } else {
    customerVisible.value = true
  }
}
const confirmModal = (list: any, type: string) => {
  const [item] = list
  if (type == 'prod') {
    formState.productId = item.productId
    formState.productId_dictText = item.productName
  } else {
    formState.customerId = item.customerId
    formState.customerId_dictText = item.customerName
  }
}
</script>
<style lang="scss" scoped></style>
