<!-- 价格列表详情 -->
<script lang="ts" setup name="ListSourceAdd">
import { ref } from 'vue'
import type { Ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import { useRoute } from 'vue-router'
import type { optionsType, priceForm } from './list_interface'
import VerificationDialog from '@/views/device/standardEquipment/components/standardList/verificationDialog.vue'
import { getPriceAddList, getQueryPriceInfo, getTypeSelect, getUpdatePriceInfo } from '@/api/system/price'

const loading = ref(false) // 表单加载状态
const infoId = ref('') // id
const pageType = ref('add') // 页面类型: add,edit, detail
const buttonLoading = ref(false) // 按钮加载状态
const textMap: { [key: string]: string } = {
  edit: '编辑',
  add: '新建',
  detail: '详情',
}// 字典
// 从路由中获取页面类型参数
const $route = useRoute()
if ($route.params && $route.params.type) {
  pageType.value = $route.params.type as string
  if ($route.params.id) {
    infoId.value = $route.params.id as string
  }
}
const priceStandardName = ref('')
// 默认数据
const defaultForm: priceForm = {
  priceStandardName: '', // 依据标准
  checkType: '', // 检校类型
  createTime: null, // 创建时间
  directorDiscountPermission: '', // 负责人折扣权限-字典value
  id: null, // 主键id
  isDel: '', // 删除标记
  model: '', // 型号
  operatorDiscountPermission: '', // 业务员折扣权限-字典value
  price: '', // 标准价格(元)
  priceDescription: '', // 说明
  priceItem: '', //	项目-字典value
  priceLimit: '', //	限制范围
  priceName: '', // 价格名称
  priceNo: '', // 价格编号
  priceStandard: '', // 依据标准-计量规程文件名
  priceType: '', // 价格类别-字典value
  remark: '', // 备注
  updateTime: null, // 更新时间
  categoryName: '', // 类别名称
  itemName: '', // 项目名称
}
// 获取到的详情数据
const formInline: Ref<priceForm> = ref({ ...defaultForm })
// 校验ref
const ruleFormRef = ref<FormInstance>()
// 表单验证规则
const rules = reactive<FormRules>({
  priceName: [{ required: true, message: '价格名称不能为空', trigger: ['blur', 'change'] }],
  checkType: [{ required: true, message: '校验类型不能为空', trigger: ['blur', 'change'] }],
  categoryName: [{ required: true, message: '类别不能为空', trigger: ['blur', 'change'] }],
  itemName: [{ required: true, message: '项目不能为空', trigger: ['blur', 'change'] }],
  priceStandardName: [{ required: true, message: '依据标准不能为空', trigger: ['blur', 'change'] }],
  price: [{ required: true, message: '标准价格不能为空', trigger: ['blur', 'change'] }],
  operatorDiscountPermission: [{ required: true, message: '业务员折扣权限不能为空', trigger: ['blur', 'change'] }],
  directorDiscountPermission: [{ required: true, message: '负责人折扣权限不能为空', trigger: ['blur', 'change'] }],
})
const checkTypeOptions = ref<optionsType[]>([]) // 校验类型
const operatorDiscountPermissionOptions = ref<optionsType[]>([]) // 业务员折扣权限
const directorDiscountPermissionOptions = ref<optionsType[]>([]) // 负责人折扣权限
const $router = useRouter()
const close = () => {
  $router.back()
}
// 获取detail信息
const getInfo = () => {
  loading.value = true
  getQueryPriceInfo({ id: infoId.value }).then((res) => {
    formInline.value = res.data
    loading.value = false
  })
}
// 获取下拉框数据
const getOptions = (code: string) => {
  getTypeSelect(code).then((res) => {
    if (code === 'checkType') {
      checkTypeOptions.value = res.data
    }
    else if (code === 'operatorDiscountPermission') {
      operatorDiscountPermissionOptions.value = res.data
    }
    else if (code === 'directorDiscountPermission') {
      directorDiscountPermissionOptions.value = res.data
    }
  })
}
getOptions('checkType') // 校验类型
getOptions('operatorDiscountPermission')// 业务员折扣权限
getOptions('directorDiscountPermission') // 负责人折扣权限

const printObj = ref({
  id: 'form', // 需要打印元素的id
  popTitle: '价格列表详情', // 打印配置页上方的标题
  extraHead: '<div style="display: flex;flex-direction: column;text-align: center"><h3>价格列表详情</h3></div>', // 最上方的头部文字，附加在head标签上的额外标签，使用逗号分割
  preview: false, // 是否启动预览模式，默认是false
  standard: '',
  extarCss: '',
})

// 点击提交/导出按钮
const getAddList = async (formEl: FormInstance | undefined) => {
  if (!formEl) { return }
  await formEl.validate((valid, fields) => {
    if (valid) {
      ElMessageBox.confirm(
        '确认保存吗？',
        '提示',
        {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
        },
      ).then(() => {
      // 新增提交
        if (pageType.value === 'add') { // 新建
          buttonLoading.value = true
          getPriceAddList(formInline.value).then((res) => {
            if (res.code === 200) {
              ElMessage.success('保存成功')
              close()
            }
            buttonLoading.value = false
          }).catch(_ => buttonLoading.value = false)
        }
        // 编辑提交
        else if (pageType.value === 'edit') { // 保存
          formInline.value.id = infoId.value
          buttonLoading.value = true
          delete formInline.value.isDel
          delete formInline.value.createTime
          delete formInline.value.historicalPriceList
          delete formInline.value.updateTime
          getUpdatePriceInfo(formInline.value).then((res) => {
            if (res.code === 200) {
              ElMessage.success('保存成功')
              close()
            }
            buttonLoading.value = false
          }).catch(_ => buttonLoading.value = false)
        }
      })
    }
  })
}
// 只要不是新增页面就得获取详情
if (pageType.value !== 'add') {
  getInfo()
}
// 价格依据ref
const verificationDialog = ref()
// 点击价格依据按钮
const priceStandardClick = () => {
  verificationDialog.value.initDialog()
}
interface dataType {
  id: string // 文件主键id
  fileName: string // 文件名
}
// 选择价格依据
const verificationList = (data: dataType) => {
  formInline.value.priceStandard = data.id
  priceStandardName.value = data.fileName
  formInline.value.priceStandardName = priceStandardName.value
}
</script>

<template>
  <app-container>
    <detail-page :title="`价格列表-${textMap[pageType]}`">
      <template #btns>
        <el-button v-if="pageType !== 'detail'" type="primary" @click="getAddList(ruleFormRef)">
          保存
        </el-button>
        <el-button v-if="pageType === 'detail'" v-print="printObj" type="primary">
          打印
        </el-button>
        <el-button type="info" @click="close">
          关闭
        </el-button>
      </template>
      <div id="form">
        <el-form
          ref="ruleFormRef"
          v-loading="loading"
          :model="formInline"
          label-width="auto"
          class="demo-form-inline"
          label-position="right"
          :rules="rules"
        >
          <el-row :gutter="24" class="marg">
            <el-col :span="6">
              <el-form-item label="价格名称:" prop="priceName">
                <el-input
                  v-model.trim="formInline.priceName"
                  :placeholder="pageType === 'detail' ? '' : '价格名称'"
                  :disabled="pageType === 'detail'"
                  class="full-width-input"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="检校类型:" prop="checkType">
                <el-select
                  v-model.trim="formInline.checkType"
                  clearable
                  :placeholder="pageType === 'detail' ? '' : '请选择检校类型'"
                  :disabled="pageType === 'detail'"
                  class="full-width-input"
                >
                  <el-option
                    v-for="item in checkTypeOptions"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="类别:" prop="categoryName">
                <el-input
                  v-model.trim="formInline.categoryName"
                  clearable
                  :placeholder="pageType === 'detail' ? '' : '请输入类别'"
                  :disabled="pageType === 'detail'"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="项目:" prop="itemName">
                <el-input
                  v-model.trim="formInline.itemName"
                  clearable
                  :placeholder="pageType === 'detail' ? '' : '请输入项目'"
                  :disabled="pageType === 'detail'"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24" class="marg">
            <el-col :span="6">
              <el-form-item label="依据标准:" prop="priceStandardName">
                <el-input
                  v-model.trim="formInline.priceStandardName"
                  clearable
                  :placeholder="pageType === 'detail' ? '' : '依据标准'"
                  :disabled="pageType === 'detail'"
                >
                  <template v-if="pageType !== 'detail'" #append>
                    <el-button
                      size="small"
                      @click="priceStandardClick"
                    >
                      选择
                    </el-button>
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="标准价格（元):" prop="price">
                <el-input
                  v-model.trim="formInline.price"
                  clearable
                  :placeholder="pageType === 'detail' ? '' : '标准价格（元)'"
                  :disabled="pageType === 'detail'"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="限制范围:">
                <el-input
                  v-model="formInline.priceLimit"
                  :placeholder="pageType === 'detail' ? '' : '限制范围'"
                  :disabled="pageType === 'detail'"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="说明:">
                <el-input v-model="formInline.priceDescription" :placeholder="pageType === 'detail' ? '' : '说明'" :disabled="pageType === 'detail'" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24" class="marg">
            <el-col :span="12">
              <el-form-item label="业务员折扣权限:" prop="operatorDiscountPermission">
                <el-select
                  v-model.trim="formInline.operatorDiscountPermission"
                  clearable
                  :placeholder="pageType === 'detail' ? '' : '请选择业务员折扣权限'"
                  :disabled="pageType === 'detail'"
                  class="full-width-input"
                >
                  <el-option
                    v-for="item in operatorDiscountPermissionOptions"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24" class="marg">
            <el-col :span="12">
              <el-form-item label="负责人折扣权限:" prop="directorDiscountPermission">
                <el-select
                  v-model.trim="formInline.directorDiscountPermission"
                  clearable
                  :placeholder="pageType === 'detail' ? '' : '请选择负责人折扣权限'"
                  :disabled="pageType === 'detail'"
                  class="full-width-input"
                >
                  <el-option
                    v-for="item in directorDiscountPermissionOptions"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24" class="marg">
            <el-col :span="12">
              <el-form-item label="备注:">
                <el-input v-model="formInline.remark" :placeholder="pageType === 'detail' ? '' : '备注'" :disabled="pageType === 'detail'" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </detail-page>
  </app-container>
  <!-- 选择检定规程列表组件 -->
  <verification-dialog ref="verificationDialog" @add="verificationList" />
</template>

<style lang="scss" scoped>
// 样式
</style>