<template xmlns='http://www.w3.org/1999/html' xmlns='http://www.w3.org/1999/html'>
  <a-spin :spinning='confirmLoading'>


    <a-upload name="file" :showUploadList="false"  :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel">
      <a-button  class="buttond" type="primary" icon="import">导入</a-button>
    </a-upload>
    <j-vxe-table
      keep-source
      :loading="loading"
      :columns=columns
      :maxHeight=heights
      :disabled="formDisabled"
      :dataSource=dataSource
      :rowNumber="true"
      :rowSelection="false"
      :toolbar="false"
      @checkbox-change="checkboxChangeEvent"
      @checkbox-all="checkboxChangeEvent"
    >
<!--      <template v-slot:action="props">


      </template>-->
    </j-vxe-table>
  </a-spin>
</template>

<script>

import { httpAction, getAction } from '@/api/manage'
import { validateDuplicateValue } from '@/utils/util'
import { duplicateCheck } from '@/api/api'
import moment from 'moment'
import { JVxeTableModelMixin } from '@/mixins/JVxeTableModelMixin.js'
import { JVXETypes } from '@/components/jeecg/JVxeTable'
import { getRefPromise,VALIDATE_FAILED} from '@/components/jeecg/JVxeTable/utils/vxeUtils.js'
import JFormContainer from '@/components/jeecg/JFormContainer'
import { ACCESS_TOKEN, TENANT_ID } from "@/store/mutation-types";
import Vue from "vue";

export default {
  name: 'QcSsgqzysytdqkForm',
  mixins: [JVxeTableModelMixin],
  components: {
    duplicateCheck,
    JFormContainer
  },
  props: {
    mainId:{
      type:String
    },
    //表单禁用
    disabled: {
      type: Boolean,
      default: false,
      required: false
    }
  },
  data() {
    return {
      disableqsqx: false,
      model: {
        // qsqx:''
          sjsyjzmjdw: '平方米'
      },
      dataSource:[],
      heights:window.document.documentElement.clientHeight-275,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      confirmLoading: false,
      loading:false,
      validatorRules: {

      },
      url: {
        list:"",
        add: '/qcsb/qcSsgqzysytdqk/add',
        edit: '/qcsb/qcSsgqzysytdqk/edit',
        queryById: '/qcsb/qcSsgqzysytdqk/queryById',
        importExcelUrl:'/qcsb/qcSsgqzysytdqk/importDkxxExcel'
      },
      disabledDate:'',
      columns: [
        {
          title: '地块名称',
          key: 'dkmc',
          type: JVXETypes.input,
          width:"30%",
          placeholder: '请输入${title}',
          defaultValue:'',
        },
        {
          title: '地块面积（平方米）',
          key: 'area',
          type: JVXETypes.inputNumber,
          width:"30%",
          placeholder: '请输入${title}',
          defaultValue:'',
          disabled:true,
          statistics:['sum']
        },
        {
          title: '操作',
          key: 'action',
          width: '100px',
          // 固定在右侧
          fixed: 'right',
          // 对齐方式为居中
          align: 'center',
          // 组件类型定义为【插槽】
          type: JVXETypes.slot,
          // slot 的名称，对应 v-slot 冒号后面和等号前面的内容
          slotName: 'action'
        }
      ]

    }
  },
  watch: {

  },
  computed: {
    importExcelUrl: function(){
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}/${this.mainId}`;
    },
    formDisabled(){
      return this.disabled
    },
    tokenHeader(){
      let head = {'X-Access-Token': Vue.ls.get(ACCESS_TOKEN)}
      let tenantid = Vue.ls.get(TENANT_ID)
      if(tenantid){
        head['tenant-id'] = tenantid
      }
      return head;
    }
  },
  created() {
    //备份model原始值
    this.modelDefault = JSON.parse(JSON.stringify(this.model))
  },
  methods: {
    checkboxChangeEvent(data){
      this.arrs = data.records
    },
    /* 导入 */
    handleImportExcel(info){
      this.loading = true;
      if (info.file.status !== 'uploading') {
        /* if(info.file.response.message=="重复征地"){
           this.$emit("localtions",info.file.response.result);
         }*/
        console.log(info.file, info.fileList);
      }
      if (info.file.status === 'done') {
        this.loading = false;
        if (info.file.response.success) {
          getAction(this.url.list,{id:this.mainId }).then((res) => {
            if (res.success) {
              //update-begin---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
              this.dataSource = res.result.records || res.result;
            } else {
              this.$message.warning(res.message)
            }
          })
          if (info.file.response.code === 201) {
            let { message, result: { msg, fileUrl, fileName } } = info.file.response
            let href = window._CONFIG['domianURL'] + fileUrl
          } else {
            this.$message.success(info.file.response.message || `${info.file.name} 文件上传成功`)

          }
        } else {
          this.$message.error(`${info.file.name} ${info.file.response.message}.`);
        }
      } else if (info.file.status === 'error') {
        this.loading = false;
        if (info.file.response.status === 500) {
          let data = info.file.response
          const token = Vue.ls.get(ACCESS_TOKEN)
          if (token && data.message.includes("Token失效")) {
            this.$error({
              title: '登录已过期',
              content: '很抱歉，登录已过期，请重新登录',
              okText: '重新登录',
              mask: false,
              onOk: () => {
                store.dispatch('Logout').then(() => {
                  Vue.ls.remove(ACCESS_TOKEN)
                  window.location.reload();
                })
              }
            })
          }
        } else {
          this.$message.error(`文件上传失败: ${info.file.msg} `);
        }
      }
    },
    add() {
      this.edit(this.modelDefault)
    },
    edit(record) {
      this.model = Object.assign({}, record)
      this.visible = true
    },
    submitForm() {
      const that = this
      // 触发表单验证
      this.$refs.form.validate(valid => {
        if (valid) {
          let startTime = moment(this.model.qsqssj);
          let endTime = moment(this.model.qsdqsj);
          if(endTime.valueOf()<startTime.valueOf()){
            this.$message.error('请检查权属到期时间是否正确！');
            return
          }
          that.confirmLoading = true
          let httpurl = ''
          let method = ''
          if (!this.model.id) {
            httpurl += this.url.add
            method = 'post'
          } else {
            httpurl += this.url.edit
            method = 'put'
          }
          httpAction(httpurl, this.model, method).then((res) => {
            if (res.success) {
              that.$message.success(res.message)
              that.$emit('ok')
            } else {
              that.$message.warning(res.message)
            }
          }).finally(() => {
            that.confirmLoading = false
          })
        }

      })
    },

  }
}
</script>
<style lang='less' scoped>

table {
  border: 0px solid #444;
  border-spacing: 0;
  width: 85%;
  height: 85%;
  margin: auto;
}

.example {
  width: 100px;
}

table tr, table th {
  border-bottom: 0px solid #444
}

table td, table th {
  border-right: 0px solid #444;
  border-bottom: 0px solid #444;
  padding: 5px;
  text-align: center;
}

table tr td:last-child {
  border-right: 0
}

table tr:last-child td {
  border-bottom: 0
}

th {
  height: 60px;
  position: relative;
}

td {
  height: 50px;
  width: 50%;
  position: relative;
}

th > div {
  display: flex;
  align-items: center;
}

.info {
  /*position: absolute;
  right: -10%;
  top: 40%;*/
  color: red;
  margin-left: 5px;
}

.ant-input-number {
  width: 100%;
}
</style>
<style lang='less'>
table .ant-form-item-children {
  display: flex;
  align-items: center;
}

table .ant-form-item-label {
  display: flex;
  justify-content: flex-end;
  line-height: 16px; //这个数值视具体情况而定
  flex: 0 0 23.333333%;
  max-width: 33.33333333%;

  label { //这是关键
    text-align: right;
    //color: #8a8a8a;
    padding-right: 2px;
    font-size: 14px;
    white-space: normal;
    display: inline-block;
    line-height: 32px;

    &:after {
      //content: none !important;      //解决上面的样式label后面会有空格
    }
  }
}


table .ant-form-item {
  margin-bottom: 0;
  display: flex;
  align-items: center;
}

table .ant-form-item-control-wrapper {
  flex: 1 1 0;
  max-width: 66.66666667%;
}

.buttond{
  margin-bottom:10px ;
  margin-top: 5px;
}
</style>