<script lang="ts" setup name="ListSourceAdd">
import { ref } from 'vue'
import type { Ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { FormInstance } from 'element-plus'
import type { formInlineType, optionsType } from './list_interface'
import { getPriceAddList, getQueryPriceInfo, getTypeSelect, getUpdatePriceInfo } from '@/api/system/price'
const props = defineProps({
  infoId: {
    type: String,
    default: '0',
  },
  buttonType: {
    type: String,
    default: '',
  },
})
const emit = defineEmits(['close'])
const formInline: Ref<formInlineType> = ref({
  checkType: '',
  createTime: null,
  directorDiscountPermission: '',
  historicalPriceList: [],
  id: null,
  isDel: 0,
  model: '',
  operatorDiscountPermission: '',
  price: '',
  priceDescription: '',
  priceItem: '',
  priceLimit: '',
  priceName: '',
  priceNo: null,
  priceStandard: '',
  priceType: '',
  remark: '',
  updateTime: null,
})
const ruleFormRef = ref<FormInstance>()
const rules = ref({
  priceName: [{ required: true, message: '价格名称不能为空', trigger: 'blur' }],
  checkType: [{ required: true, message: '校验类型不能为空', trigger: 'blur' }],
  priceType: [{ required: true, message: '类别不能为空', trigger: 'blur' }],
  priceItem: [{ required: true, message: '项目不能为空', trigger: 'blur' }],
  priceStandard: [{ required: true, message: '依据标准不能为空', trigger: 'blur' }],
  price: [{ required: true, message: '标准价格不能为空', trigger: 'blur' }],
  operatorDiscountPermission: [{ required: true, message: '业务员折扣权限不能为空', trigger: 'blur' }],
  directorDiscountPermission: [{ required: true, message: '负责人折扣权限不能为空', trigger: 'blur' }],
}) // 表单验证规则
const checkTypeOptions = ref<optionsType[]>([])
const priceTypeOptions = ref<optionsType[]>([])
const priceItemOptions = ref<optionsType[]>([])
const operatorDiscountPermissionOptions = ref<optionsType[]>([])
const directorDiscountPermissionOptions = ref<optionsType[]>([])
const close = () => {
  emit('close')
}
// 获取详情信息
const getInfo = () => {
  getQueryPriceInfo({ id: props.infoId }).then((res) => {
    formInline.value = res.data
  })
}
// 获取下拉框数据
const getOptions = (code: string) => {
  getTypeSelect(code).then((res) => {
    if (code === 'checkType') {
      checkTypeOptions.value = res.data
    }
    else if (code === 'priceType') {
      priceTypeOptions.value = res.data
    }
    else if (code === 'priceItem') {
      priceItemOptions.value = res.data
    }
    else if (code === 'operatorDiscountPermission') {
      operatorDiscountPermissionOptions.value = res.data
    }
    else if (code === 'directorDiscountPermission') {
      directorDiscountPermissionOptions.value = res.data
    }
  })
}
getOptions('checkType')
getOptions('priceType')
getOptions('priceItem')
getOptions('operatorDiscountPermission')
getOptions('directorDiscountPermission')

// 点击提交/导出按钮
const getAddList = async (formEl: FormInstance | undefined, type: string) => {
  if (!formEl) { return }
  await formEl.validate((valid, fields) => {
    if (valid) {
      ElMessageBox.confirm(
    `确认${type}吗？`,
    '提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    },
      ).then(() => {
        if (type === '提交' && props.buttonType !== '编辑') {
          getPriceAddList(formInline.value).then((res) => {
            if (res.code === 200) {
              close()
            }
          })
        }
        else if (type === '提交' && props.buttonType === '编辑') {
          formInline.value.id = props.infoId
          getUpdatePriceInfo(formInline.value).then((res) => {
            if (res.code === 200) {
              close()
            }
          })
        }
        else {
          // 打印
          const printObj = ref({
            id: 'print', // 需要打印元素的id
            popTitle: '证书报告模板', // 打印配置页上方的标题
            extraHead: '', // 最上方的头部文字，附加在head标签上的额外标签，使用逗号分割
            preview: false, // 是否启动预览模式，默认是false
            standard: '',
            extarCss: '',
          })
        }
      })
    }
  })
}
if (props.buttonType !== '新建') {
  getInfo()
}
</script>

<template>
  <app-container>
    <detail-page :title="`价格列表-${buttonType}`">
      <template #btns>
        <el-button v-print="buttonType === '详情' ? printObj : ''" type="primary" @click="getAddList(ruleFormRef, buttonType === '详情' ? '打印' : '提交')">
          {{ buttonType === '详情' ? '打印' : '提交' }}
        </el-button>
        <el-button type="info" @click="close">
          关闭
        </el-button>
      </template>
      <el-form
        ref="ruleFormRef"
        :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="价格名称"
                :disabled="buttonType === '详情'"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="检校类型:" prop="checkType">
              <el-select
                v-model.trim="formInline.checkType"
                clearable
                placeholder="请选择检校类型"
                style="width: 200%;"
                :disabled="buttonType === '详情'"
              >
                <el-option
                  v-for="item in checkTypeOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="类别:" prop="priceType">
              <el-select
                v-model.trim="formInline.priceType"
                clearable
                placeholder="请选择类别"
                :disabled="buttonType === '详情'"
              >
                <el-option
                  v-for="item in priceTypeOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="项目:" prop="priceItem">
              <el-select
                v-model.trim="formInline.priceItem"
                clearable
                placeholder="请选择项目"
                :disabled="buttonType === '详情'"
              >
                <el-option
                  v-for="item in priceItemOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" class="marg">
          <el-col :span="6">
            <el-form-item label="依据标准:" prop="priceStandard">
              <el-input
                v-model.trim="formInline.priceStandard"
                clearable
                placeholder="依据标准"
                :disabled="buttonType === '详情'"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="标准价格（元):" prop="price">
              <el-input
                v-model.trim="formInline.price"
                clearable
                placeholder="标准价格（元)"
                :disabled="buttonType === '详情'"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="限制范围:">
              <el-input
                v-model="formInline.priceLimit"
                placeholder="限制范围"
                :disabled="buttonType === '详情'"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="说明:">
              <el-input v-model="formInline.priceDescription" placeholder="说明" :disabled="buttonType === '详情'" />
            </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="请选择业务员折扣权限"
                style="width: 200%;"
                :disabled="buttonType === '详情'"
              >
                <el-option
                  v-for="item in operatorDiscountPermissionOptions"
                  :key="item.id"
                  :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
                style="width: 200%;"
                placeholder="请选择负责人折扣权限"
                :disabled="buttonType === '详情'"
              >
                <el-option
                  v-for="item in directorDiscountPermissionOptions"
                  :key="item.id"
                  :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="备注" :disabled="buttonType === '详情'" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </detail-page>
  </app-container>
</template>

<style lang="scss" scoped>
.top-info {
  width: 100%;
  height: 50px;
  padding-right: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 10px;
  background-color: #fff;

  .title {
    width: 75%;
    text-align: center;
  }
}

:deep .el-input .el-input--default .el-input--suffix {
  width: 200px !important;
}

.info-content {
  margin-top: 10px;
  padding: 30px;
  border-radius: 10px;
  background-color: #fff;

  .info-dizhi {
    margin-right: 155px;
  }
}

.el-select {
  width: 9vw;
  margin-right: 15px;
}

.info-dizhi .el-input {
  width: 20vw;
}

.input-width .el-input {
  width: 30vw;
}

.info-appendix span {
  margin-right: 25px;
}

.table-top {
  margin-top: 10px;
  padding: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 10px;
  background-color: #fff;

  .table-top-title {
    width: 60vw;
    text-align: center;
  }
}

.dialog-button {
  margin-left: 50%;
  transform: translateX(-50%);
}
</style>