<template>
<div style="padding-bottom:20px;">
  <div class="search">
      <el-row :gutter="0">
        <el-col :span="21">


            <el-input  v-model="tableObj.getdataListParm.parammaps.contractCode " class="filter-item" style="width: 120px;" placeholder="合同编号"/>


             <!-- <el-autocomplete v-model="tableObj.getdataListParm.parammaps.customerName" :fetch-suggestions="customer_search" placeholder="客户名称" style="width: 120px " class="filter-item" @select="change_customer_select" @clear="clear_customer_select" @blur="customer_search_blur" clearable>
              <template slot-scope="{ item }">
                <span class="name">{{ item.name }}</span>
              </template>
            </el-autocomplete>

            <el-select v-model="tableObj.getdataListParm.parammaps.groupId" placeholder="集团" class="filter-item" style="width: 120px;" clearable filterable>
              <el-option v-for="(item,index) in groupNameList" :key="index" :label="item.name" :value="item.id" />
            </el-select>   -->

            <el-select v-model="tableObj.getdataListParm.parammaps.employeeId" placeholder="创建人" class="filter-item" style="width: 100px;" clearable filterable>
              <el-option v-for="(item,index) in createrNameList" :key="index" :label="item.name" :value="item.id" />
            </el-select>

        </el-col>
        <el-col :span="3">
            <el-button class="successBorder" @click="form_search">查询</el-button>
            <el-button class="successBorder" @click="form_clear">重置</el-button>
        </el-col>
      </el-row>
  </div>
  <div class="table">
      <el-table :key="tableObj.tableKey" v-loading="tableObj.listLoading" element-loading-text="给我一点时间" :data="tableObj.list" border fit highlight-current-row style="width: 100%;" :row-style="rowStyle" :cell-style="cellStyle" class="elTable table-fixed" @selection-change="change_table_selection">
        <el-table-column type="selection" align="center" width="50" />
        <el-table-column label="序号" align="center" type="index" width="50px" fixed="left">
          <template slot-scope="scope">
            <span>{{ scope.$index + (tableObj.pageNum-1) * tableObj.pageSize + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="合同编号" min-width="110px" align="center" show-overflow-tooltip>

          <template slot-scope="scope">
            <span  style = "color:#409EFF; cursor: pointer;" @click="click_customer(scope.row)">{{ scope.row.contractCode  }}</span>
          </template>
        </el-table-column>
        <el-table-column label="客户名称" min-width="90px" align="center" >
          <template slot-scope="scope">
            <span>{{ scope.row.customerName  }}</span>
          </template>
        </el-table-column>


        <el-table-column label="所属集团" min-width="110px" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.groupName  }}</span>
          </template>
        </el-table-column>
        <el-table-column label="合同金额" min-width="110px" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.contractMoney  }}</span>
          </template>
        </el-table-column>
        <el-table-column label="合同开始时间" min-width="110px" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.beginDate  }}</span>
          </template>
        </el-table-column>
        <el-table-column label="合同结束时间" min-width="110px" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.endDate  }}</span>
          </template>
        </el-table-column>

        <el-table-column label="创建人" min-width="110px" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.employeeName  }}</span>
          </template>
        </el-table-column>

      </el-table>
      <pagination v-show="tableObj.total>=0" :total="tableObj.total" :page.sync="tableObj.getdataListParm.offset" :limit.sync="tableObj.getdataListParm.pagecount" @pagination="get_table_data" />


    </div>
</div>
</template>
<script>


import { GetDataByName, PostDataByName, failproccess, ExecDataByConfig, GetDataByNames, checkButtons, calculativeWidth } from '@/api/common'
import Cookies from 'js-cookie'
import { parseTime } from '@/utils/index.js'
import Pagination from '@/components/Pagination'
import { MessageBox } from 'element-ui'
import { getToken } from '@/utils/auth'

export default {
  name: 'ContractDetail',
  components: { Pagination },
  props: {
    contractData: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      // 客户名称 - 下拉框
      customerNameList: [
        // {id: 1425, name: "测试12"},
        // {id: 1423, name: "朝日牧场（唯品牧场）"},
        // {id: 1422, name: "富源牧业（眉山）有限公司（眉山富源）"}
      ],

      //集团 - 下拉框
      groupNameList: [
        // {id: 253, name: "无"},
        // {id: 207, name: "星连星牧业"},
        // {id: 208, name: "海高牧业"},
        // {id: 254, name: "完达山"}
      ],

      //创建人 - 下拉框
      createrNameList: [
        // {id: 3072707379235128300, name: "管理员"},
        // {id: 3248184121834865700, name: "杨文山"}
      ],

      //列表请求
      tableObj: {
        getdataListParm: {
          name: 'getContractSelect',
          page: 1,
          offset: 1,
          pagecount: 10,
          returntype: 'Map',
          parammaps: {
            customerId: '',
            groupId: '',
            contractCode : '',
            employeeId : '',


          }
        },
        tableKey: 0,
        list: [


        ],
        total: 0,
        listLoading: false,
        temp: {},


      },
      isokDisable: false,
      selectList: [],
         rowStyle: { maxHeight: 50 + 'px', height: 45 + 'px' },
         cellStyle: { padding: 0 + 'px' }


    }
  },
 watch: {
    contractData: {
      deep: true,
      handler: function (item) {
        console.log("父组件：", item)


          this.tableObj.getdataListParm.parammaps.groupId = item.groupId
          this.tableObj.getdataListParm.parammaps.customerId = item.customerId
          this.get_table_data()
          this.get_select_list()
      }
    },

  },
  mounted() {

  },


  created() {
      this.get_table_data()
     this.get_select_list()


  },
  beforeDestroy() {

  },
  methods: {


    parent_change_parp(customerId,groupId){
        this.tableObj.getdataListParm.parammaps.customerId = customerId
        this.tableObj.getdataListParm.parammaps.groupId = groupId
        this.get_table_data()
    },

    //获取所有下拉框的内容
    get_select_list() {
      // 下拉框请求
      var send_select_list = [
        // { name: 'getCustomerSelect', offset: 0, pagecount: 0, parammaps: {} },
        { name: 'getDictListSelect1', offset: 0, pagecount: 0, parammaps: { "pid": "54" } },

        { name: 'getEmployeeNameFuzzy', offset: 0, pagecount: 0, parammaps: { "inputvalue": "" } },

      ]
      GetDataByNames(send_select_list).then(response => {
        // this.customerNameList = response.data.getCustomerSelect.list
        // console.log("客户名称下拉框", this.customerNameList)
        this.groupNameList = response.data.getDictListSelect1.list
        console.log("集团下拉框", this.groupNameList)

        this.createrNameList = response.data.getEmployeeNameFuzzy.list
        console.log("创建人下拉框", this.createrNameList)

      })


    },


    //加载表格
    get_table_data() {

      this.tableObj.listLoading = true
      GetDataByName(this.tableObj.getdataListParm).then(response => {
        console.log('table数据', response.data.list)
        if (response.data.list !== null) {

          this.tableObj.list = response.data.list
          this.tableObj.pageNum = response.data.pageNum
          this.tableObj.pageSize = response.data.pageSize
          this.tableObj.total = response.data.total
        } else {
          this.tableObj.list = []
        }
        setTimeout(() => {
          this.tableObj.listLoading = false
        }, 100)
      })
    },


    //模糊查询客户
    customer_search(queryString, cb) {
      console.log('模糊查询输入值', queryString)
      GetDataByName({ name: 'getCustomerNameFuzzy', page: 1, offset: 1, pagecount: 10, returntype: 'Map', parammaps: { inputvalue: queryString } }).then(response => {
        this.customerNameList = response.data.list
        console.log("客户名称下拉框", response)
        cb(response.data.list)
        // this.$refs.elautocomplete.handleFocus()
      })
    },

    //模糊查询客户选择
    change_customer_select(item) {
      console.log('客户名称模糊查询选中值', item)
      this.tableObj.getdataListParm.parammaps.customerId = item.id
      this.tableObj.getdataListParm.parammaps.customerName = item.name
      this.$forceUpdate()
    },
    //清空客户选择
    clear_customer_select(item) {
      document.activeElement.blur()
      this.tableObj.getdataListParm.parammaps.customerId = ""
      this.tableObj.getdataListParm.parammaps.customerName = ""
      this.customerNameList = []
    },

    //客户失去焦点
    customer_search_blur(item) {
      console.log("客户失去焦点")
      this.tableObj.getdataListParm.parammaps.customerId = ""
      this.tableObj.getdataListParm.parammaps.customerName = ""
      this.customerNameList = []

    },


    //监听 - 表单查询
    form_search() {
      console.log('点击了查询', this.tableObj.getdataListParm.parammaps)

      this.tableObj.getdataListParm.offset = 1
      this.get_table_data()
    },

    //事件 - 清空查询信息
    form_clear() {
      console.log('点击了重置')
      this.tableObj.getdataListParm.parammaps.contractCode  = ''
      this.tableObj.getdataListParm.parammaps.customerId  = ''
      this.tableObj.getdataListParm.parammaps.groupId  = ''

      this.tableObj.getdataListParm.parammaps.customerName = ''

      this.tableObj.getdataListParm.parammaps.employeeId  = ''

      this.tableObj.getdataListParm.offset = 1
      this.get_table_data()
    },


    //监听 - 表格 - 勾选
    change_table_selection(val) {
      console.log('勾选数据', val)
      this.selectList = val

      this.contractData.selectList = this.selectList
    },


  }
}
</script>
