<template>
  <div class="auto select-overspread" style="overflow-y: scroll;height: 100%">
    <div v-if="typedata.cardType" class="row" style="height: auto">
      <validator name='v'>
        <form class="form-inline" novalidate>
          <ul class="nav nav-tabs">
            <li class="active"><a href="#">工具卡参数</a></li>
          </ul>
          <span v-if="model.rows.length === 0">&nbsp;&nbsp;&nbsp;（此工具卡不需要输入参数）</span>
          <div v-for="row in model.rows" class="form-group">
            <!--            <label class="font_normal_body" >{{row.modifiable}}:</label>-->
            <label class="font_normal_body">{{row.name}}:</label>
            <input class="form-control" style="width:60%" type="number" :disabled="row.modifiable==0 ?  true: false" v-model="row.value">
          </div>
        </form>
        <div class="col-sm-12" style="float: left;">
          <hr/>
          <ul class="nav nav-tabs">
            <li class="active"><a href="#">工具卡操作</a></li>
            <button type="button" style="width: auto;padding-left: 10px;padding-right: 10px" :disabled='!$v.valid' @click="confirm()" class="button_search">制作{{parentData}}{{typedata.name}}</button>
            <button class="button_search" @click="readCard()">读卡</button>
          </ul>
          <data-grid :model="cardInfo" partial='list' v-ref:grid class="list_area table_sy">
            <template partial='head'>

            </template>
            <template partial='body'>
              <tr>
                <td style="text-align:center">{{row.label}}</td>
                <td style="text-align:center">{{row.value}}</td>
              </tr>
            </template>
            <template partial='foot'></template>
          </data-grid>
        </div>
      </validator>

      <modal :show.sync="show" v-ref:model backrop="false" width="30%">
        <header slot="modal-header" class="modal-header">
          <button type="button" class="close" @click="close2"><span>&times;</span></button>
          <h4 style="text-align: center" class="modal-title">卡片信息</h4>
        </header>
        <article slot="modal-body" class="modal-body">
          <div class="form-group" v-for="row in cardInfo">
            <div>&ensp;&ensp;&ensp;&ensp;{{row.label}}：{{row.value}}</div>
          </div>
        </article>
        <div slot="modal-footer" class="modal-footer">
          <button type="button" class="btn btn-default" @click="close2()">关闭</button>
        </div>
      </modal>

    </div>
  </div>
</template>
<script>
  import Vue from 'vue'

export default {
    data () {
      return {
        model: {
          rows: []
        },
        // 编辑控制
        isEdit: false,
        cardTool: {},
        aliasName: '',
        dqdm: '',
        cardInfo: [],
        show: false
      }
    },
    props: ['typedata', 'config', 'toolcardname', 'parentData'],
    watch: {
      'typedata' (val) {
        if (val) {
          this.initGen()
        } else {
          this.initModel()
        }
      }
    },
    ready () {
      this.initGen()
    },
    methods: {
      initGen () {
        this.model.rows = []
        if (this.typedata.parameter) {
          this.typedata.parameter.forEach((item) => {
            this.model.rows.push(item)
          })
        }
      },

      async confirm () {
        this.cardTool.parameter = {}
        if (this.model.rows) {
          this.model.rows.forEach((item) => {
            this.cardTool.parameter[item.parameterName] = item.value
          })
        }
        this.cardTool.aliasName = this.typedata.aliasName
        this.cardTool.cardType = this.typedata.cardType
        this.cardTool.dqdm = ''
        let makecard_record = {
          name: this.toolcardname,
          cardType: this.typedata.name,
          f_operator: this.$login.f.name,
          f_operatorid: this.$login.f.id,
          f_orgid: this.$login.f.orgid,
          f_orgname: this.$login.f.orgs,
          f_depid: this.$login.f.depids,
          f_depname: this.$login.f.deps
        }
        let res = await this.$showMessage(`您确定要制作卡吗？`, ['confirm', 'cancel'])
        if (res === 'confirm') {
          console.log('this.cardTool ===> ' + JSON.stringify(this.cardTool))
          let response = {data: {Err: '未知错误'}}
          try {
            response = await Vue.resetpost('http://127.0.0.1:8003/MakeToolCard', this.cardTool, {resolveMsg: null, rejectMsg: null})
          } catch (e) {
            this.$showMessage('错误：连接卡服务失败')
            return
          }
          if (response.data.Err) {
            this.$showMessage('错误：' + response.data.Err)
            return
          } else if (response.data.Exception) {
            this.$showMessage('异常：' + response.data.Exception)
            return
          } else {
            let data1 = {
              tablename: 't_toolcardmaking_record',
              basedata: makecard_record
            }
            await this.$resetpost('rs/logic/saveTable', data1, {resolveMsg: null, rejectMsg: null})
            this.$showMessage('工具卡制作成功', ['confirm'])
          }
        }
        this.initModel()
      },
      initModel () {
        this.model = {
          rows: []
        }
      },
      close () {
        this.$dispatch('close')
      },
      close2 () {
        this.cardInfo = {}
        this.show = false
      },
      async readCard () {
        try {
          let res = await this.$resetpost('http://127.0.0.1:8003/ReadToolCard', {aliasName: this.typedata.aliasName, dqdm: this.typedata.dqdm}, {rejectMsg: null, resolveMsg: null})
          if (res.data.Err) {
            this.$showMessage('错误：' + res.data.Err)
          } else if (res.data.Exception) {
            this.$showMessage('异常：' + res.data.Exception)
          } else {
            // 拼接工具卡信息
            /* console.log(res.data)
             let cardInfo = res.data.NewParam
             this.cardInfo=cardInfo
             console.log(this.cardInfo) */
            let cardInfo = []
            for (let item in res.data.NewParam) {
              cardInfo.push({label: item, value: res.data.NewParam[item]})
            }
            this.$set('cardInfo', cardInfo)

            this.show = true
          }
        } catch (e) {
          this.$showMessage('错误：连接卡服务失败')
        }
      }
    }
  }
</script>
<style lang="less">
  #gas-price-form {
    .form-group {
      margin-left: 0px;
      margin-right: 0px;
    }
  }
</style>
