<template>
  <div class="scriptCode">
    <div class="app-container">
    <div class="filter-container">
      <el-form ref="form" :inline="true" label-width="80px">
        <el-form-item label="产品名称">
          <el-input v-model="productName" :disabled="true"></el-input>
        </el-form-item>
      </el-form>
    </div>

    <el-table
      :data="tableData"
      v-loading="listLoading"
      row-key="id"
      border
      default-expand-all>
      <el-table-column
        prop="variableName"
        label="参数名称">
      </el-table-column>

      <el-table-column
        prop="variableValue"
        label="参数值">
        <template slot-scope="scope">

          <el-popover
            :ref="`popover-${scope.row.variableId}`"
          placement="bottom"
          trigger="manual"
          >
            <div>
              <el-form :inline="true">
                <el-form-item>
                  <el-input v-model="scope.row.variableValue"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="green" icon="el-icon-check" size="mini" @click="save(scope.row)"></el-button>
                </el-form-item>
                <el-form-item>
                  <el-button icon="el-icon-close" size="mini" @click="closePopover(scope.row)"></el-button>
                </el-form-item>
              </el-form>
            </div>
            <el-link slot="reference" type="primary" @click="editItem(scope.row,scope.$index)">{{ scope.row.variableValue}}</el-link>
          </el-popover>
        </template>
      </el-table-column>

    </el-table>
    </div>
  </div>
</template>

<script>
import { parseProductScriptItem, updateProductScriptItem } from '@/api/productFile/productInfo.js'
export default {
  name: 'ScriptItem',

  data() {
    return {
      productName: '',
      idProduct: '',

      tableData: [],
      listLoading: false
    }
  },
  created() {
    this.idProduct = this.$route.query.idProduct
    this.productName = this.$route.query.productName
  },
  mounted() {
    this.getList()
  },
  methods: {
    // 获取脚本内容
    getList() {
      var _that = this

      var data = {
        idProduct: _that.idProduct
      }
      parseProductScriptItem(data).then(res => {
        console.log(res)
        _that.tableData  = res.data
      }).catch(err => {
        _that.$message.error(err)
      })
    },
    // 保存脚本内容
    save(row) {
      var _that = this
      var itemList = [];
      itemList.push(row);
      var data = {
        'idProduct': _that.idProduct,
        'itemList': JSON.stringify(itemList)
      }

      // console.log(data);
      // return;
      updateProductScriptItem(data).then(res => {
        if (res.httpCode == 200) {
          _that.$message({
            message: '保存成功',
            type: 'success'
          })
          _that.$refs['popover-'+ row.variableId].showPopper = false;
          _that.getList()
        } else {
          _that.$message.error(res.msg)
        }
      }).catch(err => {
        _that.$message.error(err)
      })
    },

    editItem(row) {
      const _that = this;

      for (const key in this.$refs) {
        console.log(key);
        if (key.indexOf('popover-'+ row.variableId) == -1) {
          _that.$refs[key].showPopper = false;
        } else {
          _that.$refs[key].showPopper = true;
        }
      }
    },
    closePopover(row,index) { //每次只显示一个Popover弹窗 使用doClose()
      // 遍历所有的refs，判断索引名中是否有 'popover-' ;如果有，都使用doClose关掉
      const _that = this;
      _that.$refs['popover-'+row.variableId].showPopper = false;

    },

  }
}
</script>

<style>
  .scriptCode{
    margin-top: 20px;
  }

  .in-coder-panel{
    width: 90%;
    position:relative;
    margin: 10px;
  }
  .CodeMirror{
    height:1000px;
  }
</style>
