<template>
  <div class="auto basic-main" style="height:95%">
    <criteria-paged :model="model" v-ref:paged>
      <criteria partial='criteria' @condition-changed='$parent.selfSearch' v-ref:cri>
        <div novalidate class="form-horizontal select-overspread container-fluid auto" partial>
          <div class="row">
            <div class="form-group col-sm-2">
              <label class="font_normal_body">开发商编号</label>
              <input type="text" class="form-control" v-model="model.f_dev_code" style="width:60%"
                     condition="f_dev_code = '{}' " placeholder="开发商编号"
              >
            </div>
            <div class="form-group col-sm-2">
              <label class="font_normal_body">开发商姓名</label>
              <input type="text" class="form-control" v-model="model.f_dev_name" style="width:60%"
                     condition="f_dev_name like '%{}%'" placeholder="开发商姓名"
              >
            </div>
            <div style="float: right">
              <button class="button_search" @click="search()">查 询</button>
              <button class="button_clear button_spacing" @click="$parent.$parent.add()">新增</button>
              <!--              <div-->
              <!--                :class="{'button_shrink_top':$parent.$parent.criteriaShow,'button_shrink_bottom':!$parent.$parent.criteriaShow}"-->
              <!--                @click="$parent.$parent.criteriaShow=!$parent.$parent.criteriaShow"-->
              <!--                class="button_spacing"-->
              <!--                style="float: right"></div>-->
            </div>
          </div>
          <div class="row" v-show="$parent.$parent.criteriaShow">
          </div>
        </div>
      </criteria>
      <data-grid :model="model" partial='list' class="list_area table_sy" v-ref:grid>
        <template partial='head'>
          <tr>
            <th>
              <nobr>开发商编号</nobr>
            </th>
            <th>
              <nobr>开发商姓名</nobr>
            </th>
            <th>
              <nobr>法人</nobr>
            </th>
            <th>
              <nobr>法人证件号码</nobr>
            </th>
            <th>
              <nobr>营业执照号码</nobr>
            </th>
            <th>
              <nobr>开发银行账户编码</nobr>
            </th>
            <th>
              <nobr>纳税人识别号</nobr>
            </th>
            <th>
              <nobr>创建时间</nobr>
            </th>
            <th>
              <nobr>操作</nobr>
            </th>
          </tr>
        </template>
        <template partial='body' :model="model">
          <tr>
            <th style="text-align:center">{{ row.f_dev_code }}</th>
            <th style="text-align:center">{{ row.f_dev_name }}</th>
            <th style="text-align:center">{{ row.f_legal_person }}</th>
            <th style="text-align:center">{{ row.f_idnumber }}</th>
            <th style="text-align:center">{{ row.f_license_num }}</th>
            <th style="text-align:center">{{ row.f_bank_account }}</th>
            <th style="text-align:center">{{ row.f_taxpayerid }}</th>
            <th style="text-align:center">{{ row.f_createfile_date }}</th>
            <th style="text-align:center">
              <button class="button_clear button_spacing" @click="$parent.$parent.$parent.update(row)">修改/查看</button>
            </th>
          </tr>
        </template>
      </data-grid>
    </criteria-paged>
  </div>
  <modal :show.sync="show" v-ref:modal large backdrop="false" :width="900">
    <header slot="modal-header" class="modal-header">
      <button type="button" class="close" @click="show = false"><span>&times;</span></button>
      <h4 class="modal-title">开发商档案信息</h4>
    </header>
    <article slot="modal-body" class="modal-body">
      <div class="auto select-overspread form-horizontal">
        <div class="row auto">
          <div class="col-sm-6 form-group form-input-group" :class="[!devinfo.f_dev_name ? 'has-error' : '']">
            <label class="control-label">开发商名称:</label>
            <input class="form-control col-sm-2"
                   v-model="devinfo.f_dev_name" placeholder="开发商名称">
          </div>
          <div class="col-sm-6 form-group form-input-group">
            <label class="control-label">法人:</label>
            <input class="form-control col-sm-2"
                   v-model="devinfo.f_legal_person" placeholder="法人">
          </div>
          <div class="col-sm-6 form-group form-input-group">
            <label class="control-label">法人身份证号:</label>
            <input class="form-control col-sm-2"
                   v-model="devinfo.f_idnumber" placeholder="证件号码">
          </div>
          <div class="col-sm-6 form-group form-input-group">
            <label class="control-label">营业执照号码:</label>
            <input class="form-control col-sm-2"
                   v-model="devinfo.f_license_num" placeholder="证件号码">
          </div>
          <div class="col-sm-6 form-group form-input-group">
            <label class="control-label">银行账户:</label>
            <input class="form-control col-sm-2"
                   v-model="devinfo.f_bank_account" placeholder="银行账户">
          </div>
          <div class="col-sm-6 form-group form-input-group">
            <label class="control-label">纳税人识别号:</label>
            <input class="form-control col-sm-2"
                   v-model="devinfo.f_taxpayerid" placeholder="纳税人识别号">
          </div>
          <div class="showList col-sm-12"
               :style="{padding:(files.length>0?'10px':'0'),marginTop:(files.length>0?'20px':'0')}">
            <div class="col-sm-6" style="padding:10px 10px 0px 10px;height: auto;box-sizing: border-box"
                 v-for="row in files">
              <div class="showData">
                <div class="left">
                  <a href="#" class="thumbnail" style="width:100%;height:100%">
                    <img
                      v-if="row.f_filetype==='jpg'||row.f_filetype==='png'||row.f_filetype==='gif'||row.f_filetype==='bmp'"
                      :src="row.f_downloadURL" alt="..."/>
                    <img v-if="row.f_filetype==='pdf'" src="./imgs/pdf.jpg" alt="" style="width:66%"/>
                    <img v-if="row.f_filetype==='xls'||row.f_filetype==='xlsx'" src="./imgs/excel.jpg" alt=""
                         style="width:66%"/>
                    <img v-if="row.f_filetype==='doc'||row.f_filetype==='docx'" src="./imgs/doc.jpg" alt=""
                         style="width:66%"/>
                  </a>
                </div>
                <div class="right">
                  <p :title="row.f_uploaddate" class="top clears">
                    <strong>上传时间</strong>:&nbsp;<span>{{ row.f_uploaddate }}</span></p>
                  <p :title="row.f_username" class="top clears">
                    <strong>操作员</strong>:&nbsp;<span>{{ row.f_username }}</span></p>
                  <p :title="row.f_filename" class="top clears"><strong>文件名</strong>:&nbsp;{{ row.f_filename }}</p>
                  <p :title="row.fremarks" class="top clears"><strong>文件说明</strong>:&nbsp;{{ row.fremarks }}</p>
                  <p>
                    <a v-if="row.f_filetype=='jpg'||row.f_filetype=='png'||row.f_filetype=='gif'||row.f_filetype=='bmp'"
                       :href="row.f_downloadURL" style="background:#6aa6e2" class="btn btn-primary" target="_blank"
                       role="button">预览</a>
                    <button style="background:#6aa6e2" class="btn btn-primary" target="_blank"
                            v-if="row.f_filetype=='pdf'||row.f_filetype=='xls'||row.f_filetype=='xlsx'||row.f_filetype=='doc'||row.f_filetype=='docx'"
                            @click="downloadfile(row.f_downloadURL)">下载
                    </button>
                    <a  @click="delet($index,row)" href="#" class="btn btn-default" role="button">删除</a>
                  </p>
                </div>
              </div>
            </div>
          </div>
          <div class="col-sm-12" style="text-align: center">
            <file-upload name="UploadFile" class="btn  my-file-uploader "
                         style="border-radius: 2px;"
                         :headers="headers"
                         action="rs/file/uploadFile" tagname="上传资料" v-ref:file
                         multiple></file-upload>
          </div>
        </div>
      </div>
    </article>
    <footer slot="modal-footer" class="modal-footer">
      <button type="button" class="btn button_search"
              :disabled="!devinfo.f_dev_name"
              @click='confirm'>提交
      </button>
    </footer>
  </modal>
</template>
<script>

import {PagedList} from 'vue-client'
import {guid} from '../../Util'
import HttpResetClass from 'vue-client/src/plugins/HttpResetClass'

export default {
  title: '开发商档案',
  data () {
    return {
      model: new PagedList('rs/sql/singleTable_OrderBy', 20, {
        items: `'*'`,
        tablename: `'t_dev_info'`,
        orderitem: `'F_CREATEFILE_DATE desc'`
      }),
      criteriaShow: false,
      show: false,
      devinfo: {
        f_dev_code: '',
        f_dev_name: '',
        f_orgid: '',
        f_depid: '',
        f_license_num: '',
        f_bank_account: '',
        f_taxpayerid: '',
        f_legal_person: '',
        f_credentials: '',
        f_idnumber: '',
        f_blodid: ''
      },
      headers: {},
      files: []
    }
  },
  ready () {
    this.search()
  },
  methods: {
    add () {
      this.devinfo = {
        f_dev_code: '',
        f_dev_name: '',
        f_orgid: '',
        f_depid: '',
        f_license_num: '',
        f_bank_account: '',
        f_taxpayerid: '',
        f_legal_person: '',
        f_credentials: '',
        f_idnumber: '',
        f_blodid: ''
      }
      this.headers = Object.assign({}, {blodid: guid(), name: this.$login.f.name})
      this.load(this.headers.blodid)
      this.show = true
    },
    search () {
      this.$refs.paged.$refs.cri.search()
    },
    async load (blodid) {
      let condition = `f_blobid= '${blodid}' `
      const http = new HttpResetClass()
      let data = {
        tablename: 't_files',
        condition: condition + ` order by f_uploaddate desc `
      }
      let getFile = await http.load('POST', 'rs/sql/singleTable', {data: data}, {
        warnMsg: null,
        resolveMsg: null
      })
      for (let i = 0; i < getFile.data.length; i++) {
        // 如果使用类型包含导入字样,则是execl文件导入的,不做显示
        if (getFile.data[i].fusetype && (getFile.data[i].fusetype.includes('execl导入'))) {
          getFile.data.splice(i, 1)
          i--
          continue
        }
        let temp = getFile.data[i].f_downloadpath
        let URL = temp.substring(temp.lastIndexOf(':\\') + 2)
        getFile.data[i].f_downloadURL = 'http://' + location.host + '/' + URL
      }
      this.files = []
      this.files = getFile.data
    },
    // 查询按钮事件
    delet (index, row) {
      this.$resetdelete('rs/entity/t_files', {id: row.id}, {resolveMsg: '删除成功', rejectMsg: '删除失败'}).then((res) => {
        this.files.splice(index, 1)
      })
    },
    update (row) {
      this.headers = Object.assign({}, {blodid: row.f_blodid, name: this.$login.f.name})
      this.load(row.f_blodid)
      this.devinfo = row
      this.show = true
    },
    downloadfile (filepath) {
      var link = document.createElement('a')
      link.href = filepath
      link.target = '_blank'
      link.dispatchEvent(new MouseEvent('click'))
    },
    selfSearch (args) {
      this.model.search(args.condition, args.model)
    },
    async confirm () {
      if (this.devinfo.id) {
        this.$resetpost(`ncc/rs/logic/KFSUpdate`, this.devinfo).then(res => {
          this.search()
          this.show = false
        })
      } else {
        this.devinfo.f_orgid = this.$login.f.orgid
        this.devinfo.f_depid = this.$login.f.depids
        this.$resetpost(`ncc/rs/logic/KFSInsert`, this.devinfo).then(res => {
          this.search()
          this.show = false
        })
      }
    },
    close () {
      this.show = false
      this.install_show = false
    }
  },
  computed: {
    credentials () {
      return this.$appdata.getParam('证件类型')
    }
  },
  events: {
    onFileUpload: function (file, res) {
      console.log('进入了抄表上传', res)
      this.devinfo.f_blodid = res.blodid
      this.load(res.blodid)
    }
  },
  watch: {}
}
</script>
<style scoped>
th {
  text-align: center;
  padding: 2px;
}

td {
  text-align: center;
  padding: 2px;
}
</style>
