<template>
  <div class="mode-config">
    <el-row>
      <el-col>
        <el-form label-position="top" style="margin-top: 1px; margin-left: 0px;">
          <el-form :inline="true" label-position="top" style="margin-top: 0px">
            <download-excel
              :fields="fields2()"
              :data="exportData2"
              type="xls"
              :name="exportName2"
              :header="exportHeader2"
              :footer="exportFooter2"
              :fetch="createExportData2"
              :before-generate="startDownload2"
              :before-finish="finishDownload2"
              worksheet="导出信息"
              class="el-button el-button--primary el-button--medium">
              {{ '导出' }}
            </download-excel>
          </el-form>
        </el-form>
      </el-col>
    </el-row>
    <el-table
      :data="contactList"
      :height="height"
      border
      v-loading="dataListLoading"
      style="width: 100%;margin-top: 10px ">
      <el-table-column
        v-for="(item,index) in columnList2" :key="index"
        :sortable="item.columnSortable"
        :prop="item.columnProp"
        :header-align="item.headerAlign"
        :show-overflow-tooltip="item.showOverflowTooltip"
        :align="item.align"
        :fixed="item.fixed==''?false:item.fixed"
        :min-width="item.columnWidth"
        :label="item.columnLabel">
        <template slot-scope="scope">
          <span v-if="!item.columnHidden"> {{ scope.row[item.columnProp] }}</span>
          <span v-if="item.columnImage"><img :src="scope.row[item.columnProp]"
                                             style="width: 100px; height: 80px"/></span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import {
  getCustomerContactData,
} from "@/api/project/project.js"
export default {
  name: "quotationCustomerContact",
  props: {
    quotationHeader:{
      type: Object,
      default:()=>{}
    },
    height: {
      type: Number,
      default: 300
    }
  },
  data(){
    return{
      quotationData: {},
      contactList: [],
      exportData2: [],
      exportName2: "项目客户联系人" + this.dayjs().format('YYYYMMDDHHmmss'),
      exportHeader2: ["项目客户联系人"],
      exportFooter2: [],
      exportList2:[],
      dataListLoading: false,

      columnList2: [
        {
          userId: this.$store.state.user.name,
          functionId: 102003,
          serialNumber: '102003Table99ContactName',
          tableId: '102003Table99',
          tableName: '项目联系人表',
          columnProp: 'contactName',
          headerAlign: 'center',
          align: 'center',
          columnLabel: '联系人',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 80
        },
        {
          userId: this.$store.state.user.name,
          functionId: 102003,
          serialNumber: '102003Table99ContactPhoneNumber1',
          tableId: '102003Table99',
          tableName: '项目联系人表',
          columnProp: 'contactPhoneNumber1',
          headerAlign: 'center',
          align: 'center',
          columnLabel: '联系电话',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 80
        },
        {
          userId: this.$store.state.user.name,
          functionId: 102003,
          serialNumber: '102003Table99ContactLandlineNumber',
          tableId: '102003Table99',
          tableName: '项目联系人表',
          columnProp: 'contactLandlineNumber',
          headerAlign: 'center',
          align: 'center',
          columnLabel: '座机',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 80
        },
        {
          userId: this.$store.state.user.name,
          functionId: 102003,
          serialNumber: '102003Table99Position',
          tableId: '102003Table99',
          tableName: '项目联系人表',
          columnProp: 'position',
          headerAlign: 'center',
          align: 'center',
          columnLabel: '公司职务',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 80
        },
        {
          userId: this.$store.state.user.name,
          functionId: 102003,
          serialNumber: '102003Table99Mailbox',
          tableId: '102003Table99',
          tableName: '项目联系人表',
          columnProp: 'mailbox',
          headerAlign: 'center',
          align: 'center',
          columnLabel: '邮箱',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 80
        },
        {
          userId: this.$store.state.user.name,
          functionId: 102003,
          serialNumber: '102003Table99PrimaryContact',
          tableId: '102003Table99',
          tableName: '项目联系人表',
          columnProp: 'primaryContact',
          headerAlign: 'center',
          align: 'center',
          columnLabel: '默认联系人',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 40
        },
        {
          userId: this.$store.state.user.name,
          functionId: 102003,
          serialNumber: '102003Table99ContactStatus',
          tableId: '102003Table99',
          tableName: '项目联系人表',
          columnProp: 'contactStatus',
          headerAlign: 'center',
          align: 'center',
          columnLabel: '状态',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 40
        },
        {
          userId: this.$store.state.user.name,
          functionId: 102003,
          serialNumber: '102003Table99CreateDate',
          tableId: '102003Table99',
          tableName: '项目联系人表',
          columnProp: 'createDate',
          headerAlign: 'center',
          align: 'center',
          columnLabel: '创建时间',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 120
        },
        {
          userId: this.$store.state.user.name,
          functionId: 102003,
          serialNumber: '102003Table99CreateBy',
          tableId: '102003Table99',
          tableName: '项目联系人表',
          columnProp: 'createBy',
          headerAlign: 'center',
          align: 'center',
          columnLabel: '创建人',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 80
        },
        {
          userId: this.$store.state.user.name,
          functionId: 102003,
          serialNumber: '102003Table99UpdateDate',
          tableId: '102003Table99',
          tableName: '项目联系人表',
          columnProp: 'updateDate',
          headerAlign: 'center',
          align: 'center',
          columnLabel: '更新时间',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 120
        },
        {
          userId: this.$store.state.user.name,
          functionId: 102003,
          serialNumber: '102003Table99UpdateBy',
          tableId: '102003Table99',
          tableName: '项目联系人表',
          columnProp: 'updateBy',
          headerAlign: 'center',
          align: 'center',
          columnLabel: '更新人',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 80
        }
      ],
    }
  },
  methods:{
    initData(){
      let inData={
        site:this.quotationData.site,
        customerId:this.quotationData.customerNo,
        projectId:this.quotationData.projectId,
      }
      getCustomerContactData(inData).then(({data}) => {
        //区分请求成功和失败的状况
        if (data && data.code == 0) {
          this.contactList = data.rows;
        } else {
          this.contactList = [];
        }
      });
    },
    //导出excel
    async createExportData2() {
      return this.contactList;
    },
    startDownload2() {
      //  this.exportData = this.dataList
    },
    finishDownload2() {
    },
    fields2() {
      let json = "{"
      this.columnList2.forEach((item, index) => {
        if (index == this.columnList2.length - 1) {
          json += "\"" + item.columnLabel + "\"" + ":" + "\"" + item.columnProp + "\""
        } else {
          json += "\"" + item.columnLabel + "\"" + ":" + "\"" + item.columnProp + "\"" + ","
        }
      })
      json += "}"
      let s = eval("(" + json + ")")
      return s
    },
  },
  watch:{
    // 父组件值发生改变，修改子组件的值
    quotationHeader: function (val) {
      this.quotationData = val;
      this.initData();
    }
  },
  created() {
  },
  mounted() {
  }
}
</script>
<style scoped>

</style>
