<script lang="ts" setup name="ListSourceAdd">
import { ref } from 'vue'
import type { Ref } from 'vue'
import { ElMessage } 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 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 = (type: string) => {
  if (formInline.value.priceName === '') {
    return ElMessage.error('请填写价格名称')
  }
  else if (formInline.value.checkType === '') {
    return ElMessage.error('请选择检校类型')
  }
  else if (formInline.value.priceType === '') {
    return ElMessage.error('请选择类别')
  }
  else if (formInline.value.priceItem === '') {
    return ElMessage.error('请选择项目')
  }
  else if (formInline.value.priceStandard === '') {
    return ElMessage.error('请输入依据标准')
  }
  else if (formInline.value.price === '') {
    return ElMessage.error('请输入标准价格')
  }
  else if (formInline.value.operatorDiscountPermission === '') {
    return ElMessage.error('请选择业务员折扣权限')
  }
  else if (formInline.value.directorDiscountPermission === '') {
    return ElMessage.error('请选择负责人折扣权限')
  }
  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>
    <div class="top-info">
      <h4 class="title">
        基本信息
      </h4>
      <div>
        <el-button v-print="buttonType === '详情' ? printObj : ''" type="primary" @click="getAddList(buttonType === '详情' ? '打印' : '提交')">
          {{ buttonType === '详情' ? '打印' : '提交' }}
        </el-button>
        <el-button type="warning" @click="close">
          关闭
        </el-button>
      </div>
    </div>
    <div class="info-content">
      <el-form
        :inline="true"
        :model="formInline"
        class="demo-form-inline"
        label-position="right"
      >
        <!-- <el-form-item label="价格编号:" label-width="auto">
          <el-input
            v-model="formInline.priceNo"
            placeholder="请输入价格编号"
            :disabled="buttonType === '详情'"
          />
        </el-form-item> -->
        <el-form-item label="价格名称:" label-width="110">
          <el-input
            v-model.trim="formInline.priceName"
            placeholder="价格名称"
            :disabled="buttonType === '详情'"
          />
        </el-form-item>
        <span>
          <el-form-item label="检校类型:" label-width="110">
            <el-select
              v-model.trim="formInline.checkType"
              clearable
              placeholder="检校类型"
              size="default"
              :disabled="buttonType === '详情'"
            >
              <el-option
                v-for="item in checkTypeOptions"
                :key="item.id"
                :label="item.name"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        <!-- <el-form-item label="创建时间:" label-width="80">
          <el-date-picker
              v-model="formInline.createTime"
              type="datetime"
              placeholder="请选择创建时间"
              format="YYYY/MM/DD HH:mm:ss"
              value-format="YYYY-MM-DD h:m:s"
              :disabled="buttonType === '详情'"
            />
        </el-form-item> -->
        </span>
        <el-form-item label="类别:" label-width="auto">
          <el-select
            v-model.trim="formInline.priceType"
            clearable
            placeholder="类别"
            style="width: 80%;"
            size="default"
            :disabled="buttonType === '详情'"
          >
            <el-option
              v-for="item in priceTypeOptions"
              :key="item.id"
              :label="item.name"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <div class="input-width">
          <el-form-item label="项目:" label-width="110">
            <el-select
              v-model.trim="formInline.priceItem"
              clearable
              placeholder="项目"
              style="width: 80%;"
              size="default"
              :disabled="buttonType === '详情'"
            >
              <el-option
                v-for="item in priceItemOptions"
                :key="item.id"
                :label="item.name"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="依据标准:" label-width="110">
            <el-input
              v-model.trim="formInline.priceStandard"
              style="width: 18vw;"
              clearable
              placeholder="依据标准"
              size="default"
              :disabled="buttonType === '详情'"
            />
          </el-form-item>
        </div>
        <div>
          <el-form-item label="标准价格（元):" label-width="110">
            <el-input
              v-model.trim="formInline.price"
              clearable
              placeholder="标准价格（元)"
              size="default"
              :disabled="buttonType === '详情'"
            />
          </el-form-item>
        </div>
        <div class="input-width">
          <el-form-item label="限制范围:" label-width="110">
            <el-input
              v-model="formInline.priceLimit"
              placeholder="限制范围"
              :disabled="buttonType === '详情'"
            />
          </el-form-item>
          <el-form-item label="说明:">
            <el-input v-model="formInline.priceDescription" placeholder="说明" :disabled="buttonType === '详情'" />
          </el-form-item>
        </div>
        <div>
          <el-form-item label="业务员折扣权限:" label-width="auto">
            <el-select
              v-model.trim="formInline.operatorDiscountPermission"
              style="width: 26vw;"
              clearable
              placeholder="业务员折扣权限"
              size="default"
              :disabled="buttonType === '详情'"
            >
              <el-option
                v-for="item in operatorDiscountPermissionOptions"
                :key="item.id"
                :label="item.name"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="负责人折扣权限:" label-width="auto">
            <el-select
              v-model.trim="formInline.directorDiscountPermission"
              style="width: 26vw;"
              clearable
              placeholder="业务员折扣权限"
              size="default"
              :disabled="buttonType === '详情'"
            >
              <el-option
                v-for="item in directorDiscountPermissionOptions"
                :key="item.id"
                :label="item.name"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </div>
        <div class="input-width">
          <el-form-item label="备注:" label-width="110">
            <el-input v-model="formInline.remark" placeholder="备注" :disabled="buttonType === '详情'" />
          </el-form-item>
        </div>
      </el-form>
    </div>
  </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>