<template>
  <div class="AddPlanWrapper clearfix">
    <crumbs
      :title="isEdit ? '开单合理性规则维护-修改规则' : '开单合理性规则维护-添加规则'"
      class="topBack"
      :param="$route.params"
      linkTo="Bill"
    ></crumbs>
    <div class="AddPlanBox">
      <el-row :gutter="20">
        <el-col :span="16">
          <el-form ref="outForm" :model="form" label-width="80px" :rules="rules">
            <el-form-item label="规则名称" prop="ruleName">
              <el-input v-model="form.ruleName" disabled></el-input>
            </el-form-item>
            <el-form-item label="规则类型" prop="ruleType">
              <el-select
                v-model="form.ruleType"
                placeholder="请选择规则类型"
                clearable
                style="width: 100%"
                @change="handleRuleType"
              >
                <el-option label="文本类型" :value="1"></el-option>
                <el-option label="数值类型" :value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-row class="concept">
              <el-col :span="8">
                <el-form-item label="开单项目" prop="conceptType">
                  <el-select
                    v-model="form.conceptType"
                    placeholder="请选择项目类型"
                    style="width: 100%"
                    @change="handleConceptType"
                    ref="conceptType"
                  >
                    <el-option label="检验套餐" :value="1"></el-option>
                    <el-option label="检查" :value="2"></el-option>
                    <el-option label="检查子项" :value="3"></el-option>
                    <el-option label="手术和操作" :value="4"></el-option>
                    <el-option label="药品注册名" :value="5"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="16" style="paddingLeft: 4px">
                <el-form-item label label-width="0px" prop="concept">
                  <el-select
                    style="width:100%;minWidth: 240px"
                    v-model="form.conceptName"
                    filterable
                    remote
                    clearable
                    :loading="showDrop"
                    loading-text="加载中..."
                    @change="changeWord"
                    @focus="handleFocus"
                    @visible-change="handleVisible"
                    placeholder="搜索开单项目"
                    :remote-method="searchTerms"
                    reserve-keyword
                    ref="conceptName"
                  >
                    <el-option
                      v-for="item in conceptList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                      :title="item.name"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <ConditionForm
              :data="form.condition"
              :type="form.conceptType"
              :conceptName="form.conceptName"
              :ruleType="form.ruleType"
              ref="subForm"
              @split="splitRuleName"
              @handleInput="handleInput"
              v-if="showCom"
            ></ConditionForm>
            <Description :type="form.ruleType"></Description>
            <el-form-item>
              <el-button type="primary" @click="onSubmit" :disabled="saveDisable">确定</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import api from '@api/icss.js';
import config from '@api/config.js';
import utils from '@api/utils.js';
import ConditionForm from './ConditionForm1';
import Description from './Description';
export default {
  name: 'AddBill',
  data() {
    var checkFrequency = (rule, value, callback) => {
      let conceptType = this.$refs.conceptType.value;
      if (!conceptType) {
        callback('请选择项目类型');
      } else {
        callback();
      }
    };
    var checkFrequency2 = (rule, value, callback) => {
      let conceptName = this.$refs.conceptName.value;
      if (!conceptName) {
        callback('请输入开单项目');
      } else {
        callback();
      }
    };
    return {
      form: {
        ruleName: '',
        ruleType: '',
        conceptType: 2,
        conceptName: '',
        concept: {
          conceptLabel: '',
          id: '',
          name: '',
          status: null
        },
        conditionName: '',
        condition: {
          conditionLabel: '',
          id: '',
          maxValue: '',
          minValue: '',
          name: '',
          range: '',
          status: '0',
          unit: ''
        },
        relationId: 1146770,
        relationName: '',
        relationStatus: ''
      },
      conceptList: [],
      rules: {
        ruleName: [
          { required: true, message: '规则名称为空', trigger: 'change' }
        ],
        ruleType: [
          { required: true, message: '请选择规则类型', trigger: 'change' }
        ],
        concept: [
          { required: true, validator: checkFrequency2, trigger: 'blur' }
        ],
        conceptType: [
          { required: true, validator: checkFrequency, trigger: 'blur' }
        ]
      },
      saveDisable: false, //保存按钮禁止点击
      isEdit: false, // 是否处于编辑页面 false--新增   true--编辑
      showDrop: false, //下拉框显示文字
      showCom: true
    };
  },
  created() {
    const { isEdit, data } = this.$route.params;
    // console.log(data, '编辑页传递的data');
    if (isEdit) {
      this.isEdit = true;
      this.form.ruleName = data.ruleName;
      this.form.ruleType = data.ruleType;
      this.form.conceptType = data.type;
      this.form.conceptName = data.concept.name;
      this.form.concept.conceptLabel = data.concept.conceptLabel;
      this.form.concept = { ...data.concept };
      this.form.condition = { ...data.condition };
      this.form.relationId = data.relationId;
      this.form.relationName = data.relationName;
      this.form.relationStatus = data.relationStatus;
    }
  },

  methods: {
    splitRuleName(val) {
      this.form.ruleName = val.name + '开单' + this.form.conceptName;
      this.form.condition.conditionLabel = val.conditionLabel;
      this.form.condition.id = val.id;
      this.form.condition.status = val.status;
      this.form.condition.name = val.name;
    },
    changeWord(val) {
      if (val === '') return;
      let concept = this.conceptList.find(item => (item.id = val));
      this.form.conceptName = concept.name;
      this.form.concept.conceptLabel = concept.conceptLabel;
      this.form.concept.id = concept.id;
      this.form.concept.name = concept.name;
      this.form.concept.status = concept.status;
      this.form.ruleName =
        this.form.condition.name + '开单' + this.form.concept.name;
    },
    handleInput(data) {
      // console.log(data, '父组件接受的数据');
      if (data.type === 'minValue') {
        this.form.condition.minValue = data.value;
      } else if (data.type === 'maxValue') {
        this.form.condition.maxValue = data.value;
      } else if (data.type === 'unit') {
        this.form.condition.unit = data.value;
      }
    },

    // 获取焦点
    handleFocus() {},
    handleVisible(flag) {
      if (!flag) {
        this.conceptList = [];
      }
    },
    handleConceptType() {
      this.conceptList = [];
      this.form.conceptName = '';
    },
    handleRuleType() {
      this.showCom = false;
      setTimeout(() => {
        this.showCom = true;
      }, 0);
    },
    // 搜索列表
    searchTerms(query) {
      if (!query) {
        this.conceptList = [];
        return;
      }
      this.showDrop = true;
      let params = {
        type: this.form.conceptType,
        conceptName: query
      };
      api.conceptBillmanIndex(params).then(res => {
        this.showDrop = false;
        if (res.data.code === '0') {
          this.conceptList = res.data.data;
        }
      });
    },

    // 处理参数
    _getParams() {
      const { concept, condition, ruleType, ruleName } = this.form;
      console.log(condition, '=condition');
      let params = {
        concept: {
          conceptLabel: concept.conceptLabel,
          id: concept.id,
          name: concept.name,
          status: concept.status
        },
        condition: {
          conditionLabel: condition.conditionLabel,
          id: condition.id,
          maxValue:
            condition.maxValue === '' || condition.maxValue === null
              ? ''
              : +condition.maxValue,
          minValue:
            condition.minValue === '' || condition.minValue === null
              ? ''
              : +condition.minValue,
          // minValue: !null && +condition.minValue,
          name: condition.name,
          range: condition.range,
          status: condition.status,
          unit: condition.unit
        },
        ruleType,
        relationStatus: 1 // 1启用  0禁用
        // relationId: 0,
        // relationName: 'string',
        // ruleName: 'string',
        // type: 0
      };
      // console.log(params,'params');
      return params;
    },

    onSubmit() {
      // console.log(this.$route.params,'this.$route.params')
      const {currentPage,isEdit} = this.$route.params
      let numberpage = 1
      if(isEdit){
        numberpage = currentPage
      }
      let goOn = true;
      this.$refs.subForm.$refs.form1 &&
        this.$refs.subForm.$refs.form1.validate(valid => {
          if (valid) {
            // console.log(this.$refs.subForm.$refs.form, '=========');
          } else {
            goOn = false;
          }
        });
      this.$refs.subForm.$refs.form &&
        this.$refs.subForm.$refs.form.validate(valid => {
          if (valid) {
            // console.log(this.$refs.subForm.$refs.form, '=========');
          } else {
            goOn = false;
          }
        });
      this.$refs.subForm.$refs.ruleForm &&
        this.$refs.subForm.$refs.ruleForm.validate(valid => {
          if (valid) {
            // console.log(this.$refs.subForm.$refs.form, '=========');
          } else {
            goOn = false;
          }
        });
      this.$refs.outForm.validate(valid => {
        if (valid) {
          if (!goOn) return;
          this.saveDisable = true;
          let params = this._getParams();
          if (this.isEdit) {
            params = {
              ...params,
              relationId: this.form.relationId,
              relationName: this.form.relationName,
              relationStatus: this.form.relationStatus,
              type: this.form.conceptType
            };
          }

          api.saveBillmanRecord(params).then(res => {
            if (res.data.code === '0') {
              this.$message({
                showClose: true,
                message: '保存成功',
                type: 'success',
                duration: 1000
              });
              this.isSaveSuccess = true; // 保存成功,可正常退出
              this.$router.push({
                name: 'Bill',
                params: Object.assign({}, this.$route.params, {
                  currentPage: numberpage
                })
              });
            } else if (res.data.code === '00020007') {
              this.$message({
                showClose: true,
                message: res.data.msg,
                type: 'error',
                duration: 1000
              });
            } else {
              this.$message({
                showClose: true,
                message: res.data.msg,
                type: 'error',
                duration: 1000
              });
            }
            this.saveDisable = false;
          });
        } else {
          goOn = false;
        }
      });
    }
  },
  components: {
    ConditionForm,
    Description
  }
};
</script>

<style lang="less">
.concept {
  /deep/ .el-form-item__label {
    // margin-left: 12px !important;
  }
  /deep/ .el-col {
    // padding-left: 0px !important;
    // padding-right: 4px !important;
  }
  /deep/ .el-form-item__error {
    float: left;
    top: 40px;
    left: 12px;
  }
}
</style>