<template>
  <div class="single-padding">
    <el-page-header
      @back="goBack"
      content="出参配置"
      style="margin-bottom: 20px"
    >
    </el-page-header>
    <div style="width: 100%; height: calc(100% - 44px)">
      <ht-table
        @load="loadData"
        @row-dblclick="row => showDialog(row.id)"
        :data="data"
        :pageResult="pageResult"
        :selection="true"
        quick-search-props="paramCode,paramName,paramClass"
        :default-sorter="[
          {direction: 'ASC', property: 'paramType'},
          {direction: 'ASC', property: 'sn'}
        ]"
        :show-export="false"
        :show-custom-column="false"
        ref="htTable"
      >
        <template v-slot:toolbar>
          <el-button
            size="small"
            @click="showDialog()"
            icon="el-icon-plus"
            type="primary"
            >添加</el-button
          >
          <ht-delete-button
            url="${cssc}/biz/model/modelInfo/v1/modelParams/deleteModelParams"
            :htTable="$refs.htTable"
            >删除</ht-delete-button
          >
          <el-button
            size="small"
            type="primary"
            plain
            @click="saveOrder"
            icon="el-icon-finished"
            >保存排序</el-button
          >
        </template>
        <template>
          <ht-table-column
            prop="paramCode"
            label="参数编码"
            :sortable="true"
            :show-overflow-tooltip="true"
          >
          </ht-table-column>
          <ht-table-column
            prop="paramName"
            label="参数名称"
            :sortable="true"
            :show-overflow-tooltip="true"
          >
          </ht-table-column>
          <ht-table-column
            prop="paramType"
            label="参数类型"
            :sortable="true"
            :show-overflow-tooltip="true"
          >
            <template v-slot="{row}">
              <div v-if="row.paramType == 'result'">出参</div>
            </template>
          </ht-table-column>
          <ht-table-column
            prop="paramDataType"
            label="数据类型"
            :sortable="true"
            :show-overflow-tooltip="true"
            :filters="dataType"
          >
            <template v-slot="{row}">
              <div v-if="row.paramDataType == 'B'">布尔型</div>
              <div v-if="row.paramDataType == 'I'">整型</div>
              <div v-if="row.paramDataType == 'F'">浮点型</div>
              <div v-if="row.paramDataType == 'S'">字符串</div>
              <div v-if="row.paramDataType == 'D'">日期</div>
              <div v-if="row.paramDataType == 'T'">时间</div>
            </template>
          </ht-table-column>

          <ht-table-column
            prop="paramNature"
            label="参数性质"
            :sortable="true"
            :show-overflow-tooltip="true"
            :filters="[{value: 2, text: '动态'}, {value: 1, text: '固定'}]"
          >
            <template v-slot="{row}">
              <el-tag type="warning" v-if="row.paramNature == 2">动态</el-tag>
              <el-tag type="danger" v-if="row.paramNature == 1">固定</el-tag>
            </template>
          </ht-table-column>
          <ht-table-column
            prop="sn"
            label="排序号"
            width="120"
            :show-overflow-tooltip="true"
          >
            <template v-slot="{row}">
              <el-input-number
                style="width: 100%"
                v-model="row.sn"
                :controls="false"
                @change="(val, old) => handleChange(row, val)"
                :min="0"
              ></el-input-number>
            </template>
          </ht-table-column>
        </template>
      </ht-table>
    </div>
    <common-dialog
      width="800px"
      title="出参配置信息"
      class="sp-manager__dialog outdialog"
      :visible="dialogVisible"
      :before-close="beforeCloseDialog"
      destroy-on-close
    >
      <el-form v-form data-vv-scope="BizParamResult">
        <ht-form-item label="参数编码">
          <ht-input
            v-model="paramInfo.paramCode"
            validate="required"
            placeholder="请输入参数编码"
          />
        </ht-form-item>
        <ht-form-item label="参数名称">
          <ht-input
            v-model="paramInfo.paramName"
            validate="required"
            placeholder="请输入参数名称"
          />
        </ht-form-item>
        <ht-form-item label="参数性质">
          <ht-select
            v-model="paramInfo.paramNature"
            :options="[{key: 1, value: '固定'}, {key: 2, value: '动态'}]"
            :validate="{required: true}"
          ></ht-select>
        </ht-form-item>
        <ht-form-item label="数据类型">
          <ht-select
            v-model="paramInfo.paramDataType"
            :options="dataType"
            :props="{key: 'value', value: 'text'}"
            :validate="{required: true}"
          ></ht-select>
        </ht-form-item>
        <ht-form-item label="列头宽度(px)">
          <ht-input type="number" :min="0" v-model="paramInfo.paramWidth" />
        </ht-form-item>
        <ht-form-item label="数据说明">
          <ht-input
            type="textarea"
            v-model="paramInfo.paramMemo"
            placeholder="请输入数据说明"
          />
        </ht-form-item>
      </el-form>
      <div slot="footer" style="text-align: center">
        <el-button type="primary" @click="saveParam">保存</el-button>
        <el-button @click="beforeCloseDialog">取消</el-button>
      </div>
    </common-dialog>
  </div>
</template>
<script>
import utils from '@/hotent-ui-util.js'
export default {
  data() {
    return {
      dialogVisible: false,
      data: [],
      pageResult: {
        page: 1,
        pageSize: 50,
        total: 0
      },
      paramInfo: {
        modelId: this.$route.params.id,
        modelCode: this.$route.params.code,
        paramType: 'result',
        paramClass: '',
        paramDataType: 'I',
        paramNature: 2,
        paramMemo: '0'
      },
      class2: [
        {value: 'Scada', text: 'Scada'},
        {value: 'CMS', text: 'CMS'},
        {value: 'PLC', text: 'PLC'}
      ],
      dataType: [
        {value: 'I', text: '整型'},
        {value: 'F', text: '浮点型'},
        {value: 'S', text: '字符串'},
        {value: 'B', text: '布尔型'},
        {value: 'D', text: '日期'},
        {value: 'T', text: '时间'}
      ],
      type: [{value: 'param', text: '入参'}, {value: 'result', text: '出参'}],
      snObj: {},
      selectionPoint: []
    }
  },
  mounted() {
    this.$validator = this.$root.$validator
  },

  methods: {
    //保存批量参数
    saveParam() {
      this.$http
        .post('${cssc}/biz/model/modelInfo/v1/modelParams/', this.paramInfo)
        .then(res => {
          if (res.data.state) {
            setTimeout(() => {
              this.$message.success('添加成功')
              this.beforeCloseDialog()
              this.$refs.htTable.load()
            }, 500)
          }
        })
      //   }
    },

    //排序号
    handleChange(row, val) {
      this.snObj[row.id] = val
    },
    //保存排序按钮
    saveOrder() {
      this.$http
        .post(
          '${cssc}/biz/model/modelInfo/v1/modelParams/updateSequence',
          this.snObj
        )
        .then(res => {
          this.$refs.htTable.load()
        })
    },
    //弹窗
    showDialog(id) {
      if (id) {
        this.$http
          .get('${cssc}/biz/model/modelInfo/v1/modelParams/' + id)
          .then(resp => {
            this.paramInfo = resp.data
            this.dialogVisible = true
          })
      } else {
        this.dialogVisible = true
      }
    },
    beforeCloseDialog() {
      this.dialogVisible = false
      this.paramInfo = {
        modelId: this.$route.params.id,
        modelCode: this.$route.params.code,
        paramCode: '',
        paramName: '',
        paramType: 'result',
        paramNature: 2,
        paramDataType: 'S',
        paramWidth: 0,
        paramMemo: '0'
      }
    },
    //加载数据
    loadData(param, cb) {
      let modelQuery = [
        {
          group: 'main',
          operation: 'EQUAL',
          parentGroup: '',
          property: 'modelId',
          relation: 'AND',
          value: this.paramInfo.modelId
        },
        {
          group: 'main',
          operation: 'EQUAL',
          parentGroup: '',
          property: 'paramType',
          relation: 'AND',
          value: 'result'
        }
      ]
      if (param.querys && param.querys.length) {
        param.querys.push(...modelQuery)
      } else {
        param.querys = modelQuery
      }
      this.$http
        .post(
          '${cssc}/biz/model/modelInfo/v1/modelParams/sliceQueryParamByModel',
          param
        )
        .then(
          resp => {
            let response = resp.data
            this.data = response.rows
            this.pageResult = {
              page: response.page,
              pageSize: response.pageSize,
              total: response.total
            }
          },
          error => {
            reject(error)
          }
        )
        .finally(() => cb())
    },
    // 返回上一页
    goBack() {
      this.$router.push({name: 'ModelInfoManager'})
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/ .el-page-header__content {
  font-size: 16px;
}
/deep/ .el-dialog__body {
  padding: 30px 100px;
}
.add-dialog /deep/ .el-dialog__body {
  padding: 10px 20px 0;
  height: 450px;
}
.add-radio {
  line-height: 15px;
}
.table-box {
  width: 100%;
  height: calc(100% - 75px);
  padding-top: 10px;
  border: 1px solid #d6d6d6;
  border-radius: 5px;
}
/deep/ .el-button--mini {
  padding: 6px 5px;
  margin-left: 10px;
}
.dialog-pointer /deep/ .el-dialog__body {
  height: 450px;
  padding: 5px 20px 5px;
}
/deep/ .el-col-22 {
  width: 50%;
}
.table2 {
  height: calc(100% - 45px);
  padding: 5px 10px 10px;
}
.table2 > /deep/.el-table thead tr,
.table2 > /deep/.el-table thead tr th {
  background-color: #eee !important;
}
.table2 > /deep/ .el-table .cell {
  font-size: 14px;
}
.table2 /deep/.el-table th > .cell {
  color: #3c4353;
}
/deep/ .el-divider {
  background: transparent;
}
.outdialog .inputs {
  width: 100%;
  /deep/ .el-input-number {
    width: 100%;
    input {
      text-align: left;
    }
  }
}
</style>
