<template>
  <el-dialog title="编辑计算公式" width="700px"
             :visible.sync="isShowFormulaDialog"
             :before-close="closeFormulaHandler"
             @close="close"
  >
    <el-form ref="add_metadata_form" label-width="50px" :model="add_metadata_form" :rules="add_metadata_rules">

      <!--设置等式中指标元素的样式-->
      <div class="outside_border">
        <div class="fee">指标元素
          <el-button size="mini" class="fee_button" @click="input">
            <i class="el-icon-plus" style="color: white;font-weight: bolder;display: flex;justify-content: center;align-items: center"></i>
          </el-button>
        </div>

        <!--设置指标元素下拉框空白部分（默认显示添加下拉框之后隐藏）-->
        <div style="height: 30px;" v-show="feeBoxShow"></div>

        <!--设置指标元素下拉框的效果（默认隐藏点击添加按钮之后显示）-->
        <div v-for="(item,index) in inputData" :key="item.id" v-show="add_metadata_inside_select" class="fee_inside_style">
          <el-form-item :label="item.id">
            <el-select style="width: 400px;" v-model="addMetadataSelect[index]" value-key="id" @change="metadataSelect(addMetadataSelect[index])">
              <el-option v-for="(inside_item,index) in  NORMFEEList" :key="index" :value="inside_item.fcode" :label="inside_item.fname"></el-option>
            </el-select>
          </el-form-item>
        </div>
      </div>
      <br/>

      <!--设置计算公式的样式-->
      <div class="outside_border">
        <div class="add_metadata_left">计算公式</div>
        <div style="display:flex;justify-content: space-around;margin: 15px">
          <el-input class="input-border-style" id="number_input" v-model="number_input" :readonly="true"/>
          <el-button type="danger" style="margin: 0 10px;" @click="number_input_delete">回删</el-button>
        </div>

        <!--实现新增统计指标弹窗计算公式的按钮方法-->
        <div>
          <el-button size="mini" class="add_metadata_right_outside_button" @click="calc(1)">
            <span class="add_metadata_compute_number">1</span>
          </el-button>
          <el-button size="mini" class="add_metadata_right_outside_button" @click="calc(2)">
            <span class="add_metadata_compute_number">2</span>
          </el-button>
          <el-button size="mini" class="add_metadata_right_outside_button" @click="calc(3)">
            <span class="add_metadata_compute_number">3</span>
          </el-button>
          <el-button size="mini" class="add_metadata_right_outside_button" @click="calc(4)">
            <span class="add_metadata_compute_number">4</span>
          </el-button>
          <el-button size="mini" class="add_metadata_right_outside_button" @click="calc(5)">
            <span class="add_metadata_compute_number">5</span>
          </el-button>
          <el-button size="mini" class="add_metadata_right_outside_button" @click="calc(6)">
            <span class="add_metadata_compute_number">6</span>
          </el-button>
          <el-button size="mini" class="add_metadata_right_outside_button" @click="calc(7)">
            <span class="add_metadata_compute_number">7</span>
          </el-button>
          <el-button size="mini" class="add_metadata_right_outside_button" @click="calc(8)">
            <span class="add_metadata_compute_number">8</span>
          </el-button>
          <el-button size="mini" class="add_metadata_right_outside_button" @click="calc(9)">
            <span class="add_metadata_compute_number">9</span>
          </el-button>
          <el-button size="mini" class="add_metadata_right_outside_button" @click="calc(0)">
            <span class="add_metadata_compute_number">0</span>
          </el-button>
          <br/>
          <el-button size="mini" class="add_metadata_right_outside_button" @click="calc('(')">
            <span class="add_metadata_compute_number">(</span>
          </el-button>
          <el-button size="mini" class="add_metadata_right_outside_button" @click="calc(')')">
            <span class="add_metadata_compute_number">)</span>
          </el-button>
          <el-button size="mini" class="add_metadata_right_outside_button" @click="calc('+')">
            <span class="add_metadata_compute_number">+</span>
          </el-button>
          <el-button size="mini" class="add_metadata_right_outside_button" @click="calc('-')">
            <span class="add_metadata_compute_number">-</span>
          </el-button>
          <el-button size="mini" class="add_metadata_right_outside_button" @click="calc('*')">
            <span class="add_metadata_compute_number">*</span>
          </el-button>
          <el-button size="mini" class="add_metadata_right_outside_button" @click="calc('/')">
            <span class="add_metadata_compute_number">/</span>
          </el-button>
          <el-button size="mini" class="add_metadata_right_outside_button" @click="calc('.')">
            <span class="add_metadata_compute_number">.</span>
          </el-button>
          <br/>

          <div style="display: flex;flex-wrap: wrap">
            <div v-show="add_metadata_inside_select">
              <el-button size="mini" class="add_metadata_right_outside_cell_button"
                         v-for="(item,index) in inputData"
                         :key="index"
                         @click="cell(addMetadataSelect[index])"
              >
                <span class="add_metadata_compute_number">{{ item.id }}</span>
              </el-button>
            </div>
          </div>

          <el-button type="danger" class="clear_compute" @click="clear_compute_btn">清空计算公式</el-button>
        </div>
      </div>

    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submit">确 定</el-button>
      <el-button @click="closeFormulaHandler">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import { listNORMFEE, updateFormulaById } from "@/api/norm/NORMFEE";
  export default {
    name: 'formula',
    data() {
      return {
        // 存放新增统计指标弹窗等式右边元素的添加按钮数据
        inputData: [],
        // 存放新增统计指标弹窗计算公式的选中下拉框对应的code数据
        metadataCode: '',
        // 存放新增统计指标弹窗计算公式的选中下拉框对应的name数据
        metadataName: '',
        // 存放新增统计指标弹窗计算公式的选中下拉框对应的code和name数据
        add_metadata_name_and_code: [],
        // 新增指标信息弹窗等式右边元素的下拉框递增
        dataNum: 1,
        // 新增指标元素的下拉框默认隐藏
        add_metadata_inside_select: false,
        feeBoxShow: true,
        // 修改指标信息的标题
        update_metadata_title: '',
        // 修改指标信息的弹窗
        update_metadata_open: false,
        // 存放新增指标信息的表单数据
        add_metadata_form: {},
        // 存放新增统计指标计算公式输入框的值
        number_input: '',
        // 存放新增统计指标计算公式输入框的值(name)
        no_show_number_input: '',
        // 存放修改指标信息的表单数据
        update_metadata_form: {},
        // 新增添加指标弹窗等式右边元素的下拉框
        NORMFEEList: [],
        addMetadataSelect: [],
        metadataList: [],
        // 新增指标信息的校验方法
        add_metadata_rules: {
          statistical_object_name: [{ required: true, message: '请输入指标名称', trigger: 'blur' }],
          name_code: [{ required: true, message: '请输入编号', trigger: 'blur' }],
          unit: [{ required: true, message: '请输入单位', trigger: 'blur' }]
        },
      }
    },
    props: {
      isShowFormulaDialog: {
        type: Boolean,
        default: () => {
          return false;
        },
      },
      id: {
        type: String,
        defaultL: () => {
          return null;
        },
      },
      normId: {
        type: String,
        default: () => {
          return null;
        },

      },
    },
    mounted() {
      listNORMFEE().then((response) => {
        response.rows.forEach((item, index) => {
          response.rows[index].status = item.status == 0 ? false : true;
        });
        this.NORMFEEList = response.rows;
      });
      
    },
    methods: {
      // formula使用props传值有延迟，使用ref传入
      init(formula) {
        if(formula) {
          this.number_input = formula
        }
      },
      close () {
        this.addMetadataSelect = [];
        this.no_show_number_input = '';
      },
      // 关闭Dialog窗口
      closeFormulaHandler() {
        this.$emit("closeFormulaHandler");
      },
      // 回删功能
      number_input_delete() {
        this.number_input = this.number_input.replace(/.$/, '')
        this.no_show_number_input = this.no_show_number_input.replace(/.$/, '')
      },
      // 指标元素下拉框的改变方法
      metadataSelect(val) {
        console.log("111111111",val)
        let metadataCode = ''
        let metadataName = ''
        let metadataId = ''
        for (let i = 0; i < this.inputData.length; i++) {
          for (let j = 0; j < this.inputData[i].data.length; j++) {
            if (val == this.inputData[i].data[j].fname) {
              metadataCode = (this.inputData[i].data[j].fcode)
              metadataName = (this.inputData[i].data[j].fname)
              metadataId = (this.inputData[i].id)
            }
          }
        }
        this.metadataCode = metadataCode
        this.metadataName = metadataName
        this.add_metadata_name_and_code = [{
          name: this.metadataName,
          code: this.metadataCode,
          id: metadataId
        }]
      },
      // 计算公式的按钮方法
      calc(number) {
        this.number_input = this.number_input + number
        this.no_show_number_input = this.no_show_number_input + number
      },
      // 新增选择下拉框对应的按钮方法
      cell(data) {
        console.log("22222222",data)
        // 拿到对应的编码
        let select_data_code = ''
        // 拿到对应的名称
        let select_data_name = ''
        for (let i = 0; i < this.NORMFEEList.length; i++) {
          if (data == this.NORMFEEList[i].fcode) {
            select_data_code = (this.NORMFEEList[i].fcode)
            select_data_name = (this.NORMFEEList[i].fname)
          }
        }
        this.number_input = this.number_input  + select_data_name
        this.no_show_number_input = this.no_show_number_input + select_data_code

      },
      // 实现指标元素添加输入框的按钮
      input() {
        this.feeBoxShow = false
        this.add_metadata_inside_select = true
        this.inputData.push({
          id: 'cell' + this.dataNum++,
          data: this.metadataList
        })
      },
      // 清空计算公式的按钮实现
      clear_compute_btn() {
        this.number_input = ''
        this.no_show_number_input = ''
      },
      // 实现新增指标信息弹窗的确定按钮方法
      submit() {
        this.$refs['add_metadata_form'].validate(valid => {
          if (valid) {
            // 拿到下拉框的全部数据
            console.log("33333",this.addMetadataSelect)
            //拿到输入框的数据
            console.log("444444",this.no_show_number_input,"555555",this.id)
            updateFormulaById({formula: this.no_show_number_input, id: this.id}).then((response) => {
              this.$emit("dataFormulaHandler",this.normId);
              this.$modal.msgSuccess("修改成功");
              this.addMetadataSelect = [];
              this.number_input = '';
              this.no_show_number_input = '';
            });
          }
        })

      },
    }
  }
</script>

<style scoped>
  /*设置新增添加指标弹窗的表格外边框样式*/
  .outside_border {
    border: 1px solid #c7c6c6;
    border-radius: 5px
  }
  /*设置新增添加指标弹窗的表格等式右边元素的样式*/
  .fee {
    background-color: #f5f1f1;
    height: 50px;
    padding: 10px
  }
  /*设置新增统计指标弹窗的等式右边元素添加按钮的样式*/
  .fee_button {
    margin: 0 5px;
    background: rgb(64, 142, 186);
    width: 20px;
  }


  /*设置新增添加指标弹窗的表格等式左边元素的样式*/
  .add_metadata_left {
    background-color: #f5f1f1;
    height: 40px;
    padding: 10px;
    border-radius: 5px
  }




  /*设置新增统计指标弹窗的计算公式按钮外部的样式*/
  .add_metadata_right_outside_button {
    background: rgb(64, 142, 186);
    width: 20px;
    margin: 10px 13px;
  }

  /*设置新增统计指标弹窗的计算公式按钮cell的样式*/
  .add_metadata_right_outside_cell_button {
    background: rgb(64, 142, 186);
    width: 50px;
    margin: 10px 13px;
  }

  /*设置新增统计指标弹窗的等式右边元素下拉框的外部样式的样式*/
  .fee_inside_style {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 15px;
  }

  /*设置新增统计指标弹窗的计算公式的按钮*/
  .add_metadata_compute_number {
    display: flex;
    justify-content: center;
    align-items: center;
    color: white
  }

  /*设置新增统计指标弹窗的计算公式的清空计算公式的样式*/
  .clear_compute {
    width: 535px;
    margin: 12px
  }

</style>
