<template>
  <div>
    <headerTitle title="表计测点" style="margin-top: 15px"></headerTitle>
    <ele-pro-table
      ref="measureTable"
      :columns="measureColumns"
      :datasource="substanceItemList"
      max-height="400"
      :needPage="false"
    >
      <!-- 表头工具栏 -->
      <template v-slot:toolbar>
        <el-button
          size="small"
          type="primary"
          icon="el-icon-plus"
          class="ele-btn-icon"
          @click="handleAddOrEditMeasure('', 'add')"
          v-if="!detail"
        >
          添加
        </el-button>
      </template>
      <!-- 操作列 -->
      <template v-slot:action="{ row, $index }">
        <el-link
          type="primary"
          :underline="false"
          @click="handleAddOrEditMeasure(row, 'view')"
          style="margin-right: 10px"
        >
          详情
        </el-link>
        <el-link
          type="primary"
          :underline="false"
          icon="el-icon-edit"
          @click="handleAddOrEditMeasure(row, 'edit', $index)"
          style="margin-right: 10px"
          v-if="!detail"
        >
          修改
        </el-link>
        <el-popconfirm
          title="确定删除此测点吗？"
          v-if="!detail"
          @confirm="handleDeleteMeasure($index)"
        >
          <el-link
            slot="reference"
            type="danger"
            :underline="false"
            icon="el-icon-delete"
          >
            删除
          </el-link>
        </el-popconfirm>
      </template>
      <MeasurePointForm
        ref="MeasurePointFormRef"
        @submit="handleMeasureSubmit"
      ></MeasurePointForm>
    </ele-pro-table>
  </div>
</template>

<script>
  import MeasurePointForm from './measurePointForm.vue';

  export default {
    data() {
      return {
        measureColumns: [
          {
            columnKey: 'index',
            label: '序号',
            type: 'index',
            width: 55,
            align: 'center'
          },
          {
            prop: 'code',
            label: '测点编码',
            align: 'center',
            minWidth: 150,
            showOverflowTooltip: true
          },
          {
            prop: 'measuringPointCode',
            label: '测点代码',
            align: 'center',
            minWidth: 200,
            showOverflowTooltip: true
          },
          {
            prop: 'name',
            label: '测点名称',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'itemType',
            label: '测点类型',
            align: 'center',
            width: 100,
            formatter: (row, column) => {
              return row.itemType == 1
                ? '状态'
                : row.itemType == 2
                ? '颜色'
                : '数值';
            }
          },

          {
            prop: 'indexNo',
            label: '排序号',
            align: 'center',
            width: 80
          },
          {
            columnKey: 'action',
            label: '操作',
            width: 200,
            align: 'center',
            slot: 'action',
            resizable: false
          }
        ],
        currentIndex: '',
        title: '',
        substanceItemList: []
      };
    },
    props: {
      form: {
        type: Object,
        default: () => {
          return {};
        }
      },
      detail: {
        type: Boolean,
        default: false
      }
    },

    watch: {
      form: {
        //监听的对象
        deep: true, //深度监听设置为 true
        handler: function (newValue) {
          this.substanceItemList = newValue.substanceItemList || [];
        }
      }
    },
    components: { MeasurePointForm },
    methods: {
      // 打开测点表单弹窗
      handleAddOrEditMeasure(row, type, index) {
        this.currentIndex = index;
        this.$refs.MeasurePointFormRef.open(row, type);
      },
      // 处理测点提交
      handleMeasureSubmit(formData) {
        if (this.currentIndex || this.currentIndex === 0) {
          this.$set(this.substanceItemList, this.currentIndex, { ...formData });
        } else {
          // 新增模式
          const newMeasure = {
            ...formData
          };
          this.substanceItemList.push(newMeasure);
        }
      },
      // 删除测点
      handleDeleteMeasure(index) {
        this.substanceItemList.splice(index, 1);
      }
    }
  };
</script>

<style scoped>
  .section-title {
    font-size: 14px;
    font-weight: bold;
    color: #606266;
    margin: 20px 0 15px 0;
    padding-left: 10px;
    border-left: 4px solid #409eff;
  }

  .alarm-row {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
  }

  .alarm-label {
    text-align: right;
    padding-right: 10px;
    color: #606266;
    font-size: 14px;
  }
</style>
