<template>
  <div>
  <fullscreen :fullscreen.sync="fullscreen" class="container">
    <div class="container-box">
        <div class="tabbox">
     

          <el-form  :inline="true" label-width="80px" :model="form">
            <el-form-item label="工单名称">
              <el-input v-model="itemName" size="small" style="width:800px"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="small" @click="addRow">增加行</el-button>
            </el-form-item>
          </el-form>

          <el-table height="calc(100% - 40px)" class="com-table" ref="multipleTable" :data="tableData"
                        tooltip-effect="dark" size="small" border style="width: 100%" v-loading="tableMask">

            <el-table-column  prop="idx" label="序号" align="center" width="50px"/>

            <el-table-column label="业务属性" align="center">
              <el-table-column  prop="busiType"    label="业务类型" align="center"/>
              <el-table-column  prop="productName" label="产品名称" align="center"/>
              <el-table-column  prop="parterName"  label="企业名称" align="center"/>
            </el-table-column>

            <el-table-column label="介绍材料" align="center">
              <el-table-column  prop="isBlack"         label="黑名单"          align="center" width="60px"/>
              <el-table-column  prop="businessLicense" label="企业法人营业执照" align="center">
                <template slot-scope="scope" v-if="scope.row.businessLicense">
                    <down :files="scope.row.businessLicense"></down>
                </template>
              </el-table-column>
              <el-table-column  prop="orgCode"         label="组织机构代码证"   align="center">
                <template slot-scope="scope" v-if="scope.row.orgCode">
                  <down :files="scope.row.orgCode"></down>
                </template>
              </el-table-column>
              <el-table-column  prop="taxReg"          label="税务登记证"       align="center">
                <template slot-scope="scope" v-if="scope.row.taxReg">
                  <down :files="scope.row.taxReg"></down>
                </template>                
              </el-table-column>
              <el-table-column  prop="bankAccount"     label="银行开户许可证"   align="center">
                <template slot-scope="scope" v-if="scope.row.bankAccount">
                    <down :files="scope.row.bankAccount"></down>
                </template>                
              </el-table-column>
              <el-table-column  prop="addService"      label="增值业务许可证"   align="center">
                <template slot-scope="scope" v-if="scope.row.addService">
                    <down :files="scope.row.addService"></down>
                </template>                
              </el-table-column>
              <el-table-column  prop="productInfo"     label="产品介绍"         align="center">
                <template slot-scope="scope" v-if="scope.row.productInfo">
                     <down :files="scope.row.productInfo"></down>
                </template>               
              </el-table-column>
              <el-table-column  prop="otherInfo"       label="其他说明材料"     align="center">
                <template slot-scope="scope" v-if="scope.row.otherInfo">
                     <down :files="scope.row.otherInfo"></down>
                </template>                
              </el-table-column>
            </el-table-column>

            <el-table-column label="操作" align="center">
                <template  slot-scope="scope">
                      <el-button type="text" size="small" @click="editItem(scope.row.idx)">编辑</el-button>
                      &nbsp;
                      <template>
                        <el-popconfirm title="确定清楚这条记录么?"  @confirm="clearItem(scope.row.idx)">
                            <el-button type="text" size="small" slot="reference">清除</el-button>
                        </el-popconfirm>
                      </template>
                </template>
            </el-table-column>
          </el-table>

          <div style="margin-top:10px;text-align:right;">
              <el-button>取 消</el-button>
              <el-button type="primary" @click="submitInfo">确 定</el-button>
          </div>
        </div>
    </div>


  </fullscreen>
    

  <!--新建对话框-->
    <el-dialog
      :title="dlgTitle"
      :visible.sync="showDlg"
      width="50%"
      :modal="true"
      :modal-append-to-body="false"
      :close-on-click-modal="false"
      :before-close="handleClose"
      >
      
      <el-form ref="form" :model="form" label-width="160px">
        <!--业务属性-->
        <el-row>
          <el-form-item label="业务类型">
            <el-input v-model="form.busiType"></el-input>
          </el-form-item>
        </el-row>

        <el-row>
          <el-form-item label="产品名称">
            <el-input v-model="form.productName"></el-input>
          </el-form-item>
        </el-row>

        <el-row>
          <el-form-item label="企业名称">
            <el-input v-model="form.parterName"></el-input>
          </el-form-item>
        </el-row>

        <!--介绍材料-->
        <el-row>
          <el-form-item label="黑名单">
              <el-radio v-model="form.isBlack" label="0">否</el-radio>
              <el-radio v-model="form.isBlack" label="1">是</el-radio>
              <el-tag type="info">是否列入中国移动不良信用名单和中国移动黑龙江公司不良信用名单</el-tag>
          </el-form-item>
        </el-row>

      <el-row>
          <el-col :span="12">
            <el-form-item label="企业法人营业执照">
                <myUpload ref="businessLicense" type="businessLicense" :itemId="itemId"  :idx="curIdx" @handleResult="uploadCallBack"></myUpload>
            </el-form-item>   
          </el-col>
          <el-col :span="12">
            <el-form-item label="组织机构代码证">
              <myUpload ref="orgCode" type="orgCode" :itemId="itemId"  :idx="curIdx" @handleResult="uploadCallBack"></myUpload>
          </el-form-item> 
          </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="税务登记证">
            <myUpload ref="taxReg" type="taxReg" :itemId="itemId" :idx="curIdx" @handleResult="uploadCallBack"></myUpload>
          </el-form-item> 
        </el-col>

        <el-col :span="12">
            <el-form-item label="银行开户许可证">
              <myUpload ref="bankAccount" type="bankAccount" :itemId="itemId"  :idx="curIdx"  @handleResult="uploadCallBack"></myUpload>
            </el-form-item> 
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="增值业务许可证">
            <myUpload ref="addService" type="addService" :itemId="itemId" :idx="curIdx"  @handleResult="uploadCallBack"></myUpload>
          </el-form-item> 
        </el-col>

        <el-col :span="12">
          <el-form-item label="产品介绍">
            <myUpload ref="productInfo" type="productInfo" :itemId="itemId"  :idx="curIdx" @handleResult="uploadCallBack"></myUpload>
          </el-form-item> 
        </el-col>
      </el-row>

      <el-row>
          <el-form-item label="其他说明材料">
            <myUpload ref="otherInfo" type="otherInfo" :itemId="itemId" :idx="curIdx" @handleResult="uploadCallBack"></myUpload>
          </el-form-item> 
      </el-row>

      </el-form>


      <span slot="footer" class="dialog-footer">
        <el-button @click="closeDlg">取 消</el-button>
        <el-button type="primary" @click="saveItem">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import myUpload from "../../../../components/uploadNew.vue";
import {fileListToStr,strToFileList,strToHerf} from "@/utils/tv.js"
import down from "@/components/uploadNewDown.vue";
export default {
  components: {myUpload,down},
  data(){
    return{
      tableMask:false,
      itemId:'',
      itemName:'',
      opType:'',
      curIdx:"0",
      tableData:[
          {"idx":"1"},
          {"idx":"2"},
          {"idx":"3"},
          {"idx":"4"},
      ],
      fullscreen:false,
      showDlg:false,
      dlgTitle:"编辑数据",
      options:[],
      form:{
        busiType:'',
        productName:'',
        parterName:'',
        isBlack:"0",

        businessLicense:"",
        orgCode:"",
        taxReg:"",
        bankAccount:"",
        addService:"",
        productInfo:"",
        otherInfo:"",
      },

      //附件相关
      attList: [],
      fileInfo: {
        type: "img",
        limit: 50,
        url: "/market/cmkAttachInfo/mkEmscnpl/upload",
        fileList: [],
      }
    }
  },
  methods:{
    closeDlg(){
      this.handleClose();
    },
    submitData(){

    },
    filesToUrl(files){
      return strToHerf(files)
    },
    loadIdxData(itemId,idx){
      return new Promise((resolve, reject) => {
      let params = {"itemId":itemId,"idx":idx}
      this.$http({
          url: "/market/tvImport/queryImport",
          method: "post",
          headers: {"Content-Type": "application/json"},
          data: params
        }).then((res) => {
          if(res.data.result==0){
              resolve(res.data.body)
          }else{
            this.$message({ showClose: true, message: '系统异常',type: 'error'});
          }
        }); 
      });
    },
    clearForm(itemId,idx){
      this.loadIdxData(itemId,idx).then(val => {
          this.parserIdxData(val)
      });
    },

    parserIdxData(data){
      if(data.length>0){
        let idxData = data[0]
        this.form.busiType = idxData.busiType
        this.form.productName = idxData.productName
        this.form.parterName = idxData.parterName
        this.form.isBlack = idxData.isBlack
        this.form.busiType = idxData.busiType
        //
        this.$refs.businessLicense.resetFile(strToFileList(idxData.businessLicense));
        this.$refs.orgCode.resetFile(strToFileList(idxData.orgCode));
        this.$refs.taxReg.resetFile(strToFileList(idxData.taxReg));
        this.$refs.bankAccount.resetFile(strToFileList(idxData.bankAccount));
        this.$refs.addService.resetFile(strToFileList(idxData.addService));
        this.$refs.productInfo.resetFile(strToFileList(idxData.productInfo));
        this.$refs.otherInfo.resetFile(strToFileList(idxData.otherInfo));
      }
    },

    editItem(idx){
      this.clearForm(this.itemId,idx)
      this.curIdx = idx.toString();
      this.showDlg = true;
    },
    handleClose(){
        this.showDlg = false;
        this.form.busiType='';
        this.form.productName='';
        this.form.parterName='';
        this.form.isBlack='0';
        this.form.businessLicense='0';
        this.form.orgCode='';
        this.form.taxReg='';
        this.form.bankAccount='';
        this.form.addService='';
        this.form.productInfo='';
        this.form.otherInfo='';
        //清空文件列表
        this.$refs.businessLicense.resetFile([]);
        this.$refs.orgCode.resetFile([]);
        this.$refs.taxReg.resetFile([]);
        this.$refs.bankAccount.resetFile([]);
        this.$refs.addService.resetFile([]);
        this.$refs.productInfo.resetFile([]);
        this.$refs.otherInfo.resetFile([]);
    },
    uploadBack(v) {
      this.attList = v;
    },
    uploadCallBack(v){
      if(v.k===1){
        //console.log('upload success')
        //this.setFile(v.body)
        //console.log(v)
      }else{
        console.log('upload fail')
      }
    },
    setFile(f){
     // let itemId = f.itemId
      //let idx = f.idx
      //
    },
    clearItem(idx){
        let params = {"itemId":this.itemId,"idx":idx}
        this.$http({
          url: "/market/tvImport/deleteImport",
          method: "post",
          headers: {"Content-Type": "application/json"},
          data: params
        }).then((res) => {
          if(res.data.result==0){
              this.loadTableData()
          }else{
            this.$message({ showClose: true, message: '系统异常',type: 'error'});
          }
        }); 
    },
    loadTableData(){
        let params = {"itemId":this.itemId}
        this.$http({
          url: "/market/tvImport/queryImport",
          method: "post",
          headers: {"Content-Type": "application/json"},
          data: params
        }).then((res) => {
          if(res.data.result==0){
              this.tableData=res.data.body
              if(this.tableData.length<4){
                 for(var i = this.tableData.length ;i<4;i++){
                    this.tableData.push({"idx":i+1})
                 }
              }
              if(this.showDlg===true){
                  this.handleClose(); 
              }
          }else{
            this.$message({ showClose: true, message: '系统异常',type: 'error'});
          }
        }); 
    },
    saveItem(){
         // check
        this.form.itemId = this.itemId
        this.form.itemName = this.itemName
        this.form.idx = this.curIdx

        //saveItem
        this.form.businessLicense = fileListToStr(this.$refs.businessLicense.getFileList());
        this.form.orgCode = fileListToStr(this.$refs.orgCode.getFileList());
        this.form.taxReg = fileListToStr(this.$refs.taxReg.getFileList());
        this.form.bankAccount = fileListToStr(this.$refs.bankAccount.getFileList());
        this.form.addService = fileListToStr(this.$refs.addService.getFileList());
        this.form.productInfo = fileListToStr(this.$refs.productInfo.getFileList());
        this.form.otherInfo = fileListToStr(this.$refs.otherInfo.getFileList());
        //
       
        //
        this.$http({
          url: "/market/tvImport/collectRequirement",
          method: "post",
          headers: {"Content-Type": "application/json"},
          data: this.form
        }).then((res) => {
          if(res.data.result==0){
              this.loadTableData("")
          }else{
            this.$message({ showClose: true, message:res.data.desc ,type: 'error'});
          }
        });            
    },
    submitInfo(){
        if(this.itemName===""){
          this.$message.error('工单标题不能为空');
          return 
        }

        let info = {}
        //参数组装
        info.params={"itemId":this.itemId,"itemName":this.itemName}
        info.woTitle = this.itemName
        info.procName = "互联网电视引入流程"
        for (let i = 0; i < this.options.length; i++) {
					if (this.options[i].procName=="互联网电视引入流程") {
						info.procVersion = this.options[i].procVersion;
            info.procId = this.options[i].procId;
					}
				}
        //POST请求
        this.$http({
        url: "/bpm/api/startProc",
        method: "post",
        headers: {"Content-Type": "application/json"},
        data:info
        }).then((res) => {
         if(res.data.result==0){
            this.$router.push({	path: '/tvIntroduction'});
         }else{
            this.$message({ showClose: true, message: res.data.desc,type: 'error'});
         }

        });
    },
    getTermianl() {
        this.$http({
            url: "/bpm/api/queryBpmProcList",
            method: "post",
            headers: {
                "Content-Type": "application/json",
                "page": '{"pageNo":"' + 1 + '","pageSize":"100"}'
            },
            data: {},
        }).then((res) => {
            this.options = res.data.data;
        });
    },
    addRow(){
      let row = {}
      row.idx = this.tableData.length+1
      this.tableData.push(row)
    }
  },
  mounted(){
    this.itemId = this.$route.query.itemId
    this.getTermianl()
    this.loadTableData()
  }
}
</script>

<style scoped lang="scss">
    .tabbox {
        margin-top: 15px;
    }
</style>
