<template>
  <el-container>
    <el-header style="width: 100%; height: 30px;font-size: 12px">
      <el-form :inline="true"  label-width="90px" >
        <el-row>

          <el-col :span="20">
            <el-form-item label="工程编号:"  >
              <el-select v-model="queryParam.czbh" filterable  placeholder="工程编号" @change="czbhChange" >
                <el-option
                  v-for="item in projectData"
                  :key="item.czbh"
                  :label="item.czbh"
                  :value="item.czbh">
                </el-option>
              </el-select>
            </el-form-item>
            <!--            <el-form-item label="分段号:">-->
            <!--              <el-input v-model="queryParam.fdh" type="search" placeholder="分段号" ></el-input>-->
            <!--            </el-form-item>-->
          </el-col>
          <el-col :span="4">
            <el-form-item style="float: right" >
              <el-button type="success" @click="loadData()">查询</el-button>



              <el-button type="success"  @click.native="uploadExcel">    <el-upload
                :action="uploadAction"
                :show-file-list="false"
                :before-upload="beforeAvatarUpload"
                :data="uploadData"
                :on-success="handleAvatarSuccess"
                :disabled="uploadState==0?true:false"
                :headers="heads"
              >
                直观图模板导入
              </el-upload>   </el-button>

            </el-form-item>
          </el-col>
        </el-row>



      </el-form>
    </el-header>
    <el-divider></el-divider>
    <el-container :style="defaultHeight" style="padding-top: 0px">
      <!--    <el-container >-->

      <el-main>
        <div class="mytablefdt" >

          <vxe-grid
            id="id"
            ref="xGrid"

            :empty-text="emtext"
            show-footer
            :height="height"
            resizable
            :custom-config="{storage: true}"
            :columns="tableColumn"
            :data="list"
            :show-header="false"
            align="center"
            @cell-click="cellClick"
            border=none
            :cell-style="cellStyle"
          >


          </vxe-grid>
          <!--            <vxe-table-->
          <!--                align="center"-->
          <!--              :data="tableData">-->
          <!--              <template v-for="item in col">-->
          <!--                <vxe-column type="column"+{{item}}+ width="60"></vxe-column>-->
          <!--              </template>-->


          <!--            </vxe-table>-->
        </div>
      </el-main>

    </el-container>

  </el-container>

</template>

<script>
import { startLoading, endLoading } from '@/utils'
import { mapGetters } from 'vuex'
import { getToken } from '@/utils/auth'
import { Message } from 'element-ui'
import {getCzFdBase ,getList,upload} from '@/api/fd/base'
import XEUtils from 'xe-utils'
export default {
  // 船只分段直观图定义
  name: 'Czfdzgtdy',
  data() {
    return {
      emtext:'',
      defaultHeight: { height: '' },

      heads: { token: getToken() },
      uploadAction: process.env.VUE_APP_BASE_API + '/api/dmCzfddyb/upload',
      uploadData: {},
      queryParam: {
        czbh: '',
        ph: '',
        kh: '',
        dwgNo: '',
        departCode: '02'
      },
      uploadState: 0,
      isupload:'01',
      dictData: {},
      projectData: [],
      col:0,
      //    tableData: [],
      tableColumn: [

      ],
      columns:[],
      filterName1:'',
      tableData: [
        // { id: 10001, name: 'Test1', nickname: 'T1', role: 'Develop', sex: 'Man', age: 0, address: 'Shenzhen' },
        // { id: 10002, name: 'Test2', nickname: 'T2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
        // { id: 10003, name: 'Test3', nickname: 'T3', role: 'PM', sex: 'Man', age: 100, address: 'Shanghai' },
        // { id: 10004, name: 'Test4', nickname: 'T4', role: 'Designer', sex: 'Women', age: 70, address: 'Shenzhen' },
        // { id: 10005, name: 'Test5', nickname: 'T5', role: 'Develop', sex: 'Women', age: 10, address: 'Shanghai' },
        // { id: 10006, name: 'Test6', nickname: 'T6', role: 'Designer', sex: 'Women', age: 90, address: 'Shenzhen' },
        // { id: 10007, name: 'Test7', nickname: 'T7', role: 'Test', sex: 'Man', age: 5, address: 'Shenzhen' },
        // { id: 10008, name: 'Test8', nickname: 'T8', role: 'Develop', sex: 'Man', age: 80, address: 'Shenzhen' }
      ]
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'bmbm'
    ]),

    list() {
      if (this.tableData===undefined){

        return []
      }
      const filterName = XEUtils.toString(this.filterName1).trim().toLowerCase();
      if (filterName) {
        const filterRE = new RegExp(filterName, 'gi');
        const searchProps = this.columns
        // const rest = this.tableData.filter(item => searchProps.some(key => XEUtils.toString(item[key]).toLowerCase().indexOf(filterName) > -1));
        const rest = this.tableData
        return rest.map(row => {

          const item = Object.assign({}, row);

          searchProps.forEach(key => {
            if(XEUtils.toString(item[key]).toLowerCase().indexOf(filterName) > -1){
              item[key] = XEUtils.toString(item[key]).replace(filterRE, match => `<span style='background-color: #FFFF00;'>${match}</span>`);
            }

          });


          return item
        })
      }
      return this.tableData
    }


  },
  created() {
    window.addEventListener('resize', this.getHeight)
    this.getHeight()
    this.baseSeacrh()
    this.uploadState=0
    this.emtext='暂无数据';
    // this.loadData()
  },
  methods: {
    czbhChange(){
      this.uploadState = 1
    },

    cellClick({row,column}){
      console.log(row[column.field])
      console.log(row)
      console.log(column)
    },





    uploadExcel() {

      if (this.queryParam.czbh === '') {
        this.$message.warning('选择工程编码')
        this.uploadState = 0
        return
      } else {

      }
      this.uploadData.czbh = this.queryParam.czbh
      this.uploadData.isupload = this.isupload
    },
    beforeAvatarUpload(file) {
      // 文件类型
      const isType = file.type === 'application/vnd.ms-excel'
      const isTypeComputer = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
      const fileType = isType || isTypeComputer
      // if (!fileType) {
      //   this.$message.error('上传文件只能是xls/xlsx格式！')
      //   return
      // }
      startLoading()
      return fileType
    },
    handleAvatarSuccess(res, file) {
      endLoading()
      if (res.success) {
        if(res.data.zt==='01'){
          this.$confirm('该模板已导入数据,是否重新导入并覆盖模板数据?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            distinguishCancelAndClose: true,
            type: 'warning'
          }).then(type => {
            upload({ file: file.raw, czbh: this.queryParam.czbh, isupload: '02' }).then(res => {
              if (res.success) {
                this.$message({ message: '导入成功', type: 'success' })
                this.loadData()
              }
            })
          })
        }else{
          this.$message({ message: '导入成功', type: 'success' })
          this.loadData()
        }


      } else {
        Message({
          message: res.message || 'Error',
          type: 'error',
          duration: 5 * 1000
        })
      }
    },



    cellStyle({ row, rowIndex, column }) {
      if(row[column.property]){
        return {

          border:'1px solid black'

          // textAlign:'center'
        }
      }

    },



    async baseSeacrh() {
      getCzFdBase({  }).then(response => {
        this.projectData = response.data.czbhs
      })
    },
    loadData() {
      if(this.queryParam.czbh===''){
        this.$message.warning('选择工程编码')
        return
      }
      getList(this.queryParam).then(res=>{
        this.tableColumn=[]
        this.emtext=this.queryParam.czbh+"尚未定义直观图请于分段制造部管理人员联系！"
        if(res.success){
          const col=res.data.col;
          for (let i = 0; i <= col; i++) {
            let ii=i+'';
            let aaa='column'+ii.padStart(3, '0');
            this.columns.push(aaa);
            let temp1=   {
              title: `111`,width:"35px",field: `column${ii.padStart(3, '0')}`,type:"html",
              // slots: {
              //   // 使用 JSX 渲染
              //   default: ({ row,column }) => {
              //     if(row[column.property]){
              //       return [
              //         <span >{row[column.property]}</span>
              //       ]
              //     }else{
              //       return [
              //         <span >{row[column.property]}</span>
              //         ]
              //
              //     }
              //
              //   }
              // }
            };

            this.tableColumn.push(temp1)
          }

          //this.tableData=res.data.data
          this.tableData=res.data.data
          //this.list=res.data.data
        }
      })

    },



    getHeight() {
      this.height = window.innerHeight - 170
      this.defaultHeight.height = window.innerHeight - 165 + 'px'
    },
  }
}
</script>

<style lang="scss" scoped >
.el-header{margin:0;padding: 5px;height:auto;}
.el-container{padding: 0;margin:0;}
.el-main{padding: 0;}
.el-col{padding: 0;}
.el-aside{background: #fff;padding: 0}
.el-container{padding: 0}
.el-row {margin-bottom: 5px;}
.el-row:last-child {margin-bottom: 0; }

.tableStyles{
  background: #0a76a4;
}

.my-dropdown {
  width: 400px;
  height: 400px;
  background-color: #fff;
  border: 1px solid #dcdfe6;
  box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.1);
  font-size: 12px;

}
.mytable1{

}
.borderClass{

}
.vxe-input {
  display: inline-block !important;
  position: relative !important;
  width: auto;
}
.el-input {
  display: inline-block !important;
  position: relative !important;
  width: auto;
}
.keyword-lighten {
  color: #000;
  background-color: #FFFF00;
}

.vxe-textarea--inner {
  line-height: inherit;
}
</style>



