<template>
  <el-container>
    <el-header style="width: 100%;">
      <el-row>
        <el-col :span="18">
          <el-col :span="5">
            <vxe-pulldown ref="xDown4" transfer>
              <template #default>
                <vxe-input
                  v-model="queryParam.project"
                  placeholder="工程编码"
                  style="height: 28px;
                  line-height: 28px;"
                  suffix-icon="vxe-icon--search"
                  @keyup="keyupEvent4"
                  @focus="focusEvent4"
                />
              </template>
              <template #dropdown>
                <div class="my-dropdown mytable ">
                  <vxe-grid
                    highlight-hover-row
                    auto-resize
                    height="auto"
                    :data="projectData"
                    :columns="projectColumns"
                    @cell-click="cellClickEvent"
                    show-overflow
                  />
                </div>
              </template>
            </vxe-pulldown>

          </el-col>

            <el-col :span="9">
              <span style="width: 10%;font-size:9px">开工日期：</span>

              <el-date-picker v-model="queryParam.kgrq" value-format="yyyy/MM/dd" type="date"  style="width: 37%" placeholder="开工开始日期"/>
              <span  style="width:6%;font-size: 13px;color: #606266;">至</span>
              <el-date-picker v-model="queryParam.kgrq1" value-format="yyyy/MM/dd" type="date" style="width: 37%" placeholder="开工结束日期"/>
            </el-col>
          <el-col :span="9">
            <span style="width: 10%;font-size:9px">试航日期：</span>

            <el-date-picker v-model="queryParam.shrq" value-format="yyyy/MM/dd" type="date"  style="width: 37%" placeholder="试航开始日期"/>
            <span  style="width:6%;font-size: 13px;color: #606266;">至</span>
            <el-date-picker v-model="queryParam.shrq1" value-format="yyyy/MM/dd" type="date" style="width: 37%" placeholder="试航结束日期"/>
          </el-col>

        </el-col>
        <el-col :span="6" style="text-align: right">
          <el-button type="primary" @click="loadData">查询</el-button>
        </el-col>
      </el-row>
      <el-row>



        <div style="float:right;">
          <el-button type="success" @click="toolbarButtonClickEvent('myInsert')">新增</el-button>
          <el-button type="danger" @click="toolbarButtonClickEvent('myDelete')">删除</el-button>
          <el-button type="success" @click="toolbarButtonClickEvent('mySave')">保存</el-button>
        </div>
      </el-row>

    </el-header>
    <el-container style="padding-top: 10px">
      <el-main>
        <div class="mytable">
          <vxe-grid
            id="id"
            ref="xGrid"
            border
            resizable
            keep-source
            :height="height"
            :auto-resize="true"
            :columns="tableColumn"
            :data="tableData"
            :edit-config="{trigger: 'click', mode: 'row', showStatus: true}"
            highlight-hover-row
          />
          <!--          :custom-config="{storage: true}"-->
        </div>
      </el-main>
    </el-container>

  </el-container>

</template>

<script>

  import { getProjectList,addProject,updateProject,delProject,baseProject } from '@/api/mp/base'
import {null2str} from "@/utils/rpkj";
  import XEUtils from 'xe-utils'
  import { mapGetters } from 'vuex'
  // 分卡原则
  export default {
    name: 'MpCzgl',
    // components: { TbFilter },
    data() {
      return {


        queryParam: {
          itemName: '',
          batchType: '',
          departCode: '02',
          project:'',
          kgrq:'',
          kgrq1:'',
          shrq:'',
          shrq1:''
        },
        dictData: {
        },
        tableData: [],
        projectData:[],
        height: '500px',

        tableColumn: [

          { type: 'checkbox', width: 40 },
          { titel:'序号',type: 'seq', width: '40px' },
          { field: 'project', title: '工程编号', width:90,editRender: { name: 'input' },
            filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
            filterRender: { name: 'FilterCombination' },
          },
          { field: 'projectName', title: '工程名称',width:90, editRender: { name: 'input' },
            filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
            filterRender: { name: 'FilterCombination' },
          },
          { field: 'projectReplace', title: '代替工程编号', width:90,editRender: { name: 'input' },
            filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
            filterRender: { name: 'FilterCombination' },
          },
          { field: 'projectType', title: '船只类型', width:90,
            editRender: { name: '$select', options: [],
              props: { clearable: true }, events: { change: this.selectChange }
            },
            filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
            filterRender: { name: 'FilterCombination' },
          },
          { field: 'finishFlag', title: '完工标识', width:90,
            editRender: { name: '$select', options: [{
                label: '是',
                value: 'Y'
              },
                {
                  label: '否',
                  value: 'N'
                }], props: { clearable: true }, events: { change: this.selectChange }

            },
            filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
            filterRender: { name: 'FilterCombination' },
          },
          { field: 'series', title: '系列', width:90,editRender: { name: 'input' },
            filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
            filterRender: { name: 'FilterCombination' },
          },
          { field: 'sproject', title: '简称', width:90,editRender: { name: 'input' },
            filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
            filterRender: { name: 'FilterCombination' },
          },
          { field: 'factoryArea', title: '工厂', width:90,
            editRender: { name: '$select', options: [],
              props: { clearable: true },
              events: { change: this.selectChange }
            },
            filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
            filterRender: { name: 'FilterCombination' },
          },
          { field: 'classs', title: '船级社',  width:90,editRender: { name: 'input' },
            filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
            filterRender: { name: 'FilterCombination' },
          },
          { field: 'owner', title: '船东',  width:90,editRender: { name: 'input' },
            filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
            filterRender: { name: 'FilterCombination' },
          },
          { field: 'classSurveyor', title: '船检', width:90, editRender: { name: 'input' },
            filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
            filterRender: { name: 'FilterCombination' },
          },
          { field: 'gjProject', title: '管系基础船只', width:90, editRender: { name: 'input' },
            filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
            filterRender: { name: 'FilterCombination' },
          },
          { field: 'gjOperator', title: '管系计调员',  width:90,editRender: { name: 'input' },
            filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
            filterRender: { name: 'FilterCombination' },
          },
          { field: 'areaFlag', title: '区域标识', width:90, editRender: { name: 'input' },
            filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
            filterRender: { name: 'FilterCombination' },
          },
          { field: 'bathNo', title: '批号',  width:90,editRender: { name: 'input' },
            filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
            filterRender: { name: 'FilterCombination' },
          },
          { field: 'startDate', title: '开工日期', width: 160,
            editRender:{ name: '$input', props: { type: 'date',labelFormat:"yyyy/MM/dd",valueFormat:"yyyy/MM/dd" }  ,
              events: { change: this.selectChange }},
            filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
            filterRender: { name: 'FilterCombination' },
          },
          { field: 'startBasis', title: '开工日期依据', width:90, editRender: { name: 'input' }},
          { field: 'bottomDate', title: '铺底日期', width: 160,
            editRender:{ name: '$input', props: { type: 'date',labelFormat:"yyyy/MM/dd",valueFormat:"yyyy/MM/dd" }  ,
              events: { change: this.selectChange }},
            filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
            filterRender: { name: 'FilterCombination' },
          },
          { field: 'bottomBasis', title: '铺底日期依据', width:100,editRender: { name: 'input' }},
          { field: 'waterDate', title: '下水日期',  width: 160,
            editRender:{ name: '$input', props: { type: 'date',labelFormat:"yyyy/MM/dd",valueFormat:"yyyy/MM/dd" }  ,
              events: { change: this.selectChange }},
            filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
            filterRender: { name: 'FilterCombination' },
          },
          { field: 'sailDate', title: '试航日期',   width: 160,
            editRender:{ name: '$input', props: { type: 'date',labelFormat:"yyyy/MM/dd",valueFormat:"yyyy/MM/dd" }  ,
              events: { change: this.selectChange }},
            filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
            filterRender: { name: 'FilterCombination' },
          },
          { field: 'signDate', title: '签字交工日期',   width: 160,
            editRender:{ name: '$input', props: { type: 'date',labelFormat:"yyyy/MM/dd",valueFormat:"yyyy/MM/dd" }  ,
              events: { change: this.selectChange }},
            filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
            filterRender: { name: 'FilterCombination' },
          },
          { field: 'gjgsStandard', title: '管系工时标准', width:100, editRender: { name: 'input' },
            filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
            filterRender: { name: 'FilterCombination' },
          },
          { field: 'pipeFactor', title: '管材系数',  width:100,editRender: { name: 'input' },
            filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
            filterRender: { name: 'FilterCombination' },
          },
          { field: 'pipeSupport', title: '管支架型材系数',  width:100,editRender: { name: 'input' },
            filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
            filterRender: { name: 'FilterCombination' },
          },
          { field: 'pipeFlat', title: '管系附件平库方式', width:100, editRender: { name: 'input' },
            filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
            filterRender: { name: 'FilterCombination' },
          },
          { field: 'accountsDate', title: '封账日期',   width: 100,
            editRender:{ name: '$input', props: { type: 'date',labelFormat:"yyyy/MM/dd",valueFormat:"yyyy/MM/dd" }  ,
              events: { change: this.selectChange }},
            filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
            filterRender: { name: 'FilterCombination' },
          },
          { field: 'accountsExplain', title: '封装说明', width:100, editRender: { name: 'input' },
            filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
            filterRender: { name: 'FilterCombination' },
          },
          { field: 'remark', title: '备注',width:100,  editRender: { name: 'input' }},
          { field: 'bzry', title: '编制人', width:100, },
          { field: 'bzrq', title: '编制日期', width:100, },
        ],
        projectColumns: [
          { field: 'project', title: '工程编号' },
          { field: 'factoryAreadText', title: '工厂' },
          { field: 'classs', title: '船级社' },
          { field: 'owner', title: '船东' },
          { field: 'projectTypedText', title: '类型' }
        ]
      }
    },
    computed: {
      ...mapGetters([
        'name',
        'bmbm'
      ])
    },
    created() {
      window.addEventListener('resize', this.getHeight)
      this.getHeight()
      this.baseSeacrh()
    },
    methods: {
      selectChange(row) {
        this.$refs.xGrid.clearActived()// 清除单元格激活状态
        this.$refs.xGrid.setActiveCell(row.row, row.column.property)// 设置单元格为激活状态
        null2str(row.row)
      },
      baseSeacrh() {
        baseProject({}).then(res => {
          this.dictData = res.data.dict
          const xGrid = this.$refs.xGrid
          const projectType = xGrid.getColumnByField('projectType')
          projectType.editRender.options = this.dictData.gclx
          const factoryArea = xGrid.getColumnByField('factoryArea')
          factoryArea.editRender.options = this.dictData.gcqy

          this.projectData = res.data.list
          this.projectData1 =res.data.list
        })
      },

      loadData() {
        getProjectList(this.queryParam ).then(response => {
          this.tableData = response.data
        })
      },
      getHeight() {
        this.height = window.innerHeight - 160
      },
      keyupEvent4 () {
        if (this.queryParam.project) {
          this.projectData = this.projectData1.filter(row =>row.project.indexOf(this.queryParam.project.toUpperCase()) > -1 )
        } else {
          this.projectData = this.projectData1.slice(0)
        }
      },
      focusEvent4() {
        this.$refs.xDown4.showPanel()
      },
      toolbarButtonClickEvent(code) {
        const { insertRecords, removeRecords, updateRecords } = this.$refs.xGrid.getRecordset()
        switch (code) {
          case 'myInsert':
            this.$refs.xGrid.insertAt({
              bzry: this.name,
              bzrq: XEUtils.toDateString(new Date(), 'yyyy/MM/dd'),
              pipeFactor:1.04,
              finishFlag:'N'
            }, -1).then(({ row }) => {
              this.$refs.xGrid.setActiveRow(row)
            })
            break
          case 'myDelete':
            this.$confirm('删除, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(type => {
              this.$refs.xGrid.removeCheckboxRow()
            })
            break
          case 'mySave':

            if (insertRecords.length !== 0) {
              addProject(insertRecords).then(response => {
                if (response.success) {
                  this.tableData = this.tableData.concat(insertRecords)

                  this.tablePage.total = this.tableData.length
                  const xTable = this.$refs.xGrid
                  xTable.loadData(this.loadData())
                  this.$message({ message: '保存成功！', type: 'success' })
                }
              })
            }
            if (removeRecords.length !== 0) {
              const delArr = []
              removeRecords.forEach(function(value, index) {
                delArr[index] = value.id
              })

              delProject(delArr).then(response => {
                if (response.success) {
                  for (let i = 0; i < this.tableData.length; i++) {
                    if (removeRecords.indexOf(this.tableData[i]) !== -1) {
                      this.tableData.splice(i, 1)
                      i--
                    }
                  }

                  // this.tableData=   this.tableData.filter((x) => !removeRecords.some((item) => x.id === item.id));
                  const xTable = this.$refs.xGrid
                  xTable.loadData(this.tableData)
                  this.tablePage.total = this.tableData.length
                  this.$message({ message: '保存成功！', type: 'success' })

                  // this.loadData()
                }
              })
            }
            if (updateRecords.length !== 0) {
              updateProject(updateRecords).then(response => {
                // this.tableData=response.data
                if (response.success) {
                  const xTable = this.$refs.xGrid
                  xTable.loadData(this.loadData())
                  this.$message({ message: '保存成功！', type: 'success' })
                  // this.loadData()
                }
                // this.loadData()
              })
            }

            this.$message(`新增 ${insertRecords.length} 条，删除 ${removeRecords.length} 条，更新 ${updateRecords.length} 条`)
            break
        }
      },
      cellClickEvent({ row }) {
        this.queryParam.project = row.project
        //  this.$refs.myTree.setCurrentKey(this.queryParam.project)
        // this.treeId=this.queryParam.project
        this.$refs.xDown4.hidePanel()
      },

    }
  }
</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; }
  .my-dropdown {
    width: 450px;
    height: 250px;
    background-color: #fff;
    border: 1px solid #dcdfe6;
    box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.1);
    font-size: 12px;

  }
</style>

