<template>
  <el-dialog title="配置集成工具库" :visible.sync="dialogTableVisible" width="70%">
    <el-button type="default" style="margin-bottom: 20px" @click="handleEdit(1)">添加协议</el-button>
    <el-table :data="gridData" border height="500" :header-cell-style="{background:'#F3F4F7'}">
      <el-table-column type="index" label="序号" align="center" width="50"></el-table-column>
      <el-table-column property="Type" label="协议类型" show-overflow-tooltip align="center"></el-table-column>
      <el-table-column property="Name" label="名称" show-overflow-tooltip align="center"></el-table-column>
      <el-table-column property="address" label="软件" align="center" width="80">
        <template slot-scope="scope" v-if="scope.row.Application">
          <el-button type="text" download @click="handleDown(scope.$index,scope.row,'Application')">下载</el-button>
        </template>
      </el-table-column>
      <el-table-column property="Remark" label="特殊说明" align="center"></el-table-column>
      <el-table-column property="Scope" label="适用厂家" align="center">
          <template slot-scope="scope">
            {{scope.row.Scope || '通用厂家'}}
          </template>
      </el-table-column>
      <el-table-column property="Manual" label="使用说明" align="center" width="80">
        <template slot-scope="scope" v-if="scope.row.Manual">
          <el-button type="text" download @click="handleDown(scope.$index,scope.row,'Manual')">下载</el-button>
        </template>
      </el-table-column>
      <el-table-column property="address" label="配置示例" align="center" width="80">
        <template slot-scope="scope" v-if="scope.row.Eg">
          <el-button type="text" download @click="handleDown(scope.$index,scope.row,'Eg')">下载</el-button>
        </template>
      </el-table-column>
      <el-table-column property="address" label="操作" align="center">
        <template slot-scope="scope">
          <el-button @click="handleEdit(2,scope.$index, scope.row)">编辑
          </el-button>
         
            <el-button @click="handleDelete(scope.$index, scope.row)" slot="reference" type="danger" >删除</el-button>
       
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      width="40%"
      :title="title"
      :visible.sync="innerVisible"
      append-to-body>
      <el-form :model="form" :rules="rules" ref="ruleForm">
        <el-form-item label="协议类型" v-if="this.title=='添加协议'">
          <el-select v-model="form.Type" filterable @change="handleChangeProtocolType"
                     placeholder="请选择">
            <el-option v-for="item in options" :key="item.value" :label="item.label"
                       :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="协议类型" v-if="this.title=='编辑协议'">
            <el-input v-model="form.Type" autocomplete="off" disabled style="width: 220px"/>
        </el-form-item>
        <el-form-item label="协议名称" prop="Name">
          <el-input v-model="form.Name" autocomplete="off" placeholder="请输入协议名称，必须唯一" style="width: 220px"/>
        </el-form-item>
        <!-- <p v-if="msg1" style="color: #F56C6C">请输入协议名称</p> -->
        <el-form-item label="上传软件版本" prop="Application">
          <el-upload
            action="String"
            :on-change="changeItem1"
            >
            <i class="el-icon-upload"></i>
            <span style="padding-left:20px;" v-if="file1">文件名：{{file1}}</span>
          </el-upload>
        </el-form-item>
        <!-- <p v-if='msg2' style="color: #F56C6C">请上传软件版本</p> -->
        <el-form-item label="特殊说明">
          <el-input type="textarea" v-model="form.Remark" placeholder="请输入描述内容，300个字以内" :autosize="{ minRows: 4, maxRows: 4}" style="width: 220px"/>
        </el-form-item>
        <el-form-item label="适用厂家">
          <el-input type="textarea" v-model="form.Scope" 
          placeholder="请输入描述内容，300个字以内" :autosize="{ minRows: 4, maxRows: 4}" style="width: 220px"/>
        </el-form-item>
        <el-form-item label="使用说明">
          <el-upload
            action="String"
            :on-change="changeItem2"
            >
            <i class="el-icon-upload"></i><span style="padding-left:20px;" v-if="file2">文件名：{{file2}}</span>
          </el-upload>
        </el-form-item>
        <el-form-item label="配置示例">
         <el-upload
            action="String"
            :on-change="changeItem3"
            >
            <i class="el-icon-upload"></i><span style="padding-left:20px;" v-if="file3">文件名：{{file3}}</span>
          </el-upload>
        </el-form-item>  
      </el-form>
       <div slot="footer" class="dialog-footer">
            <el-button @click="innerVisible = false">取 消</el-button>
            <el-button type="primary" @click="save">保 存</el-button>
          </div>
    </el-dialog>
  </el-dialog>
</template>

<script>
  import uploadFiles from "@/components/business_space/lib/uploadFiles";
  import {queryTxList,dowloadProtocol,addProtocol,updateProtocol,deleteProtocol,uploadProtocol} from "@/fetch/point_http"
  export default {
    name: "",
    components: {uploadFiles},
    data() {
      return {
        gridData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }],
        dialogTableVisible: false,
        innerVisible: false,
        title: '添加协议',
        form: {
          Name: '',
          Type:"",
          Remark: '',
          Scope: '',
          Eg: '',
          Manual: '',
          Application: ''
        },
         rules: {
          Name: [
            { required: true, message: '请输入协议名称', trigger: 'blur' }
          ],
           Application: [
            { type: 'date', required: true, message: '', trigger: 'change' }
          ],
         },
        file1:"",
        file2:"",
        file3:"",
        // msg1:false,
        // msg2:false,
        formData1:null,
        formData2:null,
        formData3:null,
        options: [
          {
            value: 'modbus-tcp',
            label: 'Modbus TCP'
          }, {
            value: 'bacnet-ip',
            label: 'BACNet IP'
          }, {
            value: 'opc',
            label: 'OPC'
          }, {
            value: 'knx',
            label: 'KNX'
          }, {
            value: 'mqtt',
            label: 'MQTT'
          }, {
            value: 'amqp',
            label: 'AMQP'
          }, {
            value: 'lora',
            label: 'LoRa'
          }, {
            value: 'ems-collect',
            label: 'ems-collect'
          }, {
            value: 'common',
            label: '其他'
          }],
      };
    },
    methods: {
      show() {
        this.dialogTableVisible = true
        this.getTxOption()
      },
       getTxOption(object ){
        let data = {
        }
        queryTxList(data,res=>{
          console.log(res)
          this.gridData = res.Content
        })
      },
      handleDown(index, row,name) {
        let params
        if(name=='Application'){
          params = {
            Property: 'Application',
            ProtocolId: row.Id
          }
        }else if(name=='Manual'){
           params = {
            Property: 'Manual',
            ProtocolId: row.Id
          }
        }else if(name=='Eg'){
           params = {
            Property: 'Eg',
            ProtocolId: row.Id
          }
        }
        dowloadProtocol(params,res=>{
        })
      },
      handleEdit(tb,index, row) {
        this.innerVisible = true
        console.log(row,tb)
        if (tb==2) {
          console.log(row)
          this.title = '编辑协议'
          this.form = row
          this.file1 = row.Application
          this.file2 = row.Manual
          this.file3 = row.Eg
        } else {
          this.title = '添加协议'
          this.form = {
            Name:"",
            Type:"",
            Application:'',
            Eg:"",
            Manual:"",
            Remark: '',
            Scope: '',
          }
          this.file1 = ''
          this.file2 = ''
          this.file3 = ''
        }
      },
      save(){
        if(this.title == '添加协议'){
          if(this.form.Name && this.file1){
            let params = this.form
            addProtocol(params,res=>{
              console.log(res)
              if(res.Result=='success'){
                this.innerVisible = false
                if(this.file1){
                   this.formData1.append('protocolId',res.Message)
                   uploadProtocol(this.formData1,res=>{
                     if(res.Result=='success'){
                       console.log('文件上传成功')
                     }
                   })
                }
                if(this.file2){
                   this.formData2.append('protocolId',res.Message)
                    uploadProtocol(this.formData2,res=>{
                      if(res.Result=='success'){
                        console.log('文件上传成功')
                      }
                    })
                }
               if(this.file3){
                   this.formData3.append('protocolId',res.Message)
                  uploadProtocol(this.formData3,res=>{
                    if(res.Result=='success'){
                      console.log('文件上传成功')
                    }
                  })
               }
                 this.getTxOption()
              }
            })
          }
        }else if(this.title == '编辑协议'){
           if(this.form.Name && this.file1){
            let params = {
              Content:[
                 this.form
              ]
            }
            updateProtocol(params,res=>{
              if(res.Result=='success'){
                   this.innerVisible = false
                    if(this.formData1){
                        this.formData1.append('protocolId',this.form.Id)
                        uploadProtocol(this.formData1,res=>{
                          if(res.Result=='success'){
                            console.log('文件上传成功')
                          }
                        })
                    }
                    if(this.formData2){
                        this.formData2.append('protocolId',this.form.Id)
                          uploadProtocol(this.formData2,res=>{
                            if(res.Result=='success'){
                              console.log('文件上传成功')
                            }
                          })
                    }
                    if(this.formData3){
                          this.formData3.append('protocolId',this.form.Id)
                          uploadProtocol(this.formData3,res=>{
                            if(res.Result=='success'){
                              console.log('文件上传成功')
                            }
                          })
                    }
                    this.getTxOption()
              }
            })
           }
        }
      },
      handleDelete(index, row) {
         this.$confirm("删除后无法恢复，是否需要删除？", "提示", {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            console.log(row)
            let params = [row.Id]
            deleteProtocol(params,res=>{
               this.getTxOption()
            })
          }).catch(() => {
            this.$message("取消删除")
          })
      },
      handleChangeProtocolType(val) {
      },
      changeItem1(file, fileList) {
        this.file1 = file.name
        this.formData1 = null
        this.formData1 = new FormData()
        this.formData1.append('multipartFile',file.raw)
        this.formData1.append('property','Application')
      },
      changeItem2(file, fileList) {
        this.file2 = file.name
        this.formData2 = null
        this.formData2 = new FormData();
        this.formData2.append('multipartFile',file.raw)
        this.formData2.append('property','Manual')
      },
      changeItem3(file, fileList) {
        this.file3 = file.name
        this.formData3 = null
        this.formData3 = new FormData()
        this.formData3.append('multipartFile',file.raw)
        this.formData3.append('property','Eg')
      }
    }
  }
</script>

<style lang='less'>
.el-form{
  .el-form-item__label{
    width:108px;
    display: inline-block;
  }
}


</style>
