<template>
  <div>
    <!--查询条件-->
    <el-card>
      <span>项目名称：</span>
      <el-select v-model="entryNameValue" filterable placeholder="项目名称" style="margin-right: 10px" size="small" clearable>
        <el-option
          v-for="item in entryName"
          :key="item.value"
          :label="item.label"
          :value="item.value"/>
      </el-select>
      <span style="margin-left: 10px">销售经理：</span>
      <el-input v-model="MarketingManagerValue" readonly clearable size="small" style="width:200px" placeholder="请双击选择营销经理" @dblclick.native="dialogFormVisiblePeople = true" @clear="clearPeople()"/>
      <span style="margin-left: 10px">开始日期：</span>
      <el-date-picker
        v-model="startTime"
        style="width: 200px;"
        value-format="yyyy-MM-dd"
        size="small"
        type="date"
        placeholder="请选择开始日期"/>
      <span style="margin-left: 10px">结束日期：</span>
      <el-date-picker
        v-model="endTime"
        style="width: 200px;"
        value-format="yyyy-MM-dd"
        size="small"
        type="date"
        placeholder="请选择结束日期"/>
      <el-button type="success" icon="el-icon-search" size="small" style="margin-left: 10px" @click="PageSize = 10;PageCurrent = 1;fetchTableData1()">查询</el-button>
    </el-card>
    <!--项目表格-->
    <el-card>
      <el-table
        v-loading="listLoading1"
        :data="tableData1"
        highlight-current-row
        style="width: 100%"
        height="300"
        border
        size="mini"
        @row-click="fetchTableData2">
        <el-table-column align="center" label="合同编号" width="200">
          <template slot-scope="scope">
            <el-tag type="primary">{{ scope.row.合同编号 }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="项目名称" width="200">
          <template slot-scope="scope">
            {{ scope.row.项目名称 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="付款方式" width="120">
          <template slot-scope="scope">
            {{ scope.row.付款方式 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="合同签订日期" width="120">
          <template slot-scope="scope">
            {{ scope.row.合同签订日期 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="销售经理" width="80">
          <template slot-scope="scope">
            {{ scope.row.姓名 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="合同总金额（含税）" width="150">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.合同总金额===''||scope.row.合同总金额===null" slot="reference" size="small" style="width: 80px" type="warning">无收款计划</el-tag>
            <el-tag v-else slot="reference" type="success" size="small" style="width: 80px"> {{ scope.row.合同总金额 }} </el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="已到账金额" width="150">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.已支付===''||scope.row.已支付===null" slot="reference" size="small" style="width: 80px" type="warning">无收款计划</el-tag>
            <el-tag v-else slot="reference" type="success" size="small" style="width: 80px"> {{ scope.row.已支付 }} </el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="税率" width="100">
          <template slot-scope="scope">
            <el-input :disabled="scope.row.是是否禁用税率编辑" v-model="scope.row.税率" size="mini" style="width:70px" placeholder="请填写税率" @click.native="unlockEditor(scope.row)" @blur="lockEditor(scope.row)" @change="revisionOfTaxRate(scope.row)"/>
          </template>
        </el-table-column>
        <el-table-column align="center" label="合同信息备注">
          <template slot-scope="scope">
            {{ scope.row.合同信息备注 }}
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" align="center" width="150px">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-circle-plus-outline"
              @click.stop="openAddInvoiceRecordingDialog(scope.row); flag = 1">增加记录</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block" style="margin-top: 10px;">
        <el-pagination
          :current-page="PageCurrent"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="PageSize"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"/>
      </div>
    </el-card>
    <!--开票记录-->
    <el-card>
      <el-table
        v-loading="listLoading2"
        :data="tableData2"
        :summary-method="getSummaries"
        show-summary
        style="width: 100%"
        height="320"
        border
        size="mini">
        <el-table-column
          align="center"
          label="序号"
          type="index"
          width="50"/>
        <el-table-column align="center" label="发票抬头" width="180">
          <template slot-scope="scope">
            {{ scope.row.客户名称 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="纳税人识别号" width="180">
          <template slot-scope="scope">
            {{ scope.row.税号 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="开票电话" width="120">
          <template slot-scope="scope">
            {{ scope.row.传真 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="开票地址" width="200">
          <template slot-scope="scope">
            {{ scope.row.地址 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="开户行" width="120">
          <template slot-scope="scope">
            {{ scope.row.开户行 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="银行账号" width="160">
          <template slot-scope="scope">
            {{ scope.row.银行账号 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="开票金额（含税）" width="150">
          <template slot-scope="scope">
            {{ scope.row.开票金额 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="开票时间" width="150">
          <template slot-scope="scope">
            {{ scope.row.开票时间 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="备注">
          <template slot-scope="scope">
            {{ scope.row.备注 }}
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" align="center" width="200">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="warning"
              icon="el-icon-edit"
              @click.stop="openEditInvoiceRecordingDialog(scope.row); flag = 2">编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              icon="el-icon-delete"
              @click.stop="delInvoiceRecordingDialog(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!--营销经理选择-->
    <el-dialog :visible.sync="dialogFormVisiblePeople" title="营销经理" center width="30%">
      <span>责权省份</span>
      <el-select v-model="ProvinceValue" clearable filterable placeholder="请选择省份" style="margin-right: 10px" size="small" @change="changeProvince">
        <el-option
          v-for="item in Province"
          :key="item.value"
          :label="item.label"
          :value="item.value"/>
      </el-select>
      <div style="margin-top: 15px">
        <el-table :data="dataPeople" border style="width: 100%; text-align: center;" highlight-current-row @row-click="handleChange">
          <el-table-column label="销售经理" align="center" >
            <template slot-scope="scope">
              {{ scope.row.姓名 }}
            </template>
          </el-table-column>
          <el-table-column label="性别" align="center">
            <template slot-scope="scope">
              {{ scope.row.性别 }}
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="offName">取消</el-button>
        <el-button type="primary" @click="getName">确认</el-button>
      </div>
    </el-dialog>
    <!--增加开票记录-->
    <el-dialog :title="title" :visible.sync="dialogFormVisible1" center style="min-height: 300px" width="750px">
      <el-form ref="form" :model="form" :rules="rules" label-position="left" label-width="120px" class="demo-ruleForm">
        <el-row>
          <el-col :span="12">
            <el-form-item label="客户名称" prop="客户名称">
              <el-input v-model="form.客户名称" readonly size="small" placeholder="请双击选择客户" style="width:200px" clearable @dblclick.native="CustomerChange()" @clear="clearCustomer()"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="发票抬头" prop="发票抬头">
              <el-input v-model="form.发票抬头" clearable size="small" style="width:200px" disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="税号" prop="税号">
              <el-input v-model="form.税号" clearable size="small" style="width:200px" disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="开票电话" prop="开票电话">
              <el-input v-model="form.开票电话" clearable size="small" style="width:200px" disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="开票地址" prop="开票地址">
              <el-input v-model="form.开票地址" clearable size="small" style="width:200px" disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="开户行" prop="开户行">
              <el-input v-model="form.开户行" clearable size="small" style="width:200px" disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="银行账号" prop="银行账号">
              <el-input v-model="form.银行账号" clearable size="small" style="width:200px" disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="开票金额" prop="开票金额">
              <el-input v-model="form.开票金额" clearable size="small" placeholder="请输入开票金额" style="width:200px"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="开票时间" prop="开票时间">
              <el-date-picker
                v-model="form.开票时间"
                style="width: 200px;"
                value-format="yyyy-MM-dd"
                size="small"
                type="date"
                placeholder="请选择开票时间"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="备注" prop="备注">
              <el-input v-model="form.备注" clearable size="small" placeholder="请输入备注" style="width:200px"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible1 = false">取消</el-button>
        <el-button type="primary" @click="submit('form')">确 定</el-button>
      </div>
    </el-dialog>
    <!--客户选择-->
    <el-dialog :visible.sync="dialogCustomerFormVisible" title="客户选择" center width="600px">
      <el-input v-model="Customer" clearable size="small" style="width:200px" placeholder="请输入客户名称"/>
      <el-button type="success" icon="el-icon-search" size="small" style="margin-left: 10px" @click="PageSize1 = 10;PageCurrent1 = 1;fetchCustomerData()">查询</el-button>
      <el-table v-loading="loading1" :data="CustomerData" highlight-current-row height="300" show-overflow-tooltip style="height: 330px; margin-top: 20px" @row-click="handleCustomerChange">
        <el-table-column label="省份" align="center" width="80">
          <template slot-scope="scope">
            {{ scope.row.省份 }}
          </template>
        </el-table-column>
        <el-table-column label="客户名称" align="center" >
          <template slot-scope="scope">
            {{ scope.row.客户名称 }}
          </template>
        </el-table-column>
        <el-table-column label="联系人" align="center" width="80">
          <template slot-scope="scope">
            {{ scope.row.联系人 }}
          </template>
        </el-table-column>
        <el-table-column label="联系电话" align="center">
          <template slot-scope="scope">
            {{ scope.row.电话 }}
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="PageCurrent1"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="PageSize1"
        :total="total1"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange1"
        @current-change="handleCurrentChange1"/>
      <div slot="footer" class="dialog-footer">
        <el-button @click="offCustomerChange">取消</el-button>
        <el-button type="primary" @click="getCustomerCode">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import elInput from 'element-ui/packages/input'
import { initProject, searchTableData1, searchTableData2, revisionOfTaxRate, selectProvince, SelectMarketingManager, fetchCustomerData, addSubmit, editSubmit, delSubmit } from '@/api/MarketingCenter/InvoiceRecord'
export default {
  components: {
    elInput
  },
  data() {
    return {
      projectid: '', // 项目流水号
      entryName: [], // 项目名称数组
      entryNameValue_check: '', // 项目名称check
      entryNameValue: '', // 项目名称
      peopleid_check: '', // 销售经理check
      MarketingManagerValue: '', // 销售经理
      peopleid: '', // 营销经理流水号
      startTime_check: '', // 开始时间check
      startTime: '', // 开始时间
      endTime_check: '', // 结束时间check
      endTime: '', // 结束时间
      listLoading1: false, // 合同信息表格加载动画
      tableData1: [], // 合同信息表格数据
      PageCurrent: 1,
      PageCurrent1: 1,
      PageSize1: 10,
      PageSize: 10,
      total1: null,
      total: null,
      tableData2: [], // 开票记录表格数据
      listLoading2: false, // 开票记录表格加载动画
      taxRate: '', // 税率
      dialogFormVisiblePeople: false, // 营销经理对话框显示隐藏
      ProvinceValue: '', // 责权省份
      Province: [], // 责权省份数组
      dataPeople: [], // 营销经理数组
      peoplename: '', // 营销经理姓名
      title: '', // 开票记录对话框标题
      dialogFormVisible1: false, // 开票记录对话框显示隐藏
      dialogCustomerFormVisible: false, // 打开选择客户对话框
      flag: '', // 开票记录增加编辑旗帜变量
      Customer: '', // 客户选择
      CustomerData: [], // 客户信息表格
      loading1: false, // 客户信息表加载框
      CustomerCode: '',
      invoiceRecordingCode: '',
      form: {
        客户名称: '',
        发票抬头: '',
        税号: '',
        开票电话: '',
        开票地址: '',
        开户行: '',
        银行账号: '',
        开票金额: '',
        开票时间: '',
        备注: ''
      },
      rules: {
        客户名称: [{ required: true, message: '请双击选择客户名称', trigger: 'change' }],
        开票金额: [{ required: true, message: '请双击选择客户名称', trigger: 'blur' }],
        开票时间: [{ required: true, message: '请双击选择客户名称', trigger: 'change' }]
      }
    }
  },
  created() {
    this.init()
    this.fetchTableData1()
  },
  methods: {
    // 初始化条件
    init() {
      this.getSelect(initProject, ['项目名称', '项目流水号'], 'entryName')
      this.getSelect(selectProvince, ['省份', '省份流水号'], 'Province')
    },
    // 查询项目信息表格
    fetchTableData1() {
      if (this.entryNameValue === '' || this.entryNameValue === null) { this.entryNameValue_check = 0 } else { this.entryNameValue_check = 1 }
      if (this.MarketingManagerValue === '' || this.MarketingManagerValue === null) { this.peopleid_check = 0 } else { this.peopleid_check = 1 }
      if (this.startTime === '' || this.startTime === null) { this.startTime_check = 0 } else { this.startTime_check = 1 }
      if (this.endTime === '' || this.endTime === null) { this.endTime_check = 0 } else { this.endTime_check = 1 }
      this.listLoading1 = true
      searchTableData1(this.PageCurrent, this.PageSize, this.entryNameValue, this.peopleid, this.entryNameValue_check, this.peopleid_check, this.startTime_check, this.endTime_check, this.startTime, this.endTime).then(response => {
        this.listLoading1 = false
        const data = response.data
        for (let i = 0; i < data.rows.length; i++) {
          data.rows[i].是是否禁用税率编辑 = true
          data.rows[i].合同签订日期 = data.rows[i].合同签订日期.substring(0, data.rows[i].合同签订日期.length - 8)
        }
        this.tableData1 = data.rows
        this.total = data.total
      })
      this.tableData2 = []
    },
    // 项目信息表格改变每页显示条数
    handleSizeChange(val) {
      this.PageCurrent = 1
      this.PageSize = val
      this.fetchTableData1()
      this.tableData2 = []
    },
    // 项目信息表格翻页
    handleCurrentChange(val) {
      this.PageCurrent = val
      this.fetchTableData1()
      this.tableData2 = []
    },
    // 查询开票记录表格
    fetchTableData2(row) {
      this.taxRate = row.税率
      this.projectid = row.项目流水号
      searchTableData2(this.projectid).then(response => {
        const data = response.data
        for (let i = 0; i < data.length; i++) {
          data[i].开票时间 = data[i].开票时间.substring(0, data[i].开票时间.length - 8)
        }
        this.tableData2 = data
      })
    },
    // 开票记录合计
    getSummaries(param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 6) {
          sums[index] = '项目开票合计：'
          return
        } else if (index === 7) {
          const values = data.map(item => Number(item['开票金额']))
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr)
              if (!isNaN(value)) {
                return Number(prev) + Number(curr)
              } else {
                return Number(prev)
              }
            }, 0)
            sums[index] += ' 元(含税)'
          } else {
            sums[index] = 'N/A'
          }
        } else if (index === 8) {
          sums[index] = this.taxRate * 100 + '% (税率)'
          return
        } else if (index === 9) {
          sums[index] = (parseInt(sums[7]) * 100 * this.taxRate) / 100 + ' 元(税额)'
          return
        } else if (index === 10) {
          sums[index] = parseFloat(sums[7]) - parseFloat(sums[9]) + ' 元(未税)'
          return
        }
      })
      return sums
    },
    // 双击解锁选定行的税率编辑
    unlockEditor(row) {
      row.是是否禁用税率编辑 = false
    },
    // 离开锁定选定行的税率编辑
    lockEditor(row) {
      row.是是否禁用税率编辑 = true
    },
    // 改变税率
    revisionOfTaxRate(row) {
      revisionOfTaxRate(row.项目流水号, row.税率).then(response => {
        if (response.data[0].result === '1') {
          this.$message.success('修改成功')
          this.fetchTableData1()
          this.fetchTableData2(row)
        } else {
          this.$message.error('数据占用')
        }
      })
    },
    // 点击选择营销经理
    handleChange(row) {
      this.peopleid = row.营销经理流水号
      this.peoplename = row.姓名
    },
    // 营销经理对话框确定
    getName() {
      this.dialogFormVisiblePeople = false
      this.MarketingManagerValue = this.peoplename
    },
    // 营销经理对话框取消
    offName() {
      this.dialogFormVisiblePeople = false
      this.peopleid = ''
      this.peoplename = ''
    },
    // 通过省份查对应的营销经理
    changeProvince() {
      SelectMarketingManager(this.ProvinceValue).then(response => {
        this.dataPeople = response.data
      })
    },
    // 清空营销经理输入框
    clearPeople() {
      this.peopleid = ''
    },
    // 打开增加开票记录对话框
    openAddInvoiceRecordingDialog(row) {
      this.projectid = row.项目流水号
      this.addForm('form')
      this.title = '增加'
      this.dialogFormVisible1 = true
    },
    // 打开选择
    CustomerChange() {
      this.dialogCustomerFormVisible = true
    },
    offCustomerChange() {
      this.dialogCustomerFormVisible = false
    },
    fetchCustomerData() {
      this.loading1 = true
      this.getTable(fetchCustomerData, [this.PageCurrent1, this.PageSize1, this.Customer], ['CustomerData', 'total1', 'loading1'])
    },
    handleSizeChange1(val) {
      this.PageCurrent1 = 1
      this.PageSize1 = val
      this.fetchCustomerData()
    },
    handleCurrentChange1(val) {
      this.PageCurrent1 = val
      this.fetchCustomerData()
    },
    handleCustomerChange(row) {
      this.CustomerCode = row.客户流水号
      this.form.客户名称 = row.客户名称
      this.form.发票抬头 = row.客户名称
      this.form.税号 = row.税号
      this.form.开票电话 = row.传真
      this.form.开票地址 = row.地址
      this.form.开户行 = row.开户行
      this.form.银行账号 = row.银行账号
    },
    getCustomerCode() {
      this.dialogCustomerFormVisible = false
    },
    clearCustomer() {
      this.CustomerCode = ''
      this.form.客户名称 = ''
      this.form.发票抬头 = ''
      this.form.税号 = ''
      this.form.开票电话 = ''
      this.form.开票地址 = ''
      this.form.开户行 = ''
      this.form.银行账号 = ''
    },
    // 提交增加或编辑
    submit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.flag === 1) {
            this.addSubmit()
          } else if (this.flag === 2) {
            this.editSubmit()
          }
        }
      })
    },
    // 增加开票记录
    addSubmit() {
      addSubmit(this.projectid, this.CustomerCode, this.form.开票金额, this.form.开票时间, this.form.备注).then(response => {
        if (response.data[0].result === '1') {
          this.$message.success('增加成功')
          this.dialogFormVisible1 = false
          searchTableData2(this.projectid).then(response => {
            const data = response.data
            for (let i = 0; i < data.length; i++) {
              data[i].开票时间 = data[i].开票时间.substring(0, data[i].开票时间.length - 8)
            }
            this.tableData2 = data
          })
        } else {
          this.$message.error('数据占用')
        }
      })
    },
    openEditInvoiceRecordingDialog(row) {
      this.editForm(row, 'form')
      this.title = '编辑'
      this.dialogFormVisible1 = true
      this.CustomerCode = row.客户流水号
      this.form.客户名称 = row.客户名称
      this.form.发票抬头 = row.客户名称
      this.form.税号 = row.税号
      this.form.开票电话 = row.传真
      this.form.开票地址 = row.地址
      this.form.开户行 = row.开户行
      this.form.银行账号 = row.银行账号
      this.form.开票金额 = row.开票金额
      this.form.开票时间 = row.开票时间
      this.form.备注 = row.备注
      this.invoiceRecordingCode = row.开票记录流水号
    },
    editSubmit() {
      editSubmit(this.CustomerCode, this.form.开票金额, this.form.开票时间, this.form.备注, this.invoiceRecordingCode).then(response => {
        if (response.data[0].result === '1') {
          this.$message.success('修改成功')
          this.dialogFormVisible1 = false
          searchTableData2(this.projectid).then(response => {
            const data = response.data
            for (let i = 0; i < data.length; i++) {
              data[i].开票时间 = data[i].开票时间.substring(0, data[i].开票时间.length - 8)
            }
            this.tableData2 = data
          })
        } else {
          this.$message.error('数据占用')
        }
      })
    },
    delInvoiceRecordingDialog(row) {
      function a() {
        searchTableData2(this.projectid).then(response => {
          const data = response.data
          for (let i = 0; i < data.length; i++) {
            data[i].开票时间 = data[i].开票时间.substring(0, data[i].开票时间.length - 8)
          }
          this.tableData2 = data
        })
      }
      this.deleteRow(delSubmit, row.开票记录流水号, a)
    }
  }
}
</script>

<style scoped>

</style>
